基于spring的博客系统（二）

仲夏是荔枝味

已于 2024-09-10 10:43:19 修改

阅读量265

点赞数 3

分类专栏： java-ee进阶文章标签： spring java 后端

于 2024-09-09 23:21:40 首次发布

本文链接：https://blog.csdn.net/2202_76101487/article/details/142071937

版权

java-ee进阶专栏收录该内容

34 篇文章 0 订阅

订阅专栏

4. 业务代码

4.1 持久层

根据需求, 先⼤致计算有哪些DB相关操作, 完成持久层初步代码, 后续再根据业务需求进⾏完善

        1. ⽤⼾登录⻚

                a. 根据⽤⼾名查询⽤⼾信息

        2. 博客列表⻚

                a. 根据id查询user信息

                b. 获取所有博客列表

        3. 博客详情⻚

                a. 根据博客ID查询博客信息

                b. 根据博客ID删除博客(修改delete_flag=1)

        4. 博客修改⻚

                a. 根据博客ID修改博客信息

        5. 发表博客

                a. 插⼊新的博客数据

根据以上分析, 来实现持久层的代码：

package com.example.spring_blog_24_9_8.mapper;

import com.example.spring_blog_24_9_8.model.Blog;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;
@Mapper
public interface BlogMapper {

    @Select("Select id,title,content,user_id,delete_flag,create_time,update_time" +
            "from blog where delete_flag = 0 order by create_time desc")
    List<Blog> selectAllBlogs();


    @Insert("insert into blog (title,content,user_id) values (#{title},#{content},#{userId})")
    int insertBlog(Blog record);

    @Select("select * from blog where id = #{id}")
    Blog selectById(Integer id);

    int updateBlog(Blog blog);

}

package com.example.spring_blog_24_9_8.mapper;

import com.example.spring_blog_24_9_8.model.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
@Mapper
public interface UserMapper {

    @Select("select id, user_name, password, github_url, delete_flag, create_time " +
            "from user where id = #{id}")
    User selectById(Integer id);

    @Select("select id, user_name, password, github_url, delete_flag, create_time " +
                "from user where user_name = #{userName}")
    User selectByName(String name);

}

<?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.example.spring_blog_24_9_8.mapper.BlogMapper">
    <update id="updateBlog">
        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>

书写测试⽤例, 简单进⾏单元测试

package com.example.spring_blog_24_9_8.mapper;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import static org.junit.jupiter.api.Assertions.*;
@SpringBootTest
class UserMapperTest {

    @Autowired
    private UserMapper userMapper;

    @Test
    void selectById() {
        System.out.println(userMapper.selectById(2));
    }

    @Test
    void selectByName() {
        System.out.println(userMapper.selectByName("shenmengyao"));

    }
}

selectbyid结果如下：

selestbyname结果如下：

package com.example.spring_blog_24_9_8.mapper;

import com.example.spring_blog_24_9_8.model.Blog;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import static org.junit.jupiter.api.Assertions.*;
@SpringBootTest
class BlogMapperTest {

    @Autowired
    private BlogMapper blogMapper;


    @Test
    void selectAllBlogs() {
        System.out.println(blogMapper.selectAllBlogs());
    }

    @Test
    void insertBlog() {
        Blog blog = new Blog();
        blog.setTitle("测试接⼝");
        blog.setContent("单元测试测试接⼝测试接⼝");
        blog.setUserId(1);
        blogMapper.insertBlog(blog);
    }

    @Test
    void selectById() {
        System.out.println(blogMapper.selectById(3));
    }

    @Test
    void updateBlog() {
        Blog blog = new Blog();
        blog.setId(3);
        blog.setDeleteFlag(1);
        blog.setTitle("测试修改接⼝");
        blog.setContent("测试修改接⼝测试修改接⼝测试修改接⼝");
        blogMapper.updateBlog(blog);
    }
}

selectallblogs结果如下：

insertblog结果如下：

selectbyid结果如下：

updateblog结果如下：

4.2 实现博客列表

4.2.1 约定前后端交互接⼝

[请求]
/blog/getlist
[响应]
{
 "code": 200,
 "msg": "",
 "data": [{
 "id": 1,
 "title": "第⼀篇博客",
 "content": "111我是博客正⽂我是博客正⽂我是博客正⽂",
 "userId": 1,
 "deleteFlag": 0,
 "createTime": "2023-10-21 16:56:57",
 "updateTime": "2023-10-21T08:56:57.000+00:00"
 },
 .....
 ]
}

