我的博客系统[Servlet]

淩亂°似流年 2023-09-25 12:47 53阅读 0赞

**目录**

后端程序

1. 需求分析

2. 概要设计

3. 编写数据库操作的代码

3.1.使用maven,引入依赖

3.2 封装 数据库的 DataSource

3.2.1 使用单例模式,把数据库的 DataSource 和 建立连接 还有 断开连接也给封装进去

3.2.2 创建实体类

3.2.3 针对这两个实体类涉及到的 增删改查 进行进一步的封装,也就是把 jdbc 代码给封装一下

4. 进行前后端交互

4.1 实现博客列表页(blog\_list.html)

4.2 实现博客详情页(blog\_datail.html)

4.3 实现登录页面(login.html)

4.4 实现在博客列表页/博客详情页/博客编辑页中,必须强制登录才可以访问

4.5 实现在博客列表页和博客详细页中显示用户信息

4.6 实现注销(退出登录状态)

4.7 实现发布博客(blog\_edit.html)

4.8 实现删除博客

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

[gitee代码链接![icon-default.png_t_M85B][]https://gitee.com/lei-xiaoheng/java-ee/tree/master/blog\_system/src/main][gitee_icon-default.png_t_M85B_https_gitee.com_lei-xiaoheng_java-ee_tree_master_blog_system_src_main]

## 后端程序 ##

## 1. 需求分析 ##

**软件开发基本流程**

> 1.  可行性分析
> 2.  需求分析
> 3.  概要设计
> 4.  详细设计
> 5.  编码
> 6.  测试
> 7.  发布

但在实际上也不需要每个步骤都要详细的设置,这里我们进行\[博客系统\]设计就先主要进行需求分析

> **需求分析:也就是明确程序要解决什么问题,做成啥样子.实现什么功能**

下面进行简单需求分析

**1. 实现博客列表的展示功能**

![2f3957f6c02c4c049ebab42f29262519.png][]

**2. 实现博客详情的展示功能**

![b8cd6fd59e0648c6b17ac9bd60f27ac8.png][]

**3. 登录功能 (暂时不实现注册功能)**

![4ff6bc40e10e4d4c9646683513c085ae.png][]

**4. 限制用户权限 (强制要求用户要登录)**

**5. 显示用户的信息**

![22b2b427027a4aaa8aafaae7be6bbdf6.png][]

**6. 实现注销 (退出登录)**

![6b18a3f397d54ce582bda5f5b9e36170.png][]

**7. 发布博客**

![2cdabbbdd828460fbaad4d1c53d8dc61.png][]

**8. 删除博客**

总结起来8个功能,而这除了这8个功能外,还可以加一些别的.这里就不再赘述了

> **1. 实现博客列表的展示功能**
> 
> **2. 实现博客详情的展示功能**
> 
> **3. 登录功能 (暂时不实现注册功能)**
> 
> **4. 限制用户权限 (强制要求用户要登录)**
> 
> **5. 显示用户的信息**
> 
> **6. 实现注销 (退出登录)**
> 
> **7. 发布博客**
> 
> **8. 删除博客**

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

## 2. 概要设计 ##

下面进行概要设计中的 **\[数据库设计\]**

> **数据库设计:也就是要想清楚,有几个库,几个表,每个表什么样子的**

当前这个 博客系统 的业务比较简单,只需要两个表

![a3240eda7f664fd99bd7ceb5315f6339.png][]

**下面进行创建数据库等一系列的操作**

create database if not exists java_blog_system;
    
    use java_blog_system;
    
    drop table if exists blog;
    create table blog (
        blogId int primary key auto_increment,
        title varchar(256),
        content text,
        postTime datetime,
        userId int
    );
    
    drop table if exists user;
    create table user (
        userId int primary key auto_increment,
        username varchar(50),
        password varchar(50)
    );
    
    insert into blog values (null, "这是第一篇博客", "这是认真写博客的第一天", "2022-11-25 20:00:00", 1);
    insert into blog values (null, "这是第二篇博客", "这是认真写博客的第二天", "2022-11-26 20:00:00", 1);
    
    insert into user values (null, "zhangsan", "123");
    insert into user values (null, "lisi", "123");

**这个是两个表中的测试数据**

![1ca6f2a15840487f9383efc59df49fba.png][]

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

## 3. 编写数据库操作的代码 ##

### **3.1.使用maven,引入依赖** ###

![8cf224d203ba41e2a1f21f657013fc1e.png][]

### **3.2 封装 数据库的 DataSource** ###

#### **3.2.1 使用单例模式,把数据库的 DataSource 和 建立连接 还有 断开连接也给封装进去** ####

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;
    
    public class DBUtil {
        private static volatile DataSource dataSource = null;
    
        //创建数据源
        public static DataSource getDataSource() {
            if(dataSource == null) {
                synchronized (DBUtil.class) {
                    if(dataSource == null) {
                        dataSource = new MysqlDataSource();
                        ((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/java_blog_system?characterEncoding=utf8&&useSSL=false");
                        ((MysqlDataSource)dataSource).setUser("root");
                        ((MysqlDataSource)dataSource).setPassword("111111");
                    }
                }
            }
            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();
                }
            }
        }
    }

#### 3.2.2 创建实体类 ####

一个实体类的对象就对应表里的一条记录

**表结构怎么写, 实体类就怎么写**

**创建两张表对应的实体类 User Blog**

import java.sql.Timestamp;
    
    public class Blog {
        private int blogId;
        private String title;//博客标题
        private String content;//博客正文
        // mysql 里的 datetime 和 timestamp 类型都是在 java 中使用 Timestamp 表示的
        private Timestamp postTime;
        private int userId;
    
        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 Timestamp getPostTime() {
            return postTime;
        }
    
        public void setPostTime(Timestamp postTime) {
            this.postTime = postTime;
        }
    
        public int getUserId() {
            return userId;
        }
    
        public void setUserId(int userId) {
            this.userId = userId;
        }
    }

public class User {
        private int userId;
        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;
        }
    }

#### 3.2.3 针对这两个实体类涉及到的 增删改查 进行进一步的封装,也就是把 jdbc 代码给封装一下 ####

![e2bf1126a07b4c52b929d0058c78e1be.png][]

