前言：

刚接触到项目，我来负责写后台管理界面，所谓不要重复造轮子，自然就有了后续了…
读完这个框架的源码后，感觉受益匪浅，对我以后写项目有了更多。

Vue-Elment-Admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件。对于经常使用 vue 和 element-ui 开发的 uu 们，使用这个框架比较容易点。

目录结构

+ src
  + api 所有的网络请求接口封装在这个文件夹中
    - admin.js 跟管理员有关的接口
    - user.js 
    ...
  + assets
  + components
  + directive
  + filters
  + icons
  + layout
  + router
  + store
  + styles
  + utils
    - auth.js
    - request.js
    ...
  + vendor
  + views
  - App.vue
  - main.js
  - permission.js
  - setting.js

api

这是框架本身推荐我们使用的方法,封装性也非常强，也推荐uu们使用这种方法

import request from '@/utils/request'

export function functionName(name) {
  return request({
    url: '/vue-element-admin/search/user',
    method: 'get',
    params: { name }
  })
}

export function transactionList(query) {
  return request({
    url: '/vue-element-admin/transaction/list',
    method: 'get',
    params: query
  })
}
...

不过由于我的后端总有自己的想法，而且我并不想每次请求完后都要去判断一下状态（每次传参是否有问题什么的），他会返回code给我，只有0才是正确，所以我在框架的基础上再封装了一层Promise。这样抽离解耦的话，会让我们的逻辑更加清晰，页面更加优雅。不至于一个文件下面什么代码都有，一个地方动了，其他地方也要跟着动，极其不利于我们开发

import request from '@/utils/request'

// 修改用户密码
export const updataUserPassword = (update_id, password) => {
  return new Promise((resolve, reject) => {
    req({
      url: 'url',
      method: 'post',
      data: JSON.stringify({
        update_id,
        password
      })
    }).then(res => {
      if (res.code !== 0) reject(res.msg) // 在这里判断是否成功
      resolve(res)
    })
  })
}
...

api文件夹中的文件基本上都是这么写的了，管理员的写一个文件，用户的写一个文件，机器人的写一个文件….

utils

request

因为写网页总要与后端交互，更何况我们这个后台管理呢。
所以我们将基本网络请求封装到这个文件中，然后将封装好的对象抛出去，给上面的 api 文件使用。

import axios from 'axios' // 引用 axios 请求
import { Message } from 'element-ui' // 错误信息直接显示到页面上
import store from '@/store' // 将 vuex 中的 token 加到 每次请求中
import { getToken } from '@/utils/auth' // token
import qs from 'qs' // 对参数进行格式化

// create an axios instance
const service = axios.create({
  baseURL: 'http://xxx.xxx.xxx.xxx', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 60000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    // console.log(config)
    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()
    }
    return config
  },
  error => {
    // do something with request error
    // console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response

    if (res.status !== 200) {
      Message({
        message: 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(res)
    } else {
      // console.log(res)
      return res.data
    }
  },
  error => {
    Message({
      message: '账号密码错误',
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
// 文件上传单独封装，后面直接用这个方法就行
export const upload = (url, params) => {
  return service.post(url, params, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

export default service

当然这里只有一个后端，如果有多个后端的话（IP地址不相同），我这个项目就是如此（~~请外援~~).可以创建多个request，在api中引用的时候import对应的路径即可.
import { req } from '@/utils/BotRequest'
如此一来我们就将网路请求相关的代码差不多封装完了

auth (后面与vuex交互需要，可先跳过)

这个文件更多的是与浏览器缓存的交互，在页面刷新后，页面不会让我们重新登录等信息。但是在浏览器关闭后，我们就不能让用户直接登录进来了，所以我们采用js-cookie来存浏览器缓存

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}