哈哈,我又来了,今天还是继续来撸这个《SpringBoot日记本系统》!

这一节,我们把日记分类管理的增删改查搞起来。

创建类型表:

/*
Navicat MySQL Data Transfer

Source Server : mysql
Source Server Version : 50531
Source Host : localhost:3306
Source Database : diary

Target Server Type : MYSQL
Target Server Version : 50531
File Encoding : 65001

Date: 2022-04-17 13:52:56
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for sys_blog_type
-- ----------------------------
DROP TABLE IF EXISTS `sys_blog_type`;
CREATE TABLE `sys_blog_type` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`type_name` varchar(20) DEFAULT NULL,
`create_date` varchar(20) DEFAULT NULL,
`user_id` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_java

为了方便起见,这次我们用MP的自动生成工具,添加依赖:

<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.5.0</version>
</dependency>
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity</artifactId>
<version>1.7</version>
</dependency>

编写启动类: AutoGeneratorConfig

package com.rabbit.diary.util;

import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;

import java.util.Scanner;

public class AutoGeneratorConfig {

/**
* <p>
* 读取控制台内容
* </p>
*/
public static String scanner(String tip) {
Scanner scanner = new Scanner(System.in);
StringBuilder help = new StringBuilder();
help.append("请输入" + tip + ":");
System.out.println(help.toString());
if (scanner.hasNext()) {
String ipt = scanner.next();
if (StringUtils.isNotBlank(ipt)) {
return ipt;
}
}
throw new MybatisPlusException("请输入正确的" + tip + "!");
}

public static <FileOutConfig> void main(String[] args) {
String projectPath = System.getProperty("user.dir");

// 全局配置
GlobalConfig gc = new GlobalConfig.Builder()
.author("剽悍一小兔")
.outputDir(projectPath + "/src/main/java")
.openDir(false).build();


// 数据源配置
DataSourceConfig dsc = new DataSourceConfig.Builder("jdbc:mysql://localhost:3306/diary?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC","root","").build();
// 代码生成器
AutoGenerator mpg = new AutoGenerator(dsc);
mpg.global(gc);
// 包配置
PackageConfig pc = new PackageConfig.Builder()
.controller("web")
.entity("bean")
.mapper("dao")
.service("service")
.serviceImpl("service.impl")
.parent("com.rabbit.diary").build();

mpg.packageInfo(pc);

// 5、策略配置
StrategyConfig strategy = new StrategyConfig.Builder()
.addInclude(scanner("数据表名"))
.addTablePrefix("")
.entityBuilder()
// 数据库表映射到实体的命名策略,驼峰命名法
.naming(NamingStrategy.underline_to_camel)
//数据库表字段映射到实体的命名策略
.columnNaming(NamingStrategy.underline_to_camel)
// lombok 模型 @Accessors(chain = true) setter链式操作
.enableLombok()
.controllerBuilder()
//restful api风格控制器
.enableRestStyle()
//url中驼峰转连字符
.enableHyphenStyle().build();
mpg.strategy(strategy);
mpg.execute();
}

}

作用就是根据表名,自动生成各种文件。我没有用自定义模板,因为项目比较简单,为了最大的灵活性,感觉没必要。

运行

13:51:28.591 [main] DEBUG com.baomidou.mybatisplus.generator.AutoGenerator - ==========================准备生成文件...==========================
13:51:28.607 [main] WARN com.baomidou.mybatisplus.generator.engine.VelocityTemplateEngine - Velocity 1.x is outdated, please upgrade to 2.x or later.
13:51:29.404 [main] DEBUG com.baomidou.mybatisplus.generator.config.querys.MySqlQuery - 执行SQL:show table status WHERE 1=1 AND NAME IN ('sys_blog_type')
13:51:29.466 [main] DEBUG com.baomidou.mybatisplus.generator.config.querys.MySqlQuery - 返回记录数:1,耗时(ms):58
13:51:29.513 [main] DEBUG com.baomidou.mybatisplus.generator.config.querys.MySqlQuery - 执行SQL:show full fields from `sys_blog_type`
13:51:29.529 [main] DEBUG com.baomidou.mybatisplus.generator.config.querys.MySqlQuery - 返回记录数:4,耗时(ms):28
13:51:29.779 [main] DEBUG com.baomidou.mybatisplus.generator.AutoGenerator - ==========================文件生成完成!!!==========================

我们先把后台写好,类别这种东西,没必要分页了,直接来个搜全部的方法。

