首页  思维导图  详情

电商后台管理系统知识点记录

2021-09-18 17:25:21   0  举报





仅支持查看

AI智能生成

使用vue-cli脚手架进行项目开发，涉及vue-router、vuex等相关技术

Vue

axios

作者其他创作

大纲/内容

Vuex

01 登录/退出功能

什么时候使用cookie/session？----当前端Vue界面和后端接口之间存在跨域的问题
什么时候使用token的方式？

http无状态指的是：现在处于前后端分离的情况，用户的信息必须有一种保存在服务器中的方式

表单的数据校验
【离开input之后会立刻校验数据项】

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
并将 Form-Item 的 prop 属性设置为需校验的字段名即可

表单的重置

ElementUI中重置数据的方法：
1.在表单el-form中添加一个ref引用属性（这个引用的值就是该组件的实例对象）
2.给固定的重置按钮添加一个点击方法
3.在点击方法中调用this.$refs.loginFormRef.resetFields();来重置数据

表单的注册（发起请求）

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，是常用的发起Ajax请求的方式

注册axios并进行全局配置：
1.导入axios库
import axios from 'axios'
2.配置全局请求根路径
3.把axios挂在到Vue的原型对象上，使得Vue的每一个组件都可以通过this.$axios获取到http，从而去发起ajax请求
Vue.prototype.$axios = axios

具体的请求发起
注意：此处进行表单的预校验，通过找到具体引用$refs.loginFormRef，
调用了valid方法进行预校验(这个方法返回的是布尔值，通过是true，不通过是false)

登录之后的行为

1.除了登录页面之外的界面都是需要身份验证的，
所以需要提供token，token保存在sessionStorage中

sessionStorage：会话期间的存储机制
loacalStorage：持久化的存储机制

2.直接通过url进入到其他界面，需要使用路由导航来进行控制

.退出功能

02 Home主界面

界面设计

界面从elementUI中导入，Header部分使用flex布局，justify-content: space-between两端布局

侧边栏设计

侧边导航栏css样式设计

侧边栏的折叠效果可以使用三目表达式来实现

使用axios进行请求拦截

.request表示是一个请求拦截器，里面有一个回调函数use，
请求在到达服务器之前会优先调用回调函数进行预处理操作

多级路由嵌套
（在菜单主题中显示Welcome界面）

1.在路由配置文件中注册新的子组件Home
2.在Hmoe的路由配置中添加一个子路由children:[{path: '/Welcome', component: Welcome}]
3.在Hme.vue文件的组件部分添加子路由的占位符<router-view></router-view>

路由链接跳转

方式1：使用router-link
方式2：在elementUI的menu项中开启router路由模式，
在需要设置跳转的地方使用index属性动态绑定跳转的地址（手动加上/）

保持左侧菜单栏点击时的高亮效果

1.给二级菜单绑定点击事件，在每次点击的时候将index中的路径保存到sessionStorage中
( sessionStorage.setItem(键，值) )
2.在created钩子中（home界面刚被创建好的时候）调用sessionStorage中的值，实现激活效果
( sessionStorage.getItem(键) )
3.在点击其他按钮的时候重新给activePath赋值一下，实现动态高亮

03 用户列表

界面设计

栅格布局el-row，通过:gutter来指定列之间的间隙，总共24格，每一列是el-col，通过:span来指定列的宽度

表格组件：
(渲染用户数据到表格中)
1.需要在表格头使用:data指定一个数据源
2.表格中有若干列el-table-column
3.在每一列中指定要展示的属性prop，使用label来设置列名

用户列表的数据获取

1.在界面刚创建好的使用created钩子调用方法
2.方法中实现：发起ajax的get请求，users是地址，params是参数列表，
所有的参数被写在data的一个对象queryInfo中（这样方便调用数据）
3.取得ajax请求获取到的data数据中的所有用户信息res.data.users存放到一个列表中
4.取出总人数，方便分页使用

（ele中的）作用域插槽
（把布尔值按需渲染成开关状态）

作用域插槽：自定义渲染样式
elementUI中封装了作用域插槽，
固定写法为slot-scope="scope"，作用是：接收当前作用域的数据，
需要哪一个具体的数据可以使用v-model进行数据绑定
注：作用域插槽会覆盖prop属性

原生作用域插槽用来解决：
1.数据在子组件中，结构也在子组件中
2.使用结构的是父组件，并且父组件想要有该结构的不同呈现效果（结构复用但是实现效果不同）
3.在子组件结构中进行数据绑定

修改、删除、设置的实现

要获取到数据的id才能进行操作，所以还是需要使用作用域插槽

分页实现

使用elementUI中封装好的方法，需要实现
1.监听页面需要显示多少条数据的事件
2.监听当前处于第几页的事件
注意：每次改变需要在事件中再获取一下之前写好的获取用户数据的方法

（添加数据时）
自定义表单校验规则

1.在data数据源中自定义一个箭头函数（参数为：规则、要检验的数据、回调函数），里面写检验规则
2.在具体的校验规则中，使用validator来指向刚刚自定义的函数

重置表单：
1.为表单绑定一个close事件
2.找到表单的引用项，使用resetFilelds()方法来重置清空

修改当前用户数据

修改用户界面

1.给修改按钮绑定一个对话框
2.对话框中需要有对应项的表单数据
3.使用作用域插槽中的scope.row可以获取到当前行的data数据，从中去除对应的id值
4.参照API文档，把id传入到修改方法中，本质是一个查询方法，使用get方发起请求，
将查询到的数据信息放到data中的空对象editForm中，方便做数据显示用

