基于 SpringBoot + MyBatis 的博客系统

文章目录

• 1. 项目设计
• 2. 效果展示
• 3. 创建项目并配置文件
• • 1.1 创建 Spring 项目
  • 1.2 配置文件
• 4. 数据库实现用户和博客管理
• • 4.1 设计数据库
  • 4.2 使用 MyBatis 操作数据库
  • • UserMapper.xml
    • BlogMapper.xml
    • User 实体类 和 Blog 实体类
    • UserMapper 接口 和 BlogMapper 接口
    • UserService 类 和 BlogService 类
• 5. 前后端交互接口设计
• 6. 导入前端代码
• 7. 实现博客主页
• • 7.1 实现后端代码
  • 7.2 实现前端代码
  • 7.3 测试代码
  • 7.4 解决页面内容太多超出当前浏览器
  • 7.5 解决页面顺序不是按最新时间排序
  • 7.6 解决内容太多, 导致显示的时候占位太多.
  • 7.7 再次测试代码
• 8. 实现博客详情页
• • 8.1 实现后端代码
  • 8.2 实现前端代码
  • 8.3 测试代码
  • 8.4 这里展示为markdown语法的正文
• 9. 实现博客登录界面
• • 9.1 实现后端代码
  • 9.2 实现前端代码
• 10. 实现登录判断 — 拦截器
• • • 10.1 实现自定义拦截器
  • 10.2 将自定义拦截器加入到系统配置
• 11. 实现注册功能
• • 11.1 实现后端代码
  • 11.2 实现前端代码
• 12. 实现注销功能
• • 12.1 实现后端代码
• 13. 实现博客编辑页
• • 13.1 实现后端代码
  • 13.2 实现前端代码
• 14. 实现博客个人主页
• • 14.1 实现后端代码
  • 14.2 实现前端代码
• 15. 实现展示用户信息的功能
• • 15.1 实现后端代码
  • 15.2 实现前端代码
• 16. 实现博客的删除功能
• • 16.1 改进代码
  • 16.2 实现后端代码
• 17. 实现博客的修改功能
• • 17.1 实现后端代码
  • 17.2 实现前端代码

1. 项目设计

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

2. 效果展示

3. 创建项目并配置文件

1.1 创建 Spring 项目

1.2 配置文件

application.properties 配置内容

spring.profiles.active=dev

application-dev.properties 配置内容

spring.datasource.url=jdbc:mysql://localhost:3306/MyBlogSystem?characterEncoding=utf8&useSSL=true
spring.datasource.username=root
spring.datasource.password=0000
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver


mybatis.mapper-locations=classpath:mapper/**Mapper.xml

4. 数据库实现用户和博客管理

4.1 设计数据库

这里博客系统, 是一个用户表和博客表,

用户一般分为:

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

博客一般分为:

• 博客Id (每篇博客一个且互不相同)
• 标题
• 正文
• 创建时间
• 修改时间 (这里没用到, 自己想加也可以)
• 用户Id (可以设置一个外键,这里没设置)

create database if not exists MyBlogSystem;

use MyBlogSystem;

drop table if exists blog;

-- 创建一个博客表
create table blog (
    blogId int primary key auto_increment,
    title varchar(1024),
    content mediumtext,
    postTime datetime,
    userId int
);

drop table if exists user;

-- 创建一个用户信息表
create table user (
    userId int primary key auto_increment,
    username varchar(128) unique,
    password varchar(128)
);

4.2 使用 MyBatis 操作数据库

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

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

UserMapper.xml

<?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.demo.mapper.UserMapper">
    <!--  注册一个用户  -->
    <insert id="addUser" keyProperty="userId" keyColumn="userId">
        insert into user(username password) values (#{username}, #{password})
    </insert>

    <!--  通过用户名查找用户信息  -->
    <select id="selectByName" resultType="com.example.demo.model.User">
        select * from user where username = #{username}
    </select>

    <!--  通过用户Id查找用户信息  -->
    <select id="selectById" resultType="com.example.demo.model.User">
        select * from user where userId = #{userId}
    </select>
</mapper>

BlogMapper.xml

<?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.demo.mapper.BlogMapper">
    <!--  查找当前所有的文章  -->
    <select id="getAllBlog" resultType="com.example.demo.model.Blog">
        select * from blog
    </select>

    <!--  通过博客id查找所有的文章  -->
    <select id="getBlogByBid"