博客系统 Java Web 开发（Servlet）

梦里梦外; 2023-10-15 10:58 71阅读 0赞

![24a293251efe46a19cba11404c6279f0.png][]**目录**

一、准备工作

二、设计数据库

三、编写数据库代码

1、建表sql

2、封装数据库的连接操作

3、创建实体类

4、封装数据库的一些增删改查

（1）BlogDao

新增博客：

根据博客 id 来查询指定博客（用于博客详情页）

直接查询出数据库中所有的博客列表

删除博客

（2）UserDao

根据 userId 来查询用户信息

根据 username 来查询用户信息（登录的时候）

四、围绕博客列表页实现获取博客列表功能

1、约定前后端交互接口

2、编写后端代码

3、编写前端代码

五、博客详情页

1、约定前后端交互接口

2、实现后端代码

3、实现前端代码

六、实现登录页

1、约定前后端交互接口

2、修改前端代码

3、修改后端代码

七、页面强制登录

1、约定前后端交互接口

2、编写后端代码

3、实现前端代码

八、显示用户信息

1、约定前后端交互接口

2、编写后端代码

3、编写前端代码

九、退出登录状态

1、约定前后端接口

2、编写后端代码

3、编写前端代码

十、发布博客

1、约定前后端交互接口

编辑

2、编写服务器代码

3、编写客户端代码

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

## 一、准备工作 ##

创建项目，引入依赖，把之前写的前端页面页拷贝过去

要引入的依赖有： servlet ,mysql,jackson

![668321bfa1c04b27b397d7d39b39ffb0.png][]

引入依赖完成之后，再创建目录，然后将 web.xml 的内容复制粘贴上去

<!DOCTYPE web-app PUBLIC
            "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
            "http://java.sun.com/dtd/web-app_2_3.dtd" >
    <web-app>
            <display-name>Archetype Created Web Application</display-name>
    </web-app>

然后再将之前写的前端代码复制粘贴到 webapp 目录下![7b96c75571cb44e2b4ce96c03379cf00.png][]

此时，准备工作就完成了

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

## 二、设计数据库 ##

结合之前的需求，在当前的博客系统中，**主要涉及到两个实体：博客，用户**

**我们就可以创建两张表来表示 博客 和 用户**

**这两个实体之间的关系如何？**

一对多的关系，一个用户可以写多个博客，但是一个博客只能属于一个用户

![7cb0f7b892f044b4b78fe75b2b10741c.png][]

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

## 三、编写数据库代码 ##

### 1、建表sql ###

把一些基本的数据库操作先封装好，以备后续使用

在 src 目录下，创建一个 db.sql，在里面写上数据库的建库建表语句

--这个文件，主要用来写建库建表语句
        --一般在建表的时候，把建表的 sql 保留下来，以备后续部署其它及其的时候就方便了
    
        create database if not exists blog_system;
        use blog_system;
    
        --删除旧表，重新创建新表，防止之前的残留数据面对后续的程序有负面影响
        drop table if exists user;
        drop table if exists blog;
    
        --进行建表
        create table blog(
            blogId int primary key auto_increment,
            title varchar(128),
            content varchar(4096),
            postTime datetime,
            userId int
        };
    
        create table user(
            userId int primary key auto_increment,
            username varchar(20) unique , --要求用户名和别人不同
            password varchar(20)
        );

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

### 2、封装数据库的连接操作 ###

