vue-element-admin使用记录

发布于 2019-07-17  55 次阅读


第二次接触前端,基础知识也都不会,使用vue-element-admin时也耗了一点点时间,记录下来以备后用(基于4.2.1版本)

一些必要改动

.env.×××中的VUE_APP_BASE_API地址改成实际地址

vue.config.js中可改动端口

const port = process.env.port || process.env.npm_config_port || 9527 // dev port

main.js

不需要mock的话,去掉

// import { mockXHR } from '../mock'
// if (process.env.NODE_ENV === 'production') {
//   mockXHR()
// }

src/settings.js根据需要修改

src/utils/request.js

根据实际情况修改

config.headers['X-Token'] = getToken()
    // if the custom code is not 0, it is judged as an error.
    if (res.code !== 0) {
      Message({
        message: res.message || '服务器返回未知错误',
        type: 'error',
        duration: 5 * 1000
      })

      // 10086 relogin
      if (res.code === 10086) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || '服务器返回未知错误'))
    } else {
      return res
    }

src/layout/components/Sidebar/Logo.vue

根据实际情况更改文字和logo

src/components/Breadcrumb/index.vue

该版本没有国际化,均为英文,可以在这里面把面包屑上的Dashboard改成首页

    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]

      if (!this.isDashboard(first)) {
        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
      }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === '首页'.toLocaleLowerCase()
    },

改造登录功能

src/views/login/index.vue

按需改动登录界面,注意去掉对用户名的限制

src/store/modules/user.js

按需修改请求参数

  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ user_id: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

src/api/user.js

按需修改请求地址

此外需要注意请求的格式为json,而不是x-www-urlencoded,还有返回参数格式为{code: 0, data: {token:'xxx'}}

此外,还需要改动getInfo()中的接口地址并实现相关接口。我目前写到系统并不需要权限控制,但是为了避免大量改动,在返回时直接返回固定权限,router.js中不配置权限。返回数据data部分格式如下:

{
  roles: ['admin'],
  introduction: 'I am a super administrator',
  avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
  name: 'Super Admin'
}

src/utils/auth.js

此处可按需更改cookie中token的键名

const TokenKey = 'xxx'

添加页面

见文档https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/new-page.html#%E6%96%B0%E5%A2%9E-api

主要就是添加路由,界面和api