vue-element-admin登录验证使用

2019-06-28 本文已影响0人 xyz098

安装
javascript基础介绍
vue.js文档
vue-element-admin 登录验证

安装

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev

npm命令参数

npm install 可简写为 npm i
-g  (--global)         // 安装当作全局包
-S  (--save)           // 安装包写入package.json的dependencies
-D  （--save-dev）     // 安装的包将写入packege.json里面的devDependencies
-O  (--save-optional)  // 安装的包将写入packege.json里面的optionalDependencies
-E  (--save-exact)     // 安装的包的版本是精确指定的
-B  (--save-bundle)    // 安装的包将写入packege.json里面的bundleDependencies

javascript基本介绍

ECMAScript6的标准

=> 函数

=> 是function的简写形式，支持expression 和 statement，拥有词法作用域的this值。

([param] [, param]) => {
   statements
}

param => expression

例子

const arr = [1,2,3];
var temp = [];

arr.map( (item,index) => item + 1); 
等价于 arr.map( function(item) { return item + 1}; );

arr.forEach( item => {
    if(item === 1) {
        temp.push(item);
    }
});
等价于 
arr.forEach( function(item) { if (item === 1) { temp.push(item)} } );

export default 模块

export js不能支持原生模块化，可通过引用外部库实现模块化。由export 和 import 组成.每一个模块都有自己单独的作用域。

// test.js
export var name = 'vera'         // 导出test.js模块一个变量

var name = 'vera'
var age = '25' 
export {name, age}            // 导出多个变量

在其他模块引用
// index.js ,使用花括号导出模块的方法或变量
import {name, age}  from './test.js'

module 整体导入

 //test.js
 export function getName() {
    return name;
 }
 export function getAge(){
   return age;
 } 
 
import * as test form './test.js';
等价于  module test from './test.js';
test.getName();

export default 不管什么模块，通过 export default 指令就能加载到默认模块，不需要通过花括号来指定输出的模块,一个模块只能使用 export default 一次

export var city = 'shenzhen'

export default {
  var name = 'vera'
  var age = '25' 
  function getAge() {}
}

// 导入的时候不需要花括号，同时可以导出指定的变量
import test,{ city } from './test.js'

vue.js 文档

vue实例被创建时要经过一系列的初始化过程。例如：设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
$ 前缀，代表vue暴露的实例属性和方法，与用户定义的属性区分开来
: 缩写 <a v-bind:href="url">...</a> 缩写 <a :href="url">...</a>
@ 缩写 <a v-on:click="doSomething">...</a> 缩写 <a @click="doSomething">...</a>
. 修饰符，指出一个指令应该以特殊方式绑定。？？
: 参数，指令能够接收参数。<a v-bind:href="url">...</a> href是参数，告知v-bind指令元素herf与表示式url的值绑定。 <a v-on:click="doSomething">...</a> 参数是监听的事件名。
计算属性computed基于响应式依赖进行缓存，只有相关响应依赖发生变化才会重新求值。
方法methods 每当重新渲染时，调用方法总会再次执行函数。
侦听器watch 当数据发生变化时执行异步或开销较大的操作。
class对象绑定，active是否显示取决于isActive数据属性 <div v-bind:class="{ active: isActive }"></div> ，data: { isActive: true }
style内联样式，v-bind:style对象语法。<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
条件v-if 是一个指令，应用在元素上。v-else-if v-else 例如<div v-if="type === 'A'">A</div>
key管理可复用的元素
循环v-for 对象遍历第一个是值，第二个是key，第三个是索引顺序, <div v-for="(value, name, index) in object"> ... </div> 结合 key使用 <div v-for="item in items" v-bind:key="item.id"> ... </div>
变异方法，push()、pop()、shift()、sort()、reverse()的调用将改变原始数组
替换数组，filter()、concat()、slice()返回新数组
任何数据都不会被自动传递到组件里，组件都独立的作用域，为了迭代数据到组件，需要使用prop
事件修饰符. 提交事件不再重载页面 <form v-on:submit.prevent="onSubmit"></form>
用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。表单

vue-element-admin 登录验证

vue-element-admin 简书

找代码思路： src/router (index.js) ----> src/views/login (index.vue) ----> scr/api (alert.js)

路由代码 src/router (index.js)

export const constantRoutes =   [
  ......
  {
      path: '/login',
      component: () => import('@/views/login/index'),
      hidden: true
  },
  ......
]

src/views/login (index.vue)

    handleLogin() {
      console.log('username', this.loginForm.username)
      if (this.loginForm.username.length === 0) {
        alert('请输入邮箱号')
        return
      }
      if (this.loginForm.password.length === 0) {
        alert('请输入密码')
        return
      }
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          // 代码调到了src/store下的user.js,调用了里面的login方法
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch(error => {
              console.log('xxx', error)
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

src/stroe (user.js)

  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      // 调用了api/user.js
      login({ username: 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)

import request from '@/utils/request'
export function login(data) {
  return request({
    // 使用默认前缀
    url: '/user/login',
    method: 'post',
    data
  })
}

src/utils (request.js)


// create an axios instance
const service = axios.create({
  // 使用了默认前缀
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000 // request timeout
})

修改默认前缀变量 .env.development .env.production .env.staging
```
VUE_APP_BASE_API = 'http://127.0.0.1:9093/api/v1'
```

后端代码实现三个接口，即可对接登录

curl -XPOST  http://127.0.0.1:9093/api/v1/user/login 
{"code":200,"status":"success","data":{"token":"test-token"}}

curl -XPOST  http://127.0.0.1:9093/api/v1/user/info?token=xxx 
{"code":200,"status":"success","data":{"roles":"Admin"}}

curl -XPOST  http://127.0.0.1:9093/api/v1/user/logout
{"code":200,"status":"success","data":"sucess"}