在 java 目录下，创建一个 DBUtil 类

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;
    
    //通过这个类，把数据库连接过程封装一下
    //此处，把 DBUtil 作为一个工具类，提供 static 方法，供其它方法来调用
    public class DBUtil {
        //静态成员是跟随类对象的，类对象在整个进程中，只有唯一一份
        //静态成员相当于也是唯一的实例（单例模式，饿汉模式）
        private static DataSource dataSource = new MysqlDataSource();
    
        static {
            //使用静态代码块，针对 dataSourse 进行初始化
            ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/java?charactorEncoding=utf8&useSSL=false");
            ((MysqlDataSource)dataSource).setUser("root");
            ((MysqlDataSource)dataSource).setPassword("123456");
        }
    
        //通过这个方法来建立连接
        public static Connection getConnection() throws SQLException {
            return dataSource.getConnection();
        }
    
        //通过这个方法来断开连接，释放资源
        public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet)  {
            //此处的三个 try catch 分开写更好，避免前面的异常导致后面的代码无法执行
            if (resultSet != null){
                try {
                    resultSet.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
            if (statement != null){
                try {
                    statement.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
            if (connection != null){
                try {
                    connection.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
        }
    }

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

### 3、创建实体类 ###

实体类，就是和表中的记录对应的类

![4bafc831545c4684a7d3eae0bb3c6e3e.png][]

实体类里要有哪些属性，都是和当前表中的列是密切相关的

于是，我们便要根据之前表中的列，来创建好 blog 和 user 这两个类：

![d46024447743409885e4922f17c25f08.png][]

并且，将里面的每个属性，都手动加上 get set 访问器

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

### 4、封装数据库的一些增删改查 ###

**针对 博客表 ，创建一个 BlogDao**

**针对 用户表，创建一个 UserDao**

它们提供了一些方法，来进行增删改查

#### （1）BlogDao ####

里面一共有四个方法：

> 1、新增博客
> 
> 2、根据博客 id 来查询指定博客（用于博客详情页）
> 
> 3、直接查询出数据库中所有的博客列表
> 
> 4、删除博客

##### **新增博客：**  #####

//1、新增一个博客
        public void add(Blog blog){
            Connection connection = null;
            PreparedStatement statement = null;
            //1、和数据库建立连接
            try {
                 connection = DBUtil.getConnection();
                //2、构造 Sql
                String sql = "insert into blog values(null,?,?,?,?)";
                 statement = connection.prepareStatement(sql);
                 statement.setString(1,blog.getTitle());
                 statement.setString(2,blog.getContent());
                 statement.setTimestamp(3,blog.getPostTime());
                 statement.setInt(4,blog.getUserId());
                //3、执行 sql
                statement.executeUpdate();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }finally {
                DBUtil.close(connection,statement,null);
            }
        }

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

##### **根据博客 id 来查询指定博客（用于博客详情页）** #####

//2、根据博客 id 来查询指定博客（用于博客详情页）
        public Blog selectById(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、遍历结果集合,由于此处的 blogId ，在 blog 表中是唯一的（主键）
                //此时的查询结果，要么是没有查到任何数据，要么是只有一条记录
                //所以，此处使用 if 即可，不用使用 while
                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) {
                throw new RuntimeException(e);
            }finally {
                //5、释放必要的资源
                DBUtil.close(connection,statement,resultSet);
            }
            return null;
        }

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

##### **直接查询出数据库中所有的博客列表** #####

注意：这里面的博客列表页，显示的博客内容，应该只是一个简单的摘要（文章内容的一小部分）

而不是整篇文章，完整的文章应该放到博客详情页显示

所以，我们可以对比较长的正文进行一个裁剪

![798965c5c26e48afa9d887d8122ac8ab.png][]

//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"));
                    //这里的正文，在博客列表页中，不需要把整个正文显示出来
                    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) {
                throw new RuntimeException(e);
            }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
                statement.executeUpdate();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }finally {
                //进行关闭
                DBUtil.close(connection,statement,null);
            }
        }

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

#### （2）UserDao ####

这里面一共有两个方法：

> 1、根据 userId 来查询用户信息
> 
> 2、根据 username 来查询用户信息（登录的时候）

##### **根据 userId 来查询用户信息** #####

//1、根据 userId 来查询用户信息
        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 user 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) {
                throw new RuntimeException(e);
            }finally {
                DBUtil.close(connection,statement,resultSet);
            }
            return null;
        }

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

#####  **根据 username 来查询用户信息（登录的时候）** #####

//2、根据 username 来查询用户信息（登录的时候）
        public User selectByUsername(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) {
                throw new RuntimeException(e);
            }finally {
                DBUtil.close(connection,statement,resultSet);
            }
            return null;
        }

写到这里，就把数据库的操作封装完毕了

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

## 四、围绕博客列表页实现获取博客列表功能 ##

接下来，我们围绕博客列表页，实现获取博客列表的功能

![5244019d5ebd4e6db66818a270518088.png][]

当前，我们的博客列表页上面的数据，都是固定的，显然是不科学的

正确的做法，应该是通过数据库读取数据，显示到页面上

此处，就需要打通前后端交互的操作

**让博客列表页，在加载的时候，通过 ajax 给服务器，发一个请求，服务器查数据库，获取到博客列表数据，返回给浏览器，浏览器再根据数据构造页面内容**

**这样的交互过程，也称为 “前后端分离”**

