基于 SpringBoot + MyBatis 的博客系统

伤心客  金牌会员 | 2022-6-26 03:13:00 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 526|帖子 526|积分 1578

文章目录



1. 项目设计

前端使用 HTML+CSS+JavaScript+JQuery
后端使用 Spring MVC+Spring Boot+MyBatis

2. 效果展示





3. 创建项目并配置文件

1.1 创建 Spring 项目





1.2 配置文件

application.properties 配置内容
  1. spring.profiles.active=dev
复制代码
application-dev.properties 配置内容
  1. spring.datasource.url=jdbc:mysql://localhost:3306/MyBlogSystem?characterEncoding=utf8&useSSL=true
  2. spring.datasource.username=root
  3. spring.datasource.password=0000
  4. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  7. mybatis.mapper-locations=classpath:mapper/**Mapper.xml
复制代码
4. 数据库实现用户和博客管理

4.1 设计数据库

这里博客系统, 是一个用户表和博客表,
   用户一般分为:
  

  • 用户Id (每个人一个且互不相同)
  • 用户名 (每个人的用户名不相同)
  • 密码
  • 用户头像(暂不实现)
  • 用户马云地址(暂不实现)
    博客一般分为:
  

  • 博客Id (每篇博客一个且互不相同)
  • 标题
  • 正文
  • 创建时间
  • 修改时间 (这里没用到, 自己想加也可以)
  • 用户Id (可以设置一个外键,这里没设置)
  1. create database if not exists MyBlogSystem;
  3. use MyBlogSystem;
  5. drop table if exists blog;
  7. -- 创建一个博客表
  8. create table blog (
  9.     blogId int primary key auto_increment,
  10.     title varchar(1024),
  11.     content mediumtext,
  12.     postTime datetime,
  13.     userId int
  14. );
  16. drop table if exists user;
  18. -- 创建一个用户信息表
  19. create table user (
  20.     userId int primary key auto_increment,
  21.     username varchar(128) unique,
  22.     password varchar(128)
  23. );
复制代码
4.2 使用 MyBatis 操作数据库

   在 resources 下创建一个 mapper 包. 包下创建 UserMapper.xml 和
BlogMapper.xml
  

  • BlogMapper.xml 里是对博客表的数据库操作
  • UserMapper.xml 里是对用户表的数据库操作
  UserMapper.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  3.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  4. <mapper namespace="com.example.demo.mapper.UserMapper">
  5.    
  6.     <insert id="addUser" keyProperty="userId" keyColumn="userId">
  7.         insert into user(username password) values (#{username}, #{password})
  8.     </insert>
  10.    
  11.     <select id="selectByName" resultType="com.example.demo.model.User">
  12.         select * from user where username = #{username}
  13.     </select>
  15.    
  16.     <select id="selectById" resultType="com.example.demo.model.User">
  17.         select * from user where userId = #{userId}
  18.     </select>
  19. </mapper>
复制代码
BlogMapper.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  3.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  4. <mapper namespace="com.example.demo.mapper.BlogMapper">
  5.    
  6.     <select id="getAllBlog" resultType="com.example.demo.model.Blog">
  7.         select * from blog
  8.     </select>
  10.    
  11.     <select id="getBlogByBid" resultType="com.example.demo.model.Blog">
  12.         select * from blog where blogId = #{blogId}
  13.     </select>
  15.    
  16.     <insert id="postBlog" keyColumn="userId" keyProperty="userId">
  17.         insert into blog(title,content,postTime,userId) values(#{title},#{content},#{postTime},#{userId})
  18.     </insert>
  20.    
  21.     <delete id="deleteBlog">
  22.         delete from blog where blogId = #{blogId}
  23.     </delete>
  25.    
  26.     <update id="updateBlog">
  27.         update blog set content = #{content},title = #{title} where blogId = #{blogId}
  28.     </update>
  30.    
  31.     <select id="getAllBlogById" resultType="com.example.demo.model.Blog">
  32.         select * from blog where userId = #{userId}
  33.     </select>
  34. </mapper>
复制代码
User 实体类 和 Blog 实体类

在 model 包下 创建 User 类 和 Blog 类
User 类
  1. @Data
  2. public class User {
  3.     public int userId;
  4.     public String username;
  5.     public String password;
  6. }
复制代码
Blog 类
  1. @Data
  2. public class Blog {
  3.     public int blogId;
  4.     public String title;
  5.     public String content;
  6.     public Timestamp postTime;
  7.     public int userId;
  8. }
复制代码
UserMapper 接口 和 BlogMapper 接口

在 mapper 包下创建 UserMapper 和 BlogMapper 接口
UserMapper
  1. @Mapper
  2. public interface UserMapper {
  3.     void addUser(User user);
  5.     User selectByName(String username);
  7.     User selectById(Integer userId);
  8. }
复制代码
BlogMapper
  1. @Mapper
  2. public interface BlogMapper {
  3.     List<Blog> getAllBlog();
  4.    
  5.     Blog getBlogByBid(Integer blogId);
  6.    
  7.     void postBlog(Blog blog);
  8.    
  9.     void deleteBlog(Integer blogId);
  10.    
  11.     void updateBlog(Blog blog);
  12.    
  13.     List<Blog> getAllBlogById();
  14. }
复制代码
UserService 类 和 BlogService 类

service 包下创建 UserService类 和 BlogService类
UserService
  1. @Service
  2. public class UserService {
  3.     @Resource
  4.     private UserMapper userMapper;
  6.     public void addUser(User user){
  7.         userMapper.addUser(user);
  8.     }
  10.     public User selectByName(String username){
  11.         return userMapper.selectByName(username);
  12.     }
  14.     public User selectById(Integer userId){
  15.         return userMapper.selectById(userId);
  16.     }
  17. }
复制代码
BlogService
  1. @Service
  2. public class BlogService {
  3.     @Resource
  4.     private BlogMapper blogMapper;
  6.     public List<Blog> getAllBlog(){
  7.         return blogMapper.getAllBlog();
  8.     }
  10.     public Blog getBlogByBid(Integer blogId){
  11.         return blogMapper.getBlogByBid(blogId);
  12.     }
  14.     public void postBlog(Blog blog) {
  15.         blogMapper.postBlog(blog);
  16.     }
  18.     public void deleteBlog(Integer blogId){
  19.         blogMapper.deleteBlog(blogId);
  20.     }
  22.     public void updateBlog(Blog blog){
  23.         blogMapper.updateBlog(blog);
  24.     }
  26.     public List<Blog> getAllBlogById(){
  27.         return blogMapper.getAllBlogById();
  28.     }
  29. }
复制代码
5. 前后端交互接口设计


交互1

交互2

交互3

交互4

交互5

交互6

交互7

交互8

交互9

交互10

交互11

6. 导入前端代码

导入前端代码到 resources 的 static下

具体代码查看 文章 博客系统前端界面
https://wangzhi430.blog.csdn.net/article/details/124649884
7. 实现博客主页

这里的交互接口是 交互6
7.1 实现后端代码

  1. @RestController
  2. public class IndexController {
  3.     @Autowired
  4.     private BlogService blogService;
  6.     @RequestMapping("/index")
  7.     public List<Blog> getAllBlog() {
  8.         return blogService.getAllBlog();
  9.     }
  10. }
复制代码
7.2 实现前端代码

  1. $.ajax({
  2.             url: "index",
  3.             method: "GET",
  4.             success: function(data,status) {
  5.                 buildBlogs(data);
  6.             }
  7.         })
  8.         
  9.         function buildBlogs(blogs){
  10.             let rightDiv = document.querySelector('.right');
  11.             for(let blog of blogs){
  12.                 let blogDiv = document.createElement('div');
  13.                 blogDiv.className = 'article';
  14.                 // 创建 title
  15.                 let h2 = document.createElement('h2');
  16.                 h2.className = 'title';
  17.                 h2.innerHTML = blog.title;
  18.                 blogDiv.appendChild(h2);
  19.                 // 创建 postTime
  20.                 let postTime = document.createElement('span');
  21.                 postTime.className = 'date';
  22.                 postTime.innerHTML = DateFormat(blog.postTime);
  23.                 blogDiv.appendChild(postTime);
  24.                 // 创建 content
  25.                 let content = document.createElement('div');
  26.                 content.className = 'desc';
  27.                 content.innerHTML = blog.content;
  28.                 blogDiv.appendChild(content);
  29.                 // 创建 详情页的超链接
  30.                 let detailA = document.createElement('a');
  31.                 detailA.className = 'more';
  32.                 detailA.href = 'art.html?blogId=' + blog.blogId;
  33.                 detailA.innerHTML = '查看全文>>';
  34.                 blogDiv.appendChild(detailA);
  35.                 // 加入到 right 中
  36.                 rightDiv.appendChild(blogDiv);
  37.             }
  38.         }
  40.         // 把毫秒级时间戳转化成格式化日期
  41.         function DateFormat(timeStampMS) {
  42.             var date = new Date(timeStampMS);
  44.             var year = date.getFullYear(),
  45.                 month = date.getMonth()+1,//月份是从0开始的
  46.                 day = date.getDate(),
  47.                 hour = date.getHours(),
  48.                 min = date.getMinutes(),
  49.                 sec = date.getSeconds();
  50.             var newTime = year + '-' +
  51.                         (month < 10? '0' + month : month) + '-' +
  52.                         (day < 10? '0' + day : day) + ' ' +
  53.                         (hour < 10? '0' + hour : hour) + ':' +
  54.                         (min < 10? '0' + min : min) + ':' +
  55.                         (sec < 10? '0' + sec : sec);
  56.         
  57.             return newTime;
  58.         }
复制代码
7.3 测试代码


7.4 解决页面内容太多超出当前浏览器



7.5 解决页面顺序不是按最新时间排序


在BlogMapper.xml中修改当前sql语句.

7.6 解决内容太多, 导致显示的时候占位太多.



7.7 再次测试代码


8. 实现博客详情页

这里的交互是 交互5
8.1 实现后端代码

根据当前blogId来获取文章, 要判断blogId是否合法, 是否存在当前blogId的文章
这里使用, message来判断, 返回的message不为空就表示异常.
  1. @RestController
  2. public class DetailsController {
  3.     @Autowired
  4.     private BlogService blogService;
  6.     @RequestMapping("/details")
  7.     public Object ShowBlog(Integer blogId) {
  8.         HashMap<String,Object> map = new HashMap<>();
  9.         if (blogId == null || blogId < 1) {
  10.             map.put("message","blogId异常!");
  11.             return map;
  12.         }
  13.         Blog blog = blogService.getBlogByBid(blogId);
  14.         if (blog == null) {
  15.             map.put("message","不存在当前blogId的文章");
  16.             return map;
  17.         }
  18.         return blog;
  19.     }
  20. }
复制代码
8.2 实现前端代码

  1.         $.ajax({
  2.             url: "details"+location.search,
  3.             method: "GET",
  4.             success: function(data,status) {
  5.                 if(data.message == null) {
  6.                     buildBlog(data);
  7.                 } else {
  8.                     alert(data.message);
  9.                     location.assign("home.html");
  10.                 }
  11.             }
  12.         })
  14.         function buildBlog(blog){
  15.             // 1. 更新 title
  16.             let titleDiv = document.querySelector('.title');
  17.             titleDiv.innerHTML = blog.title;
  18.             // 2. 更新 postTime
  19.             let postTime = document.querySelector('.date');
  20.             postTime.innerHTML = DateFormat(blog.postTime);
  21.             editormd.markdownToHTML('content', {markdown: blog.content});
  22.             }
  24.             // 把毫秒级时间戳转化成格式化日期
  25.             function DateFormat(timeStampMS) {
  26.             var date = new Date(timeStampMS);
  28.             var year = date.getFullYear(),
  29.                 month = date.getMonth()+1,//月份是从0开始的
  30.                 day = date.getDate(),
  31.                 hour = date.getHours(),
  32.                 min = date.getMinutes(),
  33.                 sec = date.getSeconds();
  34.             var newTime = year + '-' +
  35.                         (month < 10? '0' + month : month) + '-' +
  36.                         (day < 10? '0' + day : day) + ' ' +
  37.                         (hour < 10? '0' + hour : hour) + ':' +
  38.                         (min < 10? '0' + min : min) + ':' +
  39.                         (sec < 10? '0' + sec : sec);
  41.             return newTime;
  42.             }
复制代码
8.3 测试代码


8.4 这里展示为markdown语法的正文

展示为 markdown 语法的正文.
注意这里的几段代码


这里还需要导入依赖包

9. 实现博客登录界面

这里的交互是 交互8
9.1 实现后端代码

这里要根据前端穿过来的 json 格式数据进行判断
判断当前是否存在用户, 以及当前用户密码是否正确
登录成功之后, 要创建一个session
  1. @RestController
  2. public class LoginController {
  3.     @Autowired
  4.     private UserService userService;
  6.     @RequestMapping("/login")
  7.     public Object userLogin(@RequestBody User user, HttpServletRequest request) {
  8.         HashMap<String,Object> map = new HashMap<>();
  9.         if (user == null) {
  10.             map.put("message","当前还没有输入用户名和密码,登录失败!");
  11.             return map;
  12.         }
  13.         User user1 = userService.selectByName(user.getUsername());
  14.         if (user1 == null) {
  15.             map.put("message","当前用户名不存在!");
  16.             return map;
  17.         }
  18.         if (!user.getPassword().equals(user1.getPassword())) {
  19.             map.put("message","当前用户名密码错误!");
  20.             return map;
  21.         }
  22.         user.setUserId(user1.getUserId());
  24.         HttpSession session = request.getSession(true);
  25.         if (session != null) {
  26.             session.setAttribute("user",user);
  27.         }
  28.         return map;
  29.     }
  30. }
复制代码
9.2 实现前端代码

这里前端去除了前后空格,以及为空的情况
  1.         let submit = document.querySelector('.button');
  2.         submit.onclick = function() {
  3.             let username = document.querySelector('.user');
  4.             let password = document.querySelector('.password');
  5.             
  6.             if (username.value.trim() == ""){
  7.                 alert('请先输入用户名!');
  8.                 username.focus();
  9.                 return;
  10.             }
  11.             if (password.value.trim() == ""){
  12.                 alert('请先输入密码!');
  13.                 password.focus();
  14.                 return;
  15.             }
  16.             $.ajax({
  17.                 url: "login",
  18.                 method: "POST",
  19.                 data: JSON.stringify({username: username.value.trim(), password: password.value.trim()}),
  20.                 contentType: "application/json;charset=utf-8",
  21.                 success: function(data, status) {
  22.                     if(data.message == null) {
  23.                         location.assign("home.html");
  24.                     }else{
  25.                         alert(data.message);
  26.                         username.value="";
  27.                         password.value="";
  28.                         username.focus();
  29.                     }
  30.                 }
  31.             })
  32.         }
复制代码
10. 实现登录判断 — 拦截器

10.1 实现自定义拦截器

  1. public class LoginInterceptor implements HandlerInterceptor {
  2.     @Override
  3.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
  4.         HttpSession session = request.getSession(false);
  5.         if (session != null && session.getAttribute("user") != null) {
  6.             return true;
  7.         }
  8.         response.setStatus(401);
  9.         response.sendRedirect("/login.html");
  10.         return false;
  11.     }
  12. }
复制代码
10.2 将自定义拦截器加入到系统配置

  1. @Configuration
  2. public class AppConfig implements WebMvcConfigurer {
  3.     @Override
  4.     public void addInterceptors(InterceptorRegistry registry) {
  5.         registry.addInterceptor(new LoginInterceptor())
  6.                 .addPathPatterns("/**")
  7.                 .excludePathPatterns("/**/*.js")
  8.                 .excludePathPatterns("/**/*.jpg")
  9.                 .excludePathPatterns("/**/*.css")
  10.                 .excludePathPatterns("/**/*.png")
  11.                 .excludePathPatterns("/**/login.html")
  12.                 .excludePathPatterns("/**/register.html")
  13.                 .excludePathPatterns("/**/login")
  14.                 .excludePathPatterns("/**/register");
  15.     }
  16. }
