尚硅谷_尚品汇后台项目Gitee地址
https://gitee.com/pomelol/shangpinhui-backend-project
下载项目
安装node_modules依赖
启动
报错core-js
解决cnpm install --save core-js
cnpm install --save core-js
直接cmd中启动npm run dev也可以
1:什么是后台管理系统项目?
注意:前端领域当中,开发后台管理系统项目,并非是java、php等后台语言项目。
在前面课程当中,我们已经开发了一个项目【尚品汇电商平台项目】,这个项目主要针对的是用户(游客),可以让用户在平台当中购买产品。
比如:前台项目当中的数据来源于卖家(公司),但是需要注意的是,卖家它不会数据库操作,对于卖家而言,需要把产品的信息上传与服务器,写入数据库。
卖家并非程序员,不会数据库操作(增删改查),导致卖家,找了一个程序员,开发了一个产品,可以让我进行可视化操作数据库(增删改查)
卖家(公司):组成,老板、员工
老板:开发这个项目,对于老板而言,什么都可以操作,【产品的上架、产品的下架、查看员工的个人业绩、其它等等】
员工:可能就是查看个人业绩
后台管理系统:可以让用户通过用户通过一个可视化工具,可以实现数据库进行增删改查的操作
而且需要注意,根据不同的角色(老板、员工),看到的、操作内容是不同的。
对于后台管理系统项目,一般而言,是不需要注册的。
2:模板介绍
简洁版:https://github.com/PanJiaChen/vue-admin-template
加强版:https://github.com/PanjiaChen/vue-element-admin
模板的文件与文件夹认知【简洁版】
build
----index.js webpack配置文件【很少修改这个文件】
mock
----mock数据的文件夹【模拟一些数据mockjs实现的】,因为咱们实际开发的时候,利用的是真的接口
node_modules
----项目依赖的模块
public
----icon图标,静态页面,public文件夹里面经常放置一些静态资源,而且在项目打包的时候webpack不会编译这个文件夹,原封不动的打包到dist文件夹里面
src
----程序员源代码的地方
----api文件夹:涉及请求相关的
----assets文件夹,里面放置一些静态资源(一般共享的),放置assets文件夹里面静态资源,在webpack打包的时候,会进行编译
----components文件夹:一般放置非路由组件获取全局组件
----icons这个文件夹里面放置了一些svg矢量图
----layout文件夹:它里面放置一些组件与混入
----router文件夹:与路由相关的
----store文件夹:一定是与vuex相关的
----style文件夹:与样式相关的
----utils文件夹:request.js是axios二次封装文件***
----views文件夹:里面放置的是路由组件
APP.vue:根组件
main.js:入口文件
permission.js:与导航守卫相关
setting:项目配置项文件
.env.development:开发环境
.env.production:生产环境
.env.staging:测试环境
后台管理系统API接口在线文档:
http://39.98.123.211:8170/swagger-ui.html
http://39.98.123.211:8510/swagger-ui.html(用这个好)
3:完成登录业务
----静态组件完成
----书写API(换成真实的接口)
axios二次封装
换成真实接口之后需要解决代理跨域问题(解决代理跨域)
配置文件发生变化要重启
选择了开发环境.env.development,/dev-api
退出登录业务
5)项目路由的搭建
品牌管理模块
6)完成品牌管理静态组件
7)完成品牌管理列表的展示
---书写相关的API接口
--前台需要收集数据,给服务器提交数据(发请求)
8)添加品牌与修改品品牌的静态组件
10)完成品牌修改功能
11)表单验证功能
elementUI提供表单验证功能(自定义校验规则---重点)
12)删除品牌操作
elementUI当中组件:有时间多翻看看
三级联动组件
13)平台属性管理的三级联动静态组件
14)获取数据动态的展示的三级联动
15)完成三级联动业务
平台属性模块
16)获取平台属性数据与展示平台属性
属性:颜色
属性值:黑色,红色,粉色,紫色
{
attrName:'颜色',
attrValueList:['黑色','紫色']
}
17)添加属性与修改属性静态组件
18)收集平台属性的操作
属性名称 属性值列表
属性:颜色
属性值:粉色、蓝色、红色等等
注意1:别在data当中收集三级分类的id
因为对象存储数据无序存储
19)收集平台属性值的操作
20)解决取消按钮数据回显问题
21)修改属性的操作
22)添加属性中的 查看模式与编辑模式 切换
查看模式:显示span
编辑模式:显示input
注意:通过flag标记进行切换查看模式与编辑模式,但是需要注意的是,一个属性flag没有办法控制全部的属性值的切换
23)查看模式与编辑模式注意事项
24)修改属性中,查看模式与编辑模式操作
25)表单元素自动聚焦的实现
26)删除属性值操作
27)添加属性与修改属性保存的操作
28)完成按钮与三级联动可操作性
SPU模块
29)SPU模块介绍
SPU你可以理解为类
People类【SPU】
实例:
小明:小明 18 男 等等
小红:小红 88 女 等等
30)完成SPU管理模块静态
31)完成SPU列表展示
32)完成SPU管理内容切换
---展示SPU列表结构
---添加SPU|修改SPU
---展示添加SKU结构
SpuForm子组件
33)完成SpuForm静态
34)SpuForm业务的分析
--品牌的数据需要发请求的 http://locahost:9529/dev-api/admin/product/baseTrademark/getTrademarkList
--获取平台中全部的销售属性(3个) http://localhost:9529/dev-api/admin/product/baseSaleAttrList
--获取某一个SPU信息 http://localhost:9529/dev-api/admin/product/getSpuById/5092
--获取SPU图片 http://localhost:9529/dev-api/admin/product/spuImageList/5092
---SpuForm子组件发请求地方分析:
不能书写在mounted里面:
因为咱们刚才看了一些已经完成的项目,每一次显示SpuForm子组件的时候,都会发四个请求,
而我们为什么不能放在子组件的mounted里面,因为v-show知识控制SpuForm子组件显示与隐藏,
这个子组件并没有卸载(只是显示与隐藏),导致mounted值能执行一次
35)完成SpuForm获取服务器数据的操作
36)完成SpuForm数据的展示与收集
--添加SPU的时候需要给服务器携带的参数
37)完成销售属性的展示
整个项目当中销售属性一共三个:颜色、尺码、版本
38)完成SpuForm照片墙图片的收集
---照片墙何时收集数据
---预览照片墙的时候,显示答的图片的时候,需要收集数据吗?---不需要收集的【数据已经有了】
---照片墙在删除图片的时候,需要收集数据的
---照片墙在添加图片的时候,需要收集数据的
39)完成添加属性的操作
----收集哪些数据
baseSaleAttrId
saleAttrName
spuSaleAttrValueList
---在什么时候收集数据
---收集到哪里呀?
把数据收集到SPU对象
41)完成销售属性值展示与收集
新增的销售属性值需要收集的字段:
baseSaleAttrId
saleAttrValueName
42)完成删除销售属性与销售属性值操作
43)完成SpuForm组件的保存的操作
44)完成添加Spu的业务
---点击添加SPU按钮的时候,需要发请求(两个:获取品牌的数据、全部销售属性的数据)
45)完成删除SPU业务
Skuform子组件
48)SkuForm数据的展示与收集
49)完成图片的展示与收集
50)完成SkuForm保存的操作
Sku组件
51)完成SKU列表的展示
52)完成查看SKU列表的loading效果
----loading效果目前只会展示一次
----快速切换查看sku会发现上一次的数据会显示
58)完成SKU模块数据的展示
59)完成SKU的上架与下架操作
60)完成SKU查看详情业务
61)深度选择器
1: scoped属性的作用----加上scoped的作用是只是对于当前的组件有用(样式)
对于某一个组件,如果style添加上scoped属性,给当前子组件的结构中都添加上一个data-v-xxxx自定义属性
会发现vue是通过属性选择器,给需要添加的元素添加上样式
h3[data-v-7ba5bd90]
2:子组件的根标签(拥有父组件当中自定义属性:一样的),如果子组件的根节点,和父组件中书写的样式相同,也会添加上相应的样式。
注意:
如果父组件的样式(scoped),而且还想影响到子组件的样式?像这种情况我们可以使用深度选择器
深度选择器可以实现样式穿透:
>>> 一般用于原生CSS
/deep/ 一般用于less
::v-deep 一般用于scss
首页
首页--柱状图
首页--折线图
首页--柱状图(进度条)
首页--Detail子组件
首页
首页--销售template
首页--销售(重新修改图表配置项)
首页--日历
首页--搜索(template)
首页--折线图
首页--Search(template)
首页--Category(饼图)
首页--Observe
权限管理(串讲)
66)权限管理的介绍
权限、角色等等业务逻辑
角色:一家企业而言:BOSS、运维、销售、程序员
权限:超级管理员(BOSS),是有权利操作整个项目的所有模块
硅谷321(新媒体),只有首页、商品管理的一部分菜单数据
admin:超级管理员---boss
67:权限管理业务串讲
权限管理:用户管理、角色管理、菜单管理
由于用户管理、角色管理、菜单管理:对于获取数据、显示数据、收集数据相对而言,简单很多,因此进行相应的串讲。
把精力放到如何实现权限业务。
68:菜单权限的业务分析
超级管理员:首页、权限模块、商品模块
硅谷321:首页
不同的用户、不同角色的人,项目当中所能操作的,看到的菜单是不一样的
如何实现菜单的权限?不同的角色所能操作|查看菜单不一样的?
起始不同的用户(角色),登录的时候会向服务器发请求,服务器会把用户相应的菜单的权限的信息,返回给我们
我们可以根据服务器返回的数据(信息),可以动态的设置路由,可以根据不同的用户展示不同的菜单
69)完成菜单权限
当用户登录的时候,服务器会返回相应角色的菜单权限的信息
只不过返回信息是一个数组routes->['sku','spu','product']
70)按钮权限
菜单权限:不同的用户(角色),能操作、能观看的菜单是不同的。
按钮的权限:不同的用户(角色),有的用户是可见按钮、当然有的用户不可见。
用户管理
角色管理
菜单管理
canvas
绘制线段
绘制矩形
绘制圆形
清除画布|绘制文字
绘制柱状图
echarts
基本使用
展示多个图表
一个容器展示多个图表
数据集dataset使用
echarts组件
一个坐标系--散点图
多个坐标体系
svg基本使用
安装echarts
安装日历dayjs插件
提示:
登录自己设置的用户名(账号)和密码 (谷粒商城|尚硅谷后台)
安装提示插件vue-helper
报错
JWT expired at 2023-03-17T15:19:19Z. Current time: 2023-03-17T15:59:36Z, a difference of 2417339 milliseconds. Allowed clock skew: 0 milliseconds.
重新点击登录即可
webpack官网https://webpack.docschina.org/
https://webpack.docschina.org/configuration/dev-server/#devserverproxy