**前端只向后端请求数据，而不请求具体的页面，后端也仅仅是返回数据，这样设定的目的就是为了前端和后端更加解耦合**

上述是进行实现博客列表页的基本思路

接下来，我们需要：

> 1、约定前后端交互接口
> 
> 2、开发后端代码
> 
> 3、开发前端代码

### 1、约定前后端交互接口 ###

在 博客列表页，获取博客列表的功能下，前端要发什么请求，后端返回什么响应，都需要进行约定

确定了前后端接口之后，前端和后端再分别按照这个格式进行开发

![ee4d89824fb840e88090df70a7464a97.png][]

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

### 2、编写后端代码 ###

此时，我们会发现，这里面的类，越写越多了，看起来会显得比较杂乱

![6d3bfe61c61e4348972b98d9337a69e9.png][]

这个时候，我们就可以对它们进行一个分类来处理

**model ：管理数据 / 操作数据的部分**

![f4965ee3352240e0bb6f0c63770eb519.png][]

**把这个 Servlet 放到 api 中，api 不到一定非得是一个 类 / 方法，也可以是 “网络接口”（处理 HTTP 请求，返回 HTTP 响应）**

![ffcfec38376641fbb21a99c4590071d6.png][]

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

### 3、编写前端代码 ###

再博客列表页，加载过程中，触发 ajax 访问服务器中的数据

再把拿到的数据，构造到页面中

构造页面内容的时候，我们可以参考之前写好了的 html 代码进行构造

![fb8a5236fdef4a1e940b94709c4409ff.png][]

此时，博客列表页功能实现就完成了

此时，我们插入一个测试用例，就会发现两个问题：![15cb89b5cb5a44ac82d8be508f3c2d80.png][]

**1、时间戳：不应该显示时间戳，而是应该显示格式化的时间**

需要用到一个格式化时间的类，SimpleDateFormat 来帮我们转化一下就可以了 ![95b9a319bbf143308ce6ac0957aa364b.png][]

**2、顺序，新的博客在上面，老的博客在下面**

![4bda09c72d0f4e9383906538d63c3b1a.png][]

直接在 sql 中加一个 order by 即可

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

## 五、博客详情页 ##

接下来，实现博客详情页

点击 “查看全文” 按钮，就可以跳转到博客详情页中

跳转过去后，在博客详情页中发起一个 ajax ，从服务器获取到当前博客的具体内容，再显示出来

### 1、约定前后端交互接口 ###

![76573735203f440da5dab344a81d0d34.png][]

**注意：由于此处是获取博客详情了，所以此处的 content 是完整的，不用像博客列表页一样进行截断**

### 2、实现后端代码 ###

@WebServlet("/blog")
    public class BlogServlet extends HttpServlet {
        private ObjectMapper objectMapper = new ObjectMapper();
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //尝试获取一下 query string 中的 blogId 字段
            String blogId = req.getParameter("blogId");
            BlogDao blogDao = new BlogDao();
            if (blogId == null){
                //queryString 不存在，该请求是获取博客列表页
                List<Blog> blogs =  blogDao.selectAll();
                //需要把 blogs 转成符合要求的 json 格式的字符串
                String respJson = objectMapper.writeValueAsString(blogs);
                resp.setContentType("application/json;charset=utf8");
                resp.getWriter().write(respJson);
            }else {
                //query string 存在，本次请求是获取指定 id 的博客
                Blog blog = blogDao.selectById(Integer.parseInt(blogId));
                if (blog == null){
                    System.out.println("当前 bligId = " + blogId + "对应博客不存在！");
                }
                String respJson = objectMapper.writeValueAsString(blog);
                resp.setContentType("application/json;charset=utf8");
                resp.getWriter().write(respJson);
            }
        }

### 3、实现前端代码 ###

在 blog\_detail.html 中，加入 ajax ，来获取上述数据

![ff822870aa7a4d3683e6bde1e760a846.png][]

**location.search 就是获取当前页面的 query string**

这里的 location 不是 http header 中 location ，是 js 代码中的一个全局对象，类似于 document

**注意：当前写的 博客内容，是使用 markdown 形式来组织的，比如博客的内容是**

![7a716c597de7409aae6a07dc9d24f277.png][]

内容中，会带有一些 markdown 的符号，最终显示到网页上，希望用户看到的是渲染之后的结果，也就是把 \# 转换成一级标题

![70a32c2063274f01a8ddf73e194b4ca8.png][]