@RestController
@RequestMapping("/sys-blog-type")
@SaCheckLogin
public class SysBlogTypeController {

@Autowired
ISysBlogTypeService sysBlogTypeService;

@RequestMapping("/selectAll")
public List<SysBlogType> selectAll(){
return sysBlogTypeService.selectAll();
}

}

我在类上加了SaCheckLogin,表示跟类别有关的所有方法都需要登录。(PS:生成的@RequestMapping("//sys-blog-type")不知道为啥有两个 / ,改成一个/的)

实现类:

@Service
public class SysBlogTypeServiceImpl extends ServiceImpl<SysBlogTypeMapper, SysBlogType> implements ISysBlogTypeService {

@Autowired
SysBlogTypeMapper sysBlogTypeMapper;

@Override
public List<SysBlogType> selectAll() {
QueryWrapper<SysBlogType> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("user_id", StpUtil.getLoginId());
return sysBlogTypeMapper.selectList(queryWrapper);
}
}

SysBlogTypeMapper 生成出来没有加@Mapper,我们给他加上。

@Mapper
public interface SysBlogTypeMapper extends BaseMapper<SysBlogType> {

}

接下来,我们继续写和日记类别有关的后台接口。

新增或者修改

/**
* 新增或者修改
* @return
*/
@RequestMapping("/add")
@SaCheckLogin
public Result add(@RequestBody SysBlogType sysBlogType){

//新增
if(StrUtil.isBlankIfStr(sysBlogType.getId())){
//拼装BlogBean
sysBlogType.setCreateDate(DateUtil.now());
sysBlogType.setUserId(StpUtil.getLoginIdAsInt());
sysBlogTypeService.save(sysBlogType);
}else{
//修改
SysBlogType sysBlogType2 = sysBlogTypeService.selectOne(sysBlogType.getId());
BeanUtil.copyProperties(sysBlogType,sysBlogType2);
sysBlogTypeService.updateById(sysBlogType2);
}


return Result.success();
}

和日记的保存差不多,也是根据是否有id来判断新增还是修改。

sysBlogTypeService.save实现:

@Override
public List<SysBlogType> selectAll() {
QueryWrapper<SysBlogType> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("user_id", StpUtil.getLoginId());
return sysBlogTypeMapper.selectList(queryWrapper);
}

根据当前登录用户,查询其所拥有的所有的类型。

前端代码:

getData(){
var index = layer.load(1); //添加laoding,0-2两种方式
axios.post('${basePath}/sys-blog-type/selectAll',{}).then(r =>{
layer.close(index); //返回数据关闭loading
if(r.data.code != '0000'){
layer.msg(r.data.message,{icon:2});
return;
}
console.log(r.data.data);
this.listData = r.data.data;
}).catch(error => {
layer.msg(error.response.status,{icon:2});
layer.close(index); //返回数据关闭loading
})
},

用的是vue,渲染代码如下

<tr v-for="item in listData">
<td>{{item.id}}</td>
<td>{{item.typeName}}</td>
<td>{{item.createDate}}</td>
<td>
<a :href="'${basePath}/diary/blogType/add.html?id='+item.id"><button type="button" class="layui-btn layui-btn-normal layui-btn-sm">修改</button></a>
<button @click="del(item.id)" type="button" class="layui-btn layui-btn-danger layui-btn-sm">删除</button>
</td>
</tr>

因为代码实在太多,不适合全部贴出来,所以我只贴核心的。大家可以到时候下载源码,进行比对和运行。

界面效果:

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_css_02


新增功能,根据新增按钮跳转到新增页面。

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_java_03


提交后:

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_spring_04


修改和删除功能和日记模块差不多,只是删除的时候,我们需要加一些特定的逻辑。

@RequestMapping("/delete")
@SaCheckLogin
public Result delete(@RequestParam Integer id ){
//检查是否是自己创建类型
SysBlogType sysBlogType = sysBlogTypeService.selectOne(id);
Integer userId = sysBlogType.getUserId();
if(!userId.equals(StpUtil.getLoginIdAsInt()) ){
throw new BizException(ExceptionCodeEnum.ERROR_PARAM.setDesc("您无法删除他人的日记类型!"));
}
//检查是否有该类型的日记,如果有,则不允许删除
Integer sysBlogTypeId = sysBlogType.getId();
Page<TblSynBlog> pageBean = new Page<>(1,10);
TblSynBlog blog = new TblSynBlog();
blog.setBlogType(String.valueOf(sysBlogTypeId));
Page<TblSynBlog> page = blogService.selectPage(pageBean,blog);
if(page.getTotal() > 0){
throw new BizException(ExceptionCodeEnum.ERROR_PARAM.setDesc("该类别下还有"+page.getTotal()+"篇日记,不允许删除!"));
}
sysBlogTypeService.delete(id);
return Result.success();
}

