1. 程式人生 > >vue+Springboot 前後端資料互動(1)

vue+Springboot 前後端資料互動(1)

最近使用 vue 的 axios 往後端傳送資料,結果一直報錯,嘗試了多種方法

如果vue專案沒有打包放在 springboot 專案下的話,需要開啟跨域支援

在 vue 專案裡 config 目錄下的 index.js 檔案,找到 proxyTable   加上

'/api': {
        target: 'http://localhost:8089',
        changeOrigin: true,  //支援跨域
        pathRewrite: {
          '^/api': ''
        }
      }

醬紫就可以了!!!

前端直接傳物件到後端

this.$axios.post(
      'http://localhost:8089/logins',this.map)
  .then( (res)=>{
       this.list = res.data;
       alert(res.data)
   }).catch( (err)=>{
       console.log(err)
   })

後臺接收

    @CrossOrigin
    @RequestMapping(value = "/logins", method = RequestMethod.POST)
    @ResponseBody
    public Boolean Logins(@RequestBody Map<String, Object> map) {
       if(map != null) {
    	   System.out.print(map.get("arr")+" ");
           System.out.print(map.get("specid") + " ");
           System.out.print(map.get("requestList"));
           return Boolean.TRUE;
       }
       return Boolean.FALSE;
    }

使用 @CrossOrigin 註解來支援跨域 ,  引數裡使用 @RequestBody 來繫結物件或List

成功接受資料: