【JavaEE】前后端分离实现博客系统（后端实现）

Myth丶恋晨 2023-09-25 00:17 23阅读 0赞

# 写在前面 #

Hello，在上一篇中，我们已经实现了对于博客系统的页面构建任务。本次主要解决的问题就是针对这四个界面，实现后端的 servlet 程序，规范前后端交互的接口，编写客户端和服务端代码，处理请求并反馈。**博客系统的完整代码已上传至 gitee，见文末链接。**  
 博客系统的页面构建：[【JavaEE】前后端分离实现博客系统（页面构建）][JavaEE]  
![在这里插入图片描述][aba22563feac4684afbd277b84b831ee.png_pic_center]

--------------------

### 文章目录 ###

*  写在前面
 *  1 MVC模式与前期准备
 *  2 model 层实现
 *   *  2.1 数据库的设计
     *  2.2 数据库表对应的实体类实现
     *  2.3 JDBC 工具类实现
     *  2.4 UserDao 的实现
     *  2.5 BlogDao 的实现
 *  3 controller 层实现
 *   *  3.1 博客列表页
     *  3.2 博客详情页
     *  3.3 登录功能
     *  3.4 检查用户的登录状态
     *  3.5 显示用户信息
     *  3.6 注销功能
     *  3.7 发布博客功能
     *  3.8 删除博客功能
 *  写在最后

--------------------

# 1 MVC模式与前期准备 #

MVC(Model View Controller)是一种软件设计的框架模式，它采用模型(Model)-视图(View)-控制器(controller)的方法把业务逻辑、数据与界面显示分离。把众多的业务逻辑聚集到一个部件里面，当然这种比较官方的解释是不能让我们足够清晰的理解什么是MVC的。用通俗的话来讲，**MVC的理念就是把数据处理、数据展示(界面)和程序/用户的交互三者分离开的一种编程模式。**  
![在这里插入图片描述][85bd3851129648f8adeef2d64992da37.png_pic_center]  
 而在本文所讲解的博客系统中，所谓的前后端分离，正是采用了这种形式。项目目录分层如下：controller层主要实现人机交互，将用户输入的指令和数据传递给model层，而model层主要包含数据表对应的实体类以及封装了对数据库的基本操作。

![在这里插入图片描述][3d8f1bbd17534267ac4bc391cde1d89a.png_pic_center]  
 首先，我们需要创建一个 maven 项目，并在pom.xml文件进行相应的配置。主要是 servlet、jdbc以及jackson。

**pom.xml**

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>groupId</groupId>
        <artifactId>BlogSystem</artifactId>
        <version>1.0-SNAPSHOT</version>
    
        <properties>
            <maven.compiler.source>8</maven.compiler.source>
            <maven.compiler.target>8</maven.compiler.target>
        </properties>
    
        <dependencies>
            
            <dependency>
                <groupId>javax.servlet</groupId>
                <artifactId>javax.servlet-api</artifactId>
                <version>3.1.0</version>
                <scope>provided</scope>
            </dependency>
            
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>5.1.47</version>
            </dependency>
            
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-databind</artifactId>
                <version>2.12.6.1</version>
            </dependency>
        </dependencies>
        
    </project>

--------------------

# 2 model 层实现 #

## 2.1 数据库的设计 ##

在博客系统中，主要包含登录功能、注销功能、发布博客、删除博客、博客展示的功能。涉及到的实体即博客和用户。数据库表设计如下，具体见代码注释：

**db.sql**

create database if not exists blog_system;
    
    use blog_system;
    
    -- 创建一个博客表
    drop table if exists blog;
    create table blog (
        blogId int primary key auto_increment, -- 文章id
        title varchar(1024), -- 文章标题
        content mediumtext, -- 文章内容
        userId int,  -- 文章作者id
        postTime datetime -- 发布时间
    );
    
    -- 创建一个用户表
    drop table if exists user;
    create table user (
        userId int primary key auto_increment,
        username varchar(128) unique,
        password varchar(128)
    );
    
    -- 给 user表 插入一些数据
    insert into user values(null, 'pwq', '7777');
    insert into user values(null, 'hxh', '7777');
    
    -- 给 blog表 插入一些数据方便测试
    insert into blog values(null, 'Java从入门到精通', '什么是Java?', 1, now());
    insert into blog values(null, 'C++到底能做什么?', 'C++是什么?', 1, now());
    insert into blog values(null, 'Python为什么那么火?', '我怎么知道?', 2, now());