大概意思呢,就是用户只能删除自己的日记类型,而且如果已经有了该类型的日记,则不允许删除。 哦对了,我们还需要做一下日记分类的菜单选中效果。

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_html5_05

layui.use(['jquery', 'layer'], function(){
let $ = layui.$;
let pathName = window.location.pathname;
switch (pathName) {
case "/diary/add.html":
$('.layui-nav-item').eq(2).addClass("layui-this").siblings().removeClass("layui-this")
break;
case "/diary/blogType.html":
$('.layui-nav-item').eq(3).addClass("layui-this").siblings().removeClass("layui-this")
break;
}
});

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_java_06

右侧模块的日记分类,之前是写死的,现在改成动态的。

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_java_07

这个模块是分出去的,我们采用vue的方式,给这个模块最外层的div加一个id,然后用Vue去控制。

<div class="layui-row" id="sider">
...
</div>

下面去新建一个Vue对象。

new Vue({
el:'#sider',
data:{
typelist:[]
},
methods:{
getTypelist(){
var index = layer.load(1); //添加laoding,0-2两种方式
axios.post('${basePath}/sys-blog-type/selectAll',{}).then(r =>{
layer.close(index); //返回数据关闭loading
if(r.data.code != '0000'){
layer.msg(r.data.message,{icon:2});
return;
}
this.typelist = r.data.data;
}).catch(error => {
layer.msg(error.response.status,{icon:2});
layer.close(index); //返回数据关闭loading
})
}
},
created(){
this.getTypelist();
}
});

渲染li元素

<ul class="tlist">
<li v-for="item in typelist"> <a href="">{{item.typeName}}</a></li>
</ul>

效果:

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_学习_08

我刚才又添加了一笔数据,证明是可行的。

下一个问题,当我点击某一个日记类别应该发生什么呢?

我想,应该就是跳转到首页,然后首页展示的就是该类别的数据吧!

改变后的li元素

<li v-for="item in typelist"> <a :href="'${basePath}?typeId='+item.id">{{item.typeName}}</a></li>

地址栏是​​ http://localhost/?typeId=1​​

有点丑。额,先这样吧,不管了。

这边我们做一个改动,把layPage的引入代码放到list.jsp。

layui.use('laypage', function(){
var laypage = layui.laypage;
window.laypage = laypage; //绑定到windows对象上,方便vue去获取
});

然后呢,我们要根据是否有typeId传过来,显示不同的内容。

查询日记的axios改成

axios.post('${basePath}/blog/select?pageIndex='+this.pageIndex+'&size=' + this.size,{
typeId:'${typeId}'
})

刷新页面,看到参数已经传过去了。

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_java_09

后台关键代码

public Page<TblSynBlog> selectPage(Page<TblSynBlog> pageBean, TblSynBlog blog) {
QueryWrapper<TblSynBlog> queryWrapper = new QueryWrapper<>();
queryWrapper.orderByDesc("update_date");
//只允许查看自己发布的日记
queryWrapper.eq("user_id", StpUtil.getLoginId());
queryWrapper.eq("is_delete", "0");
if(StrUtil.isNotEmpty(blog.getBlogType())){
queryWrapper.eq("blog_type",blog.getBlogType());
}
return blogMapper.selectPage(pageBean,queryWrapper);
}

很简单吧,就看下type传过来没有,有的话就把条件加上,搞定。

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_spring_10

前端再加一个小提示,只要没有日记,就显示。

computed:{
empty(){
return this.total == 0
}
},

html:

<div id="dlist" class="layui-card dbox" style="border-right: 2px solid #eaeaea;">
<div class="layui-card-header"><b><i class="layui-icon layui-icon-list" style="color: #000;"></i></b>日记列表</div>
<div class="layui-card-body">
<ul class="dlist">
<li v-for="item in datalist"><a :href="'${basePath}/diary/' + item.id + '.html'">{{item.title}}</a></li>
</ul>
{{empty?'该类型还没有日记哦,快去写一篇吧!':''}}
<div id="pageCode"></div>
</div>
</div>

效果:

SpringBoot日记本系统全程直播07:把日记分类管理的增删改查搞起来撒~~_css_11

好啦,这一讲就到此为止了,总结一下,这一节的内容主要是日记类型的增删改查,还有MP自动生成代码的方法。