记将iview-admin改造成自己的后台管理系统

前言

为了给自己的app加一个后台管理系统，我去尝试vue-element-admin和iview-admin这两个后台管理系统，由于是第一次使用这种高度集成的后台管理系统（由于自己比较菜）,所以记录这次从群里问大佬解决登录的问题。本项目选择是iview-admin。

安装

由于github时快时慢，所以选择从码云中下载的iview-admin。安装前须知就不用说了，下面是从将iview-admin克隆到本地。

git clone https://github.com/iview/iview-admin.git
npm install
npm run dev

克隆iview-admin template分支仓库

git clone -b template https://github.com/iview/iview-admin.git

修改登录

1.src/main.js

2.src/config/index.js配置请求接口的基本路径baseUrl

3.src/api/user.js修改login接口

4.修改src/store/module/user.js中的handleLogin方法

5.同时将getUserInfo方法中的内容注释（我所理解的是后台没有这个接口，所以就不用这个接口）

6.改动handleLogin方法，可能会受到影响的页面有src/view/login/login.vue与src/components/login-form/login-form.vue

7.改到这里，我这边就能正常登录了。

ps：我现在遇到一个待解决的问题是，登录状态无法保存，等解决了再说吧。

2020-03-19解决登录状态无法保存的问题

store/module/user.js中的getUserInfo中将resolve()改成resolve({access:true})，因为router/index.js中需要，内容如下

// 获取用户相关信息
    getUserInfo ({ state, commit }) {
      return new Promise((resolve, reject) => {
        try {
          // getUserInfo(state.token).then(res => {
          //   const data = res.data
          //   commit('setAvatar', data.avatar)
          //   commit('setUserName', data.name)
          //   commit('setUserId', data.user_id)
          //   commit('setAccess', data.access)
          //   commit('setHasGetInfo', true)
          //   resolve(data)
          // }).catch(err => {
          //   reject(err)
          resolve({ access:true }) //
          // })
        } catch (error) {
          reject(error)
        }
      })
    },

写在最后

1.刚毕业的菜鸟一个，不保证以上内容全部正确，只希望能给部分人启发。

2.三人行必有我师，以后学习的路确实还很长，记录一下自己的成长经历。

3.阴霾不会常在，天空也会放晴。