24.＜Spring博客系统①（数据库+公共代码+持久层+显示博客列表+博客详情）＞

项目整体预览

登录页面

 主页

 

查看全文 

 编辑

写博客 

PS：Service.impl（现在流行写法）

推荐写法。后续完成项目。会尝试这样写。

接口可以有多个实现。每个实现都可以不同。

这也算一种设计模式。叫做（策略模式）。

我们博客项目较为简单。Service层我们还是只写一层。如果后续有更复杂的项目。我们就会使用多层。

而。

Mapper.impl

Mapper里放的接口。

impl里面放的是接口的实现。（早期写法）

1.分析需求

2.技术方案设计

①画UML图、流程图、ER图

②数据库的设计、

数据库的表通常分两类。实体表、关系表。

实体表：可以认为就是一个对象。一个对象包含什么属性。比如人员表、员工表、部门表、图书表、博客表、这些都是实体表

关系表：表示实体之间的关系，比如员工属于什么部门。用户表、权限表、用户和权限相关关系。实体之间都是有关系的。对于简单的关系。该表可以省略。可以放在实体表之中。

比如一个用户可以有多个权限。

③接口设计、、

3.开发

4.测试

5.测试（QA）

6.联调

7.验收

8.上线

数据库的设计

用户表：用户名、密码、照片、昵称、github地址

博客表：标题、日期、内容、作者、分类。

这两者有很多关系。那么我们可以单独建立一个表

接口的设计

后端人员是主动地

登录接口

一、创建项目

创建细节就不一一演示了。这是是我们使用的IDEA中主要的依赖的版本。

    <properties><java.version>1.8</java.version><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><spring-boot.version>2.6.13</spring-boot.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.2</version></dependency>

二、配置文件处理

将

修改为

三、建立数据库

--创建数据库
create database if not exists spring_blog charset utf8mb4;
-- ⽤⼾表
DROP TABLE IF EXISTS spring_blog.user;
CREATE TABLE spring_blog.user(`id` INT NOT NULL AUTO_INCREMENT,`user_name` VARCHAR ( 128 ) NOT NULL,`password` VARCHAR ( 128 ) NOT NULL,`github_url` VARCHAR ( 128 ) NULL,`delete_flag` TINYINT ( 4 ) NULL DEFAULT 0,`create_time` DATETIME DEFAULT now(),`update_time` DATETIME DEFAULT now(),
PRIMARY KEY ( id ),
UNIQUE INDEX user_name_UNIQUE ( user_name ASC )) ENGINE = INNODB DEFAULT
CHARACTER SET  = utf8mb4 COMMENT = '⽤⼾表';
-- 博客表
drop table if exists spring_blog.blog;
CREATE TABLE spring_blog.blog (`id` INT NOT NULL AUTO_INCREMENT,`title` VARCHAR(200) NULL,`content` TEXT NULL,`user_id` INT(11) NULL,`delete_flag` TINYINT(4) NULL DEFAULT 0,`create_time` DATETIME DEFAULT now(),`update_time` DATETIME DEFAULT now(),PRIMARY KEY (id))ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COMMENT = '博客表';-- 新增⽤⼾信息
insert into spring_blog.user (user_name, password,github_url)values('zhangsan','123456','https://gitee.com/Bwindmill');
insert into spring_blog.user (user_name, password,github_url)values('lisi','123456','https://gitee.com/Bwindmill');
insert into spring_blog.user (user_name, password,github_url)values('wangwu','123456','https://gitee.com/Bwindmill');
insert into spring_blog.user (user_name, password,github_url)values('luliu','123456','https://gitee.com/Bwindmill');insert into spring_blog.blog (title,content,user_id) values('第⼀篇博客','1111111',1);
insert into spring_blog.blog (title,content,user_id) values('第二篇博客','2222222',2);

四、测试 

 之后运行一下程序，看程序有没有问题。

并且写一个简单的程序测测运行正常不正常。

eg：

@RestController
public class UserController {@RequestMapping("/test")public String test(){return "Hello";}
}

对于新手来说。我们就写一点测一点。慢慢来。

将前端代码cv到staric目录中。我们再测一测前端代码能不能正常访问。

五、书写项目公共模块代码

项目架构图

5.1实体类

UserInfo类

@Data
public class UserInfo {private Integer id;private String userName;private String password;private String githubUrl;private Integer deleteFlag;private Date createTime;private Date updateTime;
}

