Vue+koa2開發一款全棧小程式(7.圖書錄入功能）
阿新 • • 發佈：2018-11-12
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){ returnnew 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) } } }) }) } exportfunction 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
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
