vue-element-admin 前后端联调 请求后端接口_vue-element-admin登录页面请求后端数据

安装

git clone https://gitee.com/panjiachen/vue-element-admin.git client
 
cd client
 
git branch -a
 
git checkout -b i18n remotes/origin/i18n
 
git config --global url."https://".insteadOf git://
 
npm install
 
npm run dev

• 需要切换分支到 i18n，否则不支持国际化（中文）功能

• npm install 要多试几次，因为中间会连接 gitbub 下载一些依赖，网络不稳定会导致失败

• npm run dev 运行后回自动打开浏览器，使用的端口是 9527

后端路径

开发环境下执行下面命令

npm run dev

• 会同时启动 mock-server

在开发环境下，后端访问路径起始路径配置在文件 .env.development 中

VUE_APP_BASE_API = '/dev-api'

• 默认向后台的请求都发给 http://localhost:9527/dev-api 的 mock-server，获得的都是模拟数据

• 需要跟真实后台联调时，可以改动以上地址为 VUE_APP_BASE_API = 'http://localhost:8080/api'；或者改为 VUE_APP_BASE_API = '/api'，然后在 vue.config.js 中添加代理：

• 注释掉：before: require('./mock/mock-server.js')

devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    },
    // before: require('./mock/mock-server.js') 记得注释掉这一行代码
  }

发送请求的 axios 工具被封装在 src/utils/request.js 中

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
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
})
​
// ...

原有代码的 URI 路径都是这样的：

/vue-element-admin/user/login
/vue-element-admin/user/info
/vue-element-admin/user/logout
...

如果觉得不爽，可以来一个全局替换

/user/login
/user/info
/user/logout
...

token 的请求头修改一下，在 src/utils/request.js 中

...
service.interceptors.request.use(
  config => {
    // do something before request is sent
 
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['Authorization'] = getToken() //将['X-Token']替换为['Authorization']
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
...

修改 token 保存位置

这里对 token 存储进行了修改，原框架中的 token 既存储在 cookie 中，又存储在了 store.state 中中，这样对代码维护造成了困难，每次修改 token 都要修改两个地方

由于 token 没有响应式的需求，所以将 token 统一存储在 cookie 中，而 vuex 中相关 SET_TOKEN 的代码都注释掉

这样每次读取和设置 token 都从 @/utils/auth 中的方法来操作 cookie 即可

const state = {
  // token: getToken(),
  ...
}
 
const mutations = {
  // SET_TOKEN: (state, token) => {
  //   state.token = token
  // },
  ...
}

接下来需要将所有用到 vuex 中 token 的代码都注释掉：

• 全局搜索 SET_TOKEN ，将相关代码注释掉
• 全局搜索 state.token ，将相关代码注释掉
• 全局搜索 user.token ，将相关代码注释掉
• 全局搜索 getters.token ，将相关代码注释掉

以后要修改/获取 token 只需导入 @/utils/auth 中的方法即可：

export function getToken() {
  return Cookies.get(TokenKey)
}
 
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}
 
export function removeToken() {
  return Cookies.remove(TokenKey)
}