复制代码
11. 实现注册功能

这里的交互是 交互9
11.1 实现后端代码

实现一个 类 Register 来接收前端返回来的数据
  1. class Register {
  2.     public String username;
  3.     public String password1;
  4.     public String password2;
  5. }
复制代码
这里后端需要判断当前用户名是否已经被使用.
  1. @RestController
  2. public class RegisterController {
  3.     @Autowired
  4.     private UserService userService;
  6.     @RequestMapping("/register")
  7.     public Object userRegister(@RequestBody Register register) {
  8.         HashMap<String,Object> map = new HashMap<>();
  9.         User user = userService.selectByName(register.username);
  10.         if (user != null) {
  11.             map.put("message","当前用户名已经存在了, 请更换!");
  12.             return map;
  13.         }
  15.         User user1 = new User();
  16.         user1.setUsername(register.username);
  17.         user1.setPassword(register.password1);
  18.         userService.addUser(user1);
  19.         return map;
  20.     }
  21. }
复制代码
11.2 实现前端代码

要对输入内容去除前后空格,并且判空
  1.         let submit = document.querySelector('.button');
  2.         submit.onclick = function() {
  3.             let username = document.querySelector('.user');
  4.             let password1 = document.querySelector('.password1');
  5.             let password2 = document.querySelector('.password2');
  6.             if(username.value.trim() == ""){
  7.                 alert("请先输入用户名!");
  8.                 username.focus();
  9.                 return;
  10.             }
  11.             if(password1.value.trim() == ""){
  12.                 alert('请先输入密码!');
  13.                 password1.focus();
  14.                 return;
  15.             }
  16.             if(password2.value.trim() == ""){
  17.                 alert('请再次输入密码!');
  18.                 password2.focus();
  19.                 return;
  20.             }
  21.             if(password1.value.trim() != password2.value.trim()) {
  22.                 alert('两次输入的密码不同!');
  23.                 passwrod1.value="";
  24.                 password2.value="";
  25.                 return;
  26.             }
  27.             $.ajax({
  28.                 url: "register",
  29.                 method: "POST",
  30.                 data: JSON.stringify({username: username.value.trim(), password1: password1.value.trim(),password2: password2.value.trim()}),
  31.                 contentType: "application/json;charset=utf-8",
  32.                 success: function(data,status){
  33.                     if(data.message != null){
  34.                         alert(data.message);
  35.                         username.value="";
  36.                         password1.value="";
  37.                         password2.value="";
  38.                         username.focus();
  39.                     }else{
  40.                         location.assign('login.html');
  41.                     }
  42.                 }
  43.             })
  44.         }
