element-ui的简单使用--登录表单的创建

0.利用vue脚手架创建项目

一.布局

1.登录官网https://element.eleme.cn/#/zh-CN在[组件]中找到需要的组件

https://element.eleme.cn/#/zh-CN/component/form
表单的ui组件运用

2.复制对应代码写入.vue文件中的< template >标签中

<el-form>
  <!-- 用户名 -->
  <el-form-item>
    <el-input prefix-icon="el-icon-user"></el-input>
  </el-form-item>
  <!-- 密码 -->
  <el-form-item>
    <el-input prefix-icon="el-icon-lock" type="password"></el-input>
  </el-form-item>
  <!-- 按钮 -->
  <el-form-item>
    <el-button type="primary">登录</el-button>
    <el-button type="info">重置</el-button>
  </el-form-item>
</el-form>

若使用第三方导入的字体图标,下载后,打开示例html,根据使用步骤进行使用

(1)将下载的fonts文件夹放在资源文件夹/src/assets中
(2)在main.js中导入字体图标文件

// 导入字体图标
import './assets/fonts/iconfont'

(3)添加类名使用字体图标

<!-- 用户名 -->
<el-form-item>
  <el-input prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item>
  <el-input prefix-icon="iconfont icon-lock_fill" type="password"></el-input>
</el-form-item>

3.element-ui是按需导入的,因此需要在plugins文件夹中找到element.js中导入用到的组件

import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'

// 注册为全局可用的组件
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

二.表单的数据绑定

1.在行为区(即< script >标签中)的data中定义数据对象

<script>
export default {
  data() {
    return {
      // 登录表单的数据绑定对象
      loginForm: {
        username: 'jennie',
        password: '123'
      }
    }
  }
}
</script>

2.为el-form加上:model属性进行数据对象绑定

<el-form :model="loginForm" label-width="0px" class="login_form">

3.为每个表单项的文本输入框使用v-model绑定到对象具体的属性

<el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>

三.表单的数据验证

1.为el-form通过属性绑定指定rules校验对象
2. 在行为区(即< script >标签中)的data中定义校验对象,其中每一个属性都是一个验证规则

// 表单验证规则对象
loginFormRules: {
  // 验证用户名
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      min: 3,
      max: 10,
      message: '长度在 3 到 10 个字符之间',
      trigger: 'blur'
    }
  ],
  // 验证密码
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      min: 6,
      max: 15,
      message: '长度在 6 到 15 个字符之间',
      trigger: 'blur'
    }
  ]
}

3.对不同表单项el-form-item通过prop指定不同验证规则进行表单的验证

<!-- 用户名 -->
<el-form-item prop="username">
  <el-input
    v-model="loginForm.username"
    prefix-icon="el-icon-user"
  ></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
  <el-input
    v-model="loginForm.password"
    prefix-icon="el-icon-lock"
    type="password"
  ></el-input>
</el-form-item>

四.表单的重置（resetFields的使用）

1.获取表单实例对象
方法:给需要获取实例对象的组件添加ref的引用，并且为每一个数据项使用prop绑定数据（！！！重要）

<el-form :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form" ref="loginFormRef">
	<!-- 用户名 -->
	<el-form-item prop="username">
	  <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
	</el-form-item>
	<!-- 密码 -->
	<el-form-item prop="password">
	  <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
	</el-form-item>
	<!-- 按钮 -->
	<el-form-item class="btns">
	  <el-button type="primary" @click="login">登录</el-button>
	  <el-button type="info" @click="resetLoginForm">重置</el-button>
	</el-form-item>
</el-form>

2.在重置按钮上添加点击重置事件

<el-button type="info" @click="resetLoginForm">重置</el-button>

3.在行为区(即< script >标签中)的methods中定义点击重置事件,其中使用实例对象中的方法resetFields

注:在methods定义的方法中,this指向当前组件的实例对象,其中有一个属性$refs包含我们添加的ref引用对象

<script>
export default {
  data() {
    return {...}
  },
  methods: {
    // 重置
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields()
    }
  }
}
</script>

五.登录

包含预验证(使用validate)、发送axios请求、进行弹窗提示、保存登录信息、跳转页面。
1.为登录按钮绑定单击事件

<el-button type="primary" @click="login">登录</el-button>

2.定义登录函数
validate()接收回调函数，从而获取验证结果。因此可以在里面写匿名的箭头函数，箭头函数的第一个形参为验证的布尔值，通过该布尔值即可判断表单验证是否成功(验证规则为前面定义的loginFormRules)。

（1）配置发送请求所用的axios包–>在入口文件main.js中对axios进行全局配置

// 导入axios包
import axios from 'axios'
// 配置请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 将axios包挂载到vue原型对象上
Vue.prototype.$http = axios

（2）发送请求并配置弹窗提示
在element.js中导入Message组件，Message的配置需要进行全局挂载

import { Message } from 'element-ui'
Vue.prototype.$message = Message

发送请求并调用弹窗方法显示请求结果

login() {
  this.$refs.loginFormRef.validate(async valid => {
    if (!valid) return false
    // 通过http发送axios请求，post(请求地址，请求对象)
    // 如果返回的是promise对象，可以使用async await简化操作,然后进行解构
    const { data: res } = await this.$http.post('login', this.loginForm)
    console.log(res)
    if (res.meta.status !== 200) {
      // 登陆失败
      return this.$message.error('登录失败')
    }
    this.$message.success('登录成功')
  })
}

（3）登录信息的保存
将登录成功后的token，保存到客户端的sessionStorage中。
localStorage是持久化的存储机制，sessionStorage是会话期间的存储机制，token只在当前网站打开期间生效，因此保存在sessionStorage中。

// 请求返回包含token，因此可以直接保存
window.sessionStorage.setItem('token', res.data.token)

（4）编程式导航跳转后台主页。

// 编程式导航跳转 $router是编程式导航对象，包含push方法跳转
this.$router.push('/home')

六.登录拦截

未登录直接通过url访问特定页面，重新导航到登录页面。因此给路由对象挂载一个导航守卫。router.js更改后如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to是将要访问的路径，from是从哪个路径跳转而来
  // next是函数，next()为放行，next('./login)为强制跳转
  if (to.path === '/login') {
    return next()
  }
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) {
    return next('/login')
  }
  next()
})
export default router

如果出现RangeError: Maximum call stack size exceeded，可能是因为路由跳转出现了死循环，需要排查一下问题出现的地方。

七.退出登录

实际上只需要销毁保存的token。

logout() {
  // 清空sessionStorage
  window.sessionStorage.clear()
  // 编程式导航
  this.$router.push('/login')
}