vue elementui 管理系统模版 vue element admin教程

目录

安装

解决跨域问题

登录权限修改

1.首先找到登录页面

2.修改api

3.获取用户信息

---

这里会在一个项目的基础上讲解如何去改动模板。项目是在vue-element-template上改动的，如果需要什么可以从vue-element-admin里拿代码用。

安装

首先我们安装vue-element-template和vue-element-admin。

可以直接参考官方文档进行学习：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD

没有git的可以先下载git再进行下载。第一次下载比较慢，需耐心等待。

vue-element-admin安装成功：

vue-element-template安装成功：

两个是运行在不同的端口，可以同时运行。

解决跨域问题

查看文档：https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

这里我使用代理。

1.在vue.config.js里修改代码，加上代理设置

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    //before: require('./mock/mock-server.js'),//请求模拟数据
    proxy: {
      "/": {
        target: "http://localhost:8090/",
        pathRewrite: {"^/" : ""}
      }
    },
  },

2.修改.env.development

如果你的后端接口设置了项目名称需要修改成项目名称，如果没有直接修改成“/”

# base api
VUE_APP_BASE_API = '/yyedu'

3.重新运行项目

这里修改了配置文件，需要重启项目。重启应该就可以了。

登录权限修改

参考

1.首先找到登录页面

在scr\viwe\login\index.vue里找到登录页面

先简单修改一下页面

<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">

      <div class="title-container">
        <h3 class="title">优越教育收费管理系统</h3>
      </div>

      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="Username"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="Password"
          name="password"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>

      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>

    </el-form>
  </div>
</template>

<script>
// import { validUsername } from '@/utils/validate'

export default {
  name: 'Login',
  data() {
    // const validateUsername = (rule, value, callback) => {
    //   if (!validUsername(value)) {
    //     callback(new Error('请输入正确的用户名'))
    //   } else {
    //     callback()
    //   }
    // }
    // const validatePassword = (rule, value, callback) => {
    //   if (value.length < 6) {
    //     callback(new Error('密码长度不小于6位数'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur',message: '账号不可为空'}],
        password: [{ required: true, trigger: 'blur',message: '密码不可为空'}]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
           this.$message({
                  type: 'error',
                  message: '用户名或密码不正确，请重新输入!'});
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

密码验证规则改了一下。默认的是用户名必须为admin,密码长度不小于6位数。实际上这个是后端验证的。我就把默认的规则去掉了。

2.修改api

点击登录后会触发action.

找到store文件下的user/login

这里调用了login方法，按住ctrl点进去看

当点击登录时会调用后端的登录api,我已经修改好了url,与后端接口对应。

修改后重新登录。

登录成功或失败都会有响应。

成功对接后端接口后，就是修改前端了。

3.获取用户信息

首先我们来分析一下代码

当我们登录请求api时它会先进入request.js(在src/utils文件下)。

我们来看response.

这里会得到一个响应数据。根据res.code来判断是否请求成功。

我在后端设置成功的code是100，这个根据后端设置的code来改。登录成功后它就会直接走return res.返回数据。

把response在控制台打印处来。

这里返回的是一个token.为什么返回的是一个token而不是用户信息呢？

我们来看代码分析。

找到permission文件

在登录成功后除了把vuex里的token更新，还会把token存到cookie中.

首先判断cookie里是否存储了token，如果访问的是登录页面，它会自动跳到首页。（因为已经登录了）

如果store里姓名不为空,放行。否则触发action:user.getInfo.这里走的是这一步。

49行调用了getInfo方法，点进去看。

这里携带了token.

来看request.js

登录成功后获取用户信息请求api需要携带token.这里配置了一下。

看一下后端代码

通过Token_Header得到头信息，token有前缀，前缀后的就是token了。

所以request.js需要配置一下头信息。

请求成功后把数据打印出来。

把name放到store里。

执行 commit('SET_NAME', response.extend.user.name)

这时再回过头看permission.

应该能看懂了。

请求用户成功后就自动放行到首页了。

看router

请求路径为/自动转发到首页