## 2.2 数据库表对应的实体类实现 ##

**User类**

> 每个 user 对象，对应 user 表的一条记录。

public class User {
        
    
        private int userId = 0;
        private String username = "";
        private String password = "";
    
        public int getUserId() {
        
            return userId;
        }
    
        public void setUserId(int userId) {
        
            this.userId = userId;
        }
    
        public String getUsername() {
        
            return username;
        }
    
        public void setUsername(String username) {
        
            this.username = username;
        }
    
        public String getPassword() {
        
            return password;
        }
    
        public void setPassword(String password) {
        
            this.password = password;
        }
    }

**Blog类**

> 每个 blog 对象，对应 blog 表的一条记录。

import java.sql.Timestamp;
    import java.text.SimpleDateFormat;
    
    /**
     * @author 兴趣使然黄小黄
     * @version 1.0
     * 每个 model.Blog 对象对应 model.Blog 表中的一条记录
     */
    @SuppressWarnings({
        "all"})
    public class Blog {
        
    
        private int blogId;
        private String title;
        private String content;
        private int userId;
        private Timestamp postTime;
    
        public int getBlogId() {
        
            return blogId;
        }
    
        public void setBlogId(int blogId) {
        
            this.blogId = blogId;
        }
    
        public String getTitle() {
        
            return title;
        }
    
        public void setTitle(String title) {
        
            this.title = title;
        }
    
        public String getContent() {
        
            return content;
        }
    
        public void setContent(String content) {
        
            this.content = content;
        }
    
        public int getUserId() {
        
            return userId;
        }
    
        public void setUserId(int userId) {
        
            this.userId = userId;
        }
    
    //    public Timestamp getPostTime() {
        
    //        return postTime;
    //    }
    
        public String getPostTime(){
        
            // 这里对原先的 getPostTime() 进行修改, 将时间戳转化成格式化字符串并返回
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            return simpleDateFormat.format(postTime);
        }
    
        public void setPostTime(Timestamp postTime) {
        
            this.postTime = postTime;
        }
    }

**针对时间戳在后端进行格式化字符串处理，便于前端的展示。**  
![在这里插入图片描述][c015112e548547408a2b361b7f94851d.png]

## 2.3 JDBC 工具类实现 ##

DBUtil 封装了用于获取数据库连接和关闭数据库连接资源的方法，便于 各个实体的Dao 使用，降低代码冗余度。

**DBUtil.java**

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
    
    import javax.sql.DataSource;
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    
    /**
     * @author 兴趣使然黄小黄
     * @version 1.0
     * 用于连接数据库与关闭数据库连接的工具类
     */
    @SuppressWarnings({
        "all"})
    public class DBUtil {
        
    
        private static final String URL = "jdbc:mysql://127.0.0.1:3306/blog_system?characterEncoding=utf8&useSSL=false";
        private static final String USERNAME = "root";
        private static final String PASSWORD = "xxxxxx";
    
        private static volatile DataSource dataSource = null;
    
        private static DataSource getDataSource(){
        
            if (dataSource == null){
        
                synchronized (DBUtil.class){
        
                    if (dataSource == null){
        
                        dataSource = new MysqlDataSource();
                        ((MysqlDataSource)dataSource).setURL(URL);
                        ((MysqlDataSource)dataSource).setUser(USERNAME);
                        ((MysqlDataSource)dataSource).setPassword(PASSWORD);
                    }
                }
            }
            return dataSource;
        }
    
        // 获取数据库连接
        public static Connection getConnection() throws SQLException {
        
            return getDataSource().getConnection();
        }
    
        // 关闭数据库连接资源
        public static void close(Connection connection, PreparedStatement preparedStatement, ResultSet resultSet){
        
            if (resultSet != null){
        
                try {
        
                    resultSet.close();
                } catch (SQLException e) {
        
                    e.printStackTrace();
                }
            }
            if (preparedStatement != null){
        
                try {
        
                    preparedStatement.close();
                } catch (SQLException e) {
        
                    e.printStackTrace();
                }
            }
            if (connection != null){
        
                try {
        
                    connection.close();
                } catch (SQLException e) {
        
                    e.printStackTrace();
                }
            }
        }
    }

