5-1【微信小程序全栈开发课程】首页完善（一）--点击记录插入数

目前，我们在首页实现了点击+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)

作者：猫宁一

全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录