复制代码
12. 实现注销功能

这里的交互是 交互10
12.1 实现后端代码

因为 注销功能是点击注销的时候, 触发一个logout的url, 然后发送一个请求.
这里只需要实现后端代码既可
  1. @Controller
  2. public class LogoutController {
  4.     @RequestMapping("/logout")
  5.     public void userLogout(HttpServletRequest request, HttpServletResponse response) throws IOException {
  6.         HttpSession session = request.getSession(false);
  7.         // 拦截器的拦截, 所以不可能出现session为空的情况
  8.         session.removeAttribute("user");
  9.         response.sendRedirect("login.html");
  10.     }
  11. }
复制代码
13. 实现博客编辑页

这里的交互是 交互1
13.1 实现后端代码

  1. @RestController
  2. public class EditController {
  3.     @Autowired
  4.     private BlogService blogService;
  6.     @RequestMapping("/edit")
  7.     public void postBlog(@RequestBody Blog blog, @SessionAttribute(value = "user",required = false)User user){
  8.         blog.setPostTime(new Timestamp(System.currentTimeMillis()));
  9.         blog.setUserId(user.getUserId());
  11.         blogService.postBlog(blog);
  12.     }
  13. }
复制代码
13.2 实现前端代码

  1.         let submit = document.querySelector('.publish');
  2.         submit.onclick = function() {
  3.             let title = document.querySelector('.title');
  4.             let content = document.querySelector('.content');
  5.             if(title.value.trim() == ""){
  6.                 alert('当前文章标题为空,请输入!');
  7.                 title.focus();
  8.                 return;
  9.             }
  10.             if(content.value.trim() == ""){
  11.                 alert('当前文章内容为空,请输入!');
  12.                 content.focus();
  13.                 return;
  14.             }
  15.             $.ajax({
  16.                 url: "edit",
  17.                 method: "POST",
  18.                 data: JSON.stringify({title: title.value.trim(), content: content.value.trim()}),
  19.                 contentType: "application/json;charset=utf-8",
  20.                 success: function(data,status) {
  21.                     location.assign('home.html');
  22.                 }
  23.             })
  24.         }
