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

---

準備早點把畢業設計寫了，之後實習輕鬆點。寫個小說APP玩玩，平常看小說什麼的最煩的就是遇到廣告了= =。準備後端用jsoup，前端用vue。到時候給賬號的話就我一個個分配吧(不想太多人用，畢竟來源準備爪巴那些不正規的網站的源)，不想寫註冊了，或者註冊時候要一個邀請碼啥的。

在config->index.js下更改proxyTable

proxyTable: {
      '/api': {  //使用"/api"來代替"http://[ip]:[port]"
        target: 'http://[ip]:[port]', //源地址
        changeOrigin: true, //改變源
        pathRewrite: {
          '^/api': '/api' //路徑重寫
        }
      }
    },

運行端口和我的springboot裝起來了本地的8080衝突了，所以換成了8084

<script>
  import axios from 'axios'
  export default {
    //單頁面中不支持前面的data:{}方式
    data() {
      //相當於以前的function data(){},這是es5之前的寫法，新版本可以省略掉function
      return{
        user:{
          username:'',
          password:'',
          //爲了登錄方便，可以直接在這裏寫好用戶名和密碼的值
        }
      }
    },
    beforeRouteEnter (to,from,next) {
      window.document.body.style.backgroundColor= '#DCDFE6';
      next();
    },
    beforeRouteLeave (to,from,next) {
      window.document.body.style.backgroundColor= '';
      next();
    },
    methods:{
      doLogin(){//一點擊登錄按鈕，這個方法就會執行
        if(this.user.username == ""||this.user.password == ""){
          alert("輸入用戶名或者密碼")
        }
        else{
          axios.post('/api/conter/register',JSON.stringify({
            // username: this.user.username,
            // password: this.user.password
            userDto: this.user
          })).then(
            response =>{
              alert(response.data)
            }
          ).catch(
              err =>{
                alert(err)
              }
          )
        }
          // alert(JSON.stringify(this.user))
          //可以直接把this.user對象傳給後端進行校驗用戶名和密碼
        }
      }
    }
</script>

前端是以user對象傳輸的，後端試了好久，發現還是Map<string,Object> 好獲得值.

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