guli商城业务逻辑-基础篇笔记

大家好，欢迎来到IT知识分享网。

这里写目录标题

0.1 viscode设置用户代码片段
1.实现多级菜单接口
1.7 实现品牌管理使用逆向工程快速生成
- - 1.7.1 实现文件上传功能存-对接使用OSS
1.8 创建第三方的api项目服务
- 1.8.1 前后端联调oss对接
- 1.8.2 JSR303添加校验注解b
1.9 统一异常处理
1.10 SPU&SKU
1.11 属性分组整和分类组件
—- 未完待续直接看中级了—–

0.1 viscode设置用户代码片段

VS Code 定制属于你自己的代码段
通过设置用户代码片段来自定义快捷键，快捷输出重复代码。

添加指定快捷键代码

{ // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. // Placeholders with the same ids are connected. // Example: // "Print to console": { // "scope": "javascript,typescript", // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } "http-get 请求": { "prefix": "httpget", "body": [ "this.\\$http({", "url: this.\\$http.adornUrl(''),", "method: 'get',", "params: this.\\$http.adornParams({})", "}).then(({data}) => {", "})" ],"description": "httpGET 请求" }, "http-post 请求": { "prefix": "httppost", "body": [ "this.\\$http({", "url: this.\\$http.adornUrl(''),", "method: 'post',", "data: this.\\$http.adornData(data, false)", "}).then(({ data }) => { });" ],"description": "httpPOST 请求" } }

1.实现多级菜单接口

实现父子结构菜单效果

数据库表结构

实体类

package com.atguigu.gulimall.product.entity; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableLogic; import com.baomidou.mybatisplus.annotation.TableName; import java.io.Serializable; import java.util.List; import com.fasterxml.jackson.annotation.JsonIgnore; import com.fasterxml.jackson.annotation.JsonInclude; import lombok.Data; / * 商品三级分类 * * @author leifengyang * @email  * @date 2019-10-01 21:08:48 */ @Data @TableName("pms_category") public class CategoryEntity implements Serializable { private static final long serialVersionUID = 1L; / * 分类id */ @TableId private Long catId; / * 分类名称 */ private String name; / * 父分类id */ private Long parentCid; / * 层级 */ private Integer catLevel; / * 是否显示[0-不显示，1显示] */ @TableLogic(value = "1",delval = "0") private Integer showStatus; / * 排序 */ private Integer sort; / * 图标地址 */ private String icon; / * 计量单位 */ private String productUnit; / * 商品数量 */ private Integer productCount; @JsonInclude(JsonInclude.Include.NON_EMPTY) @TableField(exist=false) //存放全部子分类 private List<CategoryEntity> children; }

业务逻辑

@Override public List<CategoryEntity> listWithTree() { //1、查出所有分类 List<CategoryEntity> entities = baseMapper.selectList(null); //2.组装成父子的树形结构 //2.1 找到所有的一级分类 因为一级分类的父级id都是0 ，通过父级id来筛选 最终返回一个集合 List<CategoryEntity> level1Menus = entities.stream().filter(categoryEntity -> //过滤条件 categoryEntity.getParentCid() == 0 ).map((menu)->{ //把当前菜单的子菜单都找出来然后放到他的Chidren子菜单集合中 menu.setChildren(getChildrens(menu,entities)); return menu; }).sorted((menu1,menu2)->{ //进行菜单排序 return menu1.getSort()-menu2.getSort(); }).collect(Collectors.toList()); return entities; }

 //递归查找所有菜单的子菜单 private List<CategoryEntity> getChildrens(CategoryEntity root,List<CategoryEntity> all){ List<CategoryEntity> collect = all.stream().filter(categoryEntity -> { //遍历全部菜单把符合当前父级菜单的都取出来 return categoryEntity.getParentCid() == root.getCatId(); }).map(categoryEntity -> { //如果还是找他到他的子菜单那么在修改嵌入进去 categoryEntity.setChildren(getChildrens(categoryEntity, all)); return categoryEntity; }).sorted((menu1, menu2) -> { return (menu1.getSort()==null?0:menu1.getSort()) - menu2.getSort(); }).collect(Collectors.toList()); return collect; }

1.1 对接前端菜单

vue菜单组件

<template> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" ></el-tree> </template> <script> export default { data() { return { data: [], defaultProps: { children: "children", label: "label", }, }; }, methods: { handleNodeClick(data) { console.log(data); }, getMenus() { // 使用 this.$http 发起一个 GET 请求到 /sys/role/list 接口 this.$http({ url: this.$http.adornUrl("/product/category/list/tree"), // 请求的 URL method: "get" }).then(({ data }) => { // 请求成功后的回调函数 console.log("成功获取数据",data) }); }, }, //生命周期 created(){ this.getMenus(); } }; </script>

因为接口的后端api地址跟后台地址不一致，需要通过注册api网关的方式转发来解决。

给后端配置注册到nacos中

 application: name: renren-fast

再从启动类中添加@EnableDiscoveryClient注解注册到nacos

然后在通过网关配置路由代理。这里先处理人人后台的后端，后面在对接上guli的接口。

spring: cloud: gateway: routes: - id: bd_route # 路由 ID，用于唯一标识该路由规则 uri: https://www.baidu.com # 目标服务的 URI predicates: # 路由条件，用于匹配请求 Query是设置断言规则 - Query=url,baidu - id: _route # 路由 ID，用于唯一标识该路由规则 uri: https://www..com # 目标服务的 URI predicates: # 路由条件，用于匹配请求 Query是设置断言规则 - Query=url, # 当你使用 lb://renren-fast 这样的目标服务 URI 时，它会通过服务发现组件（如 Nacos）来查找名为 renren-fast 的服务实例。 - id: admin_route # 路由 ID，用于唯一标识该路由规则 uri: lb://renren-fast # 目标服务的 URI predicates: # 路由条件，用于匹配请求 Query是设置断言规则 - Path=/api/ filters: - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment} # 因为直接转发的路径是 /api/captcha.jpg 而项目实际路径是/api/renren-fast 所以要重新转发的接口 前端项目，/api 路径

这个配置的含义如下： /api/(?<segment>.*)：这是一个正则表达式，用于匹配以 /api 开头的请求路径。(?<segment>.*) 是一个命名捕获组，用于捕获 /api 之后的部分。 /renren-fast/$\{segment}：这是重写后的请求路径。$\{segment} 是一个变量，表示之前捕获的 /api 之后的部分。这个路径将替换原始请求路径中匹配到的部分。 在这个例子中，RewritePath 过滤器将所有以 /api 开头的请求路径重写为 /renren-fast 开头的路径。例如，请求 /api/user 将被重写为 /renren-fast/user。

1.2 对接网关接口解决跨域问题，如果不解决跨域，浏览器还是访问不了api

解决方案1

在网关项目新建config

package com.atguigu.gulimall.gulimallgateway.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.reactive.CorsWebFilter; import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource; @Configuration public class GulimallCorsConfiguration { @Bean public CorsWebFilter corsWebFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration corsConfiguration = new CorsConfiguration(); //1、配置跨域 corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.setAllowCredentials(true); source.registerCorsConfiguration("/",corsConfiguration); return new CorsWebFilter(source); } }

1.3 把商品服务添加网关

要实现把服务注册上nacos不然网关是找不到这个服务的

spring: cloud: gateway: routes: - id: bd_route # 路由 ID，用于唯一标识该路由规则 uri: https://www.baidu.com # 目标服务的 URI predicates: # 路由条件，用于匹配请求 Query是设置断言规则 - Query=url,baidu - id: _route # 路由 ID，用于唯一标识该路由规则 uri: https://www..com # 目标服务的 URI predicates: # 路由条件，用于匹配请求 Query是设置断言规则 - Query=url, # 当你使用 lb://renren-fast 这样的目标服务 URI 时，它会通过服务发现组件（如 Nacos）来查找名为 renren-fast 的服务实例。 - id: product_route # 路由 ID，用于唯一标识该路由规则 uri: lb://gulimall-product # 目标服务的 URI predicates: # 路由条件，用于匹配请求 Query是设置断言规则 - Path=/api/product/ filters: - RewritePath=/api/(?<segment>.*),/$\{segment} # 重写转发的地址，让他转发的地址取消/api/这个前缀 # 当你使用 lb://renren-fast 这样的目标服务 URI 时，它会通过服务发现组件（如 Nacos）来查找名为 renren-fast 的服务实例。 - id: admin_route # 路由 ID，用于唯一标识该路由规则 uri: lb://renren-fast # 目标服务的 URI predicates: # 路由条件，用于匹配请求 Query是设置断言规则 - Path=/api/ filters: - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment} # 因为直接转发的路径是 /api/captcha.jpg 而项目实际路径是/api/renren-fast 所以要重新转发的接口 前端项目，/api 路径

1.4 修改前端显示分类菜单

获取后端数据

 methods: { handleNodeClick(data) { console.log(data); }, getMenus() { // 使用 this.$http 发起一个 GET 请求到 /sys/role/list 接口 this.$http({ url: this.$http.adornUrl("/product/category/list/tree"), // 请求的 URL method: "get", }).then(({ data }) => { // 请求成功后的回调函数 console.log("成功获取数据", data); this.menus =data.data }); }, },

赋值到组件

 data() { return { menus: [], defaultProps: { // 字节的的属性名字 children: "children", // 那个字段需要显示 label: "name", }, }; },

前端代码

<template> <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick" ></el-tree> </template> <script> export default { data() { return { menus: [], defaultProps: { // 字节的的属性名字 children: "children", // 那个字段需要显示 label: "name", }, }; }, methods: { handleNodeClick(data) { console.log(data); }, getMenus() { // 使用 this.$http 发起一个 GET 请求到 /sys/role/list 接口 this.$http({ url: this.$http.adornUrl("/product/category/list/tree"), // 请求的 URL method: "get", }).then(({ data }) => { // 请求成功后的回调函数 console.log("成功获取数据", data); this.menus =data.data }); }, }, //生命周期 created() { this.getMenus(); }, }; </script>

1.5 给菜单添加删除修改功能

如果菜单是一级菜单才可以添加，否则不能。

添加增加删除小组件

<span class="custom-tree-node" slot-scope="{ node, data }"> <span>{ 
  { node.label }}</span> <span> <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)"> Append </el-button> <!-- 如果没有字节的就是最底层了，可以删除 --> <el-button v-if="node.childNodes.length==0" type="text" size="mini" @click="() => remove(node, data)"> Delete </el-button> </span>

1.5.1 删除功能的后端业务逻辑

删除只能使用逻辑删除，也就是把数据库里的删除字段从0改成1，数据不可以真正的删除掉，所以就要用到mybatis-plus的逻辑删除来执行数据库操作。

配置文件添加逻辑删除配置

mybatis-plus: mapper-locations: classpath:/mapper//*.xml global-config: db-config: id-type: auto logic-delete-value: 1 logic-not-delete-value: 0

状态1就是显示0就是删除

实体类添加字段

 @Override public void removeMenuByIds(List<Long> asList) { //TODO 1、检查当前删除的菜单，是否被别的地方引用 //逻辑删除 baseMapper.deleteBatchIds(asList); }

 / * 是否显示[0-不显示，1显示] */ //自定义规则，设置1是不删除0是删除 @TableLogic(value = "1",delval = "0") private Integer showStatus; /

添加后删除就会变成了逻辑删除

1.5.2 前端对接删除接口

发送post删除请求接口

 remove(node, data) { //获取要发送的数组 var ids =[data.catId]; this.$http({ url: this.$http.adornUrl('/product/category/delete'), method: 'post', data: this.$http.adornData(ids, false) }).then(({ data }) => { console.log("删除成功"); }); },

但是前端直接删除没有提示，所以要添加一个弹窗。

 remove(node, data) { //获取要发送的数组 var ids = [data.catId]; this.$confirm(`是否删除当前菜单【${data.name}】`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }).then(() => { this.$http({ url: this.$http.adornUrl("/product/category/delete"), method: "post", data: this.$http.adornData(ids, false), }).then(({ data }) => { console.log("删除成功"); }); }); },

<template> <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox="true" node-key="catId" :default-expanded-keys="expandedLKey" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{ 
  { node.label }}</span> <span> <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)" > Append </el-button> <!-- 如果没有字节的就是最底层了，可以删除 --> <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)" > Delete </el-button> </span> </span> </el-tree> </template> <script> export default { data() { return { menus: [], // 默认展开的节点的id expandedLKey:[], defaultProps: { // 字节的的属性名字 children: "children", // 那个字段需要显示 label: "name", }, }; }, methods: { handleNodeClick(data) { console.log(data); }, getMenus() { // 使用 this.$http 发起一个 GET 请求到 /sys/role/list 接口 this.$http({ url: this.$http.adornUrl("/product/category/list/tree"), // 请求的 URL method: "get", }).then(({ data }) => { // 请求成功后的回调函数 console.log("成功获取数据", data); this.menus = data.data; }); }, append(data) {}, remove(node, data) { //获取要发送的数组 var ids = [data.catId]; this.$confirm(`是否删除当前菜单【${data.name}】`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }).then(() => { this.$http({ url: this.$http.adornUrl("/product/category/delete"), method: "post", data: this.$http.adornData(ids, false), }).then(({ data }) => { this.$message({ message: "菜单删除成功", type: "success", }); //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedLKey = [node.parent.data.catId] //刷新出新的菜单 this.getMenus(); }); }) }, }, //生命周期 created() { this.getMenus(); }, }; </script>

1.5.3 添加前端菜单新增

新增提示框

 <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <el-form :model="category"> <el-form-item label="分类名称" > <el-input v-model="category.name" autocomplete="off"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="addCateory">确 定</el-button> </span> </el-dialog>

绑定参数

 data() { return { category:{name:""}, //默认不展示对话1框 dialogVisible: false, menus: [], // 默认展开的节点的id expandedLKey: [], defaultProps: { // 字节的的属性名字 children: "children", // 那个字段需要显示 label: "name", }, }; },

添加方法

 addCateory(){ this.$http({ url: this.$http.adornUrl('/product/category/save'), method: 'post', data: this.$http.adornData(this.category, false) }).then(({ data }) => { this.$message({ message: "菜单新增成功", type: "success", }); //关闭对话框 this.dialogVisible=false; }); },

1.5.4 添加前端菜单修改

添加修改功能

 //发送修改三级分类的请求 endiCategory() { var { catId, name, icon, productUnit } = this.category; this.$http({ url: this.$http.adornUrl('/product/category/update'), method: 'post', data: this.$http.adornData({ catId, name, icon, productUnit }, false) }).then(({ data }) => { this.$message({ message: "菜单修改成功", type: "success", }); //关闭对话框 this.dialogVisible = false; //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedLKey = [this.category.parentCid]; }); }, //回显到菜单栏 endi(data) { console.log("要修改的数据", this.endi) this.title = "修改分类" this.dialogType = "endi" this.dialogVisible = true; //发送请求获取最新的数据 this.$http({ url: this.$http.adornUrl(`/product/category/info/${data.catId}`), method: 'get', }).then(({ data }) => { //请求成功 console.log("要回显的数据", data); console.log("category", this.category) this.category.name = data.data.name this.category.icon = data.data.icon this.category.catId = data.data.catId // this.category.productUnit = data.data.productUnit // this.category.sort = data.data.sort // this.category.catLevel = data.data.catLevel // this.category.showStatus = data.data.showStatus }) },

完整前端代码

<template> <div> <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox="true" node-key="catId" :default-expanded-keys="expandedLKey"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{ 
  { node.label }}</span> <span> <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)"> Append </el-button> <!-- 如果没有字节的就是最底层了，可以删除 --> <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)"> Delete </el-button> <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => endi(data)"> endi </el-button> </span> </span> </el-tree> <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false"> <el-form :model="category"> <el-form-item label="分类名称"> <el-input v-model="category.name" autocomplete="off"></el-input> </el-form-item> <el-form-item label="图标"> <el-input v-model="category.icon" autocomplete="off"></el-input> </el-form-item> <el-form-item label="计量单位"> <el-input v-model="category.productUnit" autocomplete="off"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="submitData">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { productUnit: "", icon: "", title: "", //给对话框设置一个类型，让他知道是谁调用的他。 dialogType: "", category: { name: "", icon: "", parentCid: 0, catLevel: 0, showStatus: 1, sort: 0 }, //默认不展示对话1框 dialogVisible: false, menus: [], // 默认展开的节点的id expandedLKey: [], defaultProps: { // 字节的的属性名字 children: "children", // 那个字段需要显示 label: "name", }, }; }, methods: { handleNodeClick(data) { console.log(data); }, addCateory() { this.$http({ url: this.$http.adornUrl('/product/category/save'), method: 'post', data: this.$http.adornData(this.category, false) }).then(({ data }) => { this.$message({ message: "菜单新增成功", type: "success", }); //关闭对话框 this.dialogVisible = false; //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedLKey = [this.category.parentCid]; //刷新出新的菜单 this.getMenus(); }); }, getMenus() { // 使用 this.$http 发起一个 GET 请求到 /sys/role/list 接口 this.$http({ url: this.$http.adornUrl("/product/category/list/tree"), // 请求的 URL method: "get", }).then(({ data }) => { // 请求成功后的回调函数 console.log("成功获取数据", data); this.menus = data.data; }); }, submitData() { if (this.dialogType == "add") { this.append(); } if (this.dialogType = "endi") { console.log("修改") this.endiCategory(); } }, //发送修改三级分类的请求 endiCategory() { var { catId, name, icon, productUnit } = this.category; this.$http({ url: this.$http.adornUrl('/product/category/update'), method: 'post', data: this.$http.adornData({ catId, name, icon, productUnit }, false) }).then(({ data }) => { this.$message({ message: "菜单修改成功", type: "success", }); //关闭对话框 this.dialogVisible = false; //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedLKey = [this.category.parentCid]; }); }, append(data) { this.title = "添加分类" console.log("append", data) this.dialogType = "add" this.dialogVisible = true; this.category.parentCid = data.catId; //转换字符串—+1 this.category.catLevel = data.catLevel * 1 + 1; }, endi(data) { console.log("要修改的数据", this.endi) this.title = "修改分类" this.dialogType = "endi" this.dialogVisible = true; //发送请求获取最新的数据 this.$http({ url: this.$http.adornUrl(`/product/category/info/${data.catId}`), method: 'get', }).then(({ data }) => { //请求成功 console.log("要回显的数据", data); console.log("category", this.category) this.category.name = data.data.name this.category.icon = data.data.icon this.category.catId = data.data.catId // this.category.productUnit = data.data.productUnit // this.category.sort = data.data.sort // this.category.catLevel = data.data.catLevel // this.category.showStatus = data.data.showStatus }) }, remove(node, data) { //获取要发送的数组 var ids = [data.catId]; this.$confirm(`是否删除当前菜单【${data.name}】`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }).then(() => { this.$http({ url: this.$http.adornUrl("/product/category/delete"), method: "post", data: this.$http.adornData(ids, false), }).then(({ data }) => { this.$message({ message: "菜单删除成功", type: "success", }); //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedLKey = [node.parent.data.catId]; //刷新出新的菜单 this.getMenus(); }); }); }, }, //生命周期 created() { this.getMenus(); }, }; </script>

1.5.4.1 前端菜单修改优化成可拖拽的形式

在添加一个判断是否能被拖拽到指定的位置

方法

 allowDrop(draggingNode,dropNode,type){ //1.被拖动的当前节点以及所在的父节点层数不能大于3 //1.1.被拖动的当前节点总层数 this.contNodeLevel(draggingNode.data) //当前拖动的节点+父节点所在深度不大于3即可 let deep =(this.maxLevel-draggingNode.data.catLevel)+1; if(type=="inner"){ return (deep+dropNode.level)<=3; }else{ return (deep+dropNode.parent.level<=3); } return ; }, contNodeLevel(node){ //找到所有子节点求出最大深度 if(node.children!=null&&node.children.length>0){ for(let i=0;i<node.children.length;i++){ if(node.children[i].catLevel>this.maxLevel){ this.maxLevel = node.children[i].catLevel; } this.contNodeLevel(node.children[i]); } } },

完整代码

<template> <div> <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox="true" node-key="catId" :default-expanded-keys="expandedLKey" draggable ="true" :allow-drop="allowDrop"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{ 
  { node.label }}</span> <span> <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)"> Append </el-button> <!-- 如果没有字节的就是最底层了，可以删除 --> <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)"> Delete </el-button> <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => endi(data)"> endi </el-button> </span> </span> </el-tree> <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false"> <el-form :model="category"> <el-form-item label="分类名称"> <el-input v-model="category.name" autocomplete="off"></el-input> </el-form-item> <el-form-item label="图标"> <el-input v-model="category.icon" autocomplete="off"></el-input> </el-form-item> <el-form-item label="计量单位"> <el-input v-model="category.productUnit" autocomplete="off"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="submitData">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { maxLevel:0, productUnit: "", icon: "", title: "", //给对话框设置一个类型，让他知道是谁调用的他。 dialogType: "", category: { name: "", icon: "", parentCid: 0, catLevel: 0, showStatus: 1, sort: 0 }, //默认不展示对话1框 dialogVisible: false, menus: [], // 默认展开的节点的id expandedLKey: [], defaultProps: { // 字节的的属性名字 children: "children", // 那个字段需要显示 label: "name", }, }; }, methods: { handleNodeClick(data) { console.log(data); }, addCateory() { this.$http({ url: this.$http.adornUrl('/product/category/save'), method: 'post', data: this.$http.adornData(this.category, false) }).then(({ data }) => { this.$message({ message: "菜单新增成功", type: "success", }); //关闭对话框 this.dialogVisible = false; //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedLKey = [this.category.parentCid]; //刷新出新的菜单 this.getMenus(); }); }, getMenus() { // 使用 this.$http 发起一个 GET 请求到 /sys/role/list 接口 this.$http({ url: this.$http.adornUrl("/product/category/list/tree"), // 请求的 URL method: "get", }).then(({ data }) => { // 请求成功后的回调函数 console.log("成功获取数据", data); this.menus = data.data; }); }, allowDrop(draggingNode,dropNode,type){ //1.被拖动的当前节点以及所在的父节点层数不能大于3 //1.1.被拖动的当前节点总层数 this.contNodeLevel(draggingNode.data) //当前拖动的节点+父节点所在深度不大于3即可 let deep =(this.maxLevel-draggingNode.data.catLevel)+1; if(type=="inner"){ return (deep+dropNode.level)<=3; }else{ return (deep+dropNode.parent.level<=3); } return ; }, contNodeLevel(node){ //找到所有子节点求出最大深度 if(node.children!=null&&node.children.length>0){ for(let i=0;i<node.children.length;i++){ if(node.children[i].catLevel>this.maxLevel){ this.maxLevel = node.children[i].catLevel; } this.contNodeLevel(node.children[i]); } } }, submitData() { if (this.dialogType == "add") { this.addCateory(); } if (this.dialogType = "endi") { console.log("修改") this.endiCategory(); } }, //发送修改三级分类的请求 endiCategory() { var { catId, name, icon, productUnit } = this.category; this.$http({ url: this.$http.adornUrl('/product/category/update'), method: 'post', data: this.$http.adornData({ catId, name, icon, productUnit }, false) }).then(({ data }) => { this.$message({ message: "菜单修改成功", type: "success", }); //关闭对话框 this.dialogVisible = false; //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedLKey = [this.category.parentCid]; }); }, append(data) { //点击添加按钮后给他执行默认的新增参数 this.title = "添加分类" console.log("append", data) this.dialogType = "add" this.dialogVisible = true; this.category.parentCid = data.catId; //转换字符串—+1 this.category.catLevel = data.catLevel * 1 + 1; }, endi(data) { console.log("要修改的数据", this.endi) this.title = "修改分类" this.dialogType = "endi" this.dialogVisible = true; //发送请求获取最新的数据 this.$http({ url: this.$http.adornUrl(`/product/category/info/${data.catId}`), method: 'get', }).then(({ data }) => { //请求成功 console.log("要回显的数据", data); console.log("category", this.category) this.category.name = data.data.name this.category.icon = data.data.icon this.category.catId = data.data.catId // this.category.productUnit = data.data.productUnit // this.category.sort = data.data.sort // this.category.catLevel = data.data.catLevel // this.category.showStatus = data.data.showStatus }) }, remove(node, data) { //获取要发送的数组 var ids = [data.catId]; this.$confirm(`是否删除当前菜单【${data.name}】`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }).then(() => { this.$http({ url: this.$http.adornUrl("/product/category/delete"), method: "post", data: this.$http.adornData(ids, false), }).then(({ data }) => { this.$message({ message: "菜单删除成功", type: "success", }); //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedLKey = [node.parent.data.catId]; //刷新出新的菜单 this.getMenus(); }); }); }, }, //生命周期 created() { this.getMenus(); }, }; </script>

1.5.4.2 让他拖拽完成后保存到数据库

具体框架：https://element.eleme.cn/#/zh-CN/component/tree

<template> <div> <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch> <el-button v-if="draggable" @click="batchSave">批量保存</el-button> <el-button type="danger" @click="batchDelete">批量删除</el-button> <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox node-key="catId" :default-expanded-keys="expandedKey" :draggable="draggable" :allow-drop="allowDrop" @node-drop="handleDrop" ref="menuTree" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{ 
  { node.label }}</span> <span> <el-button v-if="node.level <=2" type="text" size="mini" @click="() => append(data)" >Append</el-button> <el-button type="text" size="mini" @click="edit(data)">edit</el-button> <el-button v-if="node.childNodes.length==0" type="text" size="mini" @click="() => remove(node, data)" >Delete</el-button> </span> </span> </el-tree> <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" > <el-form :model="category"> <el-form-item label="分类名称"> <el-input v-model="category.name" autocomplete="off"></el-input> </el-form-item> <el-form-item label="图标"> <el-input v-model="category.icon" autocomplete="off"></el-input> </el-form-item> <el-form-item label="计量单位"> <el-input v-model="category.productUnit" autocomplete="off"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="submitData">确 定</el-button> </span> </el-dialog> </div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { return { pCid: [], draggable: false, updateNodes: [], maxLevel: 0, title: "", dialogType: "", //edit,add category: { name: "", parentCid: 0, catLevel: 0, showStatus: 1, sort: 0, productUnit: "", icon: "", catId: null }, dialogVisible: false, menus: [], expandedKey: [], defaultProps: { children: "children", label: "name" } }; }, //计算属性 类似于data概念 computed: {}, //监控data中的数据变化 watch: {}, //方法集合 methods: { getMenus() { this.$http({ url: this.$http.adornUrl("/product/category/list/tree"), method: "get" }).then(({ data }) => { console.log("成功获取到菜单数据...", data.data); this.menus = data.data; }); }, batchDelete() { let catIds = []; let checkedNodes = this.$refs.menuTree.getCheckedNodes(); console.log("被选中的元素", checkedNodes); for (let i = 0; i < checkedNodes.length; i++) { catIds.push(checkedNodes[i].catId); } this.$confirm(`是否批量删除【${catIds}】菜单?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.$http({ url: this.$http.adornUrl("/product/category/delete"), method: "post", data: this.$http.adornData(catIds, false) }).then(({ data }) => { this.$message({ message: "菜单批量删除成功", type: "success" }); this.getMenus(); }); }) .catch(() => {}); }, batchSave() { this.$http({ url: this.$http.adornUrl("/product/category/update/sort"), method: "post", data: this.$http.adornData(this.updateNodes, false) }).then(({ data }) => { this.$message({ message: "菜单顺序等修改成功", type: "success" }); //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedKey = this.pCid; this.updateNodes = []; this.maxLevel = 0; // this.pCid = 0; }); }, handleDrop(draggingNode, dropNode, dropType, ev) { console.log("handleDrop: ", draggingNode, dropNode, dropType); //1、当前节点最新的父节点id let pCid = 0; let siblings = null; if (dropType == "before" || dropType == "after") { pCid = dropNode.parent.data.catId == undefined ? 0 : dropNode.parent.data.catId; siblings = dropNode.parent.childNodes; } else { pCid = dropNode.data.catId; siblings = dropNode.childNodes; } this.pCid.push(pCid); //2、当前拖拽节点的最新顺序， for (let i = 0; i < siblings.length; i++) { if (siblings[i].data.catId == draggingNode.data.catId) { //如果遍历的是当前正在拖拽的节点 let catLevel = draggingNode.level; if (siblings[i].level != draggingNode.level) { //当前节点的层级发生变化 catLevel = siblings[i].level; //修改他子节点的层级 this.updateChildNodeLevel(siblings[i]); } this.updateNodes.push({ catId: siblings[i].data.catId, sort: i, parentCid: pCid, catLevel: catLevel }); } else { this.updateNodes.push({ catId: siblings[i].data.catId, sort: i }); } } //3、当前拖拽节点的最新层级 console.log("updateNodes", this.updateNodes); }, updateChildNodeLevel(node) { if (node.childNodes.length > 0) { for (let i = 0; i < node.childNodes.length; i++) { var cNode = node.childNodes[i].data; this.updateNodes.push({ catId: cNode.catId, catLevel: node.childNodes[i].level }); this.updateChildNodeLevel(node.childNodes[i]); } } }, allowDrop(draggingNode, dropNode, type) { //1、被拖动的当前节点以及所在的父节点总层数不能大于3 //1）、被拖动的当前节点总层数 console.log("allowDrop:", draggingNode, dropNode, type); // this.countNodeLevel(draggingNode); //当前正在拖动的节点+父节点所在的深度不大于3即可 let deep = Math.abs(this.maxLevel - draggingNode.level) + 1; console.log("深度：", deep); // this.maxLevel if (type == "inner") { // console.log( // `this.maxLevel：${this.maxLevel}；draggingNode.data.catLevel：${draggingNode.data.catLevel}；dropNode.level：${dropNode.level}` // ); return deep + dropNode.level <= 3; } else { return deep + dropNode.parent.level <= 3; } }, countNodeLevel(node) { //找到所有子节点，求出最大深度 if (node.childNodes != null && node.childNodes.length > 0) { for (let i = 0; i < node.childNodes.length; i++) { if (node.childNodes[i].level > this.maxLevel) { this.maxLevel = node.childNodes[i].level; } this.countNodeLevel(node.childNodes[i]); } } }, edit(data) { console.log("要修改的数据", data); this.dialogType = "edit"; this.title = "修改分类"; this.dialogVisible = true; //发送请求获取当前节点最新的数据 this.$http({ url: this.$http.adornUrl(`/product/category/info/${data.catId}`), method: "get" }).then(({ data }) => { //请求成功 console.log("要回显的数据", data); this.category.name = data.data.name; this.category.catId = data.data.catId; this.category.icon = data.data.icon; this.category.productUnit = data.data.productUnit; this.category.parentCid = data.data.parentCid; this.category.catLevel = data.data.catLevel; this.category.sort = data.data.sort; this.category.showStatus = data.data.showStatus; / * parentCid: 0, catLevel: 0, showStatus: 1, sort: 0, */ }); }, append(data) { console.log("append", data); this.dialogType = "add"; this.title = "添加分类"; this.dialogVisible = true; this.category.parentCid = data.catId; this.category.catLevel = data.catLevel * 1 + 1; this.category.catId = null; this.category.name = ""; this.category.icon = ""; this.category.productUnit = ""; this.category.sort = 0; this.category.showStatus = 1; }, submitData() { if (this.dialogType == "add") { this.addCategory(); } if (this.dialogType == "edit") { this.editCategory(); } }, //修改三级分类数据 editCategory() { var { catId, name, icon, productUnit } = this.category; this.$http({ url: this.$http.adornUrl("/product/category/update"), method: "post", data: this.$http.adornData({ catId, name, icon, productUnit }, false) }).then(({ data }) => { this.$message({ message: "菜单修改成功", type: "success" }); //关闭对话框 this.dialogVisible = false; //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedKey = [this.category.parentCid]; }); }, //添加三级分类 addCategory() { console.log("提交的三级分类数据", this.category); this.$http({ url: this.$http.adornUrl("/product/category/save"), method: "post", data: this.$http.adornData(this.category, false) }).then(({ data }) => { this.$message({ message: "菜单保存成功", type: "success" }); //关闭对话框 this.dialogVisible = false; //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedKey = [this.category.parentCid]; }); }, remove(node, data) { var ids = [data.catId]; this.$confirm(`是否删除【${data.name}】菜单?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.$http({ url: this.$http.adornUrl("/product/category/delete"), method: "post", data: this.$http.adornData(ids, false) }).then(({ data }) => { this.$message({ message: "菜单删除成功", type: "success" }); //刷新出新的菜单 this.getMenus(); //设置需要默认展开的菜单 this.expandedKey = [node.parent.data.catId]; }); }) .catch(() => {}); console.log("remove", node, data); } }, //生命周期 - 创建完成（可以访问当前this实例） created() { this.getMenus(); }, //生命周期 - 挂载完成（可以访问DOM元素） mounted() {}, beforeCreate() {}, //生命周期 - 创建之前 beforeMount() {}, //生命周期 - 挂载之前 beforeUpdate() {}, //生命周期 - 更新之前 updated() {}, //生命周期 - 更新之后 beforeDestroy() {}, //生命周期 - 销毁之前 destroyed() {}, //生命周期 - 销毁完成 activated() {} //如果页面有keep-alive缓存功能，这个函数会触发 }; </script> <style scoped> </style>

后端修改成批量更新

 @RequestMapping("/update/sort") //@RequiresPermissions("product:category:update") public R updateSort(@RequestBody CategoryEntity[] category){ categoryService.updateBatchById(Arrays.asList(category)); return R.ok(); }

1.6 添加批量删除功能

 batchDelete() { let catIds = []; let checkedNodes = this.$refs.menuTree.getCheckedNodes(); console.log("被选中的元素", checkedNodes); for (let i = 0; i < checkedNodes.length; i++) { catIds.push(checkedNodes[i].catId); } this.$confirm(`是否批量删除【${catIds}】菜单?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.$http({ url: this.$http.adornUrl("/product/category/delete"), method: "post", data: this.$http.adornData(catIds, false) }).then(({ data }) => { this.$message({ message: "菜单批量删除成功", type: "success" }); this.getMenus(); }); }) .catch(() => {}); },

1.7 实现品牌管理使用逆向工程快速生成

先创建一个分类

找到我们之前逆向生成的代码，用的是人人代码逆向生成项目生成的，具体流程看我之前的文章。

之前会把vue模块代码也生成到项目的modules下直接拿出来就可以用了

里面的字段名字就是数据库字段的注释

设置页面显示状态的开关

 <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态"> <template slot-scope="scope"> <el-switch v-model="scope.row.showStatus" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="updateBrandStatus(scope.row)" ></el-switch> </template> </el-table-column>

绑定点击函数来更新最新状态。

 updateBrandStatus(data) { console.log("最新信息", data); let { brandId, showStatus } = data; //发送请求修改状态 this.$http({ url: this.$http.adornUrl("/product/brand/update/status"), method: "post", data: this.$http.adornData({ brandId, showStatus }, false) }).then(({ data }) => { this.$message({ type: "success", message: "状态更新成功" }); }); },

1.7.1 实现文件上传功能存-对接使用OSS

因为自建存储服务太浪费时间，所以购买现成的云产品

在阿里云获取其他云存储厂商创建oss服务

两种上传模式

另一种通过前端直接上传oss
https://blog.csdn.net/txshchl/article/details/

1.8 创建第三方的api项目服务

yml的配置文件

spring: cloud: nacos: discovery: server-addr: 127.0.0.1:8848 alicloud: access-key: LTAI4FwvfjSycd1APnuG9bjj secret-key: O6xaxyiWfSIitcOkSuK27ju4hXT5Hl oss: endpoint: oss-cn-beijing.aliyuncs.com bucket: gulimall-hello application: name: gulimall-third-party server: port: 30000

nacos的配置文件

spring.application.name=gulimall-third-party spring.cloud.nacos.config.server-addr=127.0.0.1:8848 spring.cloud.nacos.config.namespace=4380e303-f736-4fe8-99e9-b5e spring.cloud.nacos.config.ext-config[0].data-id=oss.yml spring.cloud.nacos.config.ext-config[0].group=DEFAULT_GROUP spring.cloud.nacos.config.ext-config[0].refresh=true

联调oss上传接口

package com.atguigu.gulimall.thirdparty.controller; import com.aliyun.oss.OSS; import com.aliyun.oss.common.utils.BinaryUtil; import com.aliyun.oss.model.MatchMode; import com.aliyun.oss.model.PolicyConditions; import com.atguigu.common.utils.R; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.text.SimpleDateFormat; import java.util.Date; import java.util.LinkedHashMap; import java.util.Map; @RestController public class OssController { @Autowired OSS ossClient; @Value("${spring.cloud.alicloud.oss.endpoint}") private String endpoint; @Value("${spring.cloud.alicloud.oss.bucket}") private String bucket; @Value("${spring.cloud.alicloud.access-key}") private String accessId; @RequestMapping("/oss/policy") public R policy() { //https://gulimall-hello.oss-cn-beijing.aliyuncs.com/hahaha.jpg String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint // callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。 // String callbackUrl = "http://88.88.88.88:8888"; String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date()); String dir = format + "/"; // 用户上传文件时指定的前缀。 Map<String, String> respMap = null; try { long expireTime = 30; long expireEndTime = System.currentTimeMillis() + expireTime * 1000; Date expiration = new Date(expireEndTime); PolicyConditions policyConds = new PolicyConditions(); policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, ); policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir); String postPolicy = ossClient.generatePostPolicy(expiration, policyConds); byte[] binaryData = postPolicy.getBytes("utf-8"); String encodedPolicy = BinaryUtil.toBase64String(binaryData); String postSignature = ossClient.calculatePostSignature(postPolicy); respMap = new LinkedHashMap<String, String>(); respMap.put("accessid", accessId); respMap.put("policy", encodedPolicy); respMap.put("signature", postSignature); respMap.put("dir", dir); respMap.put("host", host); respMap.put("expire", String.valueOf(expireEndTime / 1000)); // respMap.put("expire", formatISO8601Date(expiration)); } catch (Exception e) { // Assert.fail(e.getMessage()); System.out.println(e.getMessage()); } return R.ok().put("data",respMap); } }

1.8.1 前后端联调oss对接

多文件前端上传组件

<template> <div> <el-upload action="http://guli-ossyun.oss-cn-beijing.aliyuncs.com" :data="dataObj" :list-type="listType" :file-list="fileList" :before-upload="beforeUpload" :on-remove="handleRemove" :on-success="handleUploadSuccess" :on-preview="handlePreview" :limit="maxCount" :on-exceed="handleExceed" :show-file-list="showFile" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt /> </el-dialog> </div> </template> <script> import { policy } from "./policy"; import { getUUID } from '@/utils' export default { name: "multiUpload", props: { //图片属性数组 value: Array, //最大上传图片数量 maxCount: { type: Number, default: 30 }, listType:{ type: String, default: "picture-card" }, showFile:{ type: Boolean, default: true } }, data() { return { dataObj: { policy: "", signature: "", key: "", ossaccessKeyId: "", dir: "", host: "", uuid: "" }, dialogVisible: false, dialogImageUrl: null }; }, computed: { fileList() { let fileList = []; for (let i = 0; i < this.value.length; i++) { fileList.push({ url: this.value[i] }); } return fileList; } }, mounted() {}, methods: { emitInput(fileList) { let value = []; for (let i = 0; i < fileList.length; i++) { value.push(fileList[i].url); } this.$emit("input", value); }, handleRemove(file, fileList) { this.emitInput(fileList); }, handlePreview(file) { this.dialogVisible = true; this.dialogImageUrl = file.url; }, beforeUpload(file) { let _self = this; return new Promise((resolve, reject) => { policy() .then(response => { console.log("这是什么${filename}"); _self.dataObj.policy = response.data.policy; _self.dataObj.signature = response.data.signature; _self.dataObj.ossaccessKeyId = response.data.accessid; _self.dataObj.key = response.data.dir +getUUID()+"_${filename}"; _self.dataObj.dir = response.data.dir; _self.dataObj.host = response.data.host; resolve(true); }) .catch(err => { console.log("出错了...",err) reject(false); }); }); }, handleUploadSuccess(res, file) { this.fileList.push({ name: file.name, // url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名 url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}",file.name) }); this.emitInput(this.fileList); }, handleExceed(files, fileList) { this.$message({ message: "最多只能上传" + this.maxCount + "张图片", type: "warning", duration: 1000 }); } } }; </script> <style> </style>

单文件前端上传组件

<template> <div> <el-upload action="http://guli-ossyun.oss-cn-beijing.aliyuncs.com" :data="dataObj" list-type="picture" :multiple="false" :show-file-list="showFileList" :file-list="fileList" :before-upload="beforeUpload" :on-remove="handleRemove" :on-success="handleUploadSuccess" :on-preview="handlePreview"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="fileList[0].url" alt=""> </el-dialog> </div> </template> <script> import {policy} from './policy' import { getUUID } from '@/utils' export default { name: 'singleUpload', props: { value: String }, computed: { imageUrl() { return this.value; }, imageName() { if (this.value != null && this.value !== '') { return this.value.substr(this.value.lastIndexOf("/") + 1); } else { return null; } }, fileList() { return [{ name: this.imageName, url: this.imageUrl }] }, showFileList: { get: function () { return this.value !== null && this.value !== ''&& this.value!==undefined; }, set: function (newValue) { } } }, data() { return { dataObj: { policy: '', signature: '', key: '', ossaccessKeyId: '', dir: '', host: '', // callback:'', }, dialogVisible: false }; }, methods: { emitInput(val) { this.$emit('input', val) }, handleRemove(file, fileList) { this.emitInput(''); }, handlePreview(file) { this.dialogVisible = true; }, beforeUpload(file) { let _self = this; return new Promise((resolve, reject) => { policy().then(response => { console.log("响应的数据",response); _self.dataObj.policy = response.data.policy; _self.dataObj.signature = response.data.signature; _self.dataObj.ossaccessKeyId = response.data.accessid; _self.dataObj.key = response.data.dir +getUUID()+'_${filename}'; _self.dataObj.dir = response.data.dir; _self.dataObj.host = response.data.host; console.log("响应的数据222。。。",_self.dataObj); resolve(true) }).catch(err => { reject(false) }) }) }, handleUploadSuccess(res, file) { console.log("上传成功...") this.showFileList = true; this.fileList.pop(); this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) }); this.emitInput(this.fileList[0].url); } } } </script> <style> </style>

商品详情页

<template> <div class="mod-config"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form-item> <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input> </el-form-item> <el-form-item> <el-button @click="getDataList()">查询</el-button> <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-button v-if="isAuth('product:brand:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0" >批量删除</el-button> </el-form-item> </el-form> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;" > <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> <el-table-column prop="brandId" header-align="center" align="center" label="品牌id"></el-table-column> <el-table-column prop="name" header-align="center" align="center" label="品牌名"></el-table-column> <el-table-column prop="logo" header-align="center" align="center" label="品牌logo地址"> <template slot-scope="scope"> <!-- <el-image style="width: 100px; height: 80px" :src="scope.row.logo" fit="fill"></el-image>--> <img :src="scope.row.logo" style="width: 100px; height: 80px" /> </template> </el-table-column> <el-table-column prop="descript" header-align="center" align="center" label="介绍"></el-table-column> <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态"> <template slot-scope="scope"> <el-switch v-model="scope.row.showStatus" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="updateBrandStatus(scope.row)" ></el-switch> </template> </el-table-column> <el-table-column prop="firstLetter" header-align="center" align="center" label="检索首字母"></el-table-column> <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="updateCatelogHandle(scope.row.brandId)">关联分类</el-button> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.brandId)">修改</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row.brandId)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper" ></el-pagination> <!-- 弹窗, 新增 / 修改 --> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <el-dialog title="关联分类" :visible.sync="cateRelationDialogVisible" width="30%"> <el-popover placement="right-end" v-model="popCatelogSelectVisible"> <category-cascader :catelogPath.sync="catelogPath"></category-cascader> <div style="text-align: right; margin: 0"> <el-button size="mini" type="text" @click="popCatelogSelectVisible = false">取消</el-button> <el-button type="primary" size="mini" @click="addCatelogSelect">确定</el-button> </div> <el-button slot="reference">新增关联</el-button> </el-popover> <el-table :data="cateRelationTableData" style="width: 100%"> <el-table-column prop="id" label="#"></el-table-column> <el-table-column prop="brandName" label="品牌名"></el-table-column> <el-table-column prop="catelogName" label="分类名"></el-table-column> <el-table-column fixed="right" header-align="center" align="center" label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="deleteCateRelationHandle(scope.row.id,scope.row.brandId)" >移除</el-button> </template> </el-table-column> </el-table> <span slot="footer" class="dialog-footer"> <el-button @click="cateRelationDialogVisible = false">取 消</el-button> <el-button type="primary" @click="cateRelationDialogVisible = false">确 定</el-button> </span> </el-dialog> </div> </template> <script> import AddOrUpdate from "./brand-add-or-update"; import CategoryCascader from "../common/category-cascader"; export default { data() { return { dataForm: { key: "" }, brandId: 0, catelogPath: [], dataList: [], cateRelationTableData: [], pageIndex: 1, pageSize: 10, totalPage: 0, dataListLoading: false, dataListSelections: [], addOrUpdateVisible: false, cateRelationDialogVisible: false, popCatelogSelectVisible: false }; }, components: { AddOrUpdate, CategoryCascader }, activated() { this.getDataList(); }, methods: { addCatelogSelect() { //{"brandId":1,"catelogId":2} this.popCatelogSelectVisible =false; this.$http({ url: this.$http.adornUrl("/product/categorybrandrelation/save"), method: "post", data: this.$http.adornData({brandId:this.brandId,catelogId:this.catelogPath[this.catelogPath.length-1]}, false) }).then(({ data }) => { this.getCateRelation(); }); }, deleteCateRelationHandle(id, brandId) { this.$http({ url: this.$http.adornUrl("/product/categorybrandrelation/delete"), method: "post", data: this.$http.adornData([id], false) }).then(({ data }) => { this.getCateRelation(); }); }, updateCatelogHandle(brandId) { this.cateRelationDialogVisible = true; this.brandId = brandId; this.getCateRelation(); }, getCateRelation() { this.$http({ url: this.$http.adornUrl("/product/categorybrandrelation/catelog/list"), method: "get", params: this.$http.adornParams({ brandId: this.brandId }) }).then(({ data }) => { this.cateRelationTableData = data.data; }); }, // 获取数据列表 getDataList() { this.dataListLoading = true; this.$http({ url: this.$http.adornUrl("/product/brand/list"), method: "get", params: this.$http.adornParams({ page: this.pageIndex, limit: this.pageSize, key: this.dataForm.key }) }).then(({ data }) => { if (data && data.code === 0) { this.dataList = data.page.list; this.totalPage = data.page.totalCount; } else { this.dataList = []; this.totalPage = 0; } this.dataListLoading = false; }); }, updateBrandStatus(data) { console.log("最新信息", data); let { brandId, showStatus } = data; //发送请求修改状态 this.$http({ url: this.$http.adornUrl("/product/brand/update/status"), method: "post", data: this.$http.adornData({ brandId, showStatus }, false) }).then(({ data }) => { this.$message({ type: "success", message: "状态更新成功" }); }); }, // 每页数 sizeChangeHandle(val) { this.pageSize = val; this.pageIndex = 1; this.getDataList(); }, // 当前页 currentChangeHandle(val) { this.pageIndex = val; this.getDataList(); }, // 多选 selectionChangeHandle(val) { this.dataListSelections = val; }, // 新增 / 修改 addOrUpdateHandle(id) { this.addOrUpdateVisible = true; this.$nextTick(() => { this.$refs.addOrUpdate.init(id); }); }, // 删除 deleteHandle(id) { var ids = id ? [id] : this.dataListSelections.map(item => { return item.brandId; }); this.$confirm( `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" } ).then(() => { this.$http({ url: this.$http.adornUrl("/product/brand/delete"), method: "post", data: this.$http.adornData(ids, false) }).then(({ data }) => { if (data && data.code === 0) { this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => { this.getDataList(); } }); } else { this.$message.error(data.msg); } }); }); } } }; </script>

后端代码

package com.atguigu.gulimall.thirdparty.controller; import com.aliyun.oss.OSS; import com.aliyun.oss.common.utils.BinaryUtil; import com.aliyun.oss.model.MatchMode; import com.aliyun.oss.model.PolicyConditions; import com.atguigu.common.utils.R; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.text.SimpleDateFormat; import java.util.Date; import java.util.LinkedHashMap; import java.util.Map; @RestController public class OssController { @Autowired OSS ossClient; @Value("${spring.cloud.alicloud.oss.endpoint}") private String endpoint; @Value("${spring.cloud.alicloud.oss.bucket}") private String bucket; @Value("${spring.cloud.alicloud.access-key}") private String accessId; @RequestMapping("/oss/policy") public R policy() { //https://gulimall-hello.oss-cn-beijing.aliyuncs.com/hahaha.jpg String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint // callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。 // String callbackUrl = "http://88.88.88.88:8888"; String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date()); String dir = format + "/"; // 用户上传文件时指定的前缀。 Map<String, String> respMap = null; try { long expireTime = 30; long expireEndTime = System.currentTimeMillis() + expireTime * 1000; Date expiration = new Date(expireEndTime); PolicyConditions policyConds = new PolicyConditions(); policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, ); policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir); String postPolicy = ossClient.generatePostPolicy(expiration, policyConds); byte[] binaryData = postPolicy.getBytes("utf-8"); String encodedPolicy = BinaryUtil.toBase64String(binaryData); String postSignature = ossClient.calculatePostSignature(postPolicy); respMap = new LinkedHashMap<String, String>(); respMap.put("accessid", accessId); respMap.put("policy", encodedPolicy); respMap.put("signature", postSignature); respMap.put("dir", dir); respMap.put("host", host); respMap.put("expire", String.valueOf(expireEndTime / 1000)); // respMap.put("expire", formatISO8601Date(expiration)); } catch (Exception e) { // Assert.fail(e.getMessage()); System.out.println(e.getMessage()); } return R.ok().put("data",respMap); } }

1.8.2 JSR303添加校验注解b

通过添加校验注解来让输入的内容不能为空。

package com.atguigu.gulimall.product.entity; import com.atguigu.common.valid.AddGroup; import com.atguigu.common.valid.ListValue; import com.atguigu.common.valid.UpdateGroup; import com.atguigu.common.valid.UpdateStatusGroup; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import java.io.Serializable; import lombok.Data; import org.hibernate.validator.constraints.URL; import javax.validation.constraints.*; / * 品牌 * * @author leifengyang * @email  * @date 2019-10-01 21:08:49 */ @Data @TableName("pms_brand") public class BrandEntity implements Serializable { private static final long serialVersionUID = 1L; / * 品牌id */ @NotNull(message = "修改必须指定品牌id",groups = {UpdateGroup.class}) @Null(message = "新增不能指定id",groups = {AddGroup.class}) @TableId private Long brandId; / * 品牌名 */ @NotBlank(message = "品牌名必须提交",groups = {AddGroup.class,UpdateGroup.class}) private String name; / * 品牌logo地址 */ @NotBlank(groups = {AddGroup.class}) @URL(message = "logo必须是一个合法的url地址",groups={AddGroup.class,UpdateGroup.class}) private String logo; / * 介绍 */ private String descript; / * 显示状态[0-不显示；1-显示] */ // @Pattern() @NotNull(groups = {AddGroup.class, UpdateStatusGroup.class}) @ListValue(vals={0,1},groups = {AddGroup.class, UpdateStatusGroup.class}) private Integer showStatus; / * 检索首字母 */ @NotEmpty(groups={AddGroup.class}) @Pattern(regexp="^[a-zA-Z]$",message = "检索首字母必须是一个字母",groups={AddGroup.class,UpdateGroup.class}) private String firstLetter; / * 排序 */ @NotNull(groups={AddGroup.class}) @Min(value = 0,message = "排序必须大于等于0",groups={AddGroup.class,UpdateGroup.class}) private Integer sort; }

控制层要添加Validated注解才能让他判断不为空生效

 @RequestMapping("/save") //@RequiresPermissions("product:brand:save") public R save(@Validated({AddGroup.class}) @RequestBody BrandEntity brand/*,BindingResult result*/){ // if(result.hasErrors()){ // Map<String,String> map = new HashMap<>(); // //1、获取校验的错误结果 // result.getFieldErrors().forEach((item)->{ // //FieldError 获取到错误提示 // String message = item.getDefaultMessage(); // //获取错误的属性的名字 // String field = item.getField(); // map.put(field,message); // }); // // return R.error(400,"提交的数据不合法").put("data",map); // }else { // // } brandService.save(brand); return R.ok(); }

1.9 统一异常处理

之前的异常处理方法太过于麻烦。单独创建一个异常类，他的作用就是用来统一处理异常的。

package com.atguigu.gulimall.product.exception; import com.atguigu.common.exception.BizCodeEnume; import com.atguigu.common.utils.R; import lombok.extern.slf4j.Slf4j; import org.springframework.validation.BindingResult; import org.springframework.web.bind.MethodArgumentNotValidException; import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestControllerAdvice; import org.springframework.web.servlet.ModelAndView; import java.util.HashMap; import java.util.Map; / * 集中处理所有异常 */ @Slf4j //@ResponseBody //@ControllerAdvice(basePackages = "com.atguigu.gulimall.product.controller") @RestControllerAdvice(basePackages = "com.atguigu.gulimall.product.controller") public class GulimallExceptionControllerAdvice { @ExceptionHandler(value= MethodArgumentNotValidException.class) public R handleVaildException(MethodArgumentNotValidException e){ log.error("数据校验出现问题{}，异常类型：{}",e.getMessage(),e.getClass()); BindingResult bindingResult = e.getBindingResult(); Map<String,String> errorMap = new HashMap<>(); bindingResult.getFieldErrors().forEach((fieldError)->{ errorMap.put(fieldError.getField(),fieldError.getDefaultMessage()); }); return R.error(BizCodeEnume.VAILD_EXCEPTION.getCode(),BizCodeEnume.VAILD_EXCEPTION.getMsg()).put("data",errorMap); } @ExceptionHandler(value = Throwable.class) public R handleException(Throwable throwable){ log.error("错误：",throwable); return R.error(BizCodeEnume.UNKNOW_EXCEPTION.getCode(),BizCodeEnume.UNKNOW_EXCEPTION.getMsg()); } }

异常代码类

package com.atguigu.common.exception; /* * 错误码和错误信息定义类 * 1. 错误码定义规则为5为数字 * 2. 前两位表示业务场景，最后三位表示错误码。例如：。10:通用 001:系统未知异常 * 3. 维护错误码后需要维护错误描述，将他们定义为枚举形式 * 错误码列表： * 10: 通用 * 001：参数格式校验 * 11: 商品 * 12: 订单 * 13: 购物车 * 14: 物流 * * */ public enum BizCodeEnume { UNKNOW_EXCEPTION(10000,"系统未知异常"), VAILD_EXCEPTION(10001,"参数格式校验失败"); private int code; private String msg; BizCodeEnume(int code,String msg){ this.code = code; this.msg = msg; } public int getCode() { return code; } public String getMsg() { return msg; } }

1.10 SPU&SKU

SPU是一个商品，而SKU是该商品的不同的规格

1.11 属性分组整和分类组件

计划设计左边是一个多级菜单右边是我们的属性。

为了避免重复的造轮子，先创建出来一个公共的类category.vue

使用这个栅格布局代表一整行

计划是六列菜单十八列表格

把之前写的比菜单列表抽到刚刚新建的category组件中

<template> <div> <el-tree :data="menus" :props="defaultProps" node-key="catId" ref="menuTree" @node-click="nodeclick" :filter-node-method="filterNode" :highlight-current="true"></el-tree> </div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { //这里存放数据 return { filterText: "", menus: [], expandedKey: [], defaultProps: { children: "children", label: "name" } }; }, //计算属性 类似于data概念 computed: {}, //监控data中的数据变化 watch: { filterText(val) { this.$refs.menuTree.filter(val); } }, //方法集合 methods: { //树节点过滤 filterNode(value, data) { if (!value) return true; return data.name.indexOf(value) !== -1; }, getMenus() { this.$http({ url: this.$http.adornUrl("/product/category/list/tree"), method: "get" }).then(({ data }) => { this.menus = data.data; }); }, nodeclick(data, node, component) { console.log("子组件category的节点被点击", data, node, component); //向父组件发送事件； this.$emit("tree-node-click", data, node, component); } }, //生命周期 - 创建完成（可以访问当前this实例） created() { this.getMenus(); }, //生命周期 - 挂载完成（可以访问DOM元素） mounted() { }, beforeCreate() { }, //生命周期 - 创建之前 beforeMount() { }, //生命周期 - 挂载之前 beforeUpdate() { }, //生命周期 - 更新之前 updated() { }, //生命周期 - 更新之后 beforeDestroy() { }, //生命周期 - 销毁之前 destroyed() { }, //生命周期 - 销毁完成 activated() { } //如果页面有keep-alive缓存功能，这个函数会触发 }; </script> <style scoped> </style>

在vue里面使用刚刚创建的菜单分类组件直接导入就行

export default { //import引入的组件需要注入到对象中才能使用 components: {category}, //注入后把组件名做标签使用 props: {}, data() { return { }; }, }

然后直接插入

<template> <el-row :gutter="20"> <el-col :span="6"> <category></category> </el-col> <el-col :span="18"> 十八列表格 </el-col> </el-row> </template>

效果就是我们刚刚插入的组件了

把刚刚逆向生成的属性分组内容复制粘贴到表格中

把data数据也一并复制过去

<template> <el-row :gutter="20"> <el-col :span="6"> <category></category> </el-col> <el-col :span="18"> <div class="mod-config"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form-item> <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input> </el-form-item> <el-form-item> <el-button @click="getDataList()">查询</el-button> <el-button type="success" @click="getAllDataList()">查询全部</el-button> <el-button v-if="isAuth('product:attrgroup:save')" type="primary" @click="addOrUpdateHandle()" >新增</el-button> <el-button v-if="isAuth('product:attrgroup:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0" >批量删除</el-button> </el-form-item> </el-form> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;" > <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> <el-table-column prop="attrGroupId" header-align="center" align="center" label="分组id"></el-table-column> <el-table-column prop="attrGroupName" header-align="center" align="center" label="组名"></el-table-column> <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column> <el-table-column prop="descript" header-align="center" align="center" label="描述"></el-table-column> <el-table-column prop="icon" header-align="center" align="center" label="组图标"></el-table-column> <el-table-column prop="catelogId" header-align="center" align="center" label="所属分类id"></el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作" > <template slot-scope="scope"> <el-button type="text" size="small" @click="relationHandle(scope.row.attrGroupId)">关联</el-button> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.attrGroupId)" >修改</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row.attrGroupId)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper" ></el-pagination> <!-- 弹窗, 新增 / 修改 --> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> </div> </el-col> </el-row> </template> <script> import category from '../common/category.vue'; export default { //import引入的组件需要注入到对象中才能使用 components: {category}, //注入后把组件名做标签使用 props: {}, data() { return { catId: 0, dataForm: { key: "" }, dataList: [], pageIndex: 1, pageSize: 10, totalPage: 0, dataListLoading: false, dataListSelections: [], addOrUpdateVisible: false, relationVisible: false }; }, } </script> <style></style>

导入一个增删改查组件

<template> <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" @closed="dialogClose" > <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px"> <!-- @keyup.enter.native="dataFormSubmit()" --> <el-form-item label="属性名" prop="attrName"> <el-input v-model="dataForm.attrName" placeholder="属性名"></el-input> </el-form-item> <el-form-item label="属性类型" prop="attrType"> <el-select v-model="dataForm.attrType" placeholder="请选择"> <el-option label="规格参数" :value="1"></el-option> <el-option label="销售属性" :value="0"></el-option> </el-select> </el-form-item> <el-form-item label="值类型" prop="valueType"> <el-switch v-model="dataForm.valueType" active-text="允许多个值" inactive-text="只能单个值" active-color="#13ce66" inactive-color="#ff4949" :inactive-value="0" :active-value="1" ></el-switch> </el-form-item> <el-form-item label="可选值" prop="valueSelect"> <!-- <el-input v-model="dataForm.valueSelect"></el-input> --> <el-select v-model="dataForm.valueSelect" multiple filterable allow-create placeholder="请输入内容" ></el-select> </el-form-item> <el-form-item label="属性图标" prop="icon"> <el-input v-model="dataForm.icon" placeholder="属性图标"></el-input> </el-form-item> <el-form-item label="所属分类" prop="catelogId"> <category-cascader :catelogPath.sync="catelogPath"></category-cascader> </el-form-item> <el-form-item label="所属分组" prop="attrGroupId" v-if="type == 1"> <el-select ref="groupSelect" v-model="dataForm.attrGroupId" placeholder="请选择"> <el-option v-for="item in attrGroups" :key="item.attrGroupId" :label="item.attrGroupName" :value="item.attrGroupId" ></el-option> </el-select> </el-form-item> <el-form-item label="可检索" prop="searchType" v-if="type == 1"> <el-switch v-model="dataForm.searchType" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" ></el-switch> </el-form-item> <el-form-item label="快速展示" prop="showDesc" v-if="type == 1"> <el-switch v-model="dataForm.showDesc" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" ></el-switch> </el-form-item> <el-form-item label="启用状态" prop="enable"> <el-switch v-model="dataForm.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" ></el-switch> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button> </span> </el-dialog> </template> <script> import CategoryCascader from "../common/category-cascader"; export default { data() { return { visible: false, dataForm: { attrId: 0, attrName: "", searchType: 0, valueType: 1, icon: "", valueSelect: "", attrType: 1, enable: 1, catelogId: "", attrGroupId: "", showDesc: 0 }, catelogPath: [], attrGroups: [], dataRule: { attrName: [ { required: true, message: "属性名不能为空", trigger: "blur" } ], searchType: [ { required: true, message: "是否需要检索不能为空", trigger: "blur" } ], valueType: [ { required: true, message: "值类型不能为空", trigger: "blur" } ], icon: [ { required: true, message: "属性图标不能为空", trigger: "blur" } ], attrType: [ { required: true, message: "属性类型不能为空", trigger: "blur" } ], enable: [ { required: true, message: "启用状态不能为空", trigger: "blur" } ], catelogId: [ { required: true, message: "需要选择正确的三级分类数据", trigger: "blur" } ], showDesc: [ { required: true, message: "快速展示不能为空", trigger: "blur" } ] } }; }, props:{ type:{ type: Number, default: 1 } }, watch: { catelogPath(path) { //监听到路径变化需要查出这个三级分类的分组信息 console.log("路径变了", path); this.attrGroups = []; this.dataForm.attrGroupId = ""; this.dataForm.catelogId = path[path.length - 1]; if (path && path.length == 3) { this.$http({ url: this.$http.adornUrl( `/product/attrgroup/list/${path[path.length - 1]}` ), method: "get", params: this.$http.adornParams({ page: 1, limit:  }) }).then(({ data }) => { if (data && data.code === 0) { this.attrGroups = data.page.list; } else { this.$message.error(data.msg); } }); } else if (path.length == 0) { this.dataForm.catelogId = ""; } else { this.$message.error("请选择正确的分类"); this.dataForm.catelogId = ""; } } }, components: { CategoryCascader }, methods: { init(id) { this.dataForm.attrId = id || 0; this.dataForm.attrType = this.type; this.visible = true; this.$nextTick(() => { this.$refs["dataForm"].resetFields(); if (this.dataForm.attrId) { this.$http({ url: this.$http.adornUrl( `/product/attr/info/${this.dataForm.attrId}` ), method: "get", params: this.$http.adornParams() }).then(({ data }) => { if (data && data.code === 0) { this.dataForm.attrName = data.attr.attrName; this.dataForm.searchType = data.attr.searchType; this.dataForm.valueType = data.attr.valueType; this.dataForm.icon = data.attr.icon; this.dataForm.valueSelect = data.attr.valueSelect.split(";"); this.dataForm.attrType = data.attr.attrType; this.dataForm.enable = data.attr.enable; this.dataForm.catelogId = data.attr.catelogId; this.dataForm.showDesc = data.attr.showDesc; //attrGroupId //catelogPath this.catelogPath = data.attr.catelogPath; this.$nextTick(() => { this.dataForm.attrGroupId = data.attr.attrGroupId; }); } }); } }); }, // 表单提交 dataFormSubmit() { this.$refs["dataForm"].validate(valid => { if (valid) { this.$http({ url: this.$http.adornUrl( `/product/attr/${!this.dataForm.attrId ? "save" : "update"}` ), method: "post", data: this.$http.adornData({ attrId: this.dataForm.attrId || undefined, attrName: this.dataForm.attrName, searchType: this.dataForm.searchType, valueType: this.dataForm.valueType, icon: this.dataForm.icon, valueSelect: this.dataForm.valueSelect.join(";"), attrType: this.dataForm.attrType, enable: this.dataForm.enable, catelogId: this.dataForm.catelogId, attrGroupId: this.dataForm.attrGroupId, showDesc: this.dataForm.showDesc }) }).then(({ data }) => { if (data && data.code === 0) { this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => { this.visible = false; this.$emit("refreshDataList"); } }); } else { this.$message.error(data.msg); } }); } }); }, //dialogClose dialogClose() { this.catelogPath = []; } } }; </script>

import AddOrUpdate from "./attrgroup-add-or-update";

后续修改内容需要点击左边分类的时候，右边自动查询出来这个分类下面的商品信息

难点就在于如果感知我们点击了外部的树形组件后去查询数据库。动态的刷新表格里面的内容。

/ * 父子组件传递数据 * 1)、子组件给父组件传递数据，事件机制； * 子组件给父组件发送一个事件，携带上数据。 * // this.$emit("事件名",携带的数据...)

使用这个事件

//绑定nodeclient <category @tree-node-click="treenodeclick"></category> //感知树节点被点击 treenodeclick(data, node, component) { if (node.level == 3) { this.catId = data.catId; this.getDataList(); //重新查询 } },

完整写法包含增删改查

<template> <el-row :gutter="20"> <el-col :span="6"> <category @tree-node-click="treenodeclick"></category> </el-col> <el-col :span="18"> <div class="mod-config"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form-item> <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input> </el-form-item> <el-form-item> <el-button @click="getDataList()">查询</el-button> <el-button type="success" @click="getAllDataList()">查询全部</el-button> <el-button v-if="isAuth('product:attrgroup:save')" type="primary" @click="addOrUpdateHandle()" >新增</el-button> <el-button v-if="isAuth('product:attrgroup:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0" >批量删除</el-button> </el-form-item> </el-form> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;" > <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> <el-table-column prop="attrGroupId" header-align="center" align="center" label="分组id"></el-table-column> <el-table-column prop="attrGroupName" header-align="center" align="center" label="组名"></el-table-column> <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column> <el-table-column prop="descript" header-align="center" align="center" label="描述"></el-table-column> <el-table-column prop="icon" header-align="center" align="center" label="组图标"></el-table-column> <el-table-column prop="catelogId" header-align="center" align="center" label="所属分类id"></el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作" > <template slot-scope="scope"> <el-button type="text" size="small" @click="relationHandle(scope.row.attrGroupId)">关联</el-button> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.attrGroupId)" >修改</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row.attrGroupId)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper" ></el-pagination> <!-- 弹窗, 新增 / 修改 --> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <!-- 修改关联关系 --> <relation-update v-if="relationVisible" ref="relationUpdate" @refreshData="getDataList"></relation-update> </div> </el-col> </el-row> </template> <script> / * 父子组件传递数据 * 1)、子组件给父组件传递数据，事件机制； * 子组件给父组件发送一个事件，携带上数据。 * // this.$emit("事件名",携带的数据...) */ //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; import Category from "../common/category"; import AddOrUpdate from "./attrgroup-add-or-update"; import RelationUpdate from "./attr-group-relation"; export default { //import引入的组件需要注入到对象中才能使用 components: { Category, AddOrUpdate, RelationUpdate }, props: {}, data() { return { catId: 0, dataForm: { key: "" }, dataList: [], pageIndex: 1, pageSize: 10, totalPage: 0, dataListLoading: false, dataListSelections: [], addOrUpdateVisible: false, relationVisible: false }; }, activated() { this.getDataList(); }, methods: { //处理分组与属性的关联 relationHandle(groupId) { this.relationVisible = true; this.$nextTick(() => { this.$refs.relationUpdate.init(groupId); }); }, //感知树节点被点击 treenodeclick(data, node, component) { if (node.level == 3) { this.catId = data.catId; this.getDataList(); //重新查询 } }, getAllDataList(){ this.catId = 0; this.getDataList(); }, // 获取数据列表 getDataList() { this.dataListLoading = true; this.$http({ url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`), method: "get", params: this.$http.adornParams({ page: this.pageIndex, limit: this.pageSize, key: this.dataForm.key }) }).then(({ data }) => { if (data && data.code === 0) { this.dataList = data.page.list; this.totalPage = data.page.totalCount; } else { this.dataList = []; this.totalPage = 0; } this.dataListLoading = false; }); }, // 每页数 sizeChangeHandle(val) { this.pageSize = val; this.pageIndex = 1; this.getDataList(); }, // 当前页 currentChangeHandle(val) { this.pageIndex = val; this.getDataList(); }, // 多选 selectionChangeHandle(val) { this.dataListSelections = val; }, // 新增 / 修改 addOrUpdateHandle(id) { this.addOrUpdateVisible = true; this.$nextTick(() => { this.$refs.addOrUpdate.init(id); }); }, // 删除 deleteHandle(id) { var ids = id ? [id] : this.dataListSelections.map(item => { return item.attrGroupId; }); this.$confirm( `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" } ).then(() => { this.$http({ url: this.$http.adornUrl("/product/attrgroup/delete"), method: "post", data: this.$http.adornData(ids, false) }).then(({ data }) => { if (data && data.code === 0) { this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => { this.getDataList(); } }); } else { this.$message.error(data.msg); } }); }); } } }; </script> <style scoped> </style>

后端做多条件查询

 @Override public PageUtils queryPage(Map<String, Object> params, Long catelogId) { String key = (String) params.get("key"); //select * from pms_attr_group where catelog_id=? and (attr_group_id=key or attr_group_name like %key%) QueryWrapper<AttrGroupEntity> wrapper = new QueryWrapper<AttrGroupEntity>(); if(!StringUtils.isEmpty(key)){ wrapper.and((obj)->{ obj.eq("attr_group_id",key).or().like("attr_group_name",key); }); } if( catelogId == 0){ IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params), wrapper); return new PageUtils(page); }else { wrapper.eq("catelog_id",catelogId); IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params), wrapper); return new PageUtils(page); } }

—- 未完待续直接看中级了—–

https://www.bilibili.com/video/BV1np4y1C7Yf/?p=101&spm_id_from=pageDriver&vd_source=0bb2f8a3a133e05bd42f729a9

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/155676.html