复制代码
14. 实现博客个人主页

这里的交互是 交互7
这里的前端页面主要就是主页页面的改进
14.1 实现后端代码

  1. @RestController
  2. public class PersonController {
  3.     @Autowired
  4.     private BlogService blogService;
  6.     @RequestMapping("/person")
  7.     public List<Blog> getMyBlog(@SessionAttribute(value = "user",required = false)User user) {
  8.         List<Blog> blogs = blogService.getAllBlogById(user.getUserId());
  9.         for (Blog blog : blogs) {
  10.             if (blog.getContent().length() > 80) {
  11.                 blog.setContent(blog.getContent().substring(0,80) + " ...");
  12.             }
  13.         }
  14.         return blogs;
  15.     }
  16. }
复制代码
14.2 实现前端代码

  1.         $.ajax({
  2.             url: "person",
  3.             method: "GET",
  4.             success: function(data,status) {
  5.                 buildBlogs(data);
  6.             }
  7.         })
  9.         function buildBlogs(blogs){
  10.             let rightDiv = document.querySelector('.right');
  11.             for(let blog of blogs){
  12.                 let blogDiv = document.createElement('div');
  13.                 blogDiv.className = 'article';
  14.                 // 创建 title
  15.                 let h2 = document.createElement('h2');
  16.                 h2.className = 'title';
  17.                 h2.innerHTML = blog.title;
  18.                 blogDiv.appendChild(h2);
  19.                 // 创建 postTime
  20.                 let postTime = document.createElement('span');
  21.                 postTime.className = 'date';
  22.                 postTime.innerHTML = DateFormat(blog.postTime);
  23.                 blogDiv.appendChild(postTime);
  24.                 // 创建 content
  25.                 let content = document.createElement('div');
  26.                 content.className = 'desc';
  27.                 content.innerHTML = blog.content;
  28.                 blogDiv.appendChild(content);
  29.                 // 创建 详情页的超链接
  30.                 let detailA = document.createElement('a');
  31.                 detailA.className = 'more';
  32.                 detailA.href = 'art.html?blogId=' + blog.blogId;
  33.                 detailA.innerHTML = '查看全文>>';
  34.                 blogDiv.appendChild(detailA);
  35.                 // 加入到 right 中
  36.                 rightDiv.appendChild(blogDiv);
  37.             }
  38.         }
  40.         // 把毫秒级时间戳转化成格式化日期
  41.         function DateFormat(timeStampMS) {
  42.             var date = new Date(timeStampMS);
  44.             var year = date.getFullYear(),
  45.                 month = date.getMonth()+1,//月份是从0开始的
  46.                 day = date.getDate(),
  47.                 hour = date.getHours(),
  48.                 min = date.getMinutes(),
  49.                 sec = date.getSeconds();
  50.             var newTime = year + '-' +
  51.                         (month < 10? '0' + month : month) + '-' +
  52.                         (day < 10? '0' + day : day) + ' ' +
  53.                         (hour < 10? '0' + hour : hour) + ':' +
  54.                         (min < 10? '0' + min : min) + ':' +
  55.                         (sec < 10? '0' + sec : sec);
  56.         
  57.             return newTime;
  58.         }