修改数据的提交：
0.给确定按钮绑定单击事件
1.提交之前进行数据的预校验，如果不通过return，通过就通过ajax正式发起请求
2.根据API文档决定发起put请求，修改之后判断返回的状态码，修改失败使用$message.erreo返回错误信息
3.修改成功之后：
3.1 关闭对话框，设置可见为flase
3.2 重新调用获取用户列表的方法，刷新界面
3.3 提示修改成功

删除用户操作

删除时会有一个确认的操作，用到的是elementUI中的弹窗组件MessageBox
需要全局挂载一个$confirm对象
Vue.prototype.$confirm = MessageBox.confirm

删除用户-取消
1.使用弹窗的时候发现会返回一个promise对象（使用async进行简化）
2.点击确认按钮的时候会返回字符串 confirm
3.点击取消按钮的时候会触发错误，要使用.catch捕获所有的错误，
然后使用箭头函数的简写方式来打印错误信息---->发现时字符串cancel

删除用户-确认
1.根据API文档决定使用寿命方式删除
2.删除后打印提示信息
3.刷新列表

用户角色分配

用户当前角色的展示与角色选择下拉框

分配新角色

1.为确定按钮绑定处理函数
2.判断用户是否有选择一个新的角色
3.判断通过之后发起请求，并判断状态
4.弹出成功消息、刷新列表、关闭对话框
5.绑定一个close事件，在选择之后重置下拉框数据、

04 权限管理

权限列表

1.不同权限有不同的显示：
自定义不同的显示效果，使用作用域插槽来实现
2.slot-scope='scope' 可以接收到所有的参数，使用v-if就可以实现不同参数的不同显示

角色列表

角色列表API文档分析

角色下权限数据的渲染
（展开栏中拿到当前角色拥有的权限）：
1.使用作用域插槽拿到所有数据
2.使用三层for循环来遍历权限

角色权限页面设计

第一层for循环：
取出了第一层权限，每循环一次添加一个标签图标和一个展开图标

第二三层for循环：
此时可以直接使用第一层循环中起的临时变量名来调用其中的属性

优化：
为了防止每次获取新数据之后造成页面的刷新，不能使用在此调用全部数据的方式，
应该使用数据重新赋值，直接把修改过后的权限数据赋值

删除权限

权限的加载

加载权限的时候搭配elementUI中提供的组件，使用递归的方式
对三层权限进行查找，在界面上只有第三级权限才会被显示出来

权限的加载

加载权限的时候搭配elementUI中提供的组件，使用递归的方式
对三层权限进行查找，在界面上只有第三级权限才会被显示出来

权限的分配

1.确认按钮绑定一个方法，在点击确认按钮的时候把当前角色的ID保存到data中
2.选中一些权限之后，使用组件中的方法获取到选中权限的ID值（半选+全选），
把这些ID值全部放到一个新的数组中
3.对数组进行加工，使用逗号拼接成字符串的格式
4.发起post请求，把保存的角色ID以及拼接好的权限字符串提交到服务器端
5.修改成功后打印提示信息，刷新权限列表，关闭对话框

05 商品管理

商品分类

分类参数

两个面板共用同一个对话框

1.单独编写对话框组件
2.在title属性中动态的绑定数据，定义一个计算属性来进行判断，
用字符串和计算属性拼接来实现标题效果
3.在两个面板的添加按钮上绑定事件，将控制对话框是否显示的
布尔值设置为true显示

获取焦点：
需要使用到$nextTick方法，表示在页面渲染完成之后再调用方法

1. 语法：```this.$nextTick(回调函数)```
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

商品列表显示

上传商品图片

上传图片到服务器过程：
上传商品图片的方法并不是使用的axios发起的ajax请求，此处是内部封装的一个ajax方法，
所以要注意手动配置请求头headers属性，属性的值为在main里面配置的获取到的token字段

图片上传成功之后：
从服务器中获取到在暂存图片，保存到添加表单中：
1.图片上传到服务器之后，服务器将图片封装成一个对象，里面有两个参数：meta表示状态，data中包含数据，其中tmp_path就是保存的临时路径
2.根据elementUI中上传图片组件对应的on-success成功上传之后钩子函数，绑定一个回调事件
3.在回调事件中拼接得到一个图片信息对象，然后将图片信息对象push到存放图片路径的pics数组中

删除商品图片

跟上传同理，在pics数组中移除对应的图片信息：
1.获取将要删除的图片的临时路径
2.在pics数组中找到这个图片对应的索引值
3.调用数组的splice方法，将图片从数组中删除

findIndex方法接受一个箭头函数，函数中查找每一项，看数组中是否有
和filePath路径对应的值，有就返回索引值

06 数据报表

注意⚠️生命周期钩子
在页面上的元素全部渲染完成才会调用—mounted
类似的在方法中有$nextTick方法

echarts使用方法：
1 导入echarts库
2 为echarts准备一个具有宽高的dom元素（div）
3 在mounted钩子中对echarts进行初始化操作，创建一个echarts实例对象
4 准备好echarts需要的数据和配置对象
5 使用setOption方法来展示数据

合并数据：合并两个对象为一个新的对象
1 再次用到lodash（之前使用是做深拷贝）

07 项目优化和上线

项目优化

项目上线