技術標籤：vue

                   搭vue框架遇到的坑，一個簡單的後端管理（vue+element-ui）

1. 前言：

我其實接觸到vue也沒多久，框架都是臨時拼湊進來的，當時遇到的問題是請求介面一直報400錯誤

2. 正文

我先將我後端的介面程式碼貼在下面

 /**
     * 儲存
     */
    @RequestMapping(value = "/save",method = RequestMethod.POST)
    @ApiOperation(value = "新增")
    public R save(
 
@Valid @RequestBody MenuEntityParamVo menu){
		menuService.save(menuEntity);
        return R.ok();
    }

這是一個新增選單的功能，使用@RequestBody註解 很明顯要的是json資料，接下來將我錯誤的前端程式碼貼在下面–

1、這是頁面調取新增介面的操作

 import { MenuSelect,AddOrUpdate } from '@/api/api'     
  //param引數省略。。。      
            AddOrUpdate(id,param).then(data =
 
> {
              if (data && data.code === 200) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit
 
('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.message)
              }
            })

2、調取新增介面請求引數，方法

export function AddOrUpdate(id,params) {
  return request({
    url: `/user/menu/${!id ? 'save' : 'update'}`,
    method: 'post',
    params
  })
}

3、統一request請求 處理

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
import { clearLoginInfo } from '@/utils'
import qs from "qs";
import merge from 'lodash/merge'
import http from "./httpRequest";
// import qs from 'qs'
// import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    // Cookies.set('token',token)
      config.headers.Authorization =token;
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(

  response => {
    const res = response.data

    if (response.data && response.data.code === 401) { // 401, token失效
        clearLoginInfo()
        router.push({ name: 'login' })
      // return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    // return Promise.reject(error)
  }
)
export default service

以上就是我前端的主要程式碼了。。剛開始我以為是資料要轉化成json，就將其使用JSON.stringify()方法進行轉化，可是還是不行。。。

後來我從網上查到 使用axios預設是會將資料轉成json的，然後我就蒙了。。
後來 我試了下一個方法 將上面的（2.調取新增介面請求引數，方法）改為如下：

export function AddOrUpdate(id,params) {
  return request({
    url: `/user/menu/${!id ? 'save' : 'update'}`,
    method: 'post',
    data: params
  })
}

請注意 ：

我加了data引數。。問題是找到了，但是我找了資料 還是沒找到區別。。

2. 結尾

希望有前端大佬能幫我解釋下 是什麼原因，我對前端學的比較少