复制代码
15. 实现展示用户信息的功能

这里的交互是 交互11
这里需要分情况考虑, 展示个人信息主要是 主页页面, 详情页面, 个人主页页面.
以带不带blogId来区分
15.1 实现后端代码

这里判断了 blogId丢失的情况以及,文章作者丢失情况(数据库表数据被删除的时候会出现这种错误)
  1. @RestController
  2. public class UserController {
  3.     @Autowired
  4.     private UserService userService;
  5.     @Autowired
  6.     private BlogService blogService;
  8.     @RequestMapping("/user")
  9.     public Object getUser(Integer blogId, @SessionAttribute(value = "user",required = false)User user){
  10.         if(blogId == null) {
  11.             return user;
  12.         }else {
  13.             HashMap<String,Object> map = new HashMap<>();
  14.             Blog blog = blogService.getBlogByBid(blogId);
  15.             if(blog == null) {
  16.                 map.put("message","不存在当前blogId的文章");
  17.                 return map;
  18.             }
  19.             User author = userService.selectById(blog.getUserId());
  20.             if(author == null){
  21.                 map.put("message","当前文章作者出错");
  22.                 return map;
  23.             }
  24.             return author;
  25.         }
  26.     }
  27. }
复制代码
15.2 实现前端代码

详情页的情况:
  1.         $.ajax({
  2.             url: "user"+location.search,
  3.             method: "GET",
  4.             success: function(data,status) {
  5.                 if(data.message == null){
  6.                     let username = document.querySelector('.name');
  7.                     username.innerHTML = data.username;
  8.                 }else{
  9.                     alert(data.message);
  10.                     location.assign('home.html');
  11.                 }
  12.             }
  13.         })
