您现在的位置是：主页 > news > 河北建设工程信息网站/google广告

河北建设工程信息网站/google广告

admin2025/6/27 7:25:14【news】

简介河北建设工程信息网站,google广告,河南有名的做网站公司,做问卷调查用哪个网站目前，我们在首页实现了点击1、5、-1、-5的按钮，总分会发生变化。但是重新打开小程序，总分又变成0了如果想要继续在之前总分的基础上加减分数，就需要数据库来辅助。这节我们实现点击加减分数按钮，同时产生对应记录插入到…

河北建设工程信息网站,google广告,河南有名的做网站公司,做问卷调查用哪个网站目前，我们在首页实现了点击1、5、-1、-5的按钮，总分会发生变化。但是重新打开小程序，总分又变成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数据表的字段

| 字段名 | 字段说明 | 字段类型 | 备注 | |:----------|:----------|:----------| :----------| |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.bodytry{//查找出最后一条记录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 + addconsole.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)