BlogInfo类

@Data
public class BlogInfo {private Integer id;private String title;private String content;private Integer userId;private Integer deleteFlag;private Date createTime;private Date updateTime;
}

5.2统一结果返回

Result类

/*** 统一返回结果* 我们先设定返回的结果* 为了让其他地方方便调用。我们统一给方法加上static*/
@Data
public class Result {private int code; //200成功， -1失败  -2未登录private String errMsg;private Object data;public static Result success(Object data){Result result = new Result();result.setCode(Constant.SUCCESS_CODE);result.setErrMsg("");result.setData(data);return result;}public static Result fail(String errMsg){Result result = new Result();result.setCode(Constant.FAIL_CODE);result.setErrMsg(errMsg);result.setData(null);return result;}public static Result fail(String errMsg,Object data){Result result = new Result();result.setCode(Constant.FAIL_CODE);result.setErrMsg(errMsg);result.setData(data);return result;}public static Result unLogin(String errMsg){Result result = new Result();result.setCode(Constant.UNLOGIN_CODE);result.setErrMsg("用户未登录");result.setData(null);return result;}}

ResponseAdvice类

@ControllerAdvice //注意加上这个注解才有效。
public class ResponseAdvice implements ResponseBodyAdvice {@Autowiredprivate ObjectMapper objectMapper;@Overridepublic boolean supports(MethodParameter returnType, Class converterType) {/*** 设定哪些方法统一返回结果* 哪个接口执行统一结果返回*/return true;}@SneakyThrows//这个注解帮我们对// return objectMapper.writeValueAsString(Result.success(body));//进行try catch。异常处理@Overridepublic Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType, Class selectedConverterType, ServerHttpRequest request, ServerHttpResponse response) {//统一结果返回的具体逻辑if(body instanceof Result){return body;}//对String 类型单独处理.否则会报错if (body instanceof String){return objectMapper.writeValueAsString(Result.success(body));}return Result.success(body);}
}

5.3统一异常处理

第一种写法

ErrorHandler类

三个注解：@ResponseBody @ControllerAdvice @ExceptionHandler

@ResponseBody
@ControllerAdvice
public class ErrorHandler {@ExceptionHandlerpublic Result handler(Exception e){return Result.fail(e.getMessage());}
}

第二种写法

eg：

/捕获空指针异常代码的两种写法

    //捕获空指针异常代码的两种写法@ExceptionHandler(NullPointerException.class)public Result handler(Exception e){return Result.fail(e.getMessage());}@ExceptionHandlerpublic Result handler(NullPointerException e){return Result.fail(e.getMessage());}

 如果注解里面没有写捕获什么异常。那么就会以参数中为准。

六、业务代码

MybatisGenerate插件

注：持久层的代码可以由MybatisGenerate插件一键生成。

直接根据我们的数据库表
生成实体类，mapper类，xml文件
不需要我们自己写mapper类，和基于标签的mapper.xml这些简单又繁琐的工作
但是值得注意的是生成的方法中的细微区别！！

接口分析

1.用户登录

根据用户名和密码、判断是否正确。

2.查询用户信息

根据用户Id.查询用户信息。

3.博客列表

查询所有博客

4.查询作者信息

①根据博客，拿到作者Id

②根据作者id，获取作者信息

5.查询博客详情

根据博客id，查询博客信息

6.修改博客

根据博客id，修改博客信息

7.添加博客

插入博客信息

8.删除博客

梳理一下

用户表：

1.根据用户名，查询用户信息。

2.根据用户id，查询用户信息

博客表

1.查询博客列表

2.根据博客id，查询博客信息

3.根据博客id，修改博客信息

4.插入博客

5.删除博客 

6.1持久层代码

UserMapper类

@Mapper
public interface UserMapper {//根据用户名，查询用户信息\@Select("select * from user where user_name = #{userName} and delete_flag = 0")UserInfo selectByName(String userName);@Select("select *from user where id = #{userId} and delete_flag = 0")UserInfo selectById(Integer userId);
}