复制代码
个人主页和主页的情况
  1.         $.ajax({
  2.             url: "user",
  3.             method: "GET",
  4.             success: function(data,status){
  5.                 let username = document.querySelector('.name');
  6.                 username.innerHTML = data.username;
  7.             }
  8.         })
复制代码
16. 实现博客的删除功能

这里需要用到 交互2
这里在详情页的时候进行构建, 在Blog实体类中加一项 isAuthor, 为1的时候就是当前文章就是作者.
前端接收到这个的时候, 进行判断, 如果为1就显示删除的按钮.
16.1 改进代码





16.2 实现后端代码

  1. @Controller
  2. public class DeleteController {
  3.     @Autowired
  4.     private BlogService blogService;
  6.     @RequestMapping("/delete")
  7.     public Object deleteBlog(Integer blogId) {
  8.         blogService.deleteBlog(blogId);
  9.         return "/home.html";
  10.     }
  11. }
复制代码
17. 实现博客的修改功能

这里的交互是 交互3 和 交互4
交互3是在新的页面进行加载
17.1 实现后端代码

  1. @RestController
  2. public class UpdateController {
  3.     @Autowired
  4.     private BlogService blogService;
  6.     @RequestMapping("/updateLoad")
  7.     public Object updateLoad(Integer blogId){
  8.         HashMap<String, Object> map = new HashMap<>();
  9.         if(blogId == null) {
  10.             map.put("message","blogId丢失!");
  11.             return map;
  12.         }
  13.         Blog blog = blogService.getBlogByBid(blogId);
  14.         if(blog == null) {
  15.             map.put("blog","不存在当前blog的文章!");
  16.             return map;
  17.         }
  18.         return blog;
  19.     }
  21.     @RequestMapping("/update")
  22.     public Object Update(Integer blogId, @RequestBody Blog blog, @SessionAttribute(value = "user",required = false)User user) {
  23.         HashMap<String, Object> map = new HashMap<>();
  24.         if(blogId == null) {
  25.             map.put("message","blogId丢失!");
  26.             return map;
  27.         }
  28.         blog.setBlogId(blogId);
  29.         blog.setUserId(user.getUserId());
  30.         blogService.updateBlog(blog);
  31.         return map;
  32.     }
  33. }