数据库中保存的 content 是渲染前的内容 ，但是最终显示给用户看，我们希望用户看到的是渲染后的内容

**这里就需要使用 editor.md 对 markdown 内容进行转换**

**具体如何转换呢？**

editor.md 提供了一个方法： editormd.markdownToHTML ，效果是把 md 字符串，转换成 html 片段,输出到 \#content 这个标签内部（使用时要记得引入 editor.md 的依赖）

![5a733918220f4c6fad1e023e7de3dc3c.png][]

代码改完之后，重新启动服务器，发现此时博客详情页的结果，还是之前未修改的状态

![c5b8acb45c854dd8ad084c4ccaecc3fd.png][]

这个内容，还是之前写死的内容，但是实际上，代码已经把这个内容给删掉了

**这个是因为浏览器自身也有缓存，浏览器从服务器这边获取页面，这个操作是通过网络传输完成的，速度是比较慢的**

**浏览器就会把页面内容给缓存到本地（客户端电脑的硬盘上），后续再访问同一个页面，就直接读缓存了**

这样就带来了一个问题：如果服务器代码改了，客户端命中缓存之后就不一定能及时感知到变化

**解决方案：强制刷新， ctrl + f5 ，此时是无视本地缓存的，100%重新访问服务器的**

![655ef8be2c6b444696605fddea692a9d.png][]

缓存问题解决之后，发现当前页面虽然变化了，但是结果仍然不是很理想，查看报错信息，就会发现是 editormd 的代码写错了，进行修改后再次刷新页面：

![47a78eb10b8e4703834b8aa4a0379811.png][]

![3e199e2552154d49bb30ea1ad744fb53.png][]

修改完之后，发现正文有了，但是标题没有出来

我们通过抓包来看看服务器返回结果是否符合预期，就可以确定是前端问题还是后端问题

![589b30b39aa64db69d4e16afaa0b1bde.png][]

根据响应结果，我们可以判断出后端代码应该没什么问题，响应结果是正确的，接下来检查前端代码

我们会发现，这是由于前端代码中出现了两个 title ，querySelector 默认返回的是第一个 title ，然后导致对标题的修改改错了地方![840e8d2b2a5f4008a30edb4648f11c7d.png][]

**解决方案：把选择器写的更精确一些即可**

![23393edc1c5a45a58fb29357eb5a2c88.png][]

重新启动服务器，再次刷新页面，就可以发现，现在标题就正确出现了

![a49abc75832c46de83a99afa1fab57f5.png][]

<div class="containner-right">
                
                <h3 class="title"></h3>
                
                <div class="date"></div>
                
                <div id="content">
    
                </div>
            </div>
        </div>
        <script src="js/jquery.mini.js"></script>
            
            
            <script src="js/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>
        <script>
            $.ajax({
                type:'get',
                url:'blog' + location.search,
                success:function(body){
                    //处理响应结果，此处的 body 就是表示一个博客的 js 对象
                    //1、更新标题
                    let titleDiv = document.querySelector('.containner-right .title');
                    titleDiv.innerHTML = body.title;
                    //2、更新日期
                    let dateDiv = document.querySelector('.date');
                    dateDiv.innerHTML = body.postTime;
                    //3、更新博客正文
                    //此处，不应该直接把博客正文填充到这个标签里
                    editormd.markdownToHTML('content',{markdown: body.content});
    
                }
            });
        </script>

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

## 六、实现登录页 ##

![741ae58ebfa944d7a650aca6acf88b30.png][]

在此处输入用户名和密码，点击登录，就会触发一个 HTTP 请求

服务器验证用户名和密码，然后就可以根据结果判断是否登录成功，如果登录成功，就跳转到博客列表页

**当前，只是一个单纯的输入框，还不能提交请求，所以我们需要把它改成 form 表单**

### 1、约定前后端交互接口 ###

![9f3852e7d60f4b8696808f316ff1bbfc.png][]

### 2、修改前端代码 ###

把页面里加上 form 表单，使点击登录操作能够触发请求

> 1、加上 form 标签，把 input 都包裹进去
> 
> 2、input 加上 name 属性
> 
> 3、把按钮改成 input submit 类型