客⼾端给服务器发送⼀个 /blog/getlist 这样的 HTTP 请求, 服务器给客户端返回了⼀个 JSON 格式的数据.

4.2.2 实现服务器代码

控制层代码：

@RestController
@RequestMapping("/blog")
public class BlogController {
    @Autowired
    private BlogService blogService;

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

服务层代码：

@Service
public class BlogService {
    @Autowired
    private BlogMapper blogMapper;

    public List<Blog> getBlogList(){
        return blogMapper.selectAllBlogs();
    }
}

运行程序，浏览器访问http://127.0.0.1:8087/blog/getList，结果如下：

4.2.3 实现客⼾端代码

        修改 blog_list.html, 删除之前写死的博客内容, 并新增 js 代码处理 ajax 请求；

        使⽤ ajax 给服务器发送 HTTP 请求.；

        服务器返回的响应是⼀个 JSON 格式的数据, 根据这个响应数据使⽤ DOM API 构造⻚⾯内容.

        响应中的 postTime 字段为 ms 级时间戳, 需要转成格式化⽇期.

        跳转到博客详情⻚的 url 形如 blog_detail.html?blogId=1 这样就可以让博客详情⻚知道当前是要访问哪篇博客.

前端代码修改如下：

   function getBlogList() {
            $.ajax({
                type: "get",
                url: "/blog/getList",
                success: function (result) {
                    //逻辑不全
                    //可以再完善, 比如code==200, 但是data为空的, 页面可以提示: 当前还没有任何博客, 快去写博客吧...
                    if (result.code == 200 && result.data != null && result.data.length > 0) {
                        //循环拼接数据到document
                        var finalHtml = "";
                        //页面展示
                        for (var blog of result.data) {
                            finalHtml += '<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);
                    }
                },
                error: function (error) {
                    console.log("后端返回失败");
                }
            });
        }

如上图所示，我们当前博客列表页显示的时间为时间戳，我们从后端也⽇期进⾏处理；SimpleDateFormat，格式参考官⽅⽂档：

/**
 * 日期工具类
 */
public class DateUtils {

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

重写获取博客创建时间：

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

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

重新访问博客列表页，查看页面结果：

4.3 实现博客详情

⽬前点击博客列表⻚的 "查看全⽂" , 能进⼊博客详情⻚, 但是这个博客详情⻚是写死的内容. 我们期望能够根据当前的博客 id 从服务器动态获取博客内容

4.3.1 约定前后端交互接⼝

[请求]
/blog/getBlogDetail?blogId=1
[响应]
{
 "code": 200,
 "msg": "",
 "data": {
 "id": 1,
 "title": "第⼀篇博客",
 "content": "我是神喵我是神喵我是神喵",
 "userId": 1,
"deleteFlag": 0,
 "createTime": "2023-10-21 16:56:57",
 "updateTime": "2023-10-21T08:56:57.000+00:00"
 }
}

4.3.2 实现服务器代码

在BlogController中添加getBlogDeatail ⽅法

@RequestMapping("/getBlogDetail")
    public Blog getBlogDetail(Integer blogId){
        return blogService.getBlogDetail(blogId);
    }

在BlogService 中添加getBlogDeatil⽅法

 public Blog getBlogDetail(Integer blogId){
        return blogMapper.selectById(blogId);
    }

访问http://127.0.0.1:8087/blog/getBlogDetail?blogId=1，结果如下：

4.3.3 实现客户端代码

        修改 blog_content.html ：

        根据当前⻚⾯ URL 中的 blogId 参数(使⽤ location.search 即可得到形如 ?blogId=1 的数据), 给服务器发送 GET /blog 请求.

         根据获取到的响应数据, 显⽰在⻚⾯上

1. 修改html⻚⾯, 去掉原来写死的博客标题, ⽇期和正⽂部分，代码如下：

 <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>删除</button>
                </div>
            </div>

2. 完善 js 代码, 从服务器获取博客详情数据.

 $.ajax({
            type: "get",
            url: "/blog/getBlogDetail" + location.search,
            success: function (result){
                console.log(result);
                if(result.code == 200 && result.data != null){
                    $(".title").text(result.data.title);
                    $(".date").text(result.data.createTime);
                    $(".detail").text(result.data.detail);

                }   
            }
        })

前进入到博客列表页，点击其中的查看全文进入到文章全文页面：