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等工具函数
//参考代码,无需粘贴
//
                    
                    

你可能感兴趣的:(微信小程序全栈开发课程,微信小程序,开发课程)