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

目录

线上效果

来个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://gitee.com/zhangjiqun/vue-annuoyun/tree/master

后台：https://gitee.com/zhangjiqun/background-development-demo/tree/master

数据库：

线上效果

http://192.144.212.56/

http://192.144.212.56/index2.html 

 

 

来个vue 表单：

    




    

        
            
                
            
            
                
            
            
                
            
            
                提交
                重置
            
        
    













    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')

重要划线：

 

后台代码：

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 selectAll() {
        StringBuilder stringBuilder=new StringBuilder();
        List 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 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内容

    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')

效果展示：

插入数值

访问数据显示：

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;

net::ERR_CONNECTION_REFUSED解决办法 

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

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

 

 

 

 

HTML 创建按钮实现跳转链接

JavaScript

Continue
 www.example.com 

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

Continue