## 2.4 UserDao 的实现 ##

该类封装了对于 User 表的操作，包括根据用户名或者用户ID返回 user对象。主要用于登录功能与在博客详情页和列表页展示用户信息。具体代码如下：

**UserDao.java**

import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    
    /**
     * @author 兴趣使然黄小黄
     * @version 1.0
     * 封装 User表 相关操作
     */
    @SuppressWarnings({
        "all"})
    public class UserDao {
        
    
        /**
         * 登录功能实现，根据用户名来查找用户信息
         * @param username 用户名
         * @return 返回用户对象
         */
        public User selectByName(String username){
        
            Connection connection = null;
            PreparedStatement statement = null;
            ResultSet resultSet = null;
            try {
        
                connection = DBUtil.getConnection();
                String sql = "select * from user where username = ?";
                statement = connection.prepareStatement(sql);
                statement.setString(1, username);
                resultSet = statement.executeQuery();
                // user 表中 username 使用 unique 约束，所以结果要么只有一条，要么没有
                if (resultSet.next()){
        
                    User user = new User();
                    user.setUserId(resultSet.getInt("userId"));
                    user.setUsername(resultSet.getString("username"));
                    user.setPassword(resultSet.getString("password"));
                    return user;
                }
            } catch (SQLException e) {
        
                e.printStackTrace();
            } finally {
        
                DBUtil.close(connection, statement, resultSet);
            }
            return null;
        }
    
        /**
         * 主要用于博客详情页，根据用户 id 来查找用户信息， 将作者的名字显示出来
         * @param userId 用户 id
         * @return 返回用户对象
         */
        public User selectById(int userId){
        
            Connection connection = null;
            PreparedStatement statement = null;
            ResultSet resultSet = null;
            try {
        
                connection = DBUtil.getConnection();
                String sql = "select * from user where userId = ?";
                statement = connection.prepareStatement(sql);
                statement.setInt(1, userId);
                resultSet = statement.executeQuery();
                // user 表中 userId 使用 primary key 约束，所以结果要么只有一条，要么没有
                if (resultSet.next()){
        
                    User user = new User();
                    user.setUserId(resultSet.getInt("userId"));
                    user.setUsername(resultSet.getString("username"));
                    user.setPassword(resultSet.getString("password"));
                    return user;
                }
            } catch (SQLException e) {
        
                e.printStackTrace();
            } finally {
        
                DBUtil.close(connection, statement, resultSet);
            }
            return null;
        }
    }

## 2.5 BlogDao 的实现 ##

该类封装了有关 blog 表的操作。包括插入博客，返回博客列表，返回单一一条博客以及删除博客功能。具体见代码与注释：

**BlogDao.java**

