目录
一、项目概述二、项目初始化2.1 前端项目初始化步骤2.2 后台项目的环境安装配置三、用户登录/登出功能实现3.1 登录功能概述3.1.1 登录状态保持3.1.2 登录逻辑：3.2 清除默认内容3.3 新建登录组件3.4 登录组件布局3.5 登录逻辑实现3.5.1 表单数据绑定3.5.2 表单数据验证3.5.3 重置功能实现3.5.4 发起登录请求3.5.6 登录成功以后的处理3.5.7 路由导航守卫控制访问权限3.5.8 退出登录功能实现总结一、项目概述
客户使用的业务服务：PC端，小程序，移动web，移动app管理员使用的业务服务：PC后台管理端。PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计电商后台管理系统采用前后端分离的开发模式前端项目是基于Vue的SPA（单页应用程序）项目前端技术栈：Vue,Vue-Router,Element-UI,Axios,Echarts后端技术栈：Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)
二、项目初始化
2.1 前端项目初始化步骤
① 安装 Vue 脚手架 ② 通过 Vue 脚手架创建项目 ③ 配置 Vue 路由 ④ 配置 Element-UI 组件库：在插件中安装，搜索vue-cli-plugin-element ⑤ 配置 axios 库：在依赖中安装,搜索axios(运行依赖)⑥ 初始化 git 远程仓库 ⑦ 将本地项目托管到 Github 或 码云 中
2.2 后台项目的环境安装配置
① 安装 MySQL 数据库 ② 安装 Node.js 环境 ③ 配置项目相关信息 ④ 启动项目 ⑤ 使用 Postman 测试后台项目接口是否正常
三、用户登录/登出功能实现
3.1 登录功能概述
3.1.1 登录状态保持
如果服务器和客户端同源，建议可以使用cookie或者session来保持登录状态如果客户端和服务器跨域了，建议使用token进行维持登录状态。
3.1.2 登录逻辑：
在登录页面输入账号和密码进行登录，将数据发送给服务器服务器返回登录的结果，登录成功则返回数据中带有token客户端得到token并进行保存，后续的请求都需要将此token发送给服务器，服务器会验证token以保证用户身份。
3.2 清除默认内容
我们使用vue脚手架创建的项目是有默认内容的，所以我们需要删除默认内容首先打开src-App.vue(根组件)，将根组件的内容进行操作梳理(template中留下根节点，script中留下默认导出，去掉组件，style中去掉所有样式)<template><div id="app"><!-- 路由占位符 --><router-view></router-view></div></template><script>export default {name: 'app',components: {}}</script><style></style>再打开router.js(路由)，将routes数组中的路由规则清除，然后将views删除将components中的helloworld.vue删除
3.3 新建登录组件
在components文件夹中新建Login.vue组件，添加template，script，style标签style标签中的scoped可以防止组件之间的样式冲突，没有scoped则样式是全局的在router.js中导入组件并设置规则：const router = new Router({routes: [{path: '/', redirect: '/login' },{path: '/login', component: Login }]})
3.4 登录组件布局
首先需要添加全局样式，在assets文件夹下面添加css文件夹，创建global.css文件，添加全局样式如下：/* 全局样式表 */html,body,#app {height: 100%;margin: 0;padding: 0;}然后在main.js中导入global.css，使得全局样式生效 import "./assets/css/global.css"然后Login.vue中的根元素也需要设置撑满全屏（在login.vue中的style标签中设置）.login_container {background-color: #2b4b6b;height: 100%;}注意：当我们给Login.vue中的内容添加样式的时候，会报错“缺少less-loader”需要安装less加载器和less(开发依赖)最终登录页面的布局和样式如下：<div class="login_container"><div class="login_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="iconfont icon-user"></el-input></el-form-item><!-- 密码 --><el-form-item prop="password"><el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" 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><style lang="less" scoped>.login_container {background-color: #2b4b6b; height: 100%; }.login_box {width: 450px;height: 300px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);.avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;}.btns {display: flex;justify-content: flex-end;}</style>其中，我们用到了element-ui的组件，需要在plugins-element.js文件中，进行elementui的按需导入：import Vue from 'vue'import {Button } from 'element-ui'import {Form, FormItem } from 'element-ui'import {Input } from 'element-ui'Vue.use(Button)Vue.use(Form)Vue.use(FormItem)Vue.use(Input)
3.5 登录逻辑实现
3.5.1 表单数据绑定
使用model绑定数据，在data中定义表单数组<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input><el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>data() {return {// 这是登录表单的数据绑定对象loginForm: {username: 'admin',password: '123456'},}},
3.5.2 表单数据验证
给<el-form>添加属性:rules，然后给<el-form-item>添加属性prop，最后在data中设置验证规则<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><el-form-item prop="username"><el-form-item prop="password">// 这是表单的验证规则对象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.5.3 重置功能实现
首先要给表单添加一个ref属性，再调用表单的resetFields()函数将表单重置到初始状态<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><el-button type="info" @click="resetLoginForm">重置</el-button>// 点击重置按钮，重置登录表单resetLoginForm() {this.$refs.loginFormRef.resetFields()},
3.5.4 发起登录请求
首先要导入axios来发送ajax请求，在main.js中导入axios并配置：import axios from 'axios'// 配置请求的根路径axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'// 挂载axiosVue.prototype.$http = axios然后在Login.vue中实现登录功能：<el-button type="primary" @click="login">登录</el-button>发起请求前会进行表单的预校验（validate），如果校验不通过则不会发送请求发送请求后，根据返回的状态码判断登录是否成功，并通过弹窗提示配置弹窗提示：在plugins-element.js中按需导入：import {Message} from 'element-ui'进行全局挂载：Vue.prototype.$message = Message;login() {this.$refs.loginFormRef.validate(async valid => {if (!valid) returnconst {data: res } = await this.$http.post('login', this.loginForm)if (res.meta.status !== 200) return this.$message.error('登录失败！')this.$message.success('登录成功')}}
3.5.6 登录成功以后的处理
处理逻辑要写在login函数内部，弹窗提示登陆成功以后// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中// 1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问// 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中window.sessionStorage.setItem('token', res.data.token)// 2. 通过编程式导航跳转到后台主页，路由地址是 /homethis.$router.push('/home')
3.5.7 路由导航守卫控制访问权限
如果用户没有登录，不能访问/home,如果用户通过url地址直接访问，则强制跳转到登录页面// 挂载路由导航守卫，to 将要访问的路径，from 代表从哪个路径跳转而来，next 是一个函数，表示放行router.beforeEach((to, from, next) => {// 如果访问的是login页面，直接next()放行if (to.path === '/login') return next()// 获取token，如果token不存在则next('/login')强制跳转const tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next()})export default router
3.5.8 退出登录功能实现
在components文件夹中新建Home.vue组件，添加template，script，style标签点击退出按钮直接清除token <template><div><el-button type="info" @click="logout">退出</el-button></div></template><script>export default {methods: {logout() {window.sessionStorage.clear()this.$router.push('/login')}}}</script>