复制代码
17.2 实现前端代码

  1.         $.ajax({
  2.             url: "updateLoad"+location.search,
  3.             method: "GET",
  4.             success: function(data,status) {
  5.                 if(data.message == null) {
  6.                     let title = document.querySelector('.title');
  7.                     title.value=data.title;
  8.                     let content = document.querySelector('.content');
  9.                     content.value=data.content;
  10.                 }else{
  11.                     alert(data.message);
  12.                     location.assign('home.html');
  13.                 }
  14.             }
  15.         })
  17.         // 初始化编辑器
  18.         var editor = editormd("editor", {
  19.             // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
  20.             width: "100%",
  21.             // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
  22.             height: "calc(100% - 60px)",
  24.             // 指定 editor.md 依赖的插件路径
  25.             path: "editor.md/lib/",
  26.             // 放到 textarea中
  27.             saveHTMLToTextArea: true
  28.         });
  30.         let submit = document.querySelector('.publish');
  31.         submit.onclick = function() {
  32.             let title = document.querySelector('.title');
  33.             let content = document.querySelector('.content');
  34.             if(title.value.trim() == ""){
  35.                 alert('当前文章标题为空,请输入!');
  36.                 title.focus();
  37.                 return;
  38.             }
  39.             if(content.value.trim() == ""){
  40.                 alert('当前文章内容为空,请输入!');
  41.                 content.focus();
  42.                 return;
  43.             }
  44.             $.ajax({
  45.                 url: "update"+location.search,
  46.                 method: "POST",
  47.                 data: JSON.stringify({title: title.value.trim(), content: content.value.trim()}),
  48.                 contentType: "application/json;charset=utf-8",
  49.                 success: function(data,status) {
  50.                     if(data.message == null){
  51.                         location.assign('home.html');
  52.                     }else{
  53.                         alert(data.message);
  54.                         location.assign('home.html');
  55.                     }
  56.                 }
  57.             })
  58.         }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

伤心客

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表