import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * @author 兴趣使然黄小黄
     * @version 1.0
     * 封装 Blog表 相关操作
     */
    @SuppressWarnings({
        "all"})
    public class BlogDao {
        
    
        /**
         * 插入博客
         * @param blog
         */
        public void insert(Blog blog){
        
            Connection connection = null;
            PreparedStatement statement = null;
            try {
        
                connection = DBUtil.getConnection();
                String sql = "insert into blog values(null, ?, ?, ?, now())";
                statement = connection.prepareStatement(sql);
                statement.setString(1, blog.getTitle());
                statement.setString(2, blog.getContent());
                statement.setInt(3, blog.getUserId());
                statement.executeUpdate();
            } catch (SQLException e) {
        
                e.printStackTrace();
            } finally {
        
                DBUtil.close(connection, statement, null);
            }
        }
    
        /**
         * 能够获取博客表中所有博客的信息(用于博客列表页展示摘要)
         * @return 返回博客列表
         */
        public List<Blog> selectAll(){
        
            List<Blog> blogs = new ArrayList<>();
            Connection connection = null;
            PreparedStatement preparedStatement = null;
            ResultSet resultSet = null;
            try {
        
                connection = DBUtil.getConnection();
                String sql = "select * from blog order by postTime desc";
                preparedStatement = connection.prepareStatement(sql);
                resultSet = preparedStatement.executeQuery();
                while (resultSet.next()){
        
                    Blog blog = new Blog();
                    blog.setBlogId(resultSet.getInt("blogId"));
                    blog.setTitle(resultSet.getString("title"));
                    // 如果文章太长, 这里需要对其进行截取, 博客列表页只展示博客摘要信息
                    String content = resultSet.getString("content");
                    if (content.length() > 50){
        
                        content = content.substring(0, 50) + "...";
                    }
                    blog.setContent(resultSet.getString("content"));
                    blog.setUserId(resultSet.getInt("userId"));
                    blog.setPostTime(resultSet.getTimestamp("postTime"));
                    blogs.add(blog);
                }
            } catch (SQLException e) {
        
                e.printStackTrace();
            } finally {
        
                DBUtil.close(connection, preparedStatement, resultSet);
            }
            return blogs;
        }
    
        /**
         * 能够根据 博客id 返回一篇具体的博客
         * @param blogId 博客id
         * @return 返回具体的博客
         */
        public Blog selectOne(int blogId){
        
            Connection connection = null;
            PreparedStatement statement = null;
            ResultSet resultSet = null;
            try {
        
                connection = DBUtil.getConnection();
                String sql = "select * from blog where blogId = ?";
                statement = connection.prepareStatement(sql);
                statement.setInt(1, blogId);
                resultSet = statement.executeQuery();
                if (resultSet.next()){
        
                    // 因为是根据主键查询, 所以结果只有一个, 使用 if 即可
                    Blog blog = new Blog();
                    blog.setBlogId(resultSet.getInt("blogId"));
                    blog.setTitle(resultSet.getString("title"));
                    blog.setContent(resultSet.getString("content"));
                    blog.setUserId(resultSet.getInt("userId"));
                    blog.setPostTime(resultSet.getTimestamp("postTime"));
                    return blog;
                }
            } catch (SQLException e) {
        
                e.printStackTrace();
            } finally {
        
                DBUtil.close(connection, statement, resultSet);
            }
            return null;
        }
    
        /**
         * 根据博客 id 从博客表中删除博客
         * @param blogId 博客id
         */
        public void delete(int blogId){
        
            Connection connection = null;
            PreparedStatement statement = null;
            try {
        
                connection = DBUtil.getConnection();
                String sql = "delete from blog where blogId = ?";
                statement = connection.prepareStatement(sql);
                statement.setInt(1, blogId);
                statement.executeUpdate();
            } catch (SQLException e) {
        
                e.printStackTrace();
            } finally {
        
                DBUtil.close(connection, statement, null);
            }
        }
    }

--------------------

# 3 controller 层实现 #

无论是博客详情页、博客列表页还是登录功能诸如此类，其核心逻辑都是一样的，具体分为如下几个步骤：

1.  约定前后端交互的接口；
2.  实现服务器代码，分别为controller层的servlet实现的api，以及model层使用jdbc来操作数据库；
3.  实现客户端代码：form / ajax / a标签跳转等。

![在这里插入图片描述][9aefac13fb5d4092b1ee3668acc21004.png_pic_center]

## 3.1 博客列表页 ##

该页面用于展示数据库中的博客列表。约定请求：GET/blog，响应为 json 格式。

**核心代码如下：**

