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;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置
        return new CorsFilter(source);
    }
}
发布了26 篇原创文章 · 获赞 5 · 访问量 7360
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览