 BlogMapper类

注：由于update既是uptate功能的接口。也是delete功能的接口，因此我们要写动态SQL。

动态SQL我们使用XML的方式来书写。

@Mapper
public interface BlogMapper {//查询博客列表@Select("select * from blog where delete_flag =0 order by create_time desc ")List<BlogInfo> selectAllBlog();//根据博客Id，查询博客信息。@Select("select * from blog where id = #{blogId} and delete_flag = 0")BlogInfo selectById(Integer blogId);//根据博客Id，修改博客信息。//此修改包括修改和删除。根据参数决定修改什么。//我们用动态SQL来实现Integer updateById(BlogInfo blogInfo);//插入博客@Insert("insert into blog (title, content, user_id) values (#{title},#{content},#{userId})")Integer interBlog(BlogInfo blogInfo);}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qyy.springblog.mapper.BlogMapper"><update id="updateById">update blog<set><if test="title != null">title = #{title},</if><if test="content != null">content = #{content},</if><if test="deleteFlag != null">delete_flag = #{deleteFlag},</if></set>where id = #{id}</update>
</mapper>

写完之后。我们测试一下持久层代码是否都正确执行。 

6.2实现前后端接口

6.2.1实现博客列表显示的接口

后端

    @RequestMapping("/getList")public List<BlogInfo> queryBlogList(){return blogService.queryBlogList();}

    public List<BlogInfo> queryBlogList() {return blogMapper.selectAllBlog();}

前端 

    <script>$.ajax({type: "get",url: "blog/getList",success:function(result){//逻辑不全，可以再完善//比如code == 200,但是data为空，页面可以提示，当前没有任何博客，快去写博客。然后进行跳转if(result.code == 200 && result.data!=null){var finalHtml = "";for(var blog of result.data){  //循环的时候每个数据叫blogfinalHtml += '<div class="blog">';finalHtml += '<div class="title">'+blog.title+'</div>';finalHtml += '<div class="date">'+blog.createTime+'</div>';finalHtml += '<div class="desc">'+blog.content+'</div>';finalHtml += '<a class="detail" href="blog_detail.html?blogId='+blog.id+'">查看全文&gt;&gt;</a>';finalHtml += '</div>';}$(".right").html(finalHtml);}}});</script>

我们发现显示的时间很长。 返回的时间就如我们postman返回的时间一样。

如何修改呢。我们最好在后端统一修改了

修改时间显示 

我们在blog实体类中修改。

1.创建utils包。

2.创建 DataUtils 类

3.创建formatDate方法

指定我们的时间返回格式的方法参考如下表。

public class DateUtils {public static String formatDate(Date date){SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm");return simpleDateFormat.format(date);}
}

4.在blog实体类添加如下代码

    public String getCreateTime(){return DateUtils.formatDate(createTime);}

存的的问题

这是博客列表显示的 

在博客列表中我们发现存在####。

不但如此。我们还希望。在博客列表中只显示一部分博客。而不是将博客全部显示出来。这个又该怎么操作呢？

这个如何修改呢 

1.去掉特殊符号

2.对内容长度进行处理

①通过SQL截断

②通过Java截断

 我选择通过java截断

    public List<BlogInfo> queryBlogList() {List<BlogInfo> blogInfos = blogMapper.selectAllBlog();for (BlogInfo blog: blogInfos){String result = blog.getContent();result = result.replace("#","");if(result.length() >= 66){result = result.substring(0,65)+"......";}blog.setContent(result);}return blogInfos;}

实现成功

6.2.2实现博客查看全文接口

后端

    @RequestMapping("getBlogDetail")public BlogInfo queryBlogById(Integer blogId){return blogService.queryBlogById(blogId);}

    @RequestMapping("getBlogDetail")public BlogInfo queryBlogById(Integer blogId){return blogService.queryBlogById(blogId);}

正确返回 

前端

        <div class="right"><div class="content"><div class="title"></div><div class="date"></div><div class="detail"></div><div class="operating"><button onclick="window.location.href='blog_update.html'">编辑</button><button onclick="deleteBlog()">删除</button></div></div></div>

        $.ajax({type: "get",url: "/blog/getBlogDetail"+location.search, //location.search拿到问号及后面的内容success:function(result){var blog = result.data;if(result.code == 200 && result.data!=null){$(".right .content .title").text(blog.title);$(".right .content .date").text(blog.createTime);$(".right .content .detail").text(blog.content);}}});

成功显示。 

本篇博客暂时就写到这里啦。后续内容会在下一篇文章更新哦。

后面登录的接口才是本次项目的大Boss。