哈哈，我又来了，今天还是继续来撸这个《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;
为了方便起见，这次我们用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>
因为代码实在太多，不适合全部贴出来，所以我只贴核心的。大家可以到时候下载源码，进行比对和运行。
界面效果：
新增功能，根据新增按钮跳转到新增页面。
提交后：
修改和删除功能和日记模块差不多，只是删除的时候，我们需要加一些特定的逻辑。
@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();
}
大概意思呢，就是用户只能删除自己的日记类型，而且如果已经有了该类型的日记，则不允许删除。 哦对了，我们还需要做一下日记分类的菜单选中效果。
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;
}
});
右侧模块的日记分类，之前是写死的，现在改成动态的。
这个模块是分出去的，我们采用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>
效果：
我刚才又添加了一笔数据，证明是可行的。
下一个问题，当我点击某一个日记类别应该发生什么呢？
我想，应该就是跳转到首页，然后首页展示的就是该类别的数据吧！
改变后的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}'
})
刷新页面，看到参数已经传过去了。
后台关键代码
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传过来没有，有的话就把条件加上，搞定。
前端再加一个小提示，只要没有日记，就显示。
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>
效果：
好啦，这一讲就到此为止了，总结一下，这一节的内容主要是日记类型的增删改查，还有MP自动生成代码的方法。