<div class="login-dialog">
                <form action="login" method="post">
                    <h3>登录</h3>
                    <div class="row">
                        <span>用户名</span>
                        <input type="text" id = "username" placeholder="手机号 / 邮箱" name="username">
                    </div>
                    <div class="row">
                        <span>密码</span>
                        <input type="password" id = "password" name="password">
                    </div>
                    <div class="row">
                        <input type="submit" id = "submit" value="登录"></button>
                    </div>
                </form>
            </div>

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

### 3、修改后端代码 ###

此处需要加个 Servlet 来处理登录请求

@WebServlet("/login")
    public class LoginServlet extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //设置请求的编码，告诉 servlet 按照什么格式来理解请求
            req.setCharacterEncoding("utf8");
            //设置响应的编码，告诉 servlet 按照什么格式来构造请求
            //resp.setCharacterEncoding("utf8");
            resp.setContentType("text/html;charset=utf8");
            //1、读取参数中的用户名和密码
            //注意！！如果用户名密码包含中文，此处的读取可能会乱码，所以设置一下 utf8
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            if (username == null || "".equals(username) || password == null || "".equals(password)){
                //登录失败
                String html = "<h3> 登陆失败！ 缺少 username 或者 password 字段! </h3>";
                resp.getWriter().write(html);
                return;
            }
            //2、读数据库，看看用户名是否存在并且密码是否匹配
            UserDao userDao = new UserDao();
            User user = userDao.selectByUsername(username);
            if (user ==null){
                //用户不存在
                String html = "<h3> 登陆失败！ 用户名 或 密码 错误！! </h3>";
                resp.getWriter().write(html);
                return;
            }
            if (!password.equals(user.getPassword())){
                //密码不对
                String html = "<h3> 登陆失败！ 用户名 或 密码 错误！! </h3>";
                resp.getWriter().write(html);
                return;
            }
            //3、如果用户名和密码验证通过，登录成功，接下来创建会话，使用该会话来保存用户信息
            HttpSession session = req.getSession(true);
            session.setAttribute("user",user);
            //4、进行重定向，跳转到博客列表页
            resp.sendRedirect("blog_list.html");
        }
    }

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

## 七、页面强制登录 ##

当用户访问 博客列表页/详情页/编辑页，要求用户必须使已经登录的状态

如果用户还未登录，就强制跳转到登录页面

**本质就是要求，想要使用系统，就得先登录**

**实现思路：**

> 在页面加载的时候，专门发起一个新的 ajax （一个页面里可以发起N个 ajax）
> 
> **以博客列表页为例：**
> 
> 先发一个请求获取到博客列表，再发送一个 ajax 获取用户的登录状态，如果用户已经登录了，就没事，如果未登录，则页面跳转到登录页

### 1、约定前后端交互接口 ###

![77fba832b89e48f0956e8999e35a7c2e.png][]

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

### 2、编写后端代码 ###

@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){
                //未登录,返回一个空的 user 对象
                User user = new User();
                String respJson = objectMapper.writeValueAsString(user);
                resp.getWriter().write(respJson);
                return;
            }
            User user = (User) session.getAttribute("user");
            if (user == null){
                user = new User();
                String respJson = objectMapper.writeValueAsString(user);
                resp.getWriter().write(respJson);
                return;
            }
            //确实成功去除了 user 对象，直接返回即可
            String respJson = objectMapper.writeValueAsString(user);
            resp.getWriter().write(respJson);
        }

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

### 3、实现前端代码 ###

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

## 八、显示用户信息 ##

![47d8d005f2be48118b8de98f72070943.png][]

这个用户信息，目前是已经被写死了的，我们希望能够让它动态生成一个用户信息

> 1、如果是博客列表页，此处显示登录用户的信息
> 
> 2、如果是博客详情页，此时现实的是该文章的作者

### 1、约定前后端交互接口 ###

![2dea71be41fc4cf7bb1fdd173e32f782.png][]

**博客列表页代码调整：**![ed954f8b574f4a4aaa0c1d6e627ae125.png][]

对于博客详情页的代码，我们重新写一个 servlet

**什么时候需要新写一个 servlet？**

主要看到当前请求的路径，是新的还是已经有了的

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

### 2、编写后端代码 ###