import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.ArrayList;
    import java.util.List;
    
    //封装针对博客表的相关操作
    public class BlogDao {
        //1. 插入一个博客到数据库中 -- 发布博客
        public void insert(Blog blog) {
            Connection connection = null;
            PreparedStatement statement = null;
            try {
                //1. 和数据库建立连接
                connection = DBUtil.getConnection();
                //2. 构造SQL
                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());
                //3. 执行 SQL
                int ret = statement.executeUpdate();
                if(ret != 1) {
                    System.out.println("博客插入失败!");
                }else {
                    System.out.println("博客插入成功!");
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                //4. 释放对应资源
                DBUtil.close(connection,statement,null);
            }
        }
    
        //2. 根据博客 id 来查询指定博客 -- 博客详情页
        public Blog selectOne(int blogId) {
            Connection connection = null;
            PreparedStatement statement = null;
            ResultSet resultSet = null;
            try {
                //1. 和数据库建立连接
                connection = DBUtil.getConnection();
                //2. 构造 SQL
                String sql = "select * from blog where blogId = ?";
                statement = connection.prepareStatement(sql);
                statement.setInt(1,blogId);
                //3. 执行 SQL
                resultSet = statement.executeQuery();
                //4. 遍历结果集合
                if(resultSet.next()) {
                    Blog blog = new Blog();
                    blog.setBlogId(resultSet.getInt("blogId"));
                    blog.setTitle(resultSet.getString("title"));
                    blog.setContent(resultSet.getString("content"));
                    blog.setPostTime(resultSet.getTimestamp("postTime"));
                    blog.setUserId(resultSet.getInt("userId"));
                    return blog;
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                DBUtil.close(connection,statement,resultSet);
            }
            return null;
        }
    
        //3. 直接查询博客列表 -- 博客列表页
        public List<Blog> selectAll() {
            List<Blog> blogs = new ArrayList<>();
            Connection connection = null;
            PreparedStatement statement = null;
            ResultSet resultSet = null;
            try {
                //1. 和数据库建立连接
                connection = DBUtil.getConnection();
                //2. 构造 SQL
                String sql = "select * from blog";
                statement = connection.prepareStatement(sql);
                //3. 执行 SQL
                resultSet = statement.executeQuery();
                //4. 遍历结果集合
                while(resultSet.next()) {
                    Blog blog = new Blog();
                    blog.setBlogId(resultSet.getInt("blogId"));
                    blog.setTitle(resultSet.getString("title"));
                    blog.setContent(resultSet.getString("content"));
                    blog.setPostTime(resultSet.getTimestamp("postTime"));
                    blog.setUserId(resultSet.getInt("userId"));
                    blogs.add(blog);
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                DBUtil.close(connection,statement,resultSet);
            }
            return blogs;
        }
    
        //4. 删除指定博客 -- 删除博客
        public void delete(int blogId) {
            Connection connection = null;
            PreparedStatement statement = null;
            try {
                //1. 和数据库建立连接
                connection = DBUtil.getConnection();
                //2. 构造 SQL
                String sql = "delete from blog where blogId = ?";
                statement = connection.prepareStatement(sql);
                statement.setInt(1,blogId);
                //3. 执行 SQL
                int ret = statement.executeUpdate();
                if(ret != 1) {
                    System.out.println("博客删除失败!");
                }else {
                    System.out.println("博客删除成功!");
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                DBUtil.close(connection,statement,null);
            }
        }
    }

import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    
    //封装了针对用户表的操作
    public class UserDao {
        //根据用户名来查询用户的详情 -- 登陆
        // 隐含约束: 用户名需要唯一
        public User selectByName(String username) {
            Connection connection = null;
            PreparedStatement statement = null;
            ResultSet resultSet = null;
            try {
                //1. 和数据库建立连接
                connection = DBUtil.getConnection();
                //2. 构造 SQL
                String sql = "select * from user where username = ?";
                statement = connection.prepareStatement(sql);
                statement.setString(1,username);
                //3. 执行 SQL
                resultSet = statement.executeQuery();
                //4. 遍历结果集合
                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 来查询用户详情 -- 在获取用户信息的时候,需要用到
        public User selectById(int userId) {
            Connection connection = null;
            PreparedStatement statement = null;
            ResultSet resultSet = null;
            try {
                //1. 和数据库建立连接
                connection = DBUtil.getConnection();
                //2. 构造 SQL
                String sql = "select * from where userId = ?";
                statement = connection.prepareStatement(sql);
                statement.setInt(1,userId);
                //3. 执行 SQL
                resultSet = statement.executeQuery();
                //4. 遍历结果集合
                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;
        }
    }

## 4. 进行前后端交互 ##

> **让页面发起 http 请求,服务器返回 http 响应**
> 
> **需要约定好请求是啥样的,响应是啥样的**

### 4.1 实现博客列表页(blog\_list.html) ###

**之前这里是固定的数据,现在想要让页面从数据库这里来拿当前的博客列表**

![7c31b64349c246588a5845a8b52dac10.png][]

下面将前面写的前端页面文件拷贝到 idea 这里的 webapp下

![bbbde9ffea4c4a378fab67e9c9705ed9.png][]

> **在博客列表页中,需要做一个重要的事情**
> 
> **页面在加载的时候,通过 ajax 发起 HTTP 请求, 从服务器获取到博客列表数据**
> 
> **考虑好要发个啥样的请求, 返回啥样的响应 ====> 约定前后端交互接口**

![6c948f4083a5434c94928cdd4647e7f5.png][]

**(1) 先写后端的代码 BlogServlet**

**(2) 下面修改一下,前端blog\_list.html 的代码**

**注意 通过ajax 从服务器获取数据后,别忘了进行函数调用**

<!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/blog.css">
    </head>
    <body>
        <div class="nav">
            <img src="img/暂无消息.png" alt="">
            <span class="title">我的博客系统</span>
            
            <div class="spacer"></div>
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="#">注销</a>
        </div>
    
        
        <div class="container">
            
            <div class="container-left">
                <div class="card">
                    
                    <img src="./img/头像.png" alt="">
                    <h3>XXX</h3>
                    <a href="https://gitee.com/lei-xiaoheng">gitee地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                </div>
            </div>
            
            <div class="container-right">
                
                
    
            </div>
        </div>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            //发送 ajax 从服务器获取数据
            function getBlogs() {
                $.ajax({
                    type: 'get',
                    url: 'blog',
                    success: function(body) {
                        //获取成功, 则 body 就是一个 js 对象数组,每个元素就是一个博客
                        let container = document.querySelector('.container-right');
                        for(let blog of body) {
                            // 构造 blogDiv
                            let blogDiv = document.createElement('div');
                            blogDiv.className = 'blog';
    
                            // 构造博客标题
                            let titleDiv = document.createElement('div');
                            titleDiv.className = 'title';
                            titleDiv.innerHTML = blog.title;
    
                            // 构造博客日期
                            let dateDiv = document.createElement('div');
                            dateDiv.className = 'date';
                            dateDiv.innerHTML = blog.postTime
    
                            // 构造博客的摘要
                            let descDiv = document.createElement('div');
                            descDiv.className = 'desc';
                            descDiv.innerHTML = blog.content;
    
                            // 构造查看全文的按钮
                            let a = document.createElement('a');
                            //加上一个 query string, blogId 用这个区分,要跳到哪个博客的页面
                            a.href = 'blog_datail.html?blogId=' + blog.blogId;
                            a.innerHTML = '查看全文 >>'
    
                            //拼装最终结构
                            blogDiv.appendChild(titleDiv);
                            blogDiv.appendChild(dateDiv);
                            blogDiv.appendChild(descDiv);
                            blogDiv.appendChild(a);
                            container.appendChild(blogDiv);
                        }
                    }
                });
            }
            //要进行函数调用
            getBlogs();
        </script>
    </body>
    </html>

**(3) 需要注意前面的postTime返回的响应是一个时间戳(这里可以通过抓包进一步分析),而我们需要的是一个格式化的时间**

![7b56ebfaedcd4999a9e61d1fa6e23370.png][]

**Blog.java 的代码**

import java.sql.Timestamp;
    import java.text.SimpleDateFormat;
    
    /**
     * Created with IntelliJ IDEA.
     * Description:
     * User: 28463
     * Date: 2022—11—25
     * Time: 15:17
     */
    public class Blog {
        private int blogId;
        private String title;//博客标题
        private String content;//博客正文
        // mysql 里的 datetime 和 timestamp 类型都是在 java 中使用 Timestamp 表示的
        private Timestamp postTime;
        private int userId;
    
        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 String getPostTime() {
            //修改一下这个方法,让它返回一个格式化的时间日期
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            return simpleDateFormat.format(postTime);
        }
    
        public void setPostTime(Timestamp postTime) {
            this.postTime = postTime;
        }
    
        public int getUserId() {
            return userId;
        }
    
        public void setUserId(int userId) {
            this.userId = userId;
        }
    }

**(4) 正常情况下博客列表展示,最上面的也就是刚发布的,所以在数据库查询时要根据时间进行降序排列,这就要修改 BlogDao.java 中的代码了**

![82f0b3f461474c47ba7b979748071a58.png][]

**(5) 还需要考虑的一个是, 博客如果内容很多,就会导致博客列表展示这个页面,放不下几个博客,所以最好的是当这个博客的内容超过多少字时,只显示前面,比如说只显示100字**("摘要"的信息,也就是进行内容的截断)

比如说这里新插入一条博客,可以看到这个博客列表的展示页面这里内容显示太多了,不合理

![4ea63afdfc0c46a28d9368a6b4a8c34c.png][]

![cfdb8ca88d5243c7b00ce9b757c8185a.png][]

**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;
    
    //封装针对博客表的相关操作
    public class BlogDao {
        //1. 插入一个博客到数据库中 -- 发布博客
        public void insert(Blog blog) {
            Connection connection = null;
            PreparedStatement statement = null;
            try {
                //1. 和数据库建立连接
                connection = DBUtil.getConnection();
                //2. 构造SQL
                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());
                //3. 执行 SQL
                int ret = statement.executeUpdate();
                if(ret != 1) {
                    System.out.println("博客插入失败!");
                }else {
                    System.out.println("博客插入成功!");
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                //4. 释放对应资源
                DBUtil.close(connection,statement,null);
            }
        }
    
        //2. 根据博客 id 来查询指定博客 -- 博客详情页
        public Blog selectOne(int blogId) {
            Connection connection = null;
            PreparedStatement statement = null;
            ResultSet resultSet = null;
            try {
                //1. 和数据库建立连接
                connection = DBUtil.getConnection();
                //2. 构造 SQL
                String sql = "select * from blog where blogId = ?";
                statement = connection.prepareStatement(sql);
                statement.setInt(1,blogId);
                //3. 执行 SQL
                resultSet = statement.executeQuery();
                //4. 遍历结果集合
                if(resultSet.next()) {
                    Blog blog = new Blog();
                    blog.setBlogId(resultSet.getInt("blogId"));
                    blog.setTitle(resultSet.getString("title"));
                    blog.setContent(resultSet.getString("content"));
                    blog.setPostTime(resultSet.getTimestamp("postTime"));
                    blog.setUserId(resultSet.getInt("userId"));
                    return blog;
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                DBUtil.close(connection,statement,resultSet);
            }
            return null;
        }
    
        //3. 直接查询博客列表 -- 博客列表页
        public List<Blog> selectAll() {
            List<Blog> blogs = new ArrayList<>();
            Connection connection = null;
            PreparedStatement statement = null;
            ResultSet resultSet = null;
            try {
                //1. 和数据库建立连接
                connection = DBUtil.getConnection();
                //2. 构造 SQL
                String sql = "select * from blog order by postTime desc";
                statement = connection.prepareStatement(sql);
                //3. 执行 SQL
                resultSet = statement.executeQuery();
                //4. 遍历结果集合
                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() > 100) {
                        content = content.substring(0,100) + "...";
                    }
                    blog.setContent(content);
    
                    blog.setPostTime(resultSet.getTimestamp("postTime"));
                    blog.setUserId(resultSet.getInt("userId"));
                    blogs.add(blog);
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                DBUtil.close(connection,statement,resultSet);
            }
            return blogs;
        }
    
        //4. 删除指定博客 -- 删除博客
        public void delete(int blogId) {
            Connection connection = null;
            PreparedStatement statement = null;
            try {
                //1. 和数据库建立连接
                connection = DBUtil.getConnection();
                //2. 构造 SQL
                String sql = "delete from blog where blogId = ?";
                statement = connection.prepareStatement(sql);
                statement.setInt(1,blogId);
                //3. 执行 SQL
                int ret = statement.executeUpdate();
                if(ret != 1) {
                    System.out.println("博客删除失败!");
                }else {
                    System.out.println("博客删除成功!");
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                DBUtil.close(connection,statement,null);
            }
        }
    }

**运行代码后**

![f18edc416b0f4ba6b06c1705592876f3.png][]

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

### 4.2 实现博客详情页(blog\_datail.html) ###

**在博客列表页,点击查看全文,跳转到详情页,并且看到详情页里博客的正文**

处理流程:

![1f3d053f0c844dbf8df5cea0f98fd90d.png][]

> 流程分析完毕后,就要做这样三件事
> 
> (1) 约定前后端交互接口
> 
> (2) 实现服务器代码
> 
> (3) 实现客户端代码

**(1) 约定前后端交互接口**

> **在博客详情页再次发起 ajax 请求, 获取到具体博客的内容**
> 
> ![4f1357c47e0b48759958751f669e2d4b.png][]
> 
> 注意: 在博客列表页中,已经使用 BlogServlet.doGet 方法了
> 
> 而在**博客详情页中也想使用,那就要做出区分,可以使用 query string 来区分**
> 
> **如果请求中带有 query string, 有 blogId这个参数,就认为是博客详情页的请求**
> 
> **如果请求中不带有 query string,就认为是博客列表页的请求**

**(2) 实现服务器代码**

![4ee5c02c330d4dcab24e734690d04952.png][]

**BlogServlet,java 的代码**

**(3) 实现客户端代码**

> **让页面发起 ajax 请求,获取到博客数据**

**运行程序**

![d5c7a26f6255410f9f2f7555e4df6b27.png][]

**(4) 现在还有个问题是,博客的正文希望是 markdown 格式**

(因为博客编辑页,就是一个 markdown 的编辑器)

所以提交的数据就是 markdown,数据库里存的也是 markdown,所以**最终也要显示一个 markdown格式的内容.**

但是现在这个只是以文本的格式来显示内容,这个不太符合我们的要求

**现在插入一条 markdown结构的内容,可以看到还是以纯文本内容显示的**

![67ab49ecb6664f819611912c2ca3880b.png][]

>  **所以,可以使用 editor.md 这个库,来完成渲染**

**下面再次运行代码,可以看到刚刚插入的那个纯文本格式的转为了, markdown格式了**![af2b9834b3664bf69e882a70c345f67c.png][]

**(5) 也可以把这个显示内容的背景,设置成半透明的效果**

![1c2bfa0d62b24f97a964b0900c801417.png][]

**可以在这里加上这个属性**

![1294a5d4958348ac9975cf990b8a8744.png][]

![5b6ffbf2497646e98500699c56d75539.png][]

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

### 4.3 实现登录页面(login.html) ###

**处理流程:**

> **用户访问 login.html , 输入用户名和密码. 点击登录按钮**
> 
> **发起一个请求,把用户名和密码提交给服务器**
> 
> **服务器对身份进行验证,验证成功,就让页面跳转到 博客列表页**

**(1) 约定前后端交互接口**

![d426eb3b8eeb40028276cbc1ff2e31a6.png][]

**(2) 实现客户端前端代码**

> **前面都是用 ajax构造请求,这里试一下用form表单构造请求**
> 
> **ajax 是各种http方法都可以构造,并且默认发起的请求不会进行跳转(也可以手动设置跳转)**
> 
> **而 form 表单 只能构造 Get 和 POST请求,并且一定会触发页面跳转**
> 
> **我们这里是登陆成功后,跳转到 博客登录页,所以 使用 from表单 没啥问题**

![52f8dc590b0744f5845808d171e38048.png][]

**(3) 实现服务器后端代码**

![00e9a68e85624bb79d0fc5162a5282dc.png][]

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

### 4.4 实现在博客列表页/博客详情页/博客编辑页中,必须强制登录才可以访问 ###

**业务逻辑:**

> **博客列表页/博客详情页/博客编辑页,都在页面加载后,发起一个 ajax**
> 
> **这个 ajax 就从服务器获取一下当前的登录状态**
> 
> **如果当前是从未登录的情况,就直接重定向到 登录页**
> 
> **如果是已经登录,则不做任何处理**

**(1) 前后端交互接口**

![d4265029ff794016b44f5e8bcaf158d4.png][]

**(2) 前端代码**

> **判定状态码,是 200 还是 403 ,如果是 200 没啥影响,如果是403,强行跳转**

**因为是要在三个页面:博客列表页/博客详情页/博客编辑页 都要判定,所以可以单独写一个函数,然后在这三个页面中引用**

![ce015ef34b334da29647d21a9bc34b0e.png][]

![ea6fe98b584f47299f8a5e89c9114236.png][]

// 创建新的函数
    function getLoginStatus() {
        $.ajax({
            type: 'get',
            url: 'login',
            success: function(body) {
                // 得到 200,此处不做任何工作
                console.log("当前已经登录过!");
            },
            error: function() {
                // 得到 403[没有访问权限],(非 2 开头的状态码都会触发这个 error 分支)
                // 让页面强制跳转到 login.html
                console.log("当前还未登录!");
                location.assign('login.html');
            }
        });
    }

**(3) 后端代码**

> **只是获取一下会话,看能不能拿到会话以及里面的 user 对象,能拿到说明已经登录过了,返回200即可**

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 javax.servlet.http.HttpSession;
    import java.io.IOException;
    
    @WebServlet("/login")
    public class LoginServlet extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //1. 先去从请求中获取到用户名和密码
            req.setCharacterEncoding("utf-8");
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            if(username == null || username.equals("") || password == null || password.equals("")) {
                // 用户名密码为空,直接返回登录失败
                resp.setContentType("type/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. 构造 302 响应报文(重定向)
            resp.sendRedirect("blog_list.html");
        }
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            // 使用这个方法来 针对当前登录状态进行判断
            //1. 需要获取一下当前的会话
            HttpSession session = req.getSession(false);
            if (session == null) {
                // 没有会话,当前是未登录状态
                resp.setStatus(403);
                return;
            }
            User user = (User) session.getAttribute("user");
            if(user == null) {
                // 虽然有会话,但是里面没有 user 对象,也认为是未登录状态
                resp.setStatus(403);
                return;
            }
            
            //2. 返回 200 这样的响应即可,这行代码不写也可,默认状态码200
            resp.setStatus(200);
        }
    }

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

### 4.5 实现在博客列表页和博客详细页中显示用户信息 ###

![a2da443f537e4c79953394a4b9efaf76.png][]

**业务逻辑**

> **在博客列表页,加载页面的同时,从服务器获取到当前登陆的用户信息,把这个信息显示到页面上**
> 
> **在博客详情页中,加载页面的同时,从服务器获取到博客的作者用户信息,把这个信息显示到页面上**

**(1) 前后端交互接口**

![9957ea1a4aca4bac98bfe818bc0460cb.png][]

**(2) 前端代码**

![af3382c9bbfd46389a519d9a21e7a291.png][]

![1ab91f3af7754d44a7344e46a7715e06.png][]

<!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/blog.css">
    </head>
    <body>
        <div class="nav">
            <img src="img/暂无消息.png" alt="">
            <span class="title">我的博客系统</span>
            
            <div class="spacer"></div>
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="login.html">登录</a>
            <a href="#">注销</a>
        </div>
    
        
        <div class="container">
            
            <div class="container-left">
                <div class="card">
                    
                    <img src="./img/头像.png" alt="">
                    <h3></h3>
                    <a href="https://gitee.com/lei-xiaoheng">gitee地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                </div>
            </div>
            
            <div class="container-right">
                
                
    
            </div>
        </div>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="JS/app.js"></script>
        <script>
            //发送 ajax 从服务器获取数据
            function getBlogs() {
                $.ajax({
                    type: 'get',
                    url: 'blog',
                    success: function(body) {
                        //获取成功, 则 body 就是一个 js 对象数组,每个元素就是一个博客
                        let container = document.querySelector('.container-right');
                        for(let blog of body) {
                            // 构造 blogDiv
                            let blogDiv = document.createElement('div');
                            blogDiv.className = 'blog';
    
                            // 构造博客标题
                            let titleDiv = document.createElement('div');
                            titleDiv.className = 'title';
                            titleDiv.innerHTML = blog.title;
    
                            // 构造博客日期
                            let dateDiv = document.createElement('div');
                            dateDiv.className = 'date';
                            dateDiv.innerHTML = blog.postTime
    
                            // 构造博客的摘要
                            let descDiv = document.createElement('div');
                            descDiv.className = 'desc';
                            descDiv.innerHTML = blog.content;
    
                            // 构造查看全文的按钮
                            let a = document.createElement('a');
                            //加上一个 query string, blogId 用这个区分,要跳到哪个博客的页面
                            a.href = 'blog_datail.html?blogId='+ blog.blogId;
                            a.innerHTML = '查看全文 >>'
    
                            //拼装最终结构
                            blogDiv.appendChild(titleDiv);
                            blogDiv.appendChild(dateDiv);
                            blogDiv.appendChild(descDiv);
                            blogDiv.appendChild(a);
                            container.appendChild(blogDiv);
                        }
                    }
                });
            }
            //要进行函数调用
            getBlogs();
    
            getLoginStatus();
    
            // 针对博客列表页, 获取到当前用户的登录信息
            function getUserInfo() {
                $.ajax({
                    type: 'get',
                    url: 'userInfo',
                    success: function(body) {
                        //获取成功, body 就是一个 User 对象
                        //把 user 对象里的内容填写到页面上即可
                        //此处主要是填用户名
                        let h3 = document.querySelector('.container-left>.card>h3');
                        h3.innerHTML = body.username;
                    }
                });
            }
            getUserInfo();
        </script>
    </body>
    </html>

<!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/blog-detail.css">
        
        
        <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script src="editor.md/lib/marked.min.js"></script>
        <script src="editor.md/lib/prettify.min.js"></script>
        <script src="editor.md/editormd.js"></script>
    </head>
    <body>
        <div class="nav">
            <img src="img/暂无消息.png" alt="">
            <span class="title">我的博客系统</span>
            
            <div class="spacer"></div>
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="login.html">登录</a>
            <a href="#">注销</a>
        </div>
    
           
        <div class="container">
            
            <div class="container-left">
                <div class="card">
                    
                    <img src="./img/头像.png" alt="">
                    <h3>雷晓恒</h3>
                    <a href="https://gitee.com/lei-xiaoheng">gitee地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                </div>
            </div>
            
            <div class="container-right">
                <div class="blog-detail">
                    <h3></h3>
                    <div class="date"></div>
                    
                    <div id="content" style="background-color: transparent">
    
                    </div>
                </div>
            </div>
        </div>
                
                <script src="JS/app.js"></script>
            <script>
                function getBlog() {
                    $.ajax({
                        type: 'get',
                        url: 'blog' + location.search,
                        success: function(body) {
                            let h3 = document.querySelector('.blog-detail>h3');
                            h3.innerHTML = body.title;
                            let dateDiv = document.querySelector('.blog-detail>.date');
                            dateDiv.innerHTML = body.postTime;
                            // let contentDiv = document.querySelector('#content');
                            // contentDiv.innerHTML = body.content;
    
                            // 此处使用 editer.md 来进行渲染
                            editormd.markdownToHTML('content', { markdown: body.content});
                        }
                    });
                }
                getBlog();
                getLoginStatus();
    
                function getUserInfo() {
                    $.ajax({
                        type: 'get',
                        url: 'userInfo' + location.search,
                        success: function(body) {
                        let h3 = document.querySelector('.container-left>.card>h3');
                        h3.innerHTML = body.username;
                        }
                    });
                }
                getUserInfo();
            </script>
    </body>
    </html>

**(3) 后端代码**

![78de4a25ae10436cbcaa62e0c1f436e3.png][]

import com.fasterxml.jackson.databind.ObjectMapper;
    
    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 javax.servlet.http.HttpSession;
    import java.io.IOException;
    
    @WebServlet("/userInfo")
    public class UserInfoServlet extends HttpServlet {
        ObjectMapper objectMapper = new ObjectMapper();
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //获取用户信息
            String blogId = req.getParameter("blogId");
            if(blogId == null) {
                // 列表页,获取当前登陆用户的信息
                // 直接从 session 中获取
                getUserInfoFromSession(req,resp);
            } else {
                // 详情页,获取文章作者的信息
                // 查询数据库
                getUserInfoFromDB(req,resp,Integer.parseInt(blogId));
            }
        }
    
        private void getUserInfoFromSession(HttpServletRequest req, HttpServletResponse resp) throws IOException {
            HttpSession session = req.getSession(false);
            if (session == null) {
                resp.setStatus(403);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前未登录");
                return;
            }
            User user = (User) session.getAttribute("user");
            if(user == null) {
                resp.setStatus(403);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前未登录");
                return;
            }
            // user 获取到了,把 user 中的 password 给赋值为空字符串,然后返回
            user.setPassword("");
    
            resp.setContentType("application/json; charset=utf8");
            resp.getWriter().write(objectMapper.writeValueAsString(user));
        }
    
        private void getUserInfoFromDB(HttpServletRequest req, HttpServletResponse resp, int blogId) throws IOException {
            // 1. 先根据 blogId 查询 Blog 对象,获取到 userId (作者是谁)
            BlogDao blogDao = new BlogDao();
            Blog blog = blogDao.selectOne(blogId);
            if(blog == null) {
                //如果参数传来的这个 blogId 是随便写的,数据库中是没有的
                resp.setStatus(404);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("blogId 不存在");
                return;
            }
            // 2. 根据 userId 查询对应的 User 对象即可
            UserDao userDao = new UserDao();
            User user = userDao.selectById(blog.getUserId());
            if(user == null) {
                resp.setStatus(404);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("blogId 不存在");
                return;
            }
            // 把这个 user 对象返回给浏览器
            user.setPassword("");
            resp.setContentType("application/json; charset=utf8");
            resp.getWriter().write(objectMapper.writeValueAsString(user));
        }
    }

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

### 4.6 实现注销(退出登录状态) ###

> **在博客列表页/博客详情页/博客编辑页,导航栏里有注销按钮**
> 
> **注销按钮是一个 a 标签,点击的时候就会给服务器发送一个 http 请求(这个不是 ajax,如果用 ajax 做也可以)**
> 
> **发送的 http 请求就告诉服务器,现在要退出登陆了**
> 
> **服务器就会把会话中的 user 对象,给删除了,同时重定向跳转到 登录页**
> 
> 需要注意的是: 此处删除的是 user 对象,不是 HttpSession 对象, HttpSession 没有一个直接的用于删除的方法(直接删除会话,Servlet没提供),虽然可以通过设置过期时间的方式来删,但这不是一个好选择

**(1) 前后端交互接口**

![c7856ddbab5545d185da2098ef87dca9.png][]

**(2) 前端代码**

> **只需要给 a 标签里的 href 属性设置个值就可以了,**

![72ef6b8e6af845acabe65c2577049825.png][]

**(3) 后端代码**

![8c1a19ed21f8497a94ea7023f09ef55e.png][]

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

### 4.7 实现发布博客(blog\_edit.html) ###

**业务逻辑:**

> **在博客编辑页中,能够把用户提交的博客数据给获取到,保存到数据库中,**
> 
> **用户在博客编辑页中,填写博客标题和正文,点击发布博客**

![bc213b5f8e434383aaa28009bcb72647.png][]

**(1) 前后端交互接口**

![700bb65642334876829e8aea27505f0f.png][]

**(2) 前端代码**

![06ed5f9f609a40c48c6cfb20985276df.png][] ![e254ff7f3d484e04b505b82ed3e1e3df.png][]

**(3) 后端代码**

import com.fasterxml.jackson.databind.ObjectMapper;
    
    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 javax.servlet.http.HttpSession;
    import java.io.IOException;
    import java.util.List;
    
    @WebServlet("/blog")
    public class BlogServlet extends HttpServlet {
        private ObjectMapper objectMapper = new ObjectMapper();
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            // 按照约定的接口格式返回数据
            resp.setContentType("application/json; charset=utf8");
            BlogDao blogDao = new BlogDao();
    
            String blogId = req.getParameter("blogId");
    
            if(blogId == null) {
                //在博客列表页发起的请求
                List<Blog> blogs = blogDao.selectAll();//查询博客列表
                //writeValueAsString 把 java 对象转成 json 格式的字符串
                resp.getWriter().write(objectMapper.writeValueAsString(blogs));
            } else {
                //博客详情页发起的请求
                Blog blog = blogDao.selectOne(Integer.parseInt(blogId));
                resp.getWriter().write(objectMapper.writeValueAsString(blog));
            }
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            // 使用这个方法,来提交新博客
            //1. 先检查一下用户的登录状态,获取到会话和用户信息
            //   如果未登录,显然不能提交博客
            HttpSession session = req.getSession(false);
            if(session == null) {
                resp.setStatus(403);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前未登录,不能发布博客!");
                return;
            }
            User user = (User) session.getAttribute("user");
            if (user == null) {
                resp.setStatus(403);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前未登录,不能发布博客!");
                return;
            }
    
            //2. 获取请求中的参数(博客的标题和正文)
            req.setCharacterEncoding("utf8");
            String title = req.getParameter("title");
            String content = req.getParameter("content");
    
            //3. 构造 Blog 对象,并且插入到数据库中
            Blog blog = new Blog();
            blog.setTitle(title);
            blog.setContent(content);
            blog.setUserId(user.getUserId());
            //blogId 是自增主键,不需要设置,postTime 直接在数据库操作中,已经使用 now 来设置了
            BlogDao blogDao = new BlogDao();
            blogDao.insert(blog);
    
            //4. 构造 重定向报文, 回到 博客列表页
            resp.sendRedirect("blog_list.html");
    
        }
    }

**运行程序,下面来试着写一篇试试看**

![307d99101ed3442f98f8620619580520.png][]

![d56f811ff74f4c62b6ceed4fbf2d164a.png][]

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

### 4.8 实现删除博客 ###

**业务逻辑**

> **作者能删除自己的文章,不能删除别人的**
> 
> **暂时没有管理员这个角色**
> 
> **在博客详情页导航栏上,加个 删除 按钮**
> 
> **点击删除按钮,就会触发删除操作,通过 a 标签. href 属性发起一个 HTTP GET 请求**
> 
> **但是删除的时候,会做一个判断,如果当前登录的用户就是文章作者,才能真正删除,否则就提示不能删除**

**(1) 约定前后端交互接口**

![ff46a5c457b44be9814e5ff9c81bfc3e.png][]

**(2) 前端代码**

![3d4552c06ef74adcb8955867c6dfcb3a.png][]

<!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/blog-detail.css">
        
        
        <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script src="editor.md/lib/marked.min.js"></script>
        <script src="editor.md/lib/prettify.min.js"></script>
        <script src="editor.md/editormd.js"></script>
    </head>
    <body>
        <div class="nav">
            <img src="img/暂无消息.png" alt="">
            <span class="title">我的博客系统</span>
            
            <div class="spacer"></div>
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="#" id="delete-btn">删除</a>
            <a href="logout">注销</a>
        </div>
    
           
        <div class="container">
            
            <div class="container-left">
                <div class="card">
                    
                    <img src="./img/头像.png" alt="">
                    <h3>雷晓恒</h3>
                    <a href="https://gitee.com/lei-xiaoheng">gitee地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                </div>
            </div>
            
            <div class="container-right">
                <div class="blog-detail">
                    <h3></h3>
                    <div class="date"></div>
                    
                    <div id="content" style="background-color: transparent">
    
                    </div>
                </div>
            </div>
        </div>
                
                <script src="JS/app.js"></script>
            <script>
                function getBlog() {
                    $.ajax({
                        type: 'get',
                        url: 'blog' + location.search,
                        success: function(body) {
                            let h3 = document.querySelector('.blog-detail>h3');
                            h3.innerHTML = body.title;
                            let dateDiv = document.querySelector('.blog-detail>.date');
                            dateDiv.innerHTML = body.postTime;
                            // let contentDiv = document.querySelector('#content');
                            // contentDiv.innerHTML = body.content;
    
                            // 此处使用 editer.md 来进行渲染
                            editormd.markdownToHTML('content', { markdown: body.content});
                        }
                    });
                }
                getBlog();
                getLoginStatus();
    
                function getUserInfo() {
                    $.ajax({
                        type: 'get',
                        url: 'userInfo' + location.search,
                        success: function(body) {
                        let h3 = document.querySelector('.container-left>.card>h3');
                        h3.innerHTML = body.username;
                        }
                    });
                }
                getUserInfo();
    
                function updateDeleteURL() {
                    let deleteBtn = document.querySelector('#delete-btn');
                    deleteBtn.href = 'blog_delete' + location.search;
                }
    
                updateDeleteURL();
            </script>
    </body>
    </html>

**(3) 后端代码**

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 javax.servlet.http.HttpSession;
    import java.io.IOException;
    
    // 8. 删除博客
    @WebServlet("/blog_delete")
    public class BlogDeleteServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //1. 先判定用户登录状态
            HttpSession session = req.getSession(false);
            if (session == null) {
                resp.setStatus(403);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前未登录,不能删除博客!");
                return;
            }
            User user = (User) session.getAttribute("user");
            if(user == null) {
                resp.setStatus(403);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前未登录, 不能删除博客!");
                return;
            }
    
            //2. 获取到 blogId
            String blogId = req.getParameter("blogId");
            if(blogId == null) {
                // 这个 blogId 参数不存在,无法删除
                // 比如本身 blogId 只有 1-10,现在要删除100,当前就不行了
                resp.setStatus(404);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("您当前删除的 blogId 有误!");
                return;
            }
    
            //3. 查询出这个 blogId 对应的 Blog 对象
            BlogDao blogDao = new BlogDao();
            Blog blog = blogDao.selectOne(Integer.parseInt(blogId));
            if(blog == null) {
                resp.setStatus(404);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("您当前删除的博客不存在! blogId=" + blogId);
                return;
            }
    
            //4. 判定登录用户是否是文章作者
            if(blog.getUserId() != user.getUserId()) {
                // blog.getUserId 文章的作者
                // user.getUserId 从 session 里拿的登录的用户是谁
                // 不一样.说明你想要删除别人的文章,那当然是不行了  直接返回403
                resp.setStatus(403);
                resp.setContentType("text/html; charset=utf8");
                resp.getWriter().write("当前您不能删除别人的博客!");
                return;
            }
    
            //5. 执行删除操作
            blogDao.delete(Integer.parseInt(blogId));
    
            //6. 返回 302 重定向
            resp.sendRedirect("blog_list.html");
        }
    }

运行代码,插入两篇博客测试一下

![1fea69538de44dc68eaa50bae4d276af.png][]

删除一篇试试看

![3152bb08f9b04323b9defd2817a6d54f.png][]

如果删除一篇不是自己的博客,就会这样提示

![0edbacb9ebd14d35a2b2257ae9159a3d.png][]

[icon-default.png_t_M85B]: https://csdnimg.cn/release/blog_editor_html/release2.2.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M85B
[gitee_icon-default.png_t_M85B_https_gitee.com_lei-xiaoheng_java-ee_tree_master_blog_system_src_main]: https://gitee.com/lei-xiaoheng/java-ee/tree/master/blog_system/src/main
[2f3957f6c02c4c049ebab42f29262519.png]: https://img-blog.csdnimg.cn/2f3957f6c02c4c049ebab42f29262519.png
[b8cd6fd59e0648c6b17ac9bd60f27ac8.png]: https://img-blog.csdnimg.cn/b8cd6fd59e0648c6b17ac9bd60f27ac8.png
[4ff6bc40e10e4d4c9646683513c085ae.png]: https://img-blog.csdnimg.cn/4ff6bc40e10e4d4c9646683513c085ae.png
[22b2b427027a4aaa8aafaae7be6bbdf6.png]: https://img-blog.csdnimg.cn/22b2b427027a4aaa8aafaae7be6bbdf6.png
[6b18a3f397d54ce582bda5f5b9e36170.png]: https://img-blog.csdnimg.cn/6b18a3f397d54ce582bda5f5b9e36170.png
[2cdabbbdd828460fbaad4d1c53d8dc61.png]: https://img-blog.csdnimg.cn/2cdabbbdd828460fbaad4d1c53d8dc61.png
[a3240eda7f664fd99bd7ceb5315f6339.png]: https://img-blog.csdnimg.cn/a3240eda7f664fd99bd7ceb5315f6339.png
[1ca6f2a15840487f9383efc59df49fba.png]: https://img-blog.csdnimg.cn/1ca6f2a15840487f9383efc59df49fba.png
[8cf224d203ba41e2a1f21f657013fc1e.png]: https://img-blog.csdnimg.cn/8cf224d203ba41e2a1f21f657013fc1e.png
[e2bf1126a07b4c52b929d0058c78e1be.png]: https://img-blog.csdnimg.cn/e2bf1126a07b4c52b929d0058c78e1be.png
[7c31b64349c246588a5845a8b52dac10.png]: https://img-blog.csdnimg.cn/7c31b64349c246588a5845a8b52dac10.png
[bbbde9ffea4c4a378fab67e9c9705ed9.png]: https://img-blog.csdnimg.cn/bbbde9ffea4c4a378fab67e9c9705ed9.png
[6c948f4083a5434c94928cdd4647e7f5.png]: https://img-blog.csdnimg.cn/6c948f4083a5434c94928cdd4647e7f5.png
[7b56ebfaedcd4999a9e61d1fa6e23370.png]: https://img-blog.csdnimg.cn/7b56ebfaedcd4999a9e61d1fa6e23370.png
[82f0b3f461474c47ba7b979748071a58.png]: https://img-blog.csdnimg.cn/82f0b3f461474c47ba7b979748071a58.png
[4ea63afdfc0c46a28d9368a6b4a8c34c.png]: https://img-blog.csdnimg.cn/4ea63afdfc0c46a28d9368a6b4a8c34c.png
[cfdb8ca88d5243c7b00ce9b757c8185a.png]: https://img-blog.csdnimg.cn/cfdb8ca88d5243c7b00ce9b757c8185a.png
[f18edc416b0f4ba6b06c1705592876f3.png]: https://img-blog.csdnimg.cn/f18edc416b0f4ba6b06c1705592876f3.png
[1f3d053f0c844dbf8df5cea0f98fd90d.png]: https://img-blog.csdnimg.cn/1f3d053f0c844dbf8df5cea0f98fd90d.png
[4f1357c47e0b48759958751f669e2d4b.png]: https://img-blog.csdnimg.cn/4f1357c47e0b48759958751f669e2d4b.png
[4ee5c02c330d4dcab24e734690d04952.png]: https://img-blog.csdnimg.cn/4ee5c02c330d4dcab24e734690d04952.png
[d5c7a26f6255410f9f2f7555e4df6b27.png]: https://img-blog.csdnimg.cn/d5c7a26f6255410f9f2f7555e4df6b27.png
[67ab49ecb6664f819611912c2ca3880b.png]: https://img-blog.csdnimg.cn/67ab49ecb6664f819611912c2ca3880b.png
[af2b9834b3664bf69e882a70c345f67c.png]: https://img-blog.csdnimg.cn/af2b9834b3664bf69e882a70c345f67c.png
[1c2bfa0d62b24f97a964b0900c801417.png]: https://img-blog.csdnimg.cn/1c2bfa0d62b24f97a964b0900c801417.png
[1294a5d4958348ac9975cf990b8a8744.png]: https://img-blog.csdnimg.cn/1294a5d4958348ac9975cf990b8a8744.png
[5b6ffbf2497646e98500699c56d75539.png]: https://img-blog.csdnimg.cn/5b6ffbf2497646e98500699c56d75539.png
[d426eb3b8eeb40028276cbc1ff2e31a6.png]: https://img-blog.csdnimg.cn/d426eb3b8eeb40028276cbc1ff2e31a6.png
[52f8dc590b0744f5845808d171e38048.png]: https://img-blog.csdnimg.cn/52f8dc590b0744f5845808d171e38048.png
[00e9a68e85624bb79d0fc5162a5282dc.png]: https://img-blog.csdnimg.cn/00e9a68e85624bb79d0fc5162a5282dc.png
[d4265029ff794016b44f5e8bcaf158d4.png]: https://img-blog.csdnimg.cn/d4265029ff794016b44f5e8bcaf158d4.png
[ce015ef34b334da29647d21a9bc34b0e.png]: https://img-blog.csdnimg.cn/ce015ef34b334da29647d21a9bc34b0e.png
[ea6fe98b584f47299f8a5e89c9114236.png]: https://img-blog.csdnimg.cn/ea6fe98b584f47299f8a5e89c9114236.png
[a2da443f537e4c79953394a4b9efaf76.png]: https://img-blog.csdnimg.cn/a2da443f537e4c79953394a4b9efaf76.png
[9957ea1a4aca4bac98bfe818bc0460cb.png]: https://img-blog.csdnimg.cn/9957ea1a4aca4bac98bfe818bc0460cb.png
[af3382c9bbfd46389a519d9a21e7a291.png]: https://img-blog.csdnimg.cn/af3382c9bbfd46389a519d9a21e7a291.png
[1ab91f3af7754d44a7344e46a7715e06.png]: https://img-blog.csdnimg.cn/1ab91f3af7754d44a7344e46a7715e06.png
[78de4a25ae10436cbcaa62e0c1f436e3.png]: https://img-blog.csdnimg.cn/78de4a25ae10436cbcaa62e0c1f436e3.png
[c7856ddbab5545d185da2098ef87dca9.png]: https://img-blog.csdnimg.cn/c7856ddbab5545d185da2098ef87dca9.png
[72ef6b8e6af845acabe65c2577049825.png]: https://img-blog.csdnimg.cn/72ef6b8e6af845acabe65c2577049825.png
[8c1a19ed21f8497a94ea7023f09ef55e.png]: https://img-blog.csdnimg.cn/8c1a19ed21f8497a94ea7023f09ef55e.png
[bc213b5f8e434383aaa28009bcb72647.png]: https://img-blog.csdnimg.cn/bc213b5f8e434383aaa28009bcb72647.png
[700bb65642334876829e8aea27505f0f.png]: https://img-blog.csdnimg.cn/700bb65642334876829e8aea27505f0f.png
[06ed5f9f609a40c48c6cfb20985276df.png]: https://img-blog.csdnimg.cn/06ed5f9f609a40c48c6cfb20985276df.png
[e254ff7f3d484e04b505b82ed3e1e3df.png]: https://img-blog.csdnimg.cn/e254ff7f3d484e04b505b82ed3e1e3df.png
[307d99101ed3442f98f8620619580520.png]: https://img-blog.csdnimg.cn/307d99101ed3442f98f8620619580520.png
[d56f811ff74f4c62b6ceed4fbf2d164a.png]: https://img-blog.csdnimg.cn/d56f811ff74f4c62b6ceed4fbf2d164a.png
[ff46a5c457b44be9814e5ff9c81bfc3e.png]: https://img-blog.csdnimg.cn/ff46a5c457b44be9814e5ff9c81bfc3e.png
[3d4552c06ef74adcb8955867c6dfcb3a.png]: https://img-blog.csdnimg.cn/3d4552c06ef74adcb8955867c6dfcb3a.png
[1fea69538de44dc68eaa50bae4d276af.png]: https://img-blog.csdnimg.cn/1fea69538de44dc68eaa50bae4d276af.png
[3152bb08f9b04323b9defd2817a6d54f.png]: https://img-blog.csdnimg.cn/3152bb08f9b04323b9defd2817a6d54f.png
[0edbacb9ebd14d35a2b2257ae9159a3d.png]: https://img-blog.csdnimg.cn/0edbacb9ebd14d35a2b2257ae9159a3d.png