1.图书录入功能

1.获取图书信息

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

1// 工具函数
2
3import config from './config'
4
5// http get工具函数 获取数据
6
7export function get (url,data) {
8  return request(url,'GET',data)
9}
10
11export function post (url,data) {
12  return request(url,'POST',data)
13}
14
15
16
17function request(url,method,data){
18  return new Promise((resolve, reject) => {
19    wx.request({
20      data,
21      method,
22      url: config.host + url,
23      
24      success: function (res) {
25        if (res.data.code === 0) {
26          resolve(res.data.data)
27        } else {
28          reject(res.data)
29        }
30      }
31    })
32  })
33}
34
35
36
37
38
39
40
41
42export function showSuccess (text) {
43  wx.showToast({
44    title: text,
45    icon: 'success'
46  })
47}

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

1async addBook(isbn){ //因为要发送网络请求，所以用async
2      
3      const res=await post('/weapp/addbook',{
4        isbn,
5        openid:this.user.openId
6      })
7      if(res.code==0&&res.data.title){
8        showSuccess('添加成功',`${res.data.title}添加成功`)
9      }
10    },
11
12    scanBook () {
13      wx.scanCode({
14        success: (res) => {
15          if(res.result){
16            this.addBook(res.result)
17          }
18        }
19      })
20    }

index.vue

1<template>
2    <div class="container">
3        
4        <div class="userinfo">
5          <img :src="avatarUrl" alt="">
6          <button v-if="!user" open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">点击登录</button>
7          <p>{{user.nickName}}</p>
8        </div>
9        <YearProgress></YearProgress>
10        <button @click="scanBook" class="btn">添加图书</button>
11    </div>
12</template>
13<script>
14import qcloud from 'wafer2-client-sdk'
15import config from '@/config.js'
16
17import { showSuccess,post } from '@/until.js'
18
19import YearProgress from '@/components/YearProgress'
20
21export default {
22  components: {
23    YearProgress
24  },
25  data () {
26    return {
27      user: '',
28      avatarUrl: '../../../static/img/unlogin.png'
29    }
30  },
31  methods: {
32    doLogin: function (e) {
33      qcloud.setLoginUrl(config.loginUrl)
34      var _this = this// 在success回调里面 this.user指向的已经不是data里的user了
35      qcloud.login({
36        success: function (userInfo) {
37          console.log('登录成功', userInfo)
38
39          showSuccess('登陆成功')// 显示登录成功提示图标
40          wx.setStorageSync('userinfo', userInfo)
41          _this.user = wx.getStorageSync('userinfo')
42          _this.avatarUrl = _this.user.avatarUrl
43        },
44        fail: function (err) {
45          console.log('登录失败', err)
46        }
47      })
48    },
49
50    async addBook(isbn){ //因为要发送网络请求，所以用async
51      
52      const res=await post('/weapp/addbook',{
53        isbn,
54        openid:this.user.openId
55      })
56      if(res.code==0&&res.data.title){
57        showSuccess('添加成功',`${res.data.title}添加成功`)
58      }
59    },
60
61    scanBook () {
62      wx.scanCode({
63        success: (res) => {
64          if(res.result){
65            this.addBook(res.result)
66          }
67        }
68      })
69    }
70
71    
72
73  },
74  created () {
75    this.user = wx.getStorageSync('userinfo')
76    if (this.user) {
77      this.avatarUrl = this.user.avatarUrl
78      this.nickName = this.user.nickName
79    }
80    console.log(321, this.user)
81  }
82
83}
84</script>
85<style lang='scss'>
86    .container{
87      padding: 0 30rpx;
88      .userinfo{
89        margin-top: 100rpx;
90        text-align: center;
91        img{
92          width: 150rpx;
93          height: 150rpx;
94          margin: 20rpx;
95          border-radius: 50%;
96        }
97
98      }
99    } 
100</style>

index.vue

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

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

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

