Vue项目实战项目记录（电商后台管理系统）
学习视频：本站Vue实战项目：电商管理系统（Element-UI）
项目的实现效果
前言
时间：2021/10/5——2021/10/20 断断续续的完成了这个项目
gitte完整项目地址
后台项目文件
复盘一下整体的项目流程
- 项目介绍
1、总体介绍：该网站可以为商家管理基本的电商业务，实现对于用户和商品的管理功能，主要包括登录、退出、主页、用户管理、权限管理、分类管理、参数管理、商品管理、 数据统计、订单管理、设置等模块，使用技术主要包括html、css、less、JavaScript、vue、vue router、element-ui、 axios、webpack、 Echarts
所有组件都有路由跳转、
登录界面
- 绘制了登陆界面，用户输入用户名和密码进行登陆操作可以重置表单（注册和忘记密码等都没有）
- 使用token鉴权机制验证用户权限
1、路由拦截器axios.interceptors，挂载token属性
2、路由导航守卫进行权限鉴定
3、退出：销毁token，跳转登录页- （vue router 为每个组件设置一个路由）：涉及到页面跳转 重定向、（vue router 为每个组件设置一个路由）、编程式路由
进入主页点击tab栏就可以进入各个功能的管理界面
用户管理介绍（用户、角色、权限）
- 用户列表中有用户的各类信息（姓名、邮箱… ），可以对用户信息进行搜索、编辑和删除，为用户分配角色进而得到对应权限，可以添加一个新用户
- 角色列表中：有各种角色的信息，可以添加、搜索、编辑、删除，为某一个角色添加对应权限
- 权限列表中有各类权限的信息：权限包含（商品管理、订单管理、权限管理、商品列表、添加商品、订单列表、添加订单）
商品管理介绍
- 商品列表中有商品的各类信息，可以搜索、编辑、删除、添加商品（基本信息参数内容等）
- 分类列表中有商品的所有分类（编辑删除添加，选定父分类）
- 分类参数列表中有，所有分类的相应参数（用户动态可选的参数，还有固定的静态参数），可以编辑删除添加
目录
- 安装VUE
- 项目功能
- 用到的技术栈
- 什么是Ajax
- 什么是Node.js\Express
- 什么是Express
- 组件介绍
- 前端初始化
- git、vscode
- git推送一个分支
- 后台相关知识点
- http相关知识点
- http请求方法
- 记录用户登录状态方法（cookie、token、session）
- 登录退出功能
- 登录组件
- less、Bootstrap问题：
- 退出
- 主页
- 整体布局
- 头部
- 左边栏绘制
- 用户列表
- echarts
- Echarts
- v-for的某一个应用
安装VUE
如何用VSCode搭建Vue项目
在vs code 学习下载与使用element-ui
利用上述链接在C:\Users\86187\vue_shop 新建一个项目
npm run dev —— http://localhost:8080
- 运行的npm run dev 发生错误，去群里问，说是看一下package.josn就知道了，果然package.josn里面有一个语法错误 少了一个逗号（知识又增加了~）
- 全局导入过了就不用局部导入了
工具介绍
node.js卸载
- 安装node.js、npm、vue、vue-cli、vue router、axios Vue.js安装教程
- npm: Node.js下的包管理器。 下载node.js时这个会自动安装好。
- webpack:它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。 教程
- vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
安装过程中的问题
- 问题：安装node.js的时候npm是已经安装好的，在npm -v的时候出现了问题：
‘CALL “D:\Node.js\node.exe” “D:\Node.js\node_modules\npm\bin\npm-cli.js” prefix -g’ 不是内部或外部命令，也不是可执行程序，- 解决方法：删除环境变量中的ComSpec即可，以下是解决步骤
”set ComSpec=“ 即可
Windows 如何在cmd命令行中查看、修改、删除与添加环境变量- 思考：在安装vue的时候，npm -v出现了上述的error，但是我觉得可能不影响，就继续执行下一步的安装指令，于是出错，还以为是这一步的指令出现了问题，其实是上一步的error我没引起重视。所以要对出现的error引起重视
- 查看node.js版本 ：node -v and vue --version- 进入E盘 cd E:- 在cmd中可以查看环境变量：path- 查看当前所有可用的环境变量：输入 set 、set path- 查找某一个环境变量，比如ComSpec- 设置为空：将某一变量设置为空，输入“set 变量名=”即可- 修改环境变量 ：输入 “set 变量名=变量内容”即可，比如将path设置为“d:\nmake.exe”，只要输入set path="d:\nmake.exe"、
项目功能
用到的技术栈
什么是Ajax
Ajax用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
什么是Node.js\Express
Node.js介绍以及安装
定义：
- 什么是nodejs------脚本语言需要一个解析器才能运行，JavaScript是脚本语言，在不同的位置有不一样的解析器，如写入html的js语言，浏览器是它的解析器角色。而对于需要独立运行的JS，nodejs就是一个解析器。
- node --version
什么是Express
Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用
组件介绍
jwt实现session的功能
element—UI 前端UI组件库
Axios 发起前端网络数据请求
Echarts 相关图形报表
SEO：搜索引擎优化
session
Vue-router
单页应用和多页应用的理解
前端路由原理解析与实践
plugin文件是什么意思 Plugin通常译作插件
assets 就是资源的意思,代表 js、css、模板、图片、flash 等等资源文件
前端初始化
初始化问题
- vue ui打不开？ 升级版本 vue ui没反应
- 把存放node.js的文件名字改了之后，发现vue连版本都显示不出来，原因：
git、vscode
浏览器：你f12看报错
如何将本地文件上传到Gitee
vscode 自动保存
git创建一个新分支
git checkout -b
- git checkout 切换到某分支
- git checkout -b 新建并切换到新建的分支上
git clone "url"github下载源码的三种方式
使用gitee同步vue_shop的代码
- 在gitee主页上新建一个账户
- 进入已有项目文件地址
git init 创建本地git仓库
git status查看状态 发现“No commits yet”
于是git add . / git commit -m “add files” 本地仓库添加缓存、提交
git status发现ok
执行下边的两行命令——远程仓库连接成功
如何方便快速的在指定文件夹打开cmd
postman——API调试工具（测试后台接口项目是否正常）
postman使用教程
在vs code 学习下载与使用element-ui
git推送一个分支
- 场景1：在本地的分支test中写好了login功能，想要推送到gitee上
- 步骤：
git status
git add .
git commit -m “上传登录功能” （修改上传到了本地test的分支）
git branch
git checkout branch
git merge test (合并到了本地master分支)
git push（推送到远程gitee仓库）
- 场景2：本地有两个分支 ，远程只有一个分支，想把本地的test分支推送到远程的login分支上
git checkout master
git push -u origin login
git push的解释
- touch是Linux环境下的命令,在window新建文件用echo 文件名
后台相关知识点
phpstudy
npm install lock文件
postman
cls:清屏
http相关知识点
http请求方法
html请求方法
记录用户登录状态方法（cookie、token、session）
这三个功能是干什么的：
HTTP 协议是无状态的。但是随着 web 应用的发展，越来越多的场景需要标识用户身份。例如：单点登陆、购物车等等。而cookie、session 与 token，就是为了实现带有状态的“会话控制”
区别
cookie、token、session的区别
cookie（在客户端记录状态）session:（在服务器端记录状态）
token：维持状态状态（前段与服务器之间存在跨域问题）
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
session：
session的中文翻译是“会话”，当用户打开某个web应用时，便与web服务器产生一次session。服务器使用session把用户的信息临时保存在了服务器上，用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全，可是session有一个缺陷：如果web服务器做了负载均衡（服务器不同），那么下一个操作请求到了另一台服务器的时候session会丢失。
token：
token是什么
定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
登录退出功能
登录组件
创建登录组件(登录的盒子)
- 在component文件下新建login组件(template\style\script),
- 在router.js文件下把login组件渲染到app根组件中(导入login,新建路由,重定向路由)
在根组件中div中放路由占位符
vue示例import指令学习
npm安装less和less-loadernpm
2
less和less-loader版本
less、Bootstrap问题：
- less和less-loader报错，使用了各种方法安装包，换版本都不行，最后在群里问大家都说干脆别用了less了”有less跟没有都一样，后面就直接用的css，用less我感觉就是看着舒服，该样式也方便点，不用less直接查类名也是可以的“
- less是什么：
css预编译器有三种：less 、 sass 、 stylus；Bootstrop使用的是less
它不是一个直接使用的语言，而是一个生成css的语言
- Less的嵌套规则
在使用标准CSS时，要为多层嵌套的元素定义样式，要么使用后代选择器从外到内的嵌套定义，要么给这个元素加上类名或 id 来定义。这样的写法虽然很好理解，但维护起来很不方便，因为无法清晰了解到样式之间的关系。在Less中，嵌套规则使这个问题迎刃而解。嵌套规则允许在一个选择器中嵌套另一个选择器，这更容易设计出精简的代码，并且样式之间的关系一目了然- bootstrap 是什么
登录组件布局
- 全局样式表（解决背景问题）:在asset文件下新建一个global.css文件(全局样式表),入口文件要导入该文件(css文件不需要style只需要区域名) 改背景色
assets 就是资源的意思,代表 js、css、模板、图片、flash 等等资源文件- 在CSS中*{margin:0;padding:0;}是什么意思
margin：0就是div边框外部元素距离此DIV 0像素，四周都是。padding：0 就是边框内部 元素距离此DIV边框 0像素。全等于0 一般就是 无封紧贴着的意思。- 为啥要把html、body先占满全屏，因为height：100%是针对于父元素
- 高度、宽度、背景色、圆角边框
px像素：决定宽度——通过浏览器，查看元素对应宽度
头部布局
- login_container \ login_box \ avatar_box \导入image, style 嵌套
- 属性总结
- position：定位类型
position:relative 相对自身位置移动(top=30,比原位置高30)
position:absolution 根据有relative的父级以上级别(都没有就按body)的位置作为相对位置进行移动
position:fixed 根据窗口进行移动
left\right\top\bottom:10pxCSS position 属性- border-radius:长度（圆角的高度）、百分比（50%，圆角的占比）
transform：translate(x,y) 水平方向和垂直方向同时移动，长度、百分比（移动相对于本身）
盒子模型
登录表单布局（使用element-ui）
- copy代码（在element ui文件下导入用到的form，并启用use）
- display：flex（弹性布局）flex
justify-content：flex-end（start）在主轴（横轴）方向上的对齐方式
justify-content- box-sizing:boder-box因为更改了padding，导致盒模型的width+padding超出了父元素的宽度，所以更改模型，即长度=width+padding
- 一个item是一行，两个buttom在一个itm里面就可以了
表单的数据绑定（双向）
- 在表单和表单项中 ，都要有设置,而且注意属性 是添加到 form、item、input里？
- 在data中定义一个数据对象loginForm及属性 :model=loginForm、用v-model=loginForm.password,双向绑定(属性) tyep=password
- 在data中定义loginForm及属性
- VUE定义data的三种方式
- 不同的script、css、html注释不同
- v-model和:model的区别
- 注意解析为字符串的都要加 ”“，比如组件名称等
表单的验证
- 给表单< el-form>绑定rules属性校验,表单项也进行属性绑定
- 在data中定义rules
表单的重置
获取表单实例对象， ref="loginFormRef"使用ref属性定义一个“别名”，获取的时候用到
为重置按钮定义一个触发方法@click=函数名在method中定义这个函数，函数内容：获取表单对象使用this.$refs.loginFormRef对象.resetFields（函数）() 重置
Vue中ref和$refs的介绍及使用
登录前的预验证
- 为登录按钮设置一个触发方法@click=函数名（表单对象已获取）
- 在method里面定义valid函数
根据预验证是否发起请求
- JavaScript 的 async/await
js的解构：从已知对象中解构所需的成员，与顺序无关，可使用展开语法，可对解构成员使用别名({name:username}), 使用别名后原变量将失效- 在main中导入axios包
Vue.prototype的使用：解决 替换全局使用的一个标识。解决 替换全局使用的一个标识。vue.prototype.$http-设置别名
axios的安装（我用的npm）
axios的使用- cons——ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。
登陆组件配置弹窗提示
this.$message.success(“登录失败”);
登陆组件成功后的行为
- 使用window对象保存token，编程式导航到home主页,
编程式导航-----this.$router.push（’/login‘）- 新建home文件，补充路由规则
路由导航守卫控制访问权限
- 拿到一个路由对象，挂载在一个导航守卫上
- js中的=>:箭头函数
- 回调函数：函数的名称（跟数组，字符串一样）作为另一个函数的形参传入
- export default：
export用于对外输出本模块（一个文件可以理解为一个模块）import用于在一个模块中加载另一个含有export接口的模块。使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）export
退出
- home 定义退出按钮，设置触发事件
- 编程式导航：this.$router.push（’/login‘）
主页
整体布局
整体布局
- 选定eleui 相应 container布局容器代码
- el-container 标签可以直接当作类名，调整各部分颜色、高度
头部
- 利用flex布局，实现头部最左侧和最右侧的放置
display: flex; justify-content: space-between（实现左右对齐布局）
左padding：padding-left: 0;
align-items:center——居中对齐弹性盒的各项 < div> 元素
左边栏绘制
菜单绘制
- 导航菜单elui 梳理清楚 copy
通过接口获取菜单数据
- 登录授权 请求验证是否有token 需要授权的 API ，必须在请求头中使用
Authorization字段提供token令牌- 在main函数设置axios请求拦截器（在数据到达服务器之前进行预处理）——回调函数：
（interceptor 拦截器）
发起请求获取菜单左侧数据‘
- 生命周期函数——就是vue实例在某一个时间点会自动执行的函数，created() （创建完成 ）此时data数据和methods中的方法已经初始化好了，也就是说，created()函数是最早能够访问data数据和methods中的方法的生命周期函数；生命周期函数
- this调用函数：this为调用它的对象本身，myObject调用myFunction函数
- 向网络发送数据请求的时候，使用axios：await this.$http.post，这次是从网络中的固定路径通过get的方式获得路径。在Login的时候，是用post的方式向网络提交那个登录的输入信息数据
- 获取失败，弹出窗口，获取成功，赋值给menulist（这个数据在data中定义好了）
- 定义created（）生命周期函数——this.getMenuList()，内部调函数this
- 定义获取的方法（await this.$http.post（url，参数））
- 在data中存储这个方法：menuList:[]（数组的定义）
左侧菜单ui绘制
- 把mauelist数组中的值，渲染到ui中，两个for循环（v-for），内外渲染一级菜单和二级菜单
- 在写v-for的时候，都需要给元素加上一个key属性，.key属性可以避免数据混乱的情况出现 （如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）
- border-right: none;边框线
letter-spacing: 0.2em ;字母间距
cursor: pointer; 游标
text-align: center;文本居中- 动态数据绑定的一个例子： < el-aside :width=“isCollapse ? ‘64px’:‘200’”>
用户列表
面包屑导航
- 在template里面，一定要放一个根div（最多也只能一个），scope防止组件之间的样式冲突
首页路由重定向
- path的设置（welcom设置为home的子路由）
- path都是路径’/welcome’， component 是组件 Welcome
- 路由占位符在路由重定向的时候使用
用户列表
- axios 传递多个参数：
const {data:res}= await this.$http.get(‘users’, {params:this.queryInfo} )- 自定义权限等级渲染格式：
商品列表功能
js中模板字符串反单引号 `````
- 绑定调用函数
有可能返回的data是一个对象，不是一个数组，所以要根据data的具体值来确定赋值this.cateList = res.data.result
- 记得调用函数和数值用this
对象定义成字符串或者数组adressForm:{adress1:[],adress2:""}
- 预校验函数
- 删除使用弹框组件（只是弹出来，不需要具体信息输入输出的交互）
而插入和更改使用的是dialog对话框组件（如名字所示，需要对话）
- catch捕获异常（为了继续执行程序）
echarts
Echarts
- 在vue ui界面安装echarts
- 直接在需要渲染的页面的scripts中导入echarts（导入在scripts跟export是平级）
- echarts的操作都放到mounted的函数里面
- 数据的合并
v-for的某一个应用
想要把数组中某一个属性的值渲染成，多个表单用到for循环（而不是直接一个一个的粘贴表单模板，这样的话就是固定的了）
如下所示，表单项的数量就是item的数量
<el-form-item :label="item.attr_name" v-for="item in manyData" :key="item.attr_id" > </el-form-item>
Vue项目实战项目记录（电商后台管理系统）相关推荐
- Vue前后端分离的电商后台管理系统项目的概述
(1)该项目是基于前后端分离的开发模式,基于Vue技术栈的SPA单页面项目, 后端主要操作数据库并向前端暴露一些API接口 前端主要负责绘制页面同时,利用Ajax调用后端提供的接口. 这样的开发模式使 ...
- 【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
文章目录 0. 项目介绍 电商管理系统(Element-UI) 开发模式 前端技术栈 后端技术栈 1. 配置--初始化 前端项目 ① 安装 Vue 脚手架 ② 通过 Vue 脚手架创建项目 ③ 配置 ...
- 前端开发Vue项目实战：电商后台管理系统（二）-- 登录退出功能 --主页界面
目录 1. 登录/退出功能 1.1 登录概述 1.2 token 原理分析 1.3 登录功能实现 1.3.1 Git 创建分支 1.3.2 渲染Login组件并实现路由重定向 1.3.3 设置背景颜色 ...
- Vue项目实战之电商后台管理系统(一) 用户登录模块
目录 一.项目概述 二.项目初始化 2.1 前端项目初始化步骤 2.2 后台项目的环境安装配置 三.用户登录/登出功能实现 3.1 登录功能概述 3.1.1 登录状态保持 3.1.2 登录逻辑: 3. ...
- Vue电商后台管理系统项目开发实战（一）
前言 当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
- 前端开发Vue项目实战：电商后台管理系统（一）前后端搭建
目录 1. 项目概述 2. 前端项目初始化步骤 3. 后台项目的环境安装配置 下载安装phpStudy,添加数据库 Postman测试工具 验证 1. 项目概述 电商项目基本业务概述: 根据不同的应用 ...
- Vue项目实战之电商后台管理系统(二) 主页模块
前言 目录 前言 一.主页布局 1.1 整体布局 1.2 头部区域布局 1.3 左侧菜单布局 1.3.1 静态布局 1.3.2 通过axios请求拦截器来进行权限验证 1.3.3 通过axios获取左 ...
- Vue全家桶 - 电商后台管理系统项目开发实录（详）
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤 码云相关操作 2. ...
- Vue全家桶-电商后台管理系统项目开发
项目效果展示: 1. 项目概述 1.1 电商项目基本业务概述 一般情况下客户使用的业务服务包括:PC端,小程序,移动web,移动app. 管理员使用的业务服务:PC后台管理端: PC后台管理端的功能 ...
- 【VUE项目】VUE+ElementUI电商后台管理系统
电商后台管理系统 项目来源:https://www.bilibili.com/video/BV1x64y1S7S7?p=191&spm_id_from=333.1007.top_right_b ...
最新文章
- 贝叶斯机器学习：经典模型与代码实现！
- matlab 多个表数据相加,Excel合并计算完成多表格数据汇总求和
- 高红冰：“五新”创新乡村商业实践
- getCacheDir用法
- 天涯对房市预测比较准的是孤独的思想
- @请注意查收：《史上最全的AI论文资料》.pdf
- mapreduce之partition分区
- 入侵思路新手学习内容
- [linux命令技巧] mkdir -p
- 4x4矩阵键盘工作原理及扫描程序_基于复杂可编程逻辑器件实现键盘接口电路的设计...
- ZZULIOJ 1101: 逆序数字（函数专题）
- Vue项目中关闭Eslint
- 中国联通最快明年实现2G全面退网；苹果发布iOS 14.3后火速撤回：原因未知；Angular 11.0.0 正式发布|极客头条
- Windows Server 2016存储空间直连技术的探秘
- python学习笔记（python发展介绍）
- 已知直角三角形的周长，求可以构成三角形的情况
- Debian 鼠标左右手
- Linux安装vim不成功（没有可用的软件包）解决方法
- 504 压测geteway_504 Gateway Time-out是怎么回事？
- 三次握手和四次挥手详解