Vue+koa2开发一款全栈小程序(7.图书录入功能)

vue

1.图书录入功能

1.获取图书信息

1.在mydemo/src/until.js中封装工具函数post和get

// 工具函数

import config from \'./config\'

// http get工具函数 获取数据

export function get (url,data) {

return request(url,\'GET\',data)

}

export function post (url,data) {

return request(url,\'POST\',data)

}

function request(url,method,data){

return new Promise((resolve, reject) => {

wx.request({

data,

method,

url: config.host + url,

success: function (res) {

if (res.data.code === 0) {

resolve(res.data.data)

} else {

reject(res.data)

}

}

})

})

}

export function showSuccess (text) {

wx.showToast({

title: text,

icon: \'success\'

})

}

2.在mydemo/src/pages/me/index.vue加入代码,实现扫码获取图书isdn,然后将图书的isdn通过post发送到server端的功能

    async addBook(isbn){ //因为要发送网络请求,所以用async

const res=await post(\'/weapp/addbook\',{

isbn,

openid:this.user.openId

})

if(res.code==0&&res.data.title){

showSuccess(\'添加成功\',`${res.data.title}添加成功`)

}

},

scanBook () {

wx.scanCode({

success: (res) => {

if(res.result){

this.addBook(res.result)

}

}

})

}

index.vue

<template>

<div class="container">

<div class="userinfo">

<img :src="avatarUrl" alt="">

<button v-if="!user" open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">点击登录</button>

<p>{{user.nickName}}</p>

</div>

<YearProgress></YearProgress>

<button @click="scanBook" class="btn">添加图书</button>

</div>

</template>

<script>

import qcloud from \'wafer2-client-sdk\'

import config from \'@/config.js\'

import { showSuccess,post } from \'@/until.js\'

import YearProgress from \'@/components/YearProgress\'

export default {

components: {

YearProgress

},

data () {

return {

user: \'\',

avatarUrl: \'../../../static/img/unlogin.png\'

}

},

methods: {

doLogin: function (e) {

qcloud.setLoginUrl(config.loginUrl)

var _this = this// 在success回调里面 this.user指向的已经不是data里的user了

qcloud.login({

success: function (userInfo) {

console.log(\'登录成功\', userInfo)

showSuccess(\'登陆成功\')// 显示登录成功提示图标

wx.setStorageSync(\'userinfo\', userInfo)

_this.user = wx.getStorageSync(\'userinfo\')

_this.avatarUrl = _this.user.avatarUrl

},

fail: function (err) {

console.log(\'登录失败\', err)

}

})

},

async addBook(isbn){ //因为要发送网络请求,所以用async

const res=await post(\'/weapp/addbook\',{

isbn,

openid:this.user.openId

})

if(res.code==0&&res.data.title){

showSuccess(\'添加成功\',`${res.data.title}添加成功`)

}

},

scanBook () {

wx.scanCode({

success: (res) => {

if(res.result){

this.addBook(res.result)

}

}

})

}

},

created () {

this.user = wx.getStorageSync(\'userinfo\')

if (this.user) {

this.avatarUrl = this.user.avatarUrl

this.nickName = this.user.nickName

}

console.log(321, this.user)

}

}

</script>

<style lang=\'scss\'>

.container{

padding: 0 30rpx;

.userinfo{

margin-top: 100rpx;

text-align: center;

img{

width: 150rpx;

height: 150rpx;

margin: 20rpx;

border-radius: 50%;

}

}

}

</style>

index.vue

3.在server/routes/index.js中加入路由

router.post(\'/addbook\', controllers.addbook)

4.在server/controllers目录下新建addbook.js

const https=require(\'https\')

// 新增图书

// 1.获取豆瓣信息

// https://api.douban.com/v2/book/isbn/9787115353528

// 2.入库

module.exports=async(ctx)=>{

const {isbn,openid}=ctx.request.body

console.log(\'添加图书\',isbn,openid)

if(isbn&&openid){

let url=\'https://api.douban.com/v2/book/isbn/\'+isbn

const bookinfo=await getJSON(url)

const rate=bookinfo.rating.average

const {title,image,alt,publisher,summary,price}=bookinfo

const tags=bookinfo.tags.map(v=>{

return `${v.title}${v.count}`

}).join(\',\')

const author=bookinfo.author.join(\',\')

console.log({rate,title,image,alt,publisher,summary,price,tags,author})

}else{

console.log(\'没收到参数\')

}

}

function getJSON(url){

return new Promise((resolve,reject)=>{

https.get(url,res=>{

let urlData=\'\'

res.on(\'data\',data=>{

urlData+=data

})

res.on(\'end\',data=>{

const bookinfo=JSON.parse(urlData)

if(bookinfo.title){

resolve(bookinfo)

}

reject(bookinfo)

})

})

})

}

运行mydemo和server,打开微信开发者工具,点击添加图书按钮,在电脑中找一个图书的条形码进行扫描,然后在server的cmd界面,即可看到获取到了图书的信息

 2.入库

1.新建数据表

1.进入mysql控制台,使用cauth数据库

show databases;

use cauth;

2.新建books表

DROP TABLE IF EXISTS `books`;

CREATE TABLE `books` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`isbn` varchar(20) NOT NULL,

`openid` varchar(100) NOT NULL,

`title` varchar(100) NOT NULL,

`image` varchar(100) NOT NULL,

`alt` varchar(100) NOT NULL,

`publisher` varchar(100) NOT NULL,

`summary` varchar(1000) NOT NULL,

`price` varchar(100) DEFAULT NULL,

`rate` float DEFAULT NULL,

`tags` varchar(100) DEFAULT NULL,

`author` varchar(100) DEFAULT NULL,

`count` int(11) NOT NULL DEFAULT \'0\',

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8;

3.查看是否建立成功

show tables;

desc books;

 2.将获取到的数据,存入books表

 在addbook.js中相关代码

        try{

await mysql(\'books\').insert({

isbn,openid,rate,title,image,alt,publisher,summary,price,tags,author

})

ctx.state.data={

title,

msg:\'success\'

}

}catch(e){

ctx.state={

code:-1,

data:{

msg:\'新增失败:\'+e.sqlMessage

}

}

}

addbooks.js

const https=require(\'https\')

const {mysql}=require(\'../qcloud\')

// 新增图书

// 1.获取豆瓣信息

// https://api.douban.com/v2/book/isbn/9787115353528

// 2.入库

module.exports=async(ctx)=>{

const {isbn,openid}=ctx.request.body

console.log(\'添加图书\',isbn,openid)

if(isbn&&openid){

const findRes=await mysql(\'books\').select().where(\'isbn\',isbn)

if(findRes.length){

ctx.state={

code:-1,

data:{

mgs:\'图书已存在\'

}

}

return

}

let url=\'https://api.douban.com/v2/book/isbn/\'+isbn

const bookinfo=await getJSON(url)

const rate=bookinfo.rating.average

const {title,image,alt,publisher,summary,price}=bookinfo

const tags=bookinfo.tags.map(v=>{

return `${v.title}${v.count}`

}).join(\',\')

const author=bookinfo.author.join(\',\')

try{

await mysql(\'books\').insert({

isbn,openid,rate,title,image,alt,publisher,summary,price,tags,author

})

ctx.state.data={

title,

msg:\'success\'

}

}catch(e){

ctx.state={

code:-1,

data:{

msg:\'新增失败:\'+e.sqlMessage

}

}

}

}

}

function getJSON(url){

return new Promise((resolve,reject)=>{

https.get(url,res=>{

let urlData=\'\'

res.on(\'data\',data=>{

urlData+=data

})

res.on(\'end\',data=>{

const bookinfo=JSON.parse(urlData)

if(bookinfo.title){

resolve(bookinfo)

}

reject(bookinfo)

})

})

})

}

View Code

3.在src/until.js中写添加成功的模态框代码

    async addBook(isbn){ //因为要发送网络请求,所以用async

const res=await post(\'/weapp/addbook\',{

isbn,

openid:this.user.openId

})

console.log(111,res)

if(res.code===0){

showModal(\'添加成功\',`${res.data.title}添加成功`)

}else{

showModal(\'添加失败\',`${res.data.mgs}`)

}

},

until.js

// 工具函数

import config from \'./config\'

// http get工具函数 获取数据

export function get (url,data) {

return request(url,\'GET\',data)

}

export function post (url,data) {

return request(url,\'POST\',data)

}

function request(url,method,data){

return new Promise((resolve) => {

wx.request({

data,

method,

url: config.host + url,

success: function (res) {

if (res.data.code === 0) {

resolve(res.data)

} else {

resolve(res.data)

}

}

})

})

}

export function showSuccess (text) {

wx.showToast({

title: text,

icon: \'success\'

})

}

export function showModal(title,content){

wx.showModal({

title,

content,

showCancel:false

})

}

View Code

4.src/pages/me/index.vue中的关键代码

    async addBook(isbn){ //因为要发送网络请求,所以用async

const res=await post(\'/weapp/addbook\',{

isbn,

openid:this.user.openId

})

console.log(111,res)

if(res.code===0){

showModal(\'添加成功\',`${res.data.title}添加成功`)

}else{

showModal(\'添加失败\',`${res.data.mgs}`)

}

},

index.vue

<template>

<div class="container">

<div class="userinfo">

<img :src="avatarUrl" alt="">

<button v-if="!user" open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">点击登录</button>

<p>{{user.nickName}}</p>

</div>

<YearProgress></YearProgress>

<button @click="scanBook" class="btn">添加图书</button>

</div>

</template>

<script>

import qcloud from \'wafer2-client-sdk\'

import config from \'@/config.js\'

import { showSuccess,post,showModal } from \'@/until.js\'

import YearProgress from \'@/components/YearProgress\'

export default {

components: {

YearProgress

},

data () {

return {

user: \'\',

avatarUrl: \'../../../static/img/unlogin.png\'

}

},

methods: {

doLogin: function (e) {

qcloud.setLoginUrl(config.loginUrl)

var _this = this// 在success回调里面 this.user指向的已经不是data里的user了

qcloud.login({

success: function (userInfo) {

console.log(\'登录成功\', userInfo)

showSuccess(\'登陆成功\')// 显示登录成功提示图标

wx.setStorageSync(\'userinfo\', userInfo)

_this.user = wx.getStorageSync(\'userinfo\')

_this.avatarUrl = _this.user.avatarUrl

},

fail: function (err) {

console.log(\'登录失败\', err)

}

})

},

async addBook(isbn){ //因为要发送网络请求,所以用async

const res=await post(\'/weapp/addbook\',{

isbn,

openid:this.user.openId

})

console.log(111,res)

if(res.code===0){

showModal(\'添加成功\',`${res.data.title}添加成功`)

}else{

showModal(\'添加失败\',`${res.data.mgs}`)

}

},

scanBook () {

wx.scanCode({

success: (res) => {

if(res.result){

this.addBook(res.result)

}

}

})

}

},

created () {

this.user = wx.getStorageSync(\'userinfo\')

if (this.user) {

this.avatarUrl = this.user.avatarUrl

this.nickName = this.user.nickName

}

console.log(321, this.user)

}

}

</script>

<style lang=\'scss\'>

.container{

padding: 0 30rpx;

.userinfo{

margin-top: 100rpx;

text-align: center;

img{

width: 150rpx;

height: 150rpx;

margin: 20rpx;

border-radius: 50%;

}

}

}

</style>

View Code

以上是 Vue+koa2开发一款全栈小程序(7.图书录入功能) 的全部内容, 来源链接: utcz.com/z/376191.html

回到顶部