vue js中报红_vue-element-admin应用步骤

1.打开官网，

介绍 | vue-element-admin​panjiachen.gitee.io

下载启动。复制一份，用于“for me”。

2.修改登录页面样式

1) 打开登录页面所在：/src/views/login/index.vue

2) 去掉提示文字和第三方登录部分

① 删除<div style="position:relative">...</div>，里面包含第三方登录按钮所以

② <el-dialog>...</el-dialog>删掉，<social-sign />删掉

③ social-sign组件的引入及注册删除，src/views/login/components 目录删掉

3) 文字改为中文,都可以自行设置。

① <h3 class="title">管理系统登录</h3>

② placeholder="用户名"；placeholder="密码"

③ <el-button ...>登录</el-button>

④ 用户名和密码为空时，输入框下面的提示信息改为中文

    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 4) {
        callback(new Error('密码不能少于4位'))
      } else {
        callback()
      }
（测试接口的username,password,roles都是admin，所以密码不能少于4位。）

4）假设，有一个可以用的接口http://localhost:5000/user/login(真实接口或是测试接口http://localhost:5000，且接口还要能够返回给前端token) ，username,password,roles都是admin。

5) 修改登录界面的自动填充

loginForm

6）修改接口信息

① 根据官网Mock Data下的‘移除’相关内容，打开/vue.config.js，

删除before: require('./mock/mock-server.js')

② .env.development及.env.production中VUE_APP_BASE_API = 'http://localhost:5000’ (真实接口或是测试接口http://localhost:5000)

③ /src/api/user.js中修改 url: '/vue-element-admin/user/login',为url: '/user/login',

④ npm run dev重启,打开控制台Network,刷新页面，点击登录，此时页面并没有反应始终在登录页面，点击Name下的login，Headers是

Request URL: http://localhost:5000/user/login

Request Method: POST，Preview返回数据也是成功的，只有页面没有跳转并有一个Error弹窗，分析登录的实现。

1.登录代码执行流程：点击登录之后执行的是，/src/views/login/index.vue里methods
中handleLogin()方法，该方法会在输入用户名和密码通过验证后，异步调用user/login这个action
2.打开/src/store/modules/user.js查看user/login这个action，没问题

⑤ 查看请求/src/utils/request.js ,发现，发送请求之后返回的数据的属性名及属性值不一样。修改一下并把一些提示信息改成中文

config.headers['X-Token'] = getToken()修改成：
config.headers['Authorization'] = `Bearer ${getToken()}`

7） npm run dev重启,打开控制台Network,刷新页面，点击登录，看到获取用户信息的接口报错，控制台显示的接口是原生的接口，与自己的接口不一样

① /src/api/user.js中修改 url: '/vue-element-admin/user/info',为url: '/user/info',

② 点击登录，此时页面从登录页面跳转到了后台管理界面，但是控制台Network中有一个红的接口list,这个接口后台没有，至此登录验证及本地缓存token就完成了。

3. 测试一个roles为editor的管理员的登录，username:jack,

页面用户名的输入框下显示“请输入正确的用户名”，说明表单验证有问题。

① 查看登录页面/src/views/login/index.vue的表单验证部分，
import { validUsername } from '@/utils/validate'，发现该文件只会验证两个用户名
'admin', 'editor'，删掉它在登录页面的引用。
② 在登录页面重新写一个验证
   // 这里判断username是undefined或是没有输入用户名的时候才做判断
    const validateUsername = (rule, value, callback) => {
      if (!value || value.length === 0) {
        callback(new Error('请输入用户名！'))
      } else {
        callback()
      }
    }

4. 直接在前端实现退出登录

点击主页面的退出登录，控制台的Network中的logout接口是红色的，看到

Request URL:http://localhost:5000/vue-element-admin/user/logout，根据其只要本地缓存中token被删除就会退出登录。所以就不用后台实现退出接口了

① /src/api/user.js中删除 url: '/vue-element-admin/user/logout'这个代码块。

② 原生退出请求接口修改，只要删除本地缓存token即可

打开/src/store/modules/user.js文件,修改成

// user logout
  logout({ commit, state, dispatch }) {
    return new Promise((resolve, reject) => {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
      resetRouter()
      dispatch('tagsView/delAllViews', null, { root: true })
      resolve()
    })
  },

5. 根据自身需求修改主界面左边栏sidebar

① 删除/src/views下的除了login,dashboard,error-page及redirect这4个文件夹。

② 对照①中删除的文件夹，删除对应的router

打开/src/router文件夹，删除models文件夹，打开index.js删除modules中的引入及①对应的路由

③ 自定义路由都写在asyncRoutes中。

6. 删掉一些不用的接口，打开/src/api文件夹，删掉article.js和qiniu.js这两个不用的接口文件