一、项目概述
二、项目初始化
- 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/'
// 挂载axios
Vue.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. 通过编程式导航跳转到后台主页，路由地址是 /home
this.$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>

总结

Vue项目实战之电商后台管理系统(一) 用户登录模块相关推荐

前端开发Vue项目实战：电商后台管理系统（一）前后端搭建
目录 1. 项目概述 2. 前端项目初始化步骤 3. 后台项目的环境安装配置下载安装phpStudy,添加数据库 Postman测试工具验证 1. 项目概述电商项目基本业务概述: 根据不同的应用 ...
前端开发Vue项目实战：电商后台管理系统（二）-- 登录退出功能 --主页界面
目录 1. 登录/退出功能 1.1 登录概述 1.2 token 原理分析 1.3 登录功能实现 1.3.1 Git 创建分支 1.3.2 渲染Login组件并实现路由重定向 1.3.3 设置背景颜色 ...
Vue项目实战之电商后台管理系统(二) 主页模块
前言目录前言一.主页布局 1.1 整体布局 1.2 头部区域布局 1.3 左侧菜单布局 1.3.1 静态布局 1.3.2 通过axios请求拦截器来进行权限验证 1.3.3 通过axios获取左 ...
Vue项目实战之电商后台管理系统(八) 订单管理及数据统计模块
前言目录前言一.订单管理模块 1.1 新建订单管理组件 1.2 订单管理模块效果图 1.3 订单管理模块页面布局及展示数据 1.4 点击修改按钮弹出修改地址对话框 1.5 点击查询物流进度按钮弹 ...
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统主页制作
黑马程序员视频_主页制作目录一.主页布局 1.整体布局:先上下划分,再左右划分 2.主页header布局 3.左侧菜单布局:菜单分为两级,并且可以折叠二. 通过接口获取菜单数据 1.请求预处理 ...
前端开发Vue项目实战：电商后台管理系统（八）------ 订单管理模块
git checkout -b order git push -u origin order 目录 1. 挂载组件及基本布局 2. 获取订单数据 3. 表格渲染 4. 分页功能 5. 实现省市区县数据 ...
基于Vue实现智慧社区电商后台管理系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Java项目.前端项目.小程序开发.Python开发.大数据和 ...
Vue项目实战项目记录（电商后台管理系统）
学习视频:本站Vue实战项目:电商管理系统(Element-UI) 项目的实现效果前言时间:2021/10/5--2021/10/20 断断续续的完成了这个项目 gitte完整项目地址后台项目文 ...
【实战】电商后台管理系统：路由封装基础布局
目录 1. 项目介绍 1.1 项目功能 1.2 项目架构图 1.3 项目地址 2. 路由的二次封装 3. 页面布局部分 3.1 主页面布局 3.2 商品列表功能实现 1. 项目介绍 1.1 项目功能 ...

Vue项目实战之电商后台管理系统(一) 用户登录模块

目录

一、项目概述

二、项目初始化

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 退出登录功能实现

总结

Vue项目实战之电商后台管理系统(一) 用户登录模块相关推荐

最新文章

热门文章