目前，我们在首页实现了点击+1、+5、-1、-5的按钮，总分会发生变化。但是重新打开小程序，总分又变成0了
如果想要继续在之前总分的基础上加减分数，就需要数据库来辅助。
这节我们实现点击加减分数按钮，同时产生对应记录插入到数据库中
要开始操作首页了，我们在app.json中将首页放在pages的第一个
"pages": [
"pages/index/main",
"pages/me/main",
"pages/instruction/main",
"pages/opinion/main"
],
1、创建records数据表
（1）records数据表的字段
| 字段名 | 字段说明 | 字段类型 | 备注 | |
|---|---|---|---|---|
| openid | 用户微信标识 | string | 必填 | |
| add | 加减分数 | integer | 必填 | |
| mark | 当前总分 | integer | 必填 | |
| note | 记录备注 | string | 选填 | |
| create_time | 创建时间 | timestamp | 必填 |
（2）创建records数据表
//登录数据库
~/WeChatProjects/truth_hold$ mysql -uroot -p
//登录成功之后，选择cAuth表
mysql> use cAuth;
//在数据库中粘贴下面代码，直接回车，records表就创建好了
DROP TABLE IF EXISTS `records`;
CREATE TABLE `records` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`openid` varchar(100) NOT NULL,
`add` int(11) NOT NULL,
`mark` int(11) NOT NULL,
`note` varchar(100) DEFAULT NULL,
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
查看当前数据库中的表，已经有opinions数据表了
mysql> show tables;
+-----------------+
| Tables_in_cauth |
+-----------------+
| cSessionInfo |
| opinions |
| records |
+-----------------+
3 rows in set (0.00 sec)
2、创建文件并添加路由
（1）创建操作文件createrecord.js
先在后端server/controllers文件夹中创建操作文件createrecord.js，用来将从前端页面提交的数据，插入到records表中
（2）添加路由
在路由管理文件server/routes/index.js文件中添加路由
//需要添加的代码
router.post('/createrecord', controllers.createrecord)
//参考代码，无需粘贴
//module.exports = router
3、在前端添加提交方法
（1）编辑src/pages/index/index.vue文件，引入util.js文件中的post、get等工具函数
//参考代码，无需粘贴
//<script>
//需要添加的部分
import {showSuccess,showModal,post,get} from '@/util'
（2）打开src/pages/index/index.vue文件，编辑methods函数中的addMark方法
在方法前面添加async，涉及到后端数据库的操作，一般前面都要加上async异步方法
//原代码
//addMark (add) {
//this.mark = this.mark + add
// console.log("mark为：",this.mark)
//},
//编辑后
async addMark (add) {
try{
const data = {
openid: this.userinfo.openId,
add:add
}
//请求后端，找到server/controllers/createrecord.js文件
const res = await post('/weapp/createrecord', data)
console.log("从后端返回的执行正确的信息是：",res)
this.mark = this.mark + add
}catch(e){
showModal('失败',"请重试哦~")
console.log("从后端返回的执行错误的信息是：",e)
}
},
4、编辑后端操作文件
这里的后端操作文件也就是server/controllers/createopinion.js文件，在这个文件中添加下面的代码：
const {mysql} = require('../qcloud')
module.exports = async (ctx) => {
const {openid,add} = ctx.request.body
try{
//查找出最后一条记录
const res = await mysql('records')
.where("openid",openid)
.select('mark')
.orderBy('id','desc').first()
//得到最后一条记录的分数
if(res){
var mark = res.mark
}else{
var mark = 0
}
//当前总分 = 最后一条记录的分数 + 本次操作的分数
mark = mark + add
console.log("当前分数为：",mark)
//将openid、本次操作的分数、当前总分
await mysql('records').insert({
openid, add, mark
})
//执行成功返回到前端的数据
ctx.state.data = {
code: 0,
msg: 'success'
}
console.log("执行成功")
}catch(e){
console.log("执行错误：",e)
//执行失败返回到前端的数据
ctx.state = {
code: -1,
data: {
msg: '添加失败' + e.sqlMessage
}
}
}
}
5、点击按钮测试
（1）点击按钮，控制台会出现反馈信息。
如果控制台没有反应，就看一下是否正确import了util.js文件
（2）查看数据库中添加的数据，可以看到刚刚添加的数据
//登录到数据库
~/WeChatProjects/truth_hold $ mysql -uroot -p
Enter password:
//选择cAuth数据库
mysql> use cAuth;
Database changed
//输入select * from records;语句，能查出刚刚插入的数据
mysql> select * from records;
+----+------------------------------+-----+------+----------------+---------------------+
| id | openid | add | mark | note | create_time |
+----+------------------------------+-----+------+----------------+———------------------+
| 1 | oQPCO4ol5Y_-yL0MnCGxwbiHbSek | 1 | 1 | NULL | 2019-09-30 22:42:23 |
+----+------------------------------+-----+------+----------------+---------------------+
1 rows in set (0.00 sec)
作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~
点击查看课程目录：微信小程序全栈开发课程目录
网友评论