@WebServlet("/author")
    public class authorServlet 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){
                resp.setContentType("text/html;charset=utf8");
                resp.getWriter().write("参数非法，缺少 blogId ");
                return;
            }
            //根据 blogId 查询 Blog 对象
            BlogDao blogDao = new BlogDao();
            Blog blog = blogDao.selectById(Integer.parseInt(blogId));
            if (blog == null){
                //博客不存在
                resp.setContentType("text/html;charset=utf8");
                resp.getWriter().write("没有找到指定博客：blogId = " + blogId);
                return;
            }
            //根据 blog 中的 userId 找到对应的用户信息
            UserDao userDao = new UserDao();
            User author = userDao.selectById(blog.getUserId());
            String respJson = objectMapper.writeValueAsString(author);
            resp.setContentType("application/json;charset=utf8");
            resp.getWriter().write(respJson);
        }
    }

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

### 3、编写前端代码 ###

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

## 九、退出登录状态 ##

这里的注销指的是退出登录状态，不是指删除账户

**判定登录状态：**

> 1、看是否能查到 http session 对象
> 
> 2、看 session 对象里有没有 user 对象

实现退出登录，要么是把 http session 给干掉，要么把 user 给干掉，二者选其一即可

如果有会话，但是没有 user 对象，也视为未登录

如果想要干掉 http session 会比较麻烦，所以我们选择干掉 user 对象

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

### 1、约定前后端接口 ###

![c8c5269f85da432db64e1d03a84fd938.png][]

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

### 2、编写后端代码 ###

@WebServlet("/logout")
    public class logoutServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            HttpSession httpSession = req.getSession(false);
            if (httpSession == null){
                //未登录状态
                resp.setContentType("text/html;charset=utf8");
                resp.getWriter().write("当前未登录！");
                return;
            }
            httpSession.removeAttribute("user");
            resp.sendRedirect("login.html");
        }
    }

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

### 3、编写前端代码 ###

![4ba62cad0c68451fbaa85579c570e083.png][]

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

## 十、发布博客 ##

### 1、约定前后端交互接口 ###

使用 form 表单，得让页面中多个 form 标签，同时得让 form 里面能够感知到博客的内容

![c70fc031cb664c5f9476a8e53e3d9719.png][]

### ![ed95960b6740452690d2d814cd044d71.png][] ###

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

### 2、编写服务器代码 ###

@Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //发布博客
            //读取请求，构造出 blog 对象，插入数据库
            HttpSession httpSession = req.getSession(false);
            if (httpSession == null){
                resp.setContentType("text/html;charset=utf8");
                resp.getWriter().write("当前未登录，无法发布博客");
                return;
            }
            User user = (User) httpSession.getAttribute("user");
            if (user == null){
                resp.setContentType("text/html;charset=utf8");
                resp.getWriter().write("当前未登录，无法发布博客");
                return;
            }
            //确保登录之后，就可以把作者给拿到了
    
            //获取博客标题和正文
            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 对象
            Blog blog = new Blog();
            blog.setTitle(title);
            blog.setContent(content);
            blog.setUserId(user.getUserId());
            //发布时间
            blog.setPostTime(new Timestamp(System.currentTimeMillis()));
            //插入数据
            BlogDao blogDao = new BlogDao();
            blogDao.add(blog);
            
            //跳转到博客列表页
            resp.sendRedirect("blog_list.html");
        }

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

### 3、编写客户端代码 ###

对代码进行调整：

> 1、加上 form 标签
> 
> 2、给 input 标签加上 name 属性
> 
> 3、把 button 改成 input 标签，并且 type 为 submit
> 
> 4、editor.md 文档要求写法：加上 textarea
> 
> **editor.md对于 form 表单也是支持的，就是可以在 form 里放一个隐藏的 textarea，editor.md 就会自动的把用户输入的 markdown 内容填写到 textarea 里，后续点击 submit就能自动提交**

![4f6b134313c740329cae83673de5c146.png][]

此时，我们再运行代码看一下结果![9b1417810c5f4b88b6eefc006ad454c9.png][]

这时候我们发现了一个问题：代码改完之后，编辑器发生了基因突变

**前端代码样式有问题，我们只能通过观察 chorme 开发者工具来找问题**

我们可以看到，是当前的 form 出现了问题![ebf52ddea61f4c47b8820d28b62cf163.png][]

**具体分析如下：**![e6d2e693d4d1403595da6fcb4e7cf20f.png][]

**解决方案：给 form 设置高度**

![e38a297dbbb5499c8aaa830d69ee0aee.png][]

此时，我们就可以正常发布博客了，但是此时却出现了乱码的问题：

![7eda8e2ed7984c148d4e942689403d6f.png][]

**乱码有两种情况：**

> 1、提交博客的时候乱码
> 
> 2、获取博客的时候乱码

