4.9【微信小程序全棧開發課程】意見反饋（四）--提交反饋信息

1、創建後端操作文件

先在後端server/controllers文件夾中創建操作文件createopinion.js，用來將從前端頁面提交的數據，插入到opinions表中，創建完之後，頁面目錄如下

2、添加路由

在路由管理文件server/routes/index.js文件中添加路由

//需要添加的代碼
router.post('/createopinion', controllers.createopinion)


//參考代碼，無需粘貼
//module.exports = router

3、在前端添加提交方法

編輯src/pages/opinion/opinion.vue文件，在methods函數中添加summit方法，當意見的字數大於0時，可以提交數據，當意見的字數爲0時，需要提示反饋內容不能爲空

（1）在src/util.js工具函數文件中封裝提示框方法

//參考代碼，無需粘貼
//export function showSuccess (text) {
//...
//）


//需要添加的內容
export function showModal (title, content) {
  wx.showModal({
    title,
    content,
    showCancel: false
  })
}

（2）在opinion.vue文件中引用工具函數文件中的showModal、post方法

//參考代碼，無需粘貼
//<script>


//需要添加的部分
import {showModal,post} from '@/util'


//參考代碼，無需粘貼
//export default {

（3）在methods函數中添加summit方法

//參考代碼，無需粘貼
//uploadPicture () {
//...
//},


//需要添加的部分，不要忘記在上一行添加逗號隔開
async summit() {
  //當反饋的字數大於0時，可以提交反饋信息
  if(this.word_count > 0){
    try{
      // data是要提交給後端的數據，其中包含openid、opinion意見信息、src圖片鏈接、wechat用戶微信
      const data = {
        openid: this.userinfo.openId,
        opinion:this.opinion,
        src:this.src.join(","),
        wechat:this.wechat
      }
      //通過這行代碼請求請求後端服務器，並傳遞參數data
      //await我們再ES6知識點中講過，等後端執行完並獲取到返回數據之後，再往下執行
      const res = await post('/weapp/createopinion', data)
      console.log("從後端返回的執行正確的信息是：",res)
      showModal("提交成功","已將你的反饋提交給了開發者~")
    }catch(e){
      //如果執行失敗，util.js中的請求方法，會將返回信息的狀態變成rejected
      //rejected狀態的信息會被當成錯誤捕捉到
      console.log("從後端返回的執行錯誤的信息是：",e)
      showModal("提交失敗","服務器出了一點錯誤~請稍後再試")
    }
  //當反饋的字數爲0時，提示反饋內容不能爲空
  }else{
    showModal("提交失敗","反饋內容不能爲空哦~")
  }
}

try…catch是捕獲錯誤的語法，如果try中包含的代碼塊有錯誤，catch就會捕捉到錯誤並執行catch包含的代碼塊。

在這裏能捕捉到在util.js中的請求方法，返回信息爲rejected狀態的數據

try{
}catch(e){
}

（4）在template頁面提交按鈕上面添加點擊事件

<!-- 原代碼 -->
<button>提交</button>

<!-- 修改爲 -->
<button @click="summit">提交</button>

4、編輯後端操作文件

這裏的後端操作文件也就是server/controllers/createopinion.js文件，填充下面的代碼

//引入server/qcloud.js文件，qcloud.js文件是mysql的軟件工具包，引入後我們也可以使用knex來操作數據庫了
const {mysql} = require('../qcloud')

//module.exports是向外暴露代碼，後面跟着箭頭函數（就是函數的一種簡寫形式，在ES6語法的講解中提過）
module.exports = async (ctx) => {
  //ctx.request.body用來獲取post請求的參數
  const {openid,opinion,src,wechat} = ctx.request.body
  try{
    //knex語法，插入數據到opinions數據表中
    await mysql('opinions').insert({
      openid,opinion,src,wechat
    })
    // 執行的結果會保存到ctx.state中，也就是從後端返回到前端的數據
    // 執行成功返回的數據，code設爲0
    ctx.state.data = {
      code: 0,
      msg: 'success'
    }
    console.log("執行成功")
  }catch(e){
    console.log("執行錯誤:",e)
    // 執行失敗返回的數據，code設爲-1
    ctx.state = {
      code: -1,
      data: {
        msg: '添加失敗' + e.sqlMessage
      }
    }
  }
}

5、提交數據測試

（1）不填寫反饋信息，點擊提交，會出現錯誤提示

（2）填寫反饋信息點擊提交

控制檯會打印出從後端傳回來的信息

同時，打開終端，這時在server文件夾下面npm run dev啓動的後端，也會打印出執行成功的信息

在src文件夾下面寫console.log會在控制檯中打印

在server文件夾下面寫console.log會在終端中打印

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

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