private ObjectMapper objectMapper = new ObjectMapper();
    
        /**
         * 用于获取数据库中的博客列表、博客详情
         * @param req
         * @param resp
         * @throws ServletException
         * @throws IOException
         */
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            resp.setContentType("application/json; charset=utf8");
            BlogDao blogDao = new BlogDao();
            // 尝试获取请求中的 blogId, 根据结果区分访问详情页还是博客列表
            String param = req.getParameter("blogId");
            if (param == null){
        
                // 访问博客列表
                // 从数据库中直接查询博客列表, 然后转成 JSON格式 返回即可
                List<Blog> blogs = blogDao.selectAll();
                // 把 blogs 对象转成 JSON 格式
                String respJson = objectMapper.writeValueAsString(blogs);
                resp.getWriter().write(respJson);
            } else {
        
                int blogId = Integer.parseInt(param);
                Blog blog = blogDao.selectOne(blogId);
    //            System.out.println(blog.getContent());
                String respJson = objectMapper.writeValueAsString(blog);
                resp.getWriter().write(respJson);
            }
        }

**编写客户端代码：**

在页面加载的时候，通过ajax获取数据，并构造标签，挂在dom树上，显示出来。

**核心代码如下：**

**效果图如下：**

![在这里插入图片描述][49c81eeda96642c7a47890fd755fd55e.png]

## 3.2 博客详情页 ##

与博客列表页相同，只不过这里只需要返回一个 blog 即可。我们依然约定请求：GET/blog，响应为 json 格式。

**客户端核心代码如下:**

在博客列表页，可以通过a标签将blogId传到博客详情页，服务端就可以通过get请求获取到blogId并返回响应。

![在这里插入图片描述][69ce023dbb764fa19705d3ef7eda75f2.png]

**服务端核心代码如下：**

在刚刚写好的 doGet 处理中，只需要进行简单的区分即可。

![在这里插入图片描述][e79308b89f4647ef8cddf3a9cda83c71.png]

## 3.3 登录功能 ##

登录功能就相对简单了，约定前后端接口，请求Post/login，响应为 Http/1.1 302，当用户登录成功后跳转到博客列表页。登录失败，则提示相应的信息。

需要注意的是，当用户登录成功后需要创建一个会话 session，用于保存必要的用户信息，便于其他页面使用。例如：验证获取登录状态，展示用户信息等。

**核心代码如下：**

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            req.setCharacterEncoding("utf8"); // 让 servlet 程序也使用 utf8 的方式解析请求, 避免解析中文时出错
            // 1. 获取请求中的参数
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            if (username == null || "".equals(username) || password == null || "".equals(password)){
        
                // 处理用户名和密码为空的情况
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前用户名或密码为空!");
                return;
            }
            // 2. 与数据库中的账号密码进行比对
            UserDao userDao = new UserDao();
            User user = userDao.selectByName(username);
            if (user == null || !user.getPassword().equals(password)){
        
                // 用户名不存在或者密码错误
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("用户名不存在或密码错误!");
                return;
            }
            // 3. 如果比对通过则创建会话
            HttpSession session = req.getSession(true);
            // 把刚才的用户信息存储到会话中, 这里存储 user 对象
            session.setAttribute("user", user);
            // 4. 返回一个重定向报文, 跳转到博客列表页
            resp.sendRedirect("blog_list.html");
        }

**客户端核心代码如下：**

这里为了方便起见，使用了 form 表单的形式。

![在这里插入图片描述][e78ec7eded8a44298ea2ad2ec3c23e9c.png]

**效果图如下：**

![在这里插入图片描述][9d2d563fba8b4bb8960bb65512fb2839.png]

## 3.4 检查用户的登录状态 ##

**当用户处于博客列表页和详情页的时候，需要检查用户的登录状态。如果用户未登录，则给用户弹窗提示，并返回到登录页面。** 定义前后端交互接口：

*  请求：Get/login
 *  响应：HTTP/1.1 200 OK Json格式的body

如果登录了，就将 user 对象返回给客户端；如果未登录，则构造一个 user 对象，使其 userId = 1，表明该对象无效。方便客户端区分是否登录。

**核心代码：**

@Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            resp.setContentType("application/json; charset=utf8");
            HttpSession session = req.getSession(false);
            if (session == null) {
        
                // 检测会话是否存在, 如果为 null 则未登录
                User user = new User();
                resp.getWriter().write(objectMapper.writeValueAsString(user));
                return;
            }
            User user = (User) session.getAttribute("user");
            if (user == null) {
        
                // 如果有会话但是 user 为null, 也视为未登录
                user = new User();
                resp.getWriter().write(objectMapper.writeValueAsString(user));
                return;
            }
            // 此时已经是登录的状态, 但是需要注意, 不要把密码返回给前端
            user.setPassword("");
            resp.getWriter().write(objectMapper.writeValueAsString(user));
        }

**客户端核心代码：**

// 通过 GET / login 这个接口来获取当下的登录状态
    function getUserInfo(pageName){
        
        $.ajax({
        
            type: 'get',
            url: 'login',
            success: function(body){
        
                // 判断此处的 body 是不是一个有效的 user 对象(userId = 0无效)
                if (body.userId && body.userId > 0) {
        
                    // 登录成功
                    console.log("当前用户登录成功! 用户名：" + body.username);
                    if (pageName == 'blog_list.html') {
        
                        // 更新用户名
                        changeUsername(body.username);
                    }
                } else {
        
                    // 登录失败 提示信息 并跳转到 login.html
                    alert("当前未登录, 请登录后重试！");
                    location.assign('blog_login.html');
                }
            },
            error: function(){
        
                alert("当前未登录, 请登录后重试！");
                location.assign('blog_login.html');
            }
        });
    }

**效果展示：**  
![在这里插入图片描述][41903511ff89414c8062bfaa2552bd1e.png]

## 3.5 显示用户信息 ##

对于博客列表页，我们希望展示的是当前登录用户的信息；对于博客详情页，我们希望展示的是文章的作者信息。约定前后端交互接口，请求：get/authorInfo，响应依然为json格式。

**因此，我们对登录状态检查的函数进行改动，添加一个参数，用于区分当前页是博客列表页还是博客详情页。**

*  对于博客列表页，我们正常展示用户信息即可；
 *  对于博客详情页，我们只需要判断当前用户和作者是否为同一人，如果不是，则更改当前页用户信息为作者信息即可。

**核心代码:**

import com.fasterxml.jackson.databind.ObjectMapper;
    import model.Blog;
    import model.BlogDao;
    import model.User;
    import model.UserDao;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /**
     * @author 兴趣使然黄小黄
     * @version 1.0
     * @date 2023/3/14 15:57
     */
    @WebServlet("/authorInfo")
    @SuppressWarnings({
        "all"})
    public class AuthorServlet extends HttpServlet {
        
    
        ObjectMapper objectMapper = new ObjectMapper();
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            resp.setContentType("application/json; charset=utf8");
            // 该方法用于处理博客详情页的用户信息
            String param = req.getParameter("blogId"); // 先获取文章的的 blogId
            if (param == null || "".equals(param)) {
        
                // 缺少参数
                resp.getWriter().write("{\"ok\": false, \"reason\": \"参数缺失\"}");
                return;
            }
            // 先在数据库中查找对应的 blog 对象, 在根据对应的 blog对象 的 userId 查找 user
            BlogDao blogDao = new BlogDao();
            Blog blog = blogDao.selectOne(Integer.parseInt(param));
            if (blog == null) {
        
                // 不存在对应的博文
                resp.getWriter().write("{\"ok\": false, \"reason\": \"要查询的博客不存在\"}");
                return;
            }
            UserDao userDao = new UserDao();
            User author = userDao.selectById(blog.getUserId());
            if (author == null) {
        
                // 不存在对应的作者
                resp.getWriter().write("{\"ok\": false, \"reason\": \"要查询的作者不存在\"}");
                return;
            }
            // 将用户对象以 json 的形式返回响应
            // 避免将密码传到前端
            author.setPassword("");
            resp.getWriter().write(objectMapper.writeValueAsString(author));
        }
    }

**客户端核心代码：**

