1、創(chuàng)建后端操作文件

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

2、添加路由

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

//需要添加的代碼 router.post('/createopinion', controllers.createopinion)//參考代碼，無需粘貼 //module.exports = router

3、在前端添加提交方法

編輯src/pages/opinion/opinion.vue文件，在methods函數(shù)中添加summit方法，當(dāng)意見的字?jǐn)?shù)大于0時，可以提交數(shù)據(jù)，當(dāng)意見的字?jǐn)?shù)為0時，需要提示反饋內(nèi)容不能為空

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

//參考代碼，無需粘貼 //export function showSuccess (text) { //... //）//需要添加的內(nèi)容 export function showModal (title, content) {wx.showModal({title,content,showCancel: false}) }

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

//參考代碼，無需粘貼 //<script>//需要添加的部分 import {showModal,post} from '@/util'//參考代碼，無需粘貼 //export default {

（3）在methods函數(shù)中添加summit方法

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

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

在這里能捕捉到在util.js中的請求方法，返回信息為rejected狀態(tài)的數(shù)據(jù)

try{ }catch(e){ }

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

<!-- 原代碼 --> <button>提交</button><!-- 修改為 --> <button @click="summit">提交</button>

4、編輯后端操作文件

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

//引入server/qcloud.js文件，qcloud.js文件是mysql的軟件工具包，引入后我們也可以使用knex來操作數(shù)據(jù)庫了 const {mysql} = require('../qcloud')//module.exports是向外暴露代碼，后面跟著箭頭函數(shù)（就是函數(shù)的一種簡寫形式，在ES6語法的講解中提過） module.exports = async (ctx) => {//ctx.request.body用來獲取post請求的參數(shù)const {openid,opinion,src,wechat} = ctx.request.bodytry{//knex語法，插入數(shù)據(jù)到opinions數(shù)據(jù)表中await mysql('opinions').insert({openid,opinion,src,wechat})// 執(zhí)行的結(jié)果會保存到ctx.state中，也就是從后端返回到前端的數(shù)據(jù)// 執(zhí)行成功返回的數(shù)據(jù)，code設(shè)為0ctx.state.data = {code: 0,msg: 'success'}console.log("執(zhí)行成功")}catch(e){console.log("執(zhí)行錯誤:",e)// 執(zhí)行失敗返回的數(shù)據(jù)，code設(shè)為-1ctx.state = {code: -1,data: {msg: '添加失敗' + e.sqlMessage}}} }

5、提交數(shù)據(jù)測試

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

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

控制臺會打印出從后端傳回來的信息

同時，打開終端，這時在server文件夾下面npm run dev啟動的后端，也會打印出執(zhí)行成功的信息

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

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

作者：貓寧一 95后全棧程序媛?? ??? ??一枚~ 熱愛學(xué)習(xí)！熱愛編程！ 可關(guān)注【貓寧一】公眾號領(lǐng)取我所有全棧項目代碼哦~點擊查看課程目錄：微信小程序全棧開發(fā)課程目錄

總結(jié)

以上是生活随笔為你收集整理的为啥我的页面模板的from提交不了数据_4-9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。