1const https=require('https')
2// 新增图书
3// 1.获取豆瓣信息
4// https://api.douban.com/v2/book/isbn/9787115353528
5// 2.入库
6
7module.exports=async(ctx)=>{
8    const {isbn,openid}=ctx.request.body
9    console.log('添加图书',isbn,openid)
10    if(isbn&&openid){
11        let url='https://api.douban.com/v2/book/isbn/'+isbn
12        const bookinfo=await getJSON(url)
13        const rate=bookinfo.rating.average
14        const {title,image,alt,publisher,summary,price}=bookinfo
15        const tags=bookinfo.tags.map(v=>{
16            return `${v.title}${v.count}`
17        }).join(',')
18        const author=bookinfo.author.join(',')
19        console.log({rate,title,image,alt,publisher,summary,price,tags,author})
20    }else{
21        console.log('没收到参数')
22    }
23}
24
25
26
27
28function getJSON(url){
29    return new Promise((resolve,reject)=>{
30        https.get(url,res=>{
31            let urlData=''
32            res.on('data',data=>{
33                urlData+=data
34            })
35            res.on('end',data=>{
36                const bookinfo=JSON.parse(urlData)
37                if(bookinfo.title){
38                    resolve(bookinfo)
39                }
40                reject(bookinfo)
41            })
42        })
43    })
44}

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

 2.入库

1.新建数据表

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

1show databases;
2use cauth;

2.新建books表

1DROP TABLE IF EXISTS `books`;
2
3 CREATE TABLE `books` (
4  `id` int(11) NOT NULL AUTO_INCREMENT,
5  `isbn` varchar(20) NOT NULL,
6  `openid` varchar(100) NOT NULL,
7  `title` varchar(100) NOT NULL,
8  `image` varchar(100) NOT NULL,
9  `alt` varchar(100) NOT NULL,
10  `publisher` varchar(100) NOT NULL,
11  `summary` varchar(1000) NOT NULL,
12  `price` varchar(100) DEFAULT NULL,
13  `rate` float DEFAULT NULL,
14  `tags` varchar(100) DEFAULT NULL,
15  `author` varchar(100) DEFAULT NULL,
16  `count` int(11) NOT NULL DEFAULT '0',
17  PRIMARY KEY (`id`)
18) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8;

3.查看是否建立成功

1show tables;
2desc books;

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

 在addbook.js中相关代码

1try{
2            await mysql('books').insert({
3                isbn,openid,rate,title,image,alt,publisher,summary,price,tags,author
4            })
5            ctx.state.data={
6                title,
7                msg:'success'
8            }
9        }catch(e){
10            ctx.state={
11                code:-1,
12                data:{
13                    msg:'新增失败：'+e.sqlMessage
14                }
15            }
16        }

addbooks.js

1const https=require('https')
2const {mysql}=require('../qcloud')
3
4// 新增图书
5// 1.获取豆瓣信息
6// https://api.douban.com/v2/book/isbn/9787115353528
7// 2.入库
8
9module.exports=async(ctx)=>{
10    const {isbn,openid}=ctx.request.body
11    console.log('添加图书',isbn,openid)
12    if(isbn&&openid){
13
14        const findRes=await mysql('books').select().where('isbn',isbn)
15        if(findRes.length){
16            ctx.state={
17                code:-1,
18                data:{
19                    mgs:'图书已存在'
20                }
21            }
22            return
23        }
24
25
26
27        let url='https://api.douban.com/v2/book/isbn/'+isbn
28        const bookinfo=await getJSON(url)
29        const rate=bookinfo.rating.average
30        const {title,image,alt,publisher,summary,price}=bookinfo
31        const tags=bookinfo.tags.map(v=>{
32            return `${v.title}${v.count}`
33        }).join(',')
34        const author=bookinfo.author.join(',')
35
36
37
38        try{
39            await mysql('books').insert({
40                isbn,openid,rate,title,image,alt,publisher,summary,price,tags,author
41            })
42            ctx.state.data={
43                title,
44                msg:'success'
45            }
46        }catch(e){
47            ctx.state={
48                code:-1,
49                data:{
50                    msg:'新增失败：'+e.sqlMessage
51                }
52            }
53        }
54        
55
56        
57    }
58}
59
60
61
62
63function getJSON(url){
64    return new Promise((resolve,reject)=>{
65        https.get(url,res=>{
66            let urlData=''
67            res.on('data',data=>{
68                urlData+=data
69            })
70            res.on('end',data=>{
71                const bookinfo=JSON.parse(urlData)
72                if(bookinfo.title){
73                    resolve(bookinfo)
74                }
75                reject(bookinfo)
76            })
77        })
78    })
79}

View Code

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

