Spring项目:文字花园（三）

一.实现博客详情

1.后端逻辑代码

controller层添加方法（根据博客id查看博客详情）

@RequestMapping("/getBlogDetail")public Result<BlogInfo> getBlogDetail(Integer blogId){log.info("getBlogDetail, blogId: {}", blogId);BlogInfo blogInfo = blogService.getBlogDetail(blogId);return Result.success(blogInfo);}

Service层写构造方法

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

mapper层：

package com.example.demo.mapper;import com.example.demo.model.BlogInfo;
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 {/*** 返回博客列表* @return*/@Select("select * from blog where delete_flag = 0")List<BlogInfo> selectAll();/*** 根据博客ID, 返回博客信息* @return*/@Select("select * from blog where id =#{id}")BlogInfo selectById(Integer id);/*** 更新博客* @return*/Integer updateBlog(BlogInfo blogInfo);/*** 发布博客*/@Insert("insert into blog (title, content, user_id) values (#{title}, #{content}, #{userId})")Integer insertBlog(BlogInfo blogInfo);}

使用postman来进行测试

测试成功

2.前端代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客详情页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/detail.css"></head><body><div class="nav"><img src="pic/rose.jpg" alt=""><span class="blog-title">文字花园</span><div class="space"></div><a class="nav-span" href="blog_list.html">主页</a><a class="nav-span" href="blog_edit.html">写博客</a><a class="nav-span" href="#" onclick="logout()">注销</a></div><div class="container"><div class="left"><div class="card"><img src="pic/doge.jpg" alt=""><h3>小李同学</h3><a href="#">GitHub 地址</a><div class="row"><span>文章</span><span>分类</span></div><div class="row"><span>2</span><span>1</span></div></div></div><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></div><!-- 引入 editor.md 的依赖 --><link rel="stylesheet" href="blog-editormd/css/editormd.css" /><script src="js/jquery.min.js"></script><script src="blog-editormd/lib/marked.min.js"></script><script src="blog-editormd/lib/prettify.min.js"></script><script src="blog-editormd/editormd.js"></script><script src="js/common.js"></script><script>$.ajax({type: "get",url: "/blog/getBlogDetail" +location.search,success: function(result){if(result.code=="SUCCESS"){//填充页面var blog = result.data;$(".content .title").text(blog.title);$(".content .date").text(blog.createTime);$(".content .detail").text(blog.content);}},error:function(error){if(error!=null && error.status==401){location.href = "blog_login.html";}}});</script>
</body></html>

展示页面

注意：

这里的时间是Date类型，不好看，我们修改String类型。

新建/utils/DateUtils

代码：

package com.example.demo.utils;import java.text.SimpleDateFormat;
import java.util.Date;public class DateUtils {public static String dateFormat(Date date){//2024-04-24 21:18SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm");return format.format(date);}
}

package com.example.demo.model;import com.example.demo.utils.DateUtils;
import lombok.Data;import java.util.Date;@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;public String getCreateTime() {return DateUtils.dateFormat(createTime);}
}

展示：