Vue 电商PC后台管理(ElementUI)
Vue 电商PC后台管理(ElementUI)
1.项目概述
1.1电商项目基本业务概述
根据不同的场景，电商系统一般都提供了PC端、移动 APP、移动 Web、微信小程序等多种终端访问方式。
1.2电商后台管理系统的功能
电商后台 管理系统同用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。
1.3电商后台管理系统的开发模式（前后端分离）
电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于Vue技术栈的SPA项目。
1.4电商后台管理系统的技术选型
1.前端项目技术栈
- Vue
- Vue-router
- Element-UI
- Axios
- Echarts
2.后端项目技术栈
- Node.js
- Express
- Jwt
- Mysql
- Sequelize
2.项目初始化
2.1前端项目初始化步骤
① 安装vue脚手架
② 通过 vue 脚手架创建项目
③ 配置 vue 路由
④ 配置 Element-UI 组件库
⑤ 配置 axios 库
⑥ 初始化 git 远程仓库
⑦ 将本地项目托管到 Github 或码云中
2.2后台项目的环境安装配置
① 安装MySQL数据库
② 安装Node.js 环境
③ 配置项目相关信息
④ 启动项目
⑤ 使用Postman 测试后台项目接口是否正常
3.登录/退出功能
3.1登录概述
1.登录业务流程
① 在登录页面输入用户名和密码
② 调用后台接口进行验证
③ 通过验证之后，根据后台的响应状态跳转到项目主页
2.登录业务的相关技术点
- http是无状态的
- 通过cookie在客户端记录状态
- 通过session在服务器端记录状态
- 通过token方式维持状态
3.2登录 —— token 原理分析
3.3登录功能实现
1.登录页面的布局
通过Element-UI组件实现布局
- el-form
- el-form-item
- el-input
- el-button
- 字体图标
首先打开 vue-shop 项目
- 查看文件，文件夹在工作区，暂存区的状态
git status
- 创建并切换
login分支
git checkout -b login
- 查看所有分支
git branch
2.Login.vue 文件解读
这是一个 Vue 单文件组件
祖传 Vue 布局如下
<template><div></div>
</template><script>export default {}
</script><style lang="less" scope></style>
我们需要在
<template>标签中进行布局在
<script>标签中编写用户行为和数据定义在
<style>标签中定义样式
我用到了 ElementUI 库，主要是记录一下这个库的用法
先放上源码，我会对下面的代码进行解读
<template>
<div class="login_container"><div class="login_box"><!-- 头像区域 --><div class="avatar_box"><img src="../assets/logo.png" alt=""></div><!-- 登录表单区域 --><el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" 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" type="password" prefix-icon="iconfont icon-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>
</template><script>export default {data() {return {// 这是登录表单的数据绑定对象loginForm: {username: "",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: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }]}}},methods: {resetLoginForm(){// 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果this.$refs.loginFormRef.resetFields()},login(){this.$refs.loginFormRef.validate((valid)=>{console.log(valid);})}}}
</script><style lang="less" scope>.login_container {background: #2b4b6b;height: 100%;position: relative;}.login_box {width: 450px;height: 300px;background: #ffffff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.avatar_box {width: 130px;height: 130px;border: solid 1px #eee;border-radius: 50%;background: #ffffff;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);img {width: 100%;height: 100%;border-radius: 50%;background: #eee;}}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 10px;box-sizing: border-box;}.btns {display: flex;justify-content: flex-end;}
</style>
在
<el-form>标签中添加:model属性，这是登录表单的数据绑定对象，Ta需要和<el-input>标签中的v-module配合使用
:rules是登录表单验证，Ta需要在 JS 区域的 data 中返回一个登录表单验证对象，其中的属性为需要验证的内容，如何使用？在el-form-item标签中新增prop属性，使它的值为刚刚在 data 中定义的属性值
<el-input>标签中的prefix-icon属性是用来设置前置字体图标的，我引用的阿里矢量图库，也可以通过suffix-icon属性在 input 组件的尾部增加显示图标。
<el-form>表单中的ref属性是为当前表单注册一个实例对象，Ta的属性名就是这个实例对象的名称，比如说我自定义的名称为loginFormRef，那我就可以通过this.$refs.loginFormRef来访问到这个实例对象。
resetFields可以通过this.$refs.loginFormRef.resetFields()调用此方法，此方法的作用是：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。
validate可以通过this.$refs.loginFormRef.validate()调用此方法，此方法的作用是：对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise。Function(callback: Function(boolean, object))
3.路由导航守卫控制访问权限
如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面
// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to, from, next) => {// 如果用户访问的登录页，直接放行if (to.path === "/login") return next()// 从 sessionStorage 中获取到保存的 token 值const tokenStr = window.sessionStorage.getItem("token")// 没有 token ，强制跳转到登录页if (!tokenStr) return next("/login")next()
})
3.4退出
退出功能实现原理
基于token 的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面。
// 清空token
window.sessionStorage.clear()
// 跳转到登录页
this.$router.push('/login')
解决 eslintrc 格式化报错问题
在项目中新建 .prettierrc 文件，文件内容如下
{"semi": false,"singleQuote": true
}
“semi”: false 表示移除分号(
Vue 电商PC后台管理(ElementUI)相关推荐
- Vue电商项目—订单管理—订单列表模块-10
Vue电商项目-订单管理-订单列表模块-10 1.1 订单管理概述 订单管理模块用于维护商品的订单信息, 可以查看订单的商品信息.物流信息, 并且可以根据实际的运营情况对订单做适当的调整. 1.2 订 ...
- Vue电商系统后台API接口
项目演示入口 ===> 1. 电商管理后台 API 接口文档 1.1. API V1 接口说明 接口基准地址:http://127.0.0.1:8888/api/private/v1/ 服务端已 ...
- 电商Sass平台-商城运营后台原型-仓储管理-订单管理-店铺运营-采购管理-数据分析-交易分析-留存分析-客户管理-用户运营-围栏管理-商品管理-流量分析-电商erp后台管理-用户权限-销量分析
axure作品内容介绍:电商Sass平台-商城运营后台原型-仓储管理-订单管理-平台运营-采购管理-数据分析-交易分析-留存分析-客户管理-用户运营-围栏管理-商品管理-店铺装修-门店管理-商品档案- ...
- 前端学习（2740）：重读vue电商网站50之Element-UI 组件按需加载
通过 CDN 优化 ElementUI 的打包 虽然在开发阶段,我们启用了 element-ui 组件的按需加载,尽可能的减少了打包的体积,但是那些被按需加载的组件,还是占用了较大的文件体积.此时,我 ...
- 前端学习（2702）：重读vue电商网站23之element-ui 如何按需导入
在element.js 文件中,按照如下方式,进行按需导入即可.然后通过 Vue.use()方法进行引用.(优化点:也就是将组建导入都放在一起,如果组件过多的话,支持换行)
- Vue电商后台管理系统项目开发实战（一）
前言 当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
- SSM毕设项目大型零售电商平台——购物车管理子系统6voh8（java+VUE+Mybatis+Maven+Mysql）
SSM毕设项目大型零售电商平台--购物车管理子系统6voh8(java+VUE+Mybatis+Maven+Mysql) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + ...
- Vue电商后台管理系统（1）
Vue电商后台管理系统(1) 登录 在components文件夹下创建登录组件,Login.vue,并快速生成template.script和style骨架. 配置路由,进入router文件夹,导入L ...
- 前端03.vue电商管理平台项目实战
VUE电商管理平台 前部分内容见网站 https://share.mubu.com/doc/7vPChNBEZl 附typora自动标号 https://zhuanlan.zhihu.com/p/ ...
最新文章
- Qt|Http笔记-两种方式发送http协议数据，获取服务器数据（GET方法）
- 中国国际影响力优秀学术期刊2020年榜单发布！
- task.run 强制结束线程_图文介绍进程和线程的区别
- shiro访问html没有验证码,Shiro在web应用中实现验证码、回显登录失败信息
- windos 为什么会突然服务停止了_女生为什么会突然说分手？
- Struts2（一）之认识struts2
- MyQL 解压版本安装与默认密码查找（Mysql版本mysql-5.7.26）
- 【VS插件】VS2012设置透明背景
- 用Python生成人人贷借款理由词云图
- python性能差_Python 性能分析大全
- 认识SlackwareLinux及制作系统安装磁片之关於bootdisk(转)
- Skleran-线性模型-最小角回归（LARS）
- 徐志摩《再别康桥》赏析
- Java 8 新特性Lambda 表达式
- css特效之openbox
- MySQL_条件查询
- ubuntu22.04安装网易云音乐报错解决方案
- SQL行转列、列转行的简单实现
- Unity接入海康网络摄像头SDK
- 比亚迪DM-i双模驱动模式概述
热门文章
- android listview 向上自动滚动效果,Android通过代码控制ListView上下滚动的方法
- python pandas n行求和,Python 的 Pandas 对矩阵的行进行求和
- mysql 改表面_CSS表面（outline）是什么【html5教程】,CSS
- .net java 开源_为什么说微软开源 .net 也拼不过 java？
- Python学习入门1：Python 新手入门引导
- element 点击控制expend的显示隐藏_四、ArcGIS Runtime SDK for iOS 100.X教程系列之图层控制显示隐藏...
- react native bundle读取assets_react-native-easy-app 详解与使用之 （一）AsyncStorage
- 小汤学编程之JAVA基础day09——常用类（一）：比较器、内部类和包装类
- 第八章 数据结构与算法
- HTMLCSS常见问题整理（四）