vue提交表单数据到后端

前几天使用vue-element-admin框架开发了一个简单的后台管理系统，在开发的过程之中也遇到了一些功能，以及对饿了么框架的使用遇到的一些问题，如何解决问题，记录一下。

####资料相关

vue-element-admin

推荐指数：star:55k
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard

今天记录一个功能，提交表单的数据给后端，提交表单时候的请求参数差不多是这样子的，其中有单选框，下选框，（下拉框可以选择一个值，也可以选择多个值），以字符串数组的格式提交。

请求报文如下


{"questionContent":"题目1","correctAnswer":"正确答案","otherAnswer1":"错误答案1","otherAnswer2":"错误答案2","otherAnswer3":"错误答案3","userGrades":["kinderGarten","firstGrade","threeGrade","sixGrade"],"questionCategory":"简单"}

具体提交格式需要注意：
1：input输入框提交类型为字符串
2：radio只能单选，每次只能提交一个，类型为字符串
3：下拉框（年级）为数组，当选择一个option或者多个option的时候，格式都为字符串数组形式。

点击按钮，会出现一个弹框，在弹框里面有form表单，填写表单数据，再次点击确定的时候，调用一下保存的接口，将填写的数据提交给后端。

示例代码

<template><div class="tab-container"><el-buttonclass="filter-item"style="margin-left: 10px;"type="primary"icon="el-icon-edit"@click="handleCreate">添加</el-button><el-dialog :visible.sync="dialogFormVisible"><el-form:model="questionForm"ref="dataForm"label-position="left"label-width="90px"style="width: 400px; margin-left:50px;"><el-form-item label="题目" prop="questionContent"><el-input type="textarea" :rows="2" v-model="questionForm.questionContent"></el-input></el-form-item><el-form-item label="分类"><el-radio-group v-model="questionForm.questionCategory" style="margin-right:12px;"><el-radio v-for="(radio, index) in subjectList" :key="index" :label="radio">{{radio}}</el-radio></el-radio-group></el-form-item><el-form-item label="正确答案" prop="correctAnswer"><el-input v-model="questionForm.correctAnswer" /></el-form-item><el-form-item label="其他答案1" prop="otherAnswer1"><el-input v-model="questionForm.otherAnswer1" /></el-form-item><el-form-item label="其他答案2" prop="otherAnswer2"><el-input v-model="questionForm.otherAnswer2" /></el-form-item><el-form-item label="其他答案3" prop="otherAnswer3"><el-input v-model="questionForm.otherAnswer3" /></el-form-item><el-form-item label="所属年级"><el-selectv-model="questionForm.userGrades"class="filter-item"placeholder="选择年级"multiple><el-optionv-for="item in tabMapOptions":key="item.key":label="item.label":value="item.key"/></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取消</el-button><el-button type="primary" @click=" createData() ">确定</el-button></div></el-dialog></div>
</template>
<script>
//调用接口
import { saveSubject } from "@/api/content";
export default {data() {return {subjectList: ["黄金", "白银", "钻石"],input: "",tabMapOptions: [{ label: "幼儿园", key: "kinderGarten" },{ label: "一年级", key: "firstGrade" },{ label: "二年级", key: "secondGrade" },{ label: "三年级", key: "threeGrade" },{ label: "四年级", key: "fourthGrade" },{ label: "五年级", key: "fifthGrade" },{ label: "六年级", key: "sixGrade" },{ label: "小学以上", key: "gradeSchool" },],questionForm: {questionContent: "",correctAnswer: "",otherAnswer1: "",otherAnswer2: "",otherAnswer3: "",userGrades: [],questionCategory: "",},dialogFormVisible: false,};},methods: {handleCreate() {this.questionForm = {questionContent: "",correctAnswer: "",otherAnswer1: "",otherAnswer2: "",otherAnswer3: "",userGrades: [],questionCategory: "",};this.dialogFormVisible = true;},//添加增加题目async createData() {let form = null;form = this.questionForm;const params = form;const res = await saveSubject(params);console.log(res);if (res.code === "0000") {this.$message({type: "info",message: "保存成功",});this.dialogFormVisible = false;this.getQuerySubjectList();return;}this.$message({type: "error",message: "保存失败",});},},
};
</script>
<style scoped>
.tab-container {margin: 30px;
}
</style>

查看请求报文：

提交成功

vue提交表单数据到后端相关推荐

html表单向本页面提交数据,从页面提交表单数据的步骤之(一)
从页面提交表单数据的方法之(一) 先说下开发中我使用的主要web利器: Bootstrap AdminLTE Jquery vue.js underscore.js 简介利用表单给服务器提交数据是网 ...
提交表单数据到数据库_普通表单不仅适用于数据库
提交表单数据到数据库您也可以将类似的规则应用于数据对象类型. (You can apply similar rules to data object types, too.) You probabl ...
Vue之表单数据收集
简介此文主要介绍使用Vue进行表单数据的收集,不同的表单元素会有一定小小的技巧. v-model有三个常用的修饰符: number:输入字符串转化为有效的数字,常用语文本输入. lazy:失去焦点后 ...
【vue系列-04】vue的表单数据收集，基本指令和自定义指令
vue的表单数据收集.指令一,vue的核心属性 1,收集表单数据 1.1,收集数据案例 1.1.1,type类型的输入框 1.1.2,radio类型的单选框 1.1.3,checkbox类型的复选框 ...
jquery ajax提交表单数据的两种方式
jquery ajax提交表单数据的两种方式转载于:https://www.cnblogs.com/zhujiabin/p/4912364.html
Python模拟post提交表单数据 ——某二手车网站回拨电话的分析与利用
Python模拟post提交表单数据 --某二手车网站回拨电话的分析与利用在浏览某二手车网站的时候,发现可以提交手机号码,然后网站就会回拨给这个手机号,利用这个功能,可以实现一些目的.Python语 ...
Spring Boot(三)：RestTemplate提交表单数据的三种方法
在REST接口的设计中,利用RestTemplate进行接口测试是种常见的方法,但在使用过程中,由于其方法参数众多,很多同学又混淆了表单提交与Payload提交方式的差别,而且接口设计与传统的浏览器使 ...
微信小程序项目实战：如何提交表单数据到云数据库
微信小程序如何提交表单数据到数据库 1.先在wxml里面写一个表单,在form里面添加bindsubmit的属性,下面再添加两个button,在button里面添加属性form-type,form-t ...
ajax异步提交 java_jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

vue提交表单数据到后端

vue-element-admin

vue提交表单数据到后端相关推荐

最新文章

热门文章