为啥我的页面模板的from提交不了数据_4-9【微信小程序全栈开发课程】意见反馈(四)--提交反馈信息

b101c08b5742b661af3e3f932e0bf503.png

1、创建后端操作文件

先在后端server/controllers文件夹中创建操作文件createopinion.js,用来将从前端页面提交的数据,插入到opinions表中,创建完之后,页面目录如下

5d6055ef0abd596ac75862361db3ad47.png

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.bodytry{//knex语法,插入数据到opinions数据表中await mysql('opinions').insert({openid,opinion,src,wechat})// 执行的结果会保存到ctx.state中,也就是从后端返回到前端的数据// 执行成功返回的数据,code设为0ctx.state.data = {code: 0,msg: 'success'}console.log("执行成功")}catch(e){console.log("执行错误:",e)// 执行失败返回的数据,code设为-1ctx.state = {code: -1,data: {msg: '添加失败' + e.sqlMessage}}}
}

5、提交数据测试

(1)不填写反馈信息,点击提交,会出现错误提示

c240f767e883adb3401c11946a7c18af.png

(2)填写反馈信息点击提交

控制台会打印出从后端传回来的信息

12e545bb0514d249858a76faeabd8a1b.png

同时,打开终端,这时在server文件夹下面npm run dev启动的后端,也会打印出执行成功的信息

在src文件夹下面写console.log会在控制台中打印

在server文件夹下面写console.log会在终端中打印

a4cdf86f078c3a598d0b5ae8cc67a0c4.png
作者:猫宁一 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程! 可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录:微信小程序全栈开发课程目录

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/506194.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

rac一节点时间比另一个节点快_数据库数据那么多为什么可以检索这么快?

你好&#xff0c;是我琉忆。经常跟数据打交道的你&#xff0c;有没有去考虑过数据上百万&#xff0c;为什么它可以检索那么快&#xff1f;一说到数据库的检索速度这么快&#xff0c;我想你一定想到了索引。没错&#xff0c;今天我们来简单聊聊索引&#xff0c;聊聊索引是什么&a…

唯有自己变得强大_真正的自立,唯是让自己变得更加强大

更大的成功&#xff0c;不是看我们用双腿走了多少路&#xff0c;而是要看我们总共行了多少路。一只萤火虫&#xff0c;靠自身的力量发出了光芒。夜晚&#xff0c;它仰头望天&#xff0c;对着月亮说&#xff1a;“我是靠自己而发光的&#xff0c;而你却是借助太阳的光芒。虽然你…

mysql必知必会_MySQL必知必会

MySQL必知必会联结的使用, 子查询, 正则表达式和基于全文本的搜索, 存储过程, 游标, 触发器, 表约束.了解SQL数据库基础电子邮件地址薄里查找名字时, 因特网搜索站点上进行搜索, 验证名字和密码, 都会用到数据库.数据库是一个以某种有组织的方式存储的数据集合.把数据库想象成一…

vm虚拟机安装_虚拟机 --- 安装VM(一)

虚拟机&#xff08;英语&#xff1a;virtual machine&#xff09;&#xff0c;在计算机科学中的体系结构里&#xff0c;是指一种特殊的软件&#xff0c;可以在计算机平台和终端用户之间创建一种环境&#xff0c;而终端用户则是基于这个软件所创建的环境来操作软件。虚拟机最初由…

cnetos7 mysql5.6 utf8设置_CentOS7下安装MySQL 5.6修改字符集为utf8并开放端口允许远程访问...

前言mysql最初的免费战略已经深入人心&#xff0c;感觉自己一直都在用mysql。今天在CentOS7下装mysql。发现原来centos下默认没有mysql&#xff0c;因为开始收费了&#xff0c;取而代之的是另一个mysql的分支mariadb&#xff0c;这个是mysql创始人重新主导的分支。But, whateve…

preparedstatement打印sql语句_Mybatis是这样防止sql注入的

链接&#xff1a;https://juejin.im/post/5e131203e51d4541082c7db3Mybatis这个框架在日常开发中用的很多&#xff0c;比如面试中经常有一个问题&#xff1a;$和#的区别&#xff0c;它们的区别是使用#可以防止SQL注入&#xff0c;今天就来看一下它是如何实现SQL注入的。什么是S…

mysql 虚拟列索引_使用MySQL 5.7虚拟列提高查询效率

原标题&#xff1a;使用MySQL 5.7虚拟列提高查询效率导读翻译团队&#xff1a;星耀队知数堂团队成员&#xff1a;星耀队-芬达&#xff0c;星耀队-顺子&#xff0c;星耀队-M哥原文出处&#xff1a;https://www.percona.com/blog/2018/01/29/using-generated-columns-in-mysql-5-…

python selenium span内容读取_【程仁智推荐】Selenium自动化测试入门

LupuX 2017-06-18 14:24:28 11853 收藏 41分类专栏&#xff1a; Auto Test 文章标签&#xff1a; 自动化测试 selenium web测试 UI自动化版权一、什么是SeleniumSelenium 是一个浏览器自动化测试框架&#xff0c;它主要用于web应用程序的自动化测试&#xff0c;其主要特点如下…

