目前，我们在首页实现了点击+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数据表的字段
（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)
