项目初始化和登录退出(一)
相关的知识
定义和渲染组件components,定义路由规则
路由重定向redirect
路由占位符
axios:$http发送请求
element ui提供的message弹框提示:$message
表单
- 数据绑定 :model【loginForm】
- 数据校验 :rules【loginFormRules】
- 数据引用 ref【loginFormRef】
- 表单重置 ref + resetFields()
- 登录前的预校验 ref + validate()
sessionStorage
- 登录:sessionStorage设置token;
- 退出: sessionStorage清空token
编程式导航
路由导航守卫 beforeEach
实现的功能
功能 | 详述 |
---|---|
项目初始化 | 使用vue ui手动创建项目;安装Element-ui;安装axios依赖;初始化git远程仓库 |
项目全局配置 | 安装less-loader和less开发依赖;全局样式表;配置axios($http);element ui提供的弹框提示message |
登录退出 | 渲染组件和路由;数据绑定 ;数据校验;表单重置;登录前的预校验;登录退出;路由导航守卫 |
使用到的Element-ui组件
组件名称_EN | 注册 | 备注 |
---|---|---|
Button | Vue.use(Button) | 按钮 |
Form | Vue.use(Form) | 表单 |
FormItem | Vue.use(FormItem) | |
Input | Vue.use(Input) | 输入框 |
Message | Vue.prototype.$message = Message | 消息提示 |
项目创建初始化
- 使用vue ui手动创建项目,安装
Babel
、Router
,勾选使用配置文件(不同配置存放在单独的文件中),选择hash模式的路由。 - 安装Element-ui,添加插件
vue-cli-plugin-element
,选择按需导入 import on demand。 - 安装axios依赖,选择运行依赖
axios
。 - 初始化git远程仓库,添加公钥(第一次),码云创建仓库,
git remote add origin https://gitee.com/xuzichang/仓库名称.git
+git push -u origin master
。
项目全局配置
①渲染组件和路由
-
文件夹components—>Login.vue—>初始化vue文件
vue+Tab
-
通过路由渲染组件到APP根组件
// [index.js(router.js)]
// 导入组件
import Login from '../components/Login.vue'
// 新增路由规则
const routes = [
{ path: '/', redirect: '/login' },// 路由重定向
{ path: '/login', component: Login },
]
<!-- [App.vue] -->
<template>
<div id="app">
<!-- 放置路由占位符 -->
<router-view></router-view>
</div>
</template>
②安装less-loader
和less
开发依赖
使用了less的style。
③全局样式表
/* [assets/css/global.css] */
html,body,#app{
height: 100%;
margin: 0;
padding: 0;
min-width: 1366px;
}
// [main.js]
// 导入全局样式表
import './assets/css/global.css'
④配置axios
// [main.js]
// 导入axios
import axios from 'axios'
// 配置请求的根路径 后台api请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 挂载vue的原型上
Vue.prototype.$http = axios
⑤弹框提示 element ui提供的message
// [plugins/element.js]
// 按需导入Message
import {Message} from 'element-ui'
// 挂载到Vue原型组件上
Vue.prototype.$message = Message
一、登录功能
业务流程
- 在登录页面输入用户名和密码
- 调用后台接口进行验证
- 通过验证之后,根据后台的响应状态跳转到项目主页
登录技术点:http是无状态的
①通过cookie在客户端记录状态+通过session在服务器端记录状态【前端和后台不存在跨域问题】
②通过token方式维持状态【前端和后台存在跨域问题】
1、表单
<!-- [Login.vue] -->
<!-- 登录表单 -->
<el-form ref="loginFormRef" class="login_form" :model="loginForm" :rules="loginFormRules">
<!-- 用户名 -->
<el-form-item prop="username">
<el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input
prefix-icon="iconfont icon-3702mima"
v-model="loginForm.password"
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、数据绑定 :model
表单form—>:model
="loginForm",loginForm对象定义在data中
表单项input—>v-mode
="loginForm.username",绑定到loginForm对象的username上
// [Login.vue -> data]
// 登录表单的数据绑定对象
loginForm: {
username: '',
password: ''
}
3、数据校验 :rules
表单form—>:rules
="loginFormRules",loginFormRules校验对象定义在data中,每一个属性都是一个校验规则
表单项form-item—>prop
="username",指定验证规则
// [Login.vue -> 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' }
]
}
4、表单重置 ref + resetFields()
表单form—>ref
="loginFormRef",loginFormRef表单引用对象
通过$refs
引用获取表单对象loginFormRef,调用表单对象loginFormRef的resetFields()
方法重置表单
// [Login.vue -> methods]
// 重置登录表单
resetLoginForm() {
this.$refs.loginFormRef.resetFields()
}
5、登录方法
// [Login.vue -> methods]
// 登录前预验证
login() {
this.$refs.loginFormRef.validate(async (valid) => {
// 不发起请求
if (!valid) return
// 发起请求
const { data: result } = await this.$http.post('login', this.loginForm)
if (result.meta.status !== 200) return this.$message.error('登录失败')
this.$message.success('登录成功')
// 1.将登录成功之压的 token,保存到客户端的sessionstorage中
// 1.1项目中出了登录之外的其他API接口,必须在登录之后才能访问
// 1.2 token只应在当前网站打开期间生效,所以将 token保存在sessionStorage中
window.sessionStorage.setItem('token', result.data.token)
// 2.通过编程式导航跳转到后台主页,路由地址是/home
this.$router.push('/home')
})
}
①登录前的预校验 ref + validate()
this.$refs.loginFormRef.validate(async (valid) => {
// 不发起请求
if (!valid) return
// 发起请求
const { data: result } = await this.$http.post('login', this.loginForm)
if (result.meta.status !== 200) return this.$message.error('登录失败')
this.$message.success('登录成功')
// ......
})
②登录后 设置token + 编程式导航
- 将登录成功之压的 token,保存到客户端的sessionstorage中
- 项目中出了登录之外的其他API接口,必须在登录之后才能访问
- token只应在当前网站打开期间生效,所以将 token保存在sessionStorage中
- 通过编程式导航跳转到后台主页,路由地址是/home
this.$refs.loginFormRef.validate(async (valid) => {
// ......
window.sessionStorage.setItem('token', result.data.token)
this.$router.push('/home')
})
6、路由导航守卫 beforeEach
如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面。
router.beforeEach((to[将要访问的路径], from[从哪个路径跳转而来], next[函数,表示放行]) => {})
// [index.js]
const router = new VueRouter({
routes
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// next()放行 next('/login')强制跳转
if (to.path === '/login') return next()
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()
})
export default router
二、退出功能
基于token的方式,只需要销毁本地的token即可。后续的请求必须重新登录生成一个新的token之后才可以访问页面。
// [Home.vue]
logout() {
// 清空token
window.sessionStorage.clear()
// 编程式导航跳转到登录页
this.$router.push('/login')
}