// 从服务器获取当前作者的用户信息, 并显示在页面上
        function getAuthorInfo(user){
        
            $.ajax({
        
                type: 'get',
                url: 'authorInfo' + location.search,
                success: function(body){
        
                    // 此处的 body 就是服务器返回的 user 对象
                    if (body.username) {
        
                        // 如果响应中的 username 存在, 则直接更新到页面上
                        changeUsername(body.username);
                        if (user.username == body.username) {
        
                            // 如果登录的用户和发布文章的用户为同一个人
                            // 在详情页的导航栏添加一个删除按钮
                            let navDiv = document.querySelector(".nav");
                            let a = document.createElement("a");
                            a.innerHTML = "删除";
                            a.href = "blogDelete" + location.search;
                            navDiv.appendChild(a);
                        }
                    } else {
        
                        console.log("获取作者信息失败! " + body.reason);
                    }
                }
            });
        }

## 3.6 注销功能 ##

注销功能非常简单，定义前后端交互接口，请求:get/logout，响应302跳转到登录页面。请求只需要在用户登录的时候添加一个 a 标签到导航栏即可。

**怎样才算登录呢？**

1.  session 会话存在；
2.  session 中包含 user 属性。

因此，实现注销，只需要将 user 属性从 session 中删除即可。

**注销逻辑核心代码如下：**

@WebServlet("/logout")
    @SuppressWarnings({
        "all"})
    public class LogoutServlet extends HttpServlet {
        
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            HttpSession session = req.getSession(false);
            if (session == null) {
        
                // 会话不存在, 还未登录就不需要注销
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("很抱歉, 您还未登录, 不需要注销~");
                return;
            }
            // 实现注销
            session.removeAttribute("user");
            resp.sendRedirect("blog_login.html");
        }
    }

## 3.7 发布博客功能 ##

同样，先约定前后端交互接口。请求：POST/blog，以form表单的形式将title和content正文传给服务器。响应：HTTP/1.1 302 发布成功后跳转到博客详情页。

**客户端核心代码：**  
![在这里插入图片描述][65f20aaf2c2243539fade701a958aec3.png]  
同时需要在 editor.md 的配置部分，加上如下的代码：  
![在这里插入图片描述][d741a8e8cfae497487edc3ca34f98723.png]

**服务端核心代码如下：**

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            HttpSession session = req.getSession(false);
            if (session == null) {
        
                // 未登录不能发布博客
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前未登录!");
                return;
            }
            User user = (User) session.getAttribute("user");
            if (user == null) {
        
                // 未登录不能发布博客
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前未登录!");
                return;
            }
            // utf8 的编码形式解析请求
            req.setCharacterEncoding("utf8");
            // 发布博客
            Blog blog = new Blog();
            String title = req.getParameter("title"); // 博客标题
            String content = req.getParameter("content");// 博客正文
            // 参数不全的情况
            if (title == null || "".equals(title) || content == null || "".equals(content)) {
        
                // 反馈客户端参数不全
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("参数不全, 无法发布博客");
                return;
            }
            blog.setTitle(title);
            blog.setContent(content);
            blog.setUserId(((User) session.getAttribute("user")).getUserId()); // 作者信息
            new BlogDao().insert(blog); // 发布
            // 跳转
            resp.sendRedirect("blog_list.html");
        }

**效果如下：**  
![在这里插入图片描述][d059c234475442a68f2d07f675c93af0.png]

## 3.8 删除博客功能 ##

需要明确的是，只有作者本人才能删除博客，因此，在进入博客详情页的时候，进行判断。如果是作者本人，则添加删除按钮：  
![在这里插入图片描述][5076ff3134144dbc815344e4c57a8e75.png]  
**服务端删除博客的逻辑如下：**

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            // 1. 检验用户是否登录
            HttpSession session = req.getSession(false);
            if (session == null) {
        
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前未登录");
                return;
            }
            User user = (User) session.getAttribute("user");
            if (user == null) {
        
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前未登录");
                return;
            }
            // 2. 获取要删除的博客的 blogId
            String blogId = req.getParameter("blogId");
            if (blogId == null || "".equals(blogId)) {
        
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("参数不正确！");
                return;
            }
            // 3. 获取要删除的博客信息
            BlogDao blogDao = new BlogDao();
            Blog blog = blogDao.selectOne(Integer.parseInt(blogId));
            if (blog == null) {
        
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前博客不存在");
                return;
            }
            // 4. 再次校验用户是否为博客的作者
            if (blog.getUserId() != user.getUserId()) {
        
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("不是您的博客, 无法删除!");
                return;
            }
            // 5. 删除并跳转
            blogDao.delete(Integer.parseInt(blogId));
            resp.sendRedirect("blog_list.html");
        }

