最近搭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. 结尾

希望有前端大佬能帮我解释下 是什么原因，我对前端学的比较少