1async addBook(isbn){ //因为要发送网络请求，所以用async
2      
3      const res=await post('/weapp/addbook',{
4        isbn,
5        openid:this.user.openId
6      })
7      console.log(111,res)
8      if(res.code===0){
9        showModal('添加成功',`${res.data.title}添加成功`)
10      }else{
11        showModal('添加失败',`${res.data.mgs}`)
12      }
13    },

until.js

1// 工具函数
2
3import config from './config'
4
5// http get工具函数 获取数据
6
7export function get (url,data) {
8  return request(url,'GET',data)
9}
10
11export function post (url,data) {
12  return request(url,'POST',data)
13}
14
15
16
17function request(url,method,data){
18  return new Promise((resolve) => {
19    wx.request({
20      data,
21      method,
22      url: config.host + url,
23      
24      success: function (res) {
25        if (res.data.code === 0) {
26          resolve(res.data)
27        } else {
28
29          resolve(res.data)
30        }
31      }
32    })
33  })
34}
35
36
37
38
39export function showSuccess (text) {
40  wx.showToast({
41    title: text,
42    icon: 'success'
43  })
44}
45
46
47export function showModal(title,content){
48  wx.showModal({
49    title,
50    content,
51    showCancel:false
52  })
53}

View Code

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

1async addBook(isbn){ //因为要发送网络请求，所以用async
2      
3      const res=await post('/weapp/addbook',{
4        isbn,
5        openid:this.user.openId
6      })
7      console.log(111,res)
8      if(res.code===0){
9        showModal('添加成功',`${res.data.title}添加成功`)
10      }else{
11        showModal('添加失败',`${res.data.mgs}`)
12      }
13    },

index.vue

1<template>
2    <div class="container">
3        
4        <div class="userinfo">
5          <img :src="avatarUrl" alt="">
6          <button v-if="!user" open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">点击登录</button>
7          <p>{{user.nickName}}</p>
8        </div>
9        <YearProgress></YearProgress>
10        <button @click="scanBook" class="btn">添加图书</button>
11    </div>
12</template>
13<script>
14import qcloud from 'wafer2-client-sdk'
15import config from '@/config.js'
16
17import { showSuccess,post,showModal } from '@/until.js'
18
19import YearProgress from '@/components/YearProgress'
20
21export default {
22  components: {
23    YearProgress
24  },
25  data () {
26    return {
27      user: '',
28      avatarUrl: '../../../static/img/unlogin.png'
29    }
30  },
31  methods: {
32    doLogin: function (e) {
33      qcloud.setLoginUrl(config.loginUrl)
34      var _this = this// 在success回调里面 this.user指向的已经不是data里的user了
35      qcloud.login({
36        success: function (userInfo) {
37          console.log('登录成功', userInfo)
38
39          showSuccess('登陆成功')// 显示登录成功提示图标
40          wx.setStorageSync('userinfo', userInfo)
41          _this.user = wx.getStorageSync('userinfo')
42          _this.avatarUrl = _this.user.avatarUrl
43        },
44        fail: function (err) {
45          console.log('登录失败', err)
46        }
47      })
48    },
49
50    async addBook(isbn){ //因为要发送网络请求，所以用async
51      
52      const res=await post('/weapp/addbook',{
53        isbn,
54        openid:this.user.openId
55      })
56      console.log(111,res)
57      if(res.code===0){
58        showModal('添加成功',`${res.data.title}添加成功`)
59      }else{
60        showModal('添加失败',`${res.data.mgs}`)
61      }
62    },
63
64    scanBook () {
65      wx.scanCode({
66        success: (res) => {
67          if(res.result){
68            this.addBook(res.result)
69          }
70        }
71      })
72    }
73
74    
75
76  },
77  created () {
78    this.user = wx.getStorageSync('userinfo')
79    if (this.user) {
80      this.avatarUrl = this.user.avatarUrl
81      this.nickName = this.user.nickName
82    }
83    console.log(321, this.user)
84  }
85
86}
87</script>
88<style lang='scss'>
89    .container{
90      padding: 0 30rpx;
91      .userinfo{
92        margin-top: 100rpx;
93        text-align: center;
94        img{
95          width: 150rpx;
96          height: 150rpx;
97          margin: 20rpx;
98          border-radius: 50%;
99        }
100
101      }
102    } 
103</style>

View Code