SpringBoot的前后端分离--上传数据

女爷i 2022-08-31 04:41 176阅读 0赞

**目录**

线上效果

来个vue 表单：

获取 el-input内容

效果展示：

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present

net::ERR\_CONNECTION\_REFUSED解决办法

HTML 创建按钮实现跳转链接

--------------------

推荐先看：[https://zhangjq.blog.csdn.net/article/details/118927470][https_zhangjq.blog.csdn.net_article_details_118927470]

前端：[https://gitee.com/zhangjiqun/vue-annuoyun/tree/master][https_gitee.com_zhangjiqun_vue-annuoyun_tree_master]

后台：[https://gitee.com/zhangjiqun/background-development-demo/tree/master][https_gitee.com_zhangjiqun_background-development-demo_tree_master]

数据库：

![20210722185905441.png][]

# 线上效果 #

[http://192.144.212.56/][http_192.144.212.56]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70][]

[http://192.144.212.56/index2.html][http_192.144.212.56_index2.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 1][]

# 来个vue 表单： #

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
    
    </head>
    
    <body>
        <div id="app">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名：" prop="name">
                    <el-input  v-model="ruleForm.name" ></el-input>
                </el-form-item>
                <el-form-item label="等级：" prop="id">
                    <el-input  v-model="ruleForm.id" ></el-input>
                </el-form-item>
                <el-form-item label="年龄：" prop="age">
                    <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getInfo('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    
    </body>
    
    </html>
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.3/lib/index.js"></script>
    
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    
    
    <script>
        var Main = {
            data() {
      
                return {
                    ruleForm: {
                        name: '',
                        id: '',
                        age: ''
                    }
                };
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            getInfo();
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                
                getInfo(){
    					this.$http.get('http://localhost:10000/userInfo/insertUser',{params:{id:this.ruleForm.id,name:this.ruleForm.name,age:this.ruleForm.age}},{
                                emulateJSON:true
                            }).then(result =>{
    						console.log(result.body.rows)
    						this.list=result.body.rows
    					});
                        alert('submit!');
    
    				}
            }
        }
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    
    </script>

重要划线：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 3][]

后台代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 4][]

package com.example.demo.easy.controller;
    
    import com.alibaba.fastjson.JSON;
    import com.example.demo.easy.entity.UserInfo;
    import com.example.demo.easy.service.UserInfoService;
    import org.json.JSONException;
    import org.springframework.web.bind.annotation.*;
    
    import javax.annotation.Resource;
    import java.util.List;
    
    /**
     * (UserInfo)表控制层
     *
     * @author makejava
     * @since 2021-07-19 17:41:13
     */
    @RestController
    @RequestMapping(value = "userInfo")
    public class UserInfoController {
        /**
         * 服务对象
         */
        @Resource
        private UserInfoService userInfoService;
    
        /**
         * 通过主键查询单条数据
         *
         * @param id 主键
         * @return 单条数据
         */
        @PostMapping("selectOne")
        public UserInfo selectOne(@RequestParam (name = "id")Integer id) {
            UserInfo userInfo=this.userInfoService.queryById(id);
            return userInfo;
        }
    
        @GetMapping("selectTne")
        public UserInfo selectTne(@RequestParam (name = "id")Integer id) {
            UserInfo userInfo=this.userInfoService.queryById(id);
            return userInfo;
        }
        @GetMapping("selectAll")
        @CrossOrigin
        public  List<UserInfo> selectAll() {
            StringBuilder stringBuilder=new StringBuilder();
            List<UserInfo> list=this.userInfoService.queryAllByLimit(1,100);
    //        for (UserInfo userInfo :list) {
    //            stringBuilder.append(userInfo.toString());
    //
    //        }
            return list;
        }
        @GetMapping("selectAllJson")
        @CrossOrigin
        public  String selectAllJson() throws JSONException {
            List<UserInfo> list=this.userInfoService.queryAllByLimit(1,100);
            String str = JSON.toJSONString(list); // List转json
    
                return str;
    
    
        }
        @GetMapping("insertUser")
        public UserInfo insertUser(@RequestParam (name = "id")Integer id,
                                   @RequestParam (name = "name")String name,
                                   @RequestParam (name = "age")String age) {
    
            UserInfo userInfo=new UserInfo();
            userInfo.setId(id);
            userInfo.setName(name);
            userInfo.setAge(age);
            this.userInfoService.insert(userInfo);
            return userInfo;
        }
    
    }

# 获取 el-input内容 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 5][]

# 效果展示： #

插入数值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 6][]

访问数据显示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 7][]

# has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present #

Nginx添加请求头

add\_header Access-Control-Allow-Origin \*;  
                add\_header Access-Control-Allow-Credentials: true;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 8][]

# net::ERR\_CONNECTION\_REFUSED解决办法  #

网络请求拒绝：直接通过浏览器查看ip是否正确；

当上传自己的html最好重启一下tomcat。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 11][]

# [HTML 创建按钮实现跳转链接][HTML] #

JavaScript

<button onclick="window.location.href='/page2'">Continue</button>
    <button onclick="location.href='http://www.example.com'" type="button"> www.example.com </button>

使用链接，样式设置成按钮

<a href="http://google.com" class="button">Continue</a>

[https_zhangjq.blog.csdn.net_article_details_118927470]: https://zhangjq.blog.csdn.net/article/details/118927470
[https_gitee.com_zhangjiqun_vue-annuoyun_tree_master]: https://gitee.com/zhangjiqun/vue-annuoyun/tree/master
[https_gitee.com_zhangjiqun_background-development-demo_tree_master]: https://gitee.com/zhangjiqun/background-development-demo/tree/master
[20210722185905441.png]: /images/20220829/1d491bf60114414e9df6437b1580c008.png
[http_192.144.212.56]: http://192.144.212.56/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70]: /images/20220829/6c08778e00244d03a28dc2eee5ff3f8e.png
[http_192.144.212.56_index2.html]: http://192.144.212.56/index2.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 1]: /images/20220829/7da262e453da4c1bb9aaef65343e0227.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 2]: /images/20220829/a93ab492073c486daba58f545734bb0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 3]: /images/20220829/8e43c56fb0954ad59e68f7eeb07b8988.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 4]: /images/20220829/1ef5228feb30459786084f97362ff1c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 5]: /images/20220829/f244addc4bc249d38cc83117302bf919.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 6]: /images/20220829/35213522fdcb4eb18cbfe2aa783742e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 7]: /images/20220829/2cd123a9059b40afaf676283eee01e63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 8]: /images/20220829/b98237f5c44040fd868af46298855a83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 9]: /images/20220829/03aa974a79184b2ba72ede1faf2755ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 10]: /images/20220829/ca10bd2cb72d4381bb184fd670ab59a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 11]: /images/20220829/5021eaf5966641548be3eedf45eeec93.png
[HTML]: https://www.cnblogs.com/nxmxl/p/11812242.html