vue element-UI后台管理系统学习笔记(一)
2020-07-07 14:41
351 查看
登录业务流程
- 在登录页面输出用户名与密码
- 调用后台接口进行验证
- 通过验证之后,根据后台的响应状态跳转到项目主页
登录业务的相关技术点
- http是无状态的
- 通过cookie在客户端记录状态
- 通过session在服务器端记录状态
- 通过token方式维持状态
登录/退出token原理分析 token相当于验证码
登录功能的实现
1. 登录页面的布局
通过Element-UI组件实现布局
- el-form
- el-form-item
- el-input
- el-button
- 字体图标 el-icon
HTML部分
<div class="login_container"> <div class="longin_box"> <!-- 头像区域 --> <div class="avatar_box"> <img src="./../assets/logo.png" alt /> </div> <!-- 登录表单区域 --> <el-form ref="loginFormRef" :model="LoginForm" :rules="loginFormRules" label-width="0px" class="login_form" > <!-- 用户名 --> <el-form-item prop="username"> <el-input v-model="LoginForm.username" prefix-icon="el-icon-user-solid"></el-input> </el-form-item> <!-- 密码 --> <el-form-item prop="password"> <el-input v-model="LoginForm.password" prefix-icon="el-icon-s-cooperation" 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> </div> </div>
el为开头的标签是引用的element-UI组件使用的组件库标签,它们有特定的样式,这些样式可以通过其配套的API文件修改,引入element-UI组件库有两种方式,一种整体引入,一种按需引入,下面是按需引入的js配置代码。
import Vue from 'vue' import { Button, Form, FormItem, Input, Message } from 'element-ui' Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) // 全局挂载,$Message是一个自定义属性,可随意修改名字 Vue.prototype.$message = Message
ref 的作用类似于 dom,被绑定的节点可以通过 $refs 可查看获取并进行相关操作。element-UI框架的一些组件附带了一些功能,校验 rules、重置表单 resetFields() 、登录之前的校验 validate()。
JS部分
data() { return { // 登录表单的登录绑定数据 LoginForm: { username: 'admin', password: '123456' }, // 表单验证规则 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' } ] } } }, methods: { //点击按钮,重置登录表单 resetLoginForm() { // console.log(this); this.$refs.loginFormRef.resetFields() }, // 登录 login() { this.$refs.loginFormRef.validate(async valid => { // console.log(valid); if (!valid) return 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('登录成功') // 1.将登录成功后的token,保存到客户端的sessionStorage中 // 1.1项目中除了登录之外的其他API接口必须在登录之后才能访问 // 1.2token只应在当前网站打开期间生效,所以将token保存在sessionStorage中 window.sessionStorage.setItem('token', res.data.token) // 2.通过编程式导航跳转到后台主页,路由地址是/home this.$router.push('/home') }) } }
const { data: res } = await this.$http.post('login', this.LoginForm) // console.log(res); if (res.meta.status !== 200) return this.$message.error('登录失败') 在 login 函数中, data 指的是在 validate() 这个函数执行后会传回一个 promis ,在使用 async - await 后(this.$http.post('login', this.LoginForm) 通过 axios 指定了 login 接口 ,传入 this.LoginForm 用户名与密码,之后会传回相应数据),服务器传回的有效数据会存储在 data 里,data : res 是一个赋值操作。
CSS部分
<style lang="less" scoped> .login_container { height: 100%; background-color: #2b4b6b; } .longin_box { width: 450px; height: 300px; background-color: #ffffff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); .avatar_box { height: 130px; width: 130px; border: 1px solid #eeeeee; border-radius: 50%; padding: 10px; box-shadow: 0 0 10px #ddd; position: absolute; left: 50%; transform: translate(-50%, -45%); img { width: 130px; height: 130px; border-radius: 50%; background-color: #eeeeee; } } .login_form { position: absolute; bottom: 0; width: 100%; padding: 20px; box-sizing: border-box; } .btns { display: flex; justify-content: flex-end; } } </style>
Axios配置
import axios from 'axios' axios.defaults.baseURL = 'http://XXXXXXXXXXXXXXXXXX' Vue.prototype.$http = axios
在 main.js 引入 axios,再将 axios 默认接口设置为与后台约定好的接口,最后将 axios 全局设置通过$http即可引用。
Router设置
import Vue from 'vue' import VueRouter from 'vue-router' import Login from './../components/login.vue' import Home from './../components/Home.vue' Vue.use(VueRouter) const routes = [{ path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) // 挂载路由导航守卫 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
首先导入组件路径,通过 routes 数组配置 URL 地址与相应的组件显示,而后路由导航守卫,router.beforeEach((to, from, next) 作用是在用户没有权限(未登录通过修改URL地址跳过登录阶段直接进入后续页面的情况)将地址重新修改为登录页。
- to 将要访问的路径
- from 代表从哪个路径访问而来
- next 是一个函数,代表放行 ,有两种 next() 直接放行到下一个页面,next(’/login) 放行到相应页面
window.sessionStorage.getItem(‘token’) 里的 sessionStorage 指的是浏览器自带的一个暂存信息的区间,通过 setItem 可以往里面存储,getItem 就是往里拿相应的信息了,‘token’ 是自定义的属性名。
如何清除token并返回登录页?
window.sessionStorage.clear() this.$router.push('/login')
相关文章推荐
- 分享一个VUE Element-UI 的多级菜单动态渲染的组件
- vue element-ui 优化打包 bundle js 大小
- vue element自定义合并行列
- 有关vue element 表格错位问题解决方法
- vue element-ui实现input输入框金额数字添加千分位
- (精华)2020年7月11日 vue element-ui修改样式不生效
- vue element-ui源码的学习--table原理
- vue element表格下面的分页按钮
- vue element上一步下一步跳转
- vue element-ui上传视频
- vue element 使用多个slot-scope作用域插槽时
- vue Element 自定义树形组件
- vue element 表单验证
- Vue element-ui 里面的table导出excel表格 步骤
- vue Element-UI 分页使用(1)
- cmd创建vue element-UI工程
- vue element-ul el-table表格自定义表头(多种实现法)
- Vue Element使用icon图标教程详解(第三方)
- vue element-ui 表格嵌套表格的数据处理
- Vue element表格中实现图片的单击放大、悬浮放大、长按放大