c++ 操作mysql_C++操作mysql方法总结(1)

C通过mysql的c api和通过mysql的Connector C 1.1.3操作mysql的两种方式使用vs2013和64位的msql 5.6.16进行操作项目中使用的数据库名为booktik表为book……….(共有30条记录&#xff0c;只列出了部分记录&#xff0c;14-30未列出)一、通过mysql的C api进行操作1、新建一个空项目…

mysql进阶知识_Mysql面试知识点总结(进阶篇)

上一篇主要介绍一些基础的mysql知识点&#xff0c;这一篇我们介绍一下mysql比较重要但在开发中我们程序员很少知道的几个大点(自以为是的观点)。数据库设计三范式&#xff1a;第一范式&#xff1a;数据库表的每一列都是不可分割的原子数据项&#xff0c;即列不可拆分。第二范式…

java实现报表_修改带 JAVA 自定义类的报表还要重启应用,咋解决?

这是 JAVA 编译型语言特性决定的&#xff0c;修改 JAVA 程序重启应用也正常。只不过改报表就要重启整个应用就有点夸张了&#xff0c;报表变动比较频繁&#xff0c;每次都重启应用会影响业务的。这个问题的根本原因是耦合性问题&#xff0c;报表里一旦涉及到 JAVA 代码就要跟主…

idea 用iterm 终端_iTerm2 都不会用,还敢自称老司机?(上)

对于需要长期与终端打交道的工程师来说&#xff0c;拥有一款称手的终端管理器是很有必要的&#xff0c;对于 Windows 用户来说&#xff0c;最好的选择是 Xshell&#xff0c;这个大家都没有异议。但对于 MacOS 用户来说&#xff0c;仍然毋庸置疑&#xff0c;iTerm2 就是你要的利…

bootstrap 日历中文_bootstrap日期选择器本地化-中文

最近用bootstrap做项目&#xff0c;所以就顺便搜了下用bootstrap写的日期选择器。搜到的第一和第二条结果虽然是官网&#xff0c;但上面挂的还是基于bootstrap2的日期选择器(此时为北京时间2017-12-26 17:18)&#xff0c;不能与bootstrap3兼容使用。所以又去找bootstrap3的日期…

td之间的间距怎么改_论文的一级标题、二级标题格式怎么弄?

其实论文写好了以后&#xff0c;论文格式的调整也是非常重要的&#xff0c;具体的格式一般有以下几点&#xff1a;标题格式&#xff0c;一级标题、二级标题、三级标题页码格式&#xff0c;一般是正文之前为罗马数字&#xff0c;正文以后为阿拉伯数字&#xff0c;一般是页脚中间…

winform教_电脑绝技教你22天学精Csharp之第十五天winform应用程序补充5

{{1}}$using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows.Forms;using System.IO;namespace _10打开对话框{publi…

plupload怎么设置属性_腾达无线路由器怎么设置,这些是你要知道的

腾达无线路由器怎么设置1、联好线路&#xff1a;到你家的外网网线接路由器的WAN口&#xff0c;你的电脑连到路由器的LAN口(有四个&#xff0c;任意一个均可)&#xff0c;给路由器接通电源。设置的时候&#xff0c;给路由器通电&#xff0c;一根网线直接连电脑和路由器的这个口就…

mysql centos 安装目录在哪_centos中如何查看mysql安装目录在哪

centos中查看mysql安装目录的方法&#xff1a;推荐教程&#xff1a;centos使用教程1、使用ps -ef|grep mysql命令查看&#xff1a;结果&#xff1a;root 17659 1 0 2011 ? 00:00:00 /bin/sh /usr/bin/mysqld_safe --datadir/var/lib/mysql --socket/var/lib/mysql/mysql.sock …

dynamic 365 js 失去焦点_基于Auto.js的QQ好友动态秒赞系统

0.脑筋急转弯请问在什么情况下log(10) 10log(20) 20左滑查看答案 console.log(10) 是 10 console.log(20) 是 201.工具选…

scrapy框架_Python:Scrapy框架

“ Scrapy是一个适用爬取网站数据、提取结构性数据的应用程序框架&#xff0c;它可以应用在广泛领域&#xff1a;Scrapy 常应用在包括数据挖掘&#xff0c;信息处理或存储历史数据等一系列的程序中。通常我们可以很简单的通过 Scrapy 框架实现一个爬虫&#xff0c;抓取指定网站…

python求两数之和的命令_数学建模:科学计算Python2小时-Python基础

这一部分主要面向数模活动中的python基础知识进行讨论作者系列文章(科学计算Python2小时)目录&#xff1a;李似&#xff1a;科学计算Python2小时-前言与目录​zhuanlan.zhihu.com首先要说明的是&#xff0c;目前常用的Python版本包括Python2和Python3&#xff0c;二者有一些语法…