此文章用于记录B站看的第一个springboot项目学习笔记,主要于自用。
项目架构 前置知识- ES6新特性
- Vue.js
- Mybatis-Plus
- oss
关于ES6就看了视频的前置知识,主要几点比较重要
- Promise异步编程
- 模块化(import export)
这个前后端分离项目前端主要是由Vue.js完成的,所以本来想把黑马的全套vue给学完再来学这个项目,但是没坚持,就学了指令、计算属性、侦听器、组件化基础,还有之前学的项目有用Vue脚手架进行模块化开发,真正重要的生命周期和钩子函数还有路由(router)都没去学,导致前端项目看到一脸懵。
Mybatis-Plus也没学,但是看到p67那个自动生成xml,各种模块的时候真觉得这玩意真牛,等项目学完一定要好好学这技术。
oss就是文件上传,还是挺简单的,改个ID,secret什么的就可以用了
开发阶段 商品分类第一个完成的模块是商品分类
这里要完成的目标是显示出数据列表,并且点击查看下级能通过parentId一并查找出来
第一步是把数据展现出来
首先就是打开前端路由
然后打开商品分类后就会报404,这是肯定的,因为前端提供的接口,后端都没有实现
这个项目提供给后端的接口都写到了这里
这里要写的接口便是url里面的内容
这里在提一下,这个项目的接口定义规则
接下来就开始写后端
后端架构
主要模块结构
后端要完成的任务其实比较简单,因为只要看懂了前端传来的接口和要传递的参数,
后端给它这些东西就好了
获取商品分类列表前端需要的url接口是这个
因为在这个组件中所有的接口都有productCategory所有后端可以在类上写一个通用的接口
在方法上在使用不同的接口,如何实现呢,使用这个非常重要的注解——@RequestMapping
首先是@RestController
表面这个类注入到spring容器中,并且是Controller类,还有@RequestMapping
方法:
方法名最好和前端的方法名一致,还有方法上面的注释
@RequestMapping(value = "/list/{parentId}", method = RequestMethod.GET)
使用RestFul风格,并且指定对应的get,set方法
然后通过调用注入的Service接口并实现service实现类的方法,来达到controller调service,service调dao的三层架构的思想。
需要注意的是这里的lamdba表达式和mybatisplus的方法的使用,需要后面再学习mybatisplus的时候好好研究
修改导航栏状态和是否显示这两个方法很相识
前端
后端controller
后端service
商品分类删除前端
后端controller
后端service
商品分类添加前端
后端controller
后端service
商品分类修改因为要先获取原有数据,所有要先查询id,获取对应id的属性
前端
后端controller
后端service
小结商品分类到这里就结束了,总的来说就是,游览器发起请求地址,然后前端项目router文件夹里面的index.js负责接收,里面定义了各种 path ——》component 来跳转组件,然后每个实例化组件都有一个生命周期created来初始化,调用methods,调用api/xxxx.js 来为后端提供接口,后端通过@RequestMapping()和CommonResult公共返回对象,并通过mybatisplus来请求数据库的这样一个过程。
商品类型商品类型的增删改查挺简单的,复杂的是里面属性列表和参数列表
前端
后端controller
主要还是三层架构,service实现类的方法也都是直接照搬mp里面的方法
后端service
商品属性列表和参数列表 查询后端controller
这里要注意的是,
这个属性列表和参数列表的区别就是 type的区别,后端提供的接口需要携带一个Interger 类型的type
新增删除 删除要注意的是删除的是一个数组,注意看这里前端的url没有id
因为这个方法和批量删除的方法一样
修改修改因为要获取原有的值,所以还是要先根据 id获取商品属性列表和参数列表
唠两句前面的内容都是看完视频做完之后,再来写的,都很笼统,不详细,接下来就和看的视频的进度保持一致, 最好按照以下的步骤来学习项目
看视频=》思考=》自己动手=》写博客=》复习
更新商品属性,参数属性的数量对应视频p87,完成对商品属性和参数的crud之后,发现了一个BUG,商品属性,参数属性的数量无法和真实数据对应上
为此开始处理这个较为麻烦的BUG.
新增
后端service
UpdateWrapper里面的泛型是PmsProductAttributeCategory的因为修改的是他的数量,
里面通过getType来判断是属性还是参数,并且通过直接操纵数据库的方法来对数量进行增加,
并且倒数两行通过获取产品类型的id来对数据进行修改
删除
@Transactional:保证事务的一致性
有一说一,这些代码有点没看懂
初始属性级联下拉数据初始化在商品分类里面,需要完成之前没完成的筛选属性功能
完成思路
首先打开这里的注释
点击这个方法可以看到和fetchListWithAttr关联上的
再次点击fetchListWithAttr方法 发现他就在 传给后端url的api文件夹里面
所以后端要写这个接口
这里前端是没有传递参数的
后端controller
因为创建的二级级联没有对应的POJO类,所以我们新建一个数据传输对象dto
这里使用阿里命名规范,以DTO结尾,还有类似的VO,不过POJO类不用以POJO结尾
后端service
后端dao
筛选属性-添加保存
貌似就是筛选后,只要后面的数值,真的没听懂
不过后端还好,创建一个dto,并且老师说要继承之前的pojo类之前我就想到了
PmsProductCategoryDTO



