Life has its own fate, and meeting may not be accidental.

0%

vue-cli反向代理以及axios使用

准备早点把毕业设计写了,之后实习轻松点。写个小说APP玩玩,平常看小说什么的最烦的就是遇到广告了= =。准备后端用jsoup,前端用vue。到时候给账号的话就我一个个分配吧(不想太多人用,毕竟来源准备爪巴那些不正规的网站的源),不想写注册了,或者注册时候要一个邀请码啥的。

在config->index.js下更改proxyTable

1
proxyTable: {
2
      '/api': {  //使用"/api"来代替"http://[ip]:[port]"
3
        target: 'http://[ip]:[port]', //源地址
4
        changeOrigin: true, //改变源
5
        pathRewrite: {
6
          '^/api': '/api' //路径重写
7
        }
8
      }
9
    },

运行端口和我的springboot装起来了本地的8080冲突了,所以换成了8084

1
<script>
2
  import axios from 'axios'
3
  export default {
4
    //单页面中不支持前面的data:{}方式
5
    data() {
6
      //相当于以前的function data(){},这是es5之前的写法,新版本可以省略掉function
7
      return{
8
        user:{
9
          username:'',
10
          password:'',
11
          //为了登录方便,可以直接在这里写好用户名和密码的值
12
        }
13
      }
14
    },
15
    beforeRouteEnter (to,from,next) {
16
      window.document.body.style.backgroundColor= '#DCDFE6';
17
      next();
18
    },
19
    beforeRouteLeave (to,from,next) {
20
      window.document.body.style.backgroundColor= '';
21
      next();
22
    },
23
    methods:{
24
      doLogin(){//一点击登录按钮,这个方法就会执行
25
        if(this.user.username == ""||this.user.password == ""){
26
          alert("输入用户名或者密码")
27
        }
28
        else{
29
          axios.post('/api/conter/register',JSON.stringify({
30
            // username: this.user.username,
31
            // password: this.user.password
32
            userDto: this.user
33
          })).then(
34
            response =>{
35
              alert(response.data)
36
            }
37
          ).catch(
38
              err =>{
39
                alert(err)
40
              }
41
          )
42
        }
43
          // alert(JSON.stringify(this.user))
44
          //可以直接把this.user对象传给后端进行校验用户名和密码
45
        }
46
      }
47
    }
48
</script>

前端是以user对象传输的,后端试了好久,发现还是Map<string,Object> 好获得值.

1
@RequestMapping("/register")
2
public String register(@RequestBody Map<String,userDto> map){
3
    User user= new User();
4
    System.out.println(map.get("userDto").getUsername());