学习视频：本站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

如何用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>