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)

作者：貓寧一
全棧程序媛₍ᐢ •⌄• ᐢ₎一枚~ 熱愛學習！熱愛編程！
可關注【貓寧一】公衆號領取我所有全棧項目代碼哦~

點擊查看課程目錄：微信小程序全棧開發課程目錄