学校门户网站什么意思,南昌seo专业团队,中原免费网站建设,北京画册设计制作目录
一、总述
1.1 前端思路
1.2 后端思路
二、前端部分
2.1 在网页中建好目录及菜单
2.1.1 建好商品目录
2.1.2 建好分类管理菜单
编辑
2.2 编写组件
2.2.1 先完成组件文件的创建
2.2.2 编写组件
2.2.2.1 显示三级分类树形列表
三、后端部分
3.1 编写商品分类…目录
一、总述
1.1 前端思路
1.2 后端思路
二、前端部分
2.1 在网页中建好目录及菜单
2.1.1 建好商品目录
2.1.2 建好分类管理菜单
编辑
2.2 编写组件
2.2.1 先完成组件文件的创建
2.2.2 编写组件
2.2.2.1 显示三级分类树形列表
三、后端部分
3.1 编写商品分类的相关接口
3.1.1 获取树形三级分类列表
四、总结 一、总述
就是在前端编写好相应的组件展示内容绑定好相关的事件然后向后端发送请求在后端编写好想要的接口执行操作或者是返回前端想要的数据。
具体细节
1.1 前端思路
前端组件的编写就参考elementUI进行编写只需稍作修改即可。
前端组件的写法按照那三部分即可模板、脚本、样式
发的请求依靠请求对象在api文件夹中写好相应的api对象向后端发好请求然后在组件中进行引入发送请求即可
1.2 后端思路
基本上直接使用若依提供好的逆向代码只需稍作修改即可。
编写好各层代码。
二、前端部分
2.1 在网页中建好目录及菜单
这个比较简单在页面中找到菜单管理新建一个目录即可首先还不是着急创建菜单而是创建好目录一个目录即代表一个一个大的类别其实也就是对应着后端的一个微服务。比如说商品服务优惠卷服务啥的为什么说是一个大的类别因为商品中就有类别管理品牌管理啥的一些细的管理这就作为前端的一个菜单出现了而菜单其实就对应后端的一个控制器。一个菜单里面实际上就是对一张表或者是多张表做增删改查的。
说了总体的其实就是新建一个目录代表商品服务。建的步骤如下
2.1.1 建好商品目录 不会写的就参考之前已经存在了的目录就比如这个路由地址有点模糊就参考之前的比如是之前的系统工具这个目录的路由地址写的就是tool可以知道其实也就是目录的英文简写那这个就叫product就行了其他按钮部分基本上默认就行了。
2.1.2 建好分类管理菜单
同样也是参考之前写好的创建好分类管理菜单 到目前为止页面的基本框架就有了但是这个分类菜单缺少实际的内容。接下来就是到前端项目里面按照刚刚的路径创建好组件并进行编写 1.2 在前端项目中编写前端组件
2.2 编写组件
2.2.1 先完成组件文件的创建 2.2.2 编写组件
2.2.2.1 显示三级分类树形列表
这里直接使用elementUI的树形组件
在elementUI官网中到组件中找到树形控件在data一栏中可以找到 这里因为不单单的只是展示节点还涉及到节点的新增以及删除因此得在节点的后面自定义上内容定义上新增和删除按钮所以直接使用上 这个组件这里我们使用scoped slot这个。 复制下面的样例代码注意别复制多了只复制需要的然后打开运行前端项目就能有官网的那种效果了当然还是需要作一些优化的比如说复制下来的某些东西不需要就比如说这里的
模板就保留这里 el-tree:datadatashow-checkboxnode-keyiddefault-expand-all:expand-on-click-nodefalsespan classcustom-tree-node slot-scope{ node, data }span{{ node.label }}/spanspanel-buttontypetextsizeminiclick() append(data)Append/el-buttonel-buttontypetextsizeminiclick() remove(node, data)Delete/el-button/span/span/el-tree
可能有人会问为什么不用div盖着其实这个并不是必要的只是有个时候可能需要需要的时候我们在添上即可。
脚本部分
scriptlet id 1000;export default {data() {const data [{id: 1,label: 一级 1,children: [{id: 4,label: 二级 1-1,children: [{id: 9,label: 三级 1-1-1}, {id: 10,label: 三级 1-1-2}]}]}, {id: 2,label: 一级 2,children: [{id: 5,label: 二级 2-1}, {id: 6,label: 二级 2-2}]}, {id: 3,label: 一级 3,children: [{id: 7,label: 二级 3-1}, {id: 8,label: 二级 3-2}]}];return {data: JSON.parse(JSON.stringify(data)),data: JSON.parse(JSON.stringify(data))}},methods: {append(data) {const newChild { id: id, label: testtest, children: [] };if (!data.children) {this.$set(data, children, []);}data.children.push(newChild);},remove(node, data) {const parent node.parent;const children parent.data.children || parent.data;const index children.findIndex(d d.id data.id);children.splice(index, 1);}}};
/script 这里的数据先留着方便初看效果下面的renderContent方法可以删掉这是 样式部分一般不要动保留即可
style.custom-tree-node {flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;}
/style
注意这里除了对原有的内容进行删减之后还需要优化一些内容就比如说
1. 就结构而言我是需要点击箭头才展开子节点。
2. 就内容append和delete按钮来说append因为最多只有三级分类所以如果当前分类的层级已经是三层了不能添加这个append对于delete如果当前分类下面还有子分类的话也不能添加delete。
具体实现如下
其实完成这些操作注意参考element的官方文档对于它给我的这些数据有什么可以使用控制台打印查看对于一些你想要的操作这里比如说想点击箭头再展开这样的特殊操作就需要查看文档下面的属性配置 所以 经过上面的两处优化基本上三级分类也就是这个样子了现在只是数据不是我们的真实数据罢了。
接下来的工作就是在前端工程中写好请求对象用来请求后端获得三级分类的树形列表然后在组件中引入然后使用得到数据然后再参考文档将数据正确显示出来即可。
1. 在api文件夹中编写好请求对象 export function treeListCategory() {return request({url: /product/category/treeList,method: get})
}
2, 在组件中引入并使用 现在是创建了一个方法调用接口 其实很简单就是前端写好树形控件基本的架子先搭起来然后将数据换成经由调用后端接口返回的数据。步骤也是很简单。到这里网页已经是可以显示三级分类的分类列表了。
三、后端部分
3.1 编写商品分类的相关接口
3.1.1 获取树形三级分类列表
无论是前台页面还是后台管理页面都得将分类列表以子父的树形三级列表体现出来。
所以就得写一个接口获取到树形三级分类列表。
树形子父关系如何体现呢貌似有点抽象其实很简单就是一个分类下面有许多的子分类在面向对象的思想中就是分类的这个类中有一个类型为集合集合元素为分类的子分类属性。
如下图所示 注意 非表的字段一定得加上TabelField(exist false)注解来标明此字段是非表字段如果不加这个注解MyBatis字段映射的时候就会出问题就比如说sql查了记录的所有字段但是却找不到该字段就会报错
好现在字段是有了最终肯定是需要为这个字段赋上值的所有的子分类是计算出来的那到底如何计算呢其核心业务实现如何写请看下面我写的
其实很简单就两步其实获取子分类的关键就是 依靠表中的父类别字段。有了这一个就很容易得到一个类别的下的子类别。
第一步编写获取子分类的方法不带真正实现。
遍历所有分类为每个分类赋上子分类
第二步编写获取子分类的具体实现
也就是根据当前分类的id然后遍历所有的分类找到它的子分类其实也就是分类的父id为当前分类的id那么这个分类就为当前分类的子分类
最关键的业务实现思路就有了最关键最重要的一步其实已经想明白了接下来就是常规的写好各个层的代码。我现在已经习惯逆向编写了也就是从控制层开始写一直写到dao层。话不多说直接贴代码
controller ApiOperation(获取商品分类的树形结构)GetMapping(/treeList)public AjaxResult treeList(){ListCategory treeList categoryService.treeList();return AjaxResult.success(treeList);}
service
service接口 service实现 Overridepublic ListCategory treeList() {//获取到所有分类ListCategory list list();//为每个分类添加上子分类list.stream().forEach(category - category.setChildren(getChildren(category,list)));//为根父类排序list.stream().sorted((c1,c2)-c1 null ? 0 : c1.getSort().intValue() - (c2 null ? 0 : c2.getSort().intValue()));return list;}
private ListCategory getChildren(Category root, ListCategory all) {//从所有类别中找到子分类并排好序ListCategory childrenCategory all.stream().filter(c - c.getParentCid().equals(root.getCatId())).sorted((c1,c2)-c1 null ? 0 : c1.getSort().intValue() - (c2 null ? 0 : c2.getSort().intValue())).collect(Collectors.toList());//针对所有的子分类也递归找其对应的子分类childrenCategory.stream().forEach(category - category.setChildren(getChildren(category,childrenCategory)));return childrenCategory;}
这里由于是直接使用的MP并且没有复杂查询也就不需要直接显式的写dao层了
四、总结
其实从后端编写好接口到前端编写好组件整个过程还是比较简单的
在这里前端相较于后端而言反而要繁琐一点后端主要把真正的获取逻辑写明白就好了
而前端就根据elememtUI的组件库选好组件然后将参数写好使得能正确的将数据渲染出来还有一些其他的修改优化一下就行了。
另外写好api使得可以正确的访问后端其实不难但是繁琐之后的功能实现大体都是这些步骤主要就是核心组件不同后端无非还是CURD。
这次相当于是VueBoot的开发这是比较主流的开发方式利用若依框架开发也是公司中常用的因此需要熟练掌握。
