通州 网站建设设计房子的软件免费
项目整体预览
登录页面
主页
查看全文
编辑
写博客
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+'">查看全文>></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。