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

小灰灰 2023-06-08 06:56 21阅读 0赞

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

<table> 
 <thead> 
  <tr> 
   <th align="left">字段名</th> 
   <th align="left">字段说明</th> 
   <th align="left">字段类型</th> 
   <th align="left">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">openid</td> 
   <td align="left">用户微信标识</td> 
   <td align="left">string</td> 
   <td align="left">必填</td> 
  </tr> 
  <tr> 
   <td align="left">add</td> 
   <td align="left">加减分数</td> 
   <td align="left">integer</td> 
   <td align="left">必填</td> 
  </tr> 
  <tr> 
   <td align="left">mark</td> 
   <td align="left">当前总分</td> 
   <td align="left">integer</td> 
   <td align="left">必填</td> 
  </tr> 
  <tr> 
   <td align="left">note</td> 
   <td align="left">记录备注</td> 
   <td align="left">string</td> 
   <td align="left">选填</td> 
  </tr> 
  <tr> 
   <td align="left">create_time</td> 
   <td align="left">创建时间</td> 
   <td align="left">timestamp</td> 
   <td align="left">必填</td> 
  </tr> 
 </tbody> 
</table>

###### （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数据表了

#### 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文件

![format_png][]

###### （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)

> **作者：猫宁一**  
> 全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 1][]

[format_png]: /images/20230531/fcd6d860fd074f35a7eae6702d078f31.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230531/560e23a5ea7a472ba5c7084ed59cd0ff.png