--------------------

# 写在最后 #

本文完整代码已上传 gitee，如有需要请自取：[https://gitee.com/hxh2001/blog-system][https_gitee.com_hxh2001_blog-system]  
 以上便是本文的全部内容啦！创作不易，如果你有任何问题，欢迎私信，感谢您的支持！

![在这里插入图片描述][7e0ff0501697426a84cd0a1f4eecfdc1.gif_pic_center]

[JavaEE]: https://blog.csdn.net/m0_60353039/article/details/129413199?spm=1001.2014.3001.5501
[aba22563feac4684afbd277b84b831ee.png_pic_center]: https://img-blog.csdnimg.cn/aba22563feac4684afbd277b84b831ee.png#pic_center
[85bd3851129648f8adeef2d64992da37.png_pic_center]: https://img-blog.csdnimg.cn/85bd3851129648f8adeef2d64992da37.png#pic_center
[3d8f1bbd17534267ac4bc391cde1d89a.png_pic_center]: https://img-blog.csdnimg.cn/3d8f1bbd17534267ac4bc391cde1d89a.png#pic_center
[c015112e548547408a2b361b7f94851d.png]: https://img-blog.csdnimg.cn/c015112e548547408a2b361b7f94851d.png
[9aefac13fb5d4092b1ee3668acc21004.png_pic_center]: https://img-blog.csdnimg.cn/9aefac13fb5d4092b1ee3668acc21004.png#pic_center
[49c81eeda96642c7a47890fd755fd55e.png]: https://img-blog.csdnimg.cn/49c81eeda96642c7a47890fd755fd55e.png
[69ce023dbb764fa19705d3ef7eda75f2.png]: https://img-blog.csdnimg.cn/69ce023dbb764fa19705d3ef7eda75f2.png
[e79308b89f4647ef8cddf3a9cda83c71.png]: https://img-blog.csdnimg.cn/e79308b89f4647ef8cddf3a9cda83c71.png
[e78ec7eded8a44298ea2ad2ec3c23e9c.png]: https://img-blog.csdnimg.cn/e78ec7eded8a44298ea2ad2ec3c23e9c.png
[9d2d563fba8b4bb8960bb65512fb2839.png]: https://img-blog.csdnimg.cn/9d2d563fba8b4bb8960bb65512fb2839.png
[41903511ff89414c8062bfaa2552bd1e.png]: https://img-blog.csdnimg.cn/41903511ff89414c8062bfaa2552bd1e.png
[65f20aaf2c2243539fade701a958aec3.png]: https://img-blog.csdnimg.cn/65f20aaf2c2243539fade701a958aec3.png
[d741a8e8cfae497487edc3ca34f98723.png]: https://img-blog.csdnimg.cn/d741a8e8cfae497487edc3ca34f98723.png
[d059c234475442a68f2d07f675c93af0.png]: https://img-blog.csdnimg.cn/d059c234475442a68f2d07f675c93af0.png
[5076ff3134144dbc815344e4c57a8e75.png]: https://img-blog.csdnimg.cn/5076ff3134144dbc815344e4c57a8e75.png
[https_gitee.com_hxh2001_blog-system]: https://gitee.com/hxh2001/blog-system
[7e0ff0501697426a84cd0a1f4eecfdc1.gif_pic_center]: https://img-blog.csdnimg.cn/7e0ff0501697426a84cd0a1f4eecfdc1.gif#pic_center