尚硅谷_尚品汇后台项目_谷粒商城_汇总笔记

尚硅谷_尚品汇后台项目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

项目API文档