我们只需要看一下数据库，就知道是哪种情况；

![5f3c24057a654c20b678f15b8b1d328b.png][]

**这时候就可以发现，是提交的时候乱码了**

![fabca10b5e0a428b9057d08cfa992e82.png][]

**注意：在获取标题和正文的时候，需要指定请求的字符集，也就是告诉 servlet 按照哪种字符集来进行解析请求**

![bc0da34c6b2842b8b910177e3eb8ecf1.png][]

此时，再次点击提交，就可以正常的发布博客了

![5d921998a1ce4ee0950aa3d2b2a14958.png][]

[24a293251efe46a19cba11404c6279f0.png]: https://img-blog.csdnimg.cn/24a293251efe46a19cba11404c6279f0.png
[668321bfa1c04b27b397d7d39b39ffb0.png]: https://img-blog.csdnimg.cn/668321bfa1c04b27b397d7d39b39ffb0.png
[7b96c75571cb44e2b4ce96c03379cf00.png]: https://img-blog.csdnimg.cn/7b96c75571cb44e2b4ce96c03379cf00.png
[7cb0f7b892f044b4b78fe75b2b10741c.png]: https://img-blog.csdnimg.cn/7cb0f7b892f044b4b78fe75b2b10741c.png
[4bafc831545c4684a7d3eae0bb3c6e3e.png]: https://img-blog.csdnimg.cn/4bafc831545c4684a7d3eae0bb3c6e3e.png
[d46024447743409885e4922f17c25f08.png]: https://img-blog.csdnimg.cn/d46024447743409885e4922f17c25f08.png
[798965c5c26e48afa9d887d8122ac8ab.png]: https://img-blog.csdnimg.cn/798965c5c26e48afa9d887d8122ac8ab.png
[5244019d5ebd4e6db66818a270518088.png]: https://img-blog.csdnimg.cn/5244019d5ebd4e6db66818a270518088.png
[ee4d89824fb840e88090df70a7464a97.png]: https://img-blog.csdnimg.cn/ee4d89824fb840e88090df70a7464a97.png
[6d3bfe61c61e4348972b98d9337a69e9.png]: https://img-blog.csdnimg.cn/6d3bfe61c61e4348972b98d9337a69e9.png
[f4965ee3352240e0bb6f0c63770eb519.png]: https://img-blog.csdnimg.cn/f4965ee3352240e0bb6f0c63770eb519.png
[ffcfec38376641fbb21a99c4590071d6.png]: https://img-blog.csdnimg.cn/ffcfec38376641fbb21a99c4590071d6.png
[fb8a5236fdef4a1e940b94709c4409ff.png]: https://img-blog.csdnimg.cn/fb8a5236fdef4a1e940b94709c4409ff.png
[15cb89b5cb5a44ac82d8be508f3c2d80.png]: https://img-blog.csdnimg.cn/15cb89b5cb5a44ac82d8be508f3c2d80.png
[95b9a319bbf143308ce6ac0957aa364b.png]: https://img-blog.csdnimg.cn/95b9a319bbf143308ce6ac0957aa364b.png
[4bda09c72d0f4e9383906538d63c3b1a.png]: https://img-blog.csdnimg.cn/4bda09c72d0f4e9383906538d63c3b1a.png
[76573735203f440da5dab344a81d0d34.png]: https://img-blog.csdnimg.cn/76573735203f440da5dab344a81d0d34.png
[ff822870aa7a4d3683e6bde1e760a846.png]: https://img-blog.csdnimg.cn/ff822870aa7a4d3683e6bde1e760a846.png
[7a716c597de7409aae6a07dc9d24f277.png]: https://img-blog.csdnimg.cn/7a716c597de7409aae6a07dc9d24f277.png
[70a32c2063274f01a8ddf73e194b4ca8.png]: https://img-blog.csdnimg.cn/70a32c2063274f01a8ddf73e194b4ca8.png
[5a733918220f4c6fad1e023e7de3dc3c.png]: https://img-blog.csdnimg.cn/5a733918220f4c6fad1e023e7de3dc3c.png
[c5b8acb45c854dd8ad084c4ccaecc3fd.png]: https://img-blog.csdnimg.cn/c5b8acb45c854dd8ad084c4ccaecc3fd.png
[655ef8be2c6b444696605fddea692a9d.png]: https://img-blog.csdnimg.cn/655ef8be2c6b444696605fddea692a9d.png
[47a78eb10b8e4703834b8aa4a0379811.png]: https://img-blog.csdnimg.cn/47a78eb10b8e4703834b8aa4a0379811.png
[3e199e2552154d49bb30ea1ad744fb53.png]: https://img-blog.csdnimg.cn/3e199e2552154d49bb30ea1ad744fb53.png
[589b30b39aa64db69d4e16afaa0b1bde.png]: https://img-blog.csdnimg.cn/589b30b39aa64db69d4e16afaa0b1bde.png
[840e8d2b2a5f4008a30edb4648f11c7d.png]: https://img-blog.csdnimg.cn/840e8d2b2a5f4008a30edb4648f11c7d.png
[23393edc1c5a45a58fb29357eb5a2c88.png]: https://img-blog.csdnimg.cn/23393edc1c5a45a58fb29357eb5a2c88.png
[a49abc75832c46de83a99afa1fab57f5.png]: https://img-blog.csdnimg.cn/a49abc75832c46de83a99afa1fab57f5.png
[741ae58ebfa944d7a650aca6acf88b30.png]: https://img-blog.csdnimg.cn/741ae58ebfa944d7a650aca6acf88b30.png
[9f3852e7d60f4b8696808f316ff1bbfc.png]: https://img-blog.csdnimg.cn/9f3852e7d60f4b8696808f316ff1bbfc.png
[77fba832b89e48f0956e8999e35a7c2e.png]: https://img-blog.csdnimg.cn/77fba832b89e48f0956e8999e35a7c2e.png
[47d8d005f2be48118b8de98f72070943.png]: https://img-blog.csdnimg.cn/47d8d005f2be48118b8de98f72070943.png
[2dea71be41fc4cf7bb1fdd173e32f782.png]: https://img-blog.csdnimg.cn/2dea71be41fc4cf7bb1fdd173e32f782.png
[ed954f8b574f4a4aaa0c1d6e627ae125.png]: https://img-blog.csdnimg.cn/ed954f8b574f4a4aaa0c1d6e627ae125.png
[c8c5269f85da432db64e1d03a84fd938.png]: https://img-blog.csdnimg.cn/c8c5269f85da432db64e1d03a84fd938.png
[4ba62cad0c68451fbaa85579c570e083.png]: https://img-blog.csdnimg.cn/4ba62cad0c68451fbaa85579c570e083.png
[c70fc031cb664c5f9476a8e53e3d9719.png]: https://img-blog.csdnimg.cn/c70fc031cb664c5f9476a8e53e3d9719.png
[ed95960b6740452690d2d814cd044d71.png]: https://img-blog.csdnimg.cn/ed95960b6740452690d2d814cd044d71.png
[4f6b134313c740329cae83673de5c146.png]: https://img-blog.csdnimg.cn/4f6b134313c740329cae83673de5c146.png
[9b1417810c5f4b88b6eefc006ad454c9.png]: https://img-blog.csdnimg.cn/9b1417810c5f4b88b6eefc006ad454c9.png
[ebf52ddea61f4c47b8820d28b62cf163.png]: https://img-blog.csdnimg.cn/ebf52ddea61f4c47b8820d28b62cf163.png
[e6d2e693d4d1403595da6fcb4e7cf20f.png]: https://img-blog.csdnimg.cn/e6d2e693d4d1403595da6fcb4e7cf20f.png
[e38a297dbbb5499c8aaa830d69ee0aee.png]: https://img-blog.csdnimg.cn/e38a297dbbb5499c8aaa830d69ee0aee.png
[7eda8e2ed7984c148d4e942689403d6f.png]: https://img-blog.csdnimg.cn/7eda8e2ed7984c148d4e942689403d6f.png
[5f3c24057a654c20b678f15b8b1d328b.png]: https://img-blog.csdnimg.cn/5f3c24057a654c20b678f15b8b1d328b.png
[fabca10b5e0a428b9057d08cfa992e82.png]: https://img-blog.csdnimg.cn/fabca10b5e0a428b9057d08cfa992e82.png
[bc0da34c6b2842b8b910177e3eb8ecf1.png]: https://img-blog.csdnimg.cn/bc0da34c6b2842b8b910177e3eb8ecf1.png
[5d921998a1ce4ee0950aa3d2b2a14958.png]: https://img-blog.csdnimg.cn/5d921998a1ce4ee0950aa3d2b2a14958.png