vue.js——ElementUI表单向后台提交FormData数据

前端样式效果图：

前端样式主要代码：

    <div><el-dialog title="用户注册" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="用户名" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" :label-width="formLabelWidth"><el-radio-group v-model="form.gender"><el-radio :label="0">女</el-radio><el-radio :label="1">男</el-radio></el-radio-group></el-form-item><el-form-item label="昵称" :label-width="formLabelWidth"><el-input v-model="form.nickName" autocomplete="off"></el-input></el-form-item><el-form-item label="邮箱地址" :label-width="formLabelWidth"><el-input v-model="form.email" autocomplete="off"></el-input></el-form-item><el-form-item label="手机号" :label-width="formLabelWidth"><el-input v-model="form.phone" autocomplete="off"></el-input></el-form-item><el-form-item label="QQ" :label-width="formLabelWidth"><el-input v-model="form.qq" autocomplete="off"></el-input></el-form-item><el-form-item label="微信号" :label-width="formLabelWidth"><el-input v-model="form.weChat" autocomplete="off"></el-input></el-form-item><el-form-item label="密码" :label-width="formLabelWidth"><el-input v-model="form.password" autocomplete="off"></el-input></el-form-item><el-form-item label="再次输入密码" :label-width="formLabelWidth"><el-input v-model="form.comfirmPassword" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="register">注 册</el-button></div></el-dialog>
//定义表单变量
export default {name: 'home',data(){return{//表单变量dialogFormVisible:false,form: {name: '',gender: 0,email: '',nickName: '',phone: '',qq:'',weChat:'',password:'',comfirmPassword: '',}}
}

前端提交注册用户信息的函数代码：

register(){this.dialogFormVisible = false;let formData = new FormData();for(let key in this.form){formData.append(key,this.form[key]);console.log(formData.get(key));}this.$axios({method:"post",url:"http://127.0.0.1:8081/users/register",headers: {"Content-Type": "multipart/form-data"},withCredentials:true,data:formData}).then((response)=>{console.log(response);});
}

后台java代码

    @RequestMapping(value = "/register", method = RequestMethod.POST)public ResultJSON register(@ModelAttribute Users user){System.out.println(user.toString());return  ResultJSON.SUCCESS();}

第一步：先新建一个formData对象，用来封装好前端需要传到后台的数据

第二步：使用formData的append方法，将存储用户提交信息的form对象变量传输到后台

第三步：后台Controller层中的函数使用@ModelAttribute Users use参数接收前端传递过来的用户数据。

注意：如果是要进行跨域请求的前后端分离的项目，先在后台设置允许跨域请求才能向后台传输数据，withCredentials:true这句代码，让每次请求都带上cookie,这样每次取请求后端,就不会被认为是不同用户导致session丢失。

跨域请求配置类java代码：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.setAllowCredentials(true);corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 允许该域名使用corsConfiguration.addAllowedHeader("*"); // 允许任何头corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）return corsConfiguration;}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置return new CorsFilter(source);}
}

vue.js——ElementUI表单向后台提交FormData数据相关推荐

基于 vue.js + elementUI 后台管理系统（html）模板
mq-admin vue.js + elementUI 后台管理系统模板前言今年年初刚转型学前端,业务需要做一个后台管理系统.好嘛,GitHub,码云先爬一波,发现了许多大佬的作品.那时也刚转型走 ...
Laravel6.0 + vue.js + elementUI + 微信小程序实现沃尔玛扫码购
本次项目使用 Laravel6.0 + vue.js + elementUI + 微信小程序实现沃尔玛扫码购项目设计-接口本次项目所有接口使用 laravel 框架实现. 项目设计-后台后台开 ...
Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 扫盲 2018年12月09日 20:32:59 vbirdbest 阅读数 7043更多分类专栏: Vue.js + ElementUI ...
Vue使用elementUI实现一个后台管理
Vue使用elementUI实现一个后台管理功能效果思路功能分析 1.安装 2.main.vue 3.App.vue 4.views (1) Home.vue (2) Classify.vue ...
js实现Form表单submit提交截获数据（各浏览器通用）
js实现Form表单submit提交截获数据(各浏览器通用) js实现Form表单submit提交截获数据(各浏览器通用) No Comments | js , 安全 , PHP | by calms ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
js实现表单form提交前进行确认提示
在jquery中,可以使用confirm来弹出提示框,实现确认提交.下面小编举例讲解js实现表单form提交前进行确认提示. 工具/原料 js+html 代码编辑器:zend studio 10.0 ...
vue的form表单在提交成功后置空
vue的form表单在提交成功后置空 form表单说明 :form表单加上属性值 ref="form" 点击事件加入 roleManager.$refs['form'].rese ...
vue.js 表格表单序号
vue.js 表格表单序号表格是动态的,通过v-for="(item,index) in sites" 循环出来的表格 ,通过index属性,实现表格序号自增, 结合页码和每页数 ...

vue.js——ElementUI表单向后台提交FormData数据

vue.js——ElementUI表单向后台提交FormData数据相关推荐

最新文章

热门文章