博客系统后端设计(三) - 实现获取博客列表页功能

蔚落 2023-10-09 21:39 58阅读 0赞

#### 文章目录 ####

*  实现获取博客列表页功能
 *   *  1. 约定前后端交互接口
     *  2. 实现后端代码
     *  3. 实现前端代码
     *  4. 测试代码
     *  5. 涉及到的两个 Bug

**博客系统的后端设计：**

[1.准备工作与设计数据库][1.]

[2.数据库的封装操作][2.]

## 实现获取博客列表页功能 ##

![730ce94202a0487797c1de5e45755830.png_pic_center][]  
  
当前的博客列表上的数据都是写死的，符合逻辑的做法是，通过数据库读取数据后显示到页面上。

此处就需要打通前后端交互的操作。  
让博客列表页在加载的时候，通过 **Ajax** 给服务器发一个请求，服务器查数据库获取到博客列表页数据，再返还给服务器，浏览器再根据数据构造页面的内容。

这样的交互过程也称为 前后端分离  
**意思是前端只向后端请求数据，而不请求具体的页面，后端也仅仅是返回数据。**

这样设计的目的就是为了前端和后端更加的解耦，由浏览器进行具体的页面渲染，  
减少了服务器的工作量。

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

![889da234b27546089bd36f1a37baf4c7.png_pic_center][]

> 我们约定前端发起的 **请求** 是 **GET**，路径是 **/blog**  
> 后端返回的 **响应** 使用的是 **json** 格式的数据来组织

![79fce4661dd146a0a6151252f370f648.png_pic_center][]  
  
以上就是一个 json 格式的数组。

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

此时创建一个新的 **BlogServlet** 类。

@WebServlet("/blog")
    public class BlogServlet extends HttpServlet {
        
        private ObjectMapper objectMapper = new ObjectMapper();
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            // 1.先查询数据库
            BlogDao blogDao = new BlogDao();
            // 使用 List 来表示
            List<Blog> blogs = blogDao.selectAll(); // 调用方法直接查询出全部的博客列表
            // 2.使用 ObjectMapper 将 blogs 转成符合要求的 json 格式的字符串
            String respJson = objectMapper.writeValueAsString(blogs);
            // 写回去
            resp.setContentType("application/json; charset=utf8");
            resp.getWriter().write(respJson);
        }
    }

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

按照以下步骤用 vscode 打开这个博客列表页的文件。  
  
![1c340bc0ad1147619e7278161d455aa9.png_pic_center][]  
  
在博客列表页加载过程中，触发 ajax ，访问服务器中的数据，再把拿到的数据构造到页面中。  
  
将原来博客列表页的文章摘抄只留下一篇作为一个样例，这个样例在代码写完的时候也可以删除。  
  
![51251b59d4f24bb28aa67102af910cac.png_pic_center][]  
  
![c1ab266018004f858b60a60ea80c6122.png_pic_center][]  
  
可以看到此时的博客就只有一篇了。  
  
  
(1) 引入 **jQuery**  
  
在前端代码下使用一个 script 标签，在这个标签里引入 jQuery。  
  
![3acfd998e857417c8f35092c2bf204aa.png_pic_center][]  
  
  
(2) 在页面加载的时候，向服务器发起请求，获取博客列表的数据

上面的 type 和 url 分别是 get 和 blog ，这是因为这些都是在之前前后端交互接口中就约定好了。  
  
  
(3) 构造页面内容

这里所构造的页面内容要参考之前写好的 html 代码。  
  
![252400bffc06413d840426c74a5d9c2b.png_pic_center][]  
  
根据上面的图片可以看到，有 5 个需要构造的内容。  
  
① 构造整个博客

let blogDiv = document.createElement('div');
    blogDiv.className = 'blog';

因为整个博客是一个 div 标签，因此这里的 **createElement** 里是一个 div。  
而它的 类名 是 blog，因此这里的 clasName 为 blog。  
  
  
② 构造标题

let titleDiv = document.createElement('div');
    titleDiv.className = 'title';
    // 把标题获取到并且设置进去
    titleDiv.innerHTML = blog.title;
    // 将构造好的标题添加进整个博客页面
    blogDiv.appendChild(titleDiv);

因为 标题 是一个 div 标签，因此这里的 **createElement** 里是一个 div。  
而它的 类名 是 title，因此这里的 clasName 为 title。  
  
  
③ 构造发布时间

let dateDiv = document.createElement('div');
    dateDiv.className = 'date';
    dateDiv.innerHTML = blog.postTime;
    blogDiv.appendChild(dateDiv);

这里的代码和上面的含义是一致的，只不过在第三条语句中的 **blog.postTime**。  
因为在前后端交互接口中约定好了，发布时间是 **postTime**。  
  
![d65217ad178e49f686acc9c8c50b19a0.png_pic_center][]  
  
  
④ 构造博客摘要

let descDiv = document.createElement('div');
    descDiv.className = 'desc';
    descDiv.innerHTML = blog.content；
    blogDiv.appendChild(descDiv);

这里的 **blog.content** 是由于前后端交互接口约定好了。  
  
![7b614ed3b6b24b26ae7b4de317768878.png_pic_center][]  
  
  
⑤ 构造查看全文按钮

let button = document.createElement('a');
    button.innerHTML = '查看全文 >>';
    // 期望点击按钮后会跳转到博客详情页
    // 为了让博客详情页知道点了哪篇博客，把 blogId传过去
    button.href = 'blog.detail.html?blogId=' + blog.blogId;
    blogDiv.appendChild(button);

**blog.detail.html** 这是 博客详情页 的文件名，通过 blogId 来获取具体哪一篇博客。  
  
![92ef51bba24f426d808e342fd0712b3f.png_pic_center][]  
  
此时的 blogDiv 只是创建出来了，还没有把它放到下图圈出的 div 里面。  
  
![0ad9d8b1c2e34ce78bbeff34be7a07eb.png_pic_center][]  
  
  
此时需要先找到 父元素，上述图片中的 **container-right** 就是父元素。

首先在 for 循环的前面加上下面的代码。

let containerRight = document.querySelector('.container-right');

接着在 for 的里面加上下面的代码

// 把 blogDiv 加到父元素中
     containerRight.appendChild(blogDiv);

整体代码

此时 博客列表页 就实现完成了。

### 4. 测试代码 ###

首先要在数据库中插入测试数据。  
  
![1ece1a66d7544dd987e2097ce1fdf0ec.png_pic_center][]  
  
在地址栏中输入 **http://127.0.0.1:8080/blog-system/blog.list.html**。

blog.list.html 是博客列表页的文件名，blog-system 是项目名称。  
  
![2724aa4bf5c745ae81e3768fb7f4197f.png_pic_center][]  
  
可以看到此时在数据库插入的数据就显示到了博客列表页中。  
  
此时点击 “查看全文” 按钮，就会自动跳转到 博客详情页。  
  
![639a26c38d794532adadee0f4c5cec7f.png_pic_center][]  
  
此时显示的就是博客详情页界面了。  
  
![41c02a7301ee4f249dbbd8b593e20c93.png_pic_center][]  
  
![5614a6972c6547df93ef4266bdb1dc0f.png_pic_center][]  
  
代码中实现的和跳转到博客详情页之后得地址栏是相同的。

### 5. 涉及到的两个 Bug ###

1、**时间戳**  
  
![928f3f38697c40c69a4fc025fa396b41.png_pic_center][]  
  
可以看到此时显示的是一个时间戳，而不是一个格式化时间。  
  
  
2、**顺序**  
  
按照书写博客的逻辑，应该是先完成的博客在下面，后完成的在上面。  
但是此时的顺序是相反的  
  
![b0681eace28d47439ec43512deab7c9a.png_pic_center][]  
  
根据上面在数据库中插入的结果可以看出，博客列表页展示出来的效果的顺序的确是不符合逻辑的。  
  
  
(1) **顺序问题的解决办法**  
  
在 **BlogDao** 类(在封装数据库的操作中) 中找到 **selectAll** 方法，将这个方法中的 sql 语句更改为以下语句：

String sql = "select * from blog order by postTime desc";

也就是在 blog 后面添加上 **order by postTime desc**。  
order by postTime 表示的是 **按照发布时间排序**，desc 表示的是 排的是 **降序**。  
  
  
(2) **时间戳问题的解决办法**  
  
搜索 **SimpleFormatter**，查一下它的格式。  
  
![caa079037e3c4b3b927c202d052294f5.png_pic_center][]  
  
接下来在 Blog 类中，添加上下面的这段代码。

public String getPostTime() {
        
         // 把时间戳转成 格式化 时间
         SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
         return simpleDateFormat.format(postTime);
     }

重启服务器后在地址栏输入路径。  
  
![1694b0aaea6f4c3daf6e5f2c3e45f176.png_pic_center][]  
  
可以看到此时的发布时间和顺序就已经正确了，此时博客列表页就已经全部完成了。

[1.]: https://blog.csdn.net/m0_63033419/article/details/130468543?spm=1001.2014.3001.5501
[2.]: https://blog.csdn.net/m0_63033419/article/details/130472825?spm=1001.2014.3001.5501
[730ce94202a0487797c1de5e45755830.png_pic_center]: https://img-blog.csdnimg.cn/730ce94202a0487797c1de5e45755830.png#pic_center
[889da234b27546089bd36f1a37baf4c7.png_pic_center]: https://img-blog.csdnimg.cn/889da234b27546089bd36f1a37baf4c7.png#pic_center
[79fce4661dd146a0a6151252f370f648.png_pic_center]: https://img-blog.csdnimg.cn/79fce4661dd146a0a6151252f370f648.png#pic_center
[1c340bc0ad1147619e7278161d455aa9.png_pic_center]: https://img-blog.csdnimg.cn/1c340bc0ad1147619e7278161d455aa9.png#pic_center
[51251b59d4f24bb28aa67102af910cac.png_pic_center]: https://img-blog.csdnimg.cn/51251b59d4f24bb28aa67102af910cac.png#pic_center
[c1ab266018004f858b60a60ea80c6122.png_pic_center]: https://img-blog.csdnimg.cn/c1ab266018004f858b60a60ea80c6122.png#pic_center
[3acfd998e857417c8f35092c2bf204aa.png_pic_center]: https://img-blog.csdnimg.cn/3acfd998e857417c8f35092c2bf204aa.png#pic_center
[252400bffc06413d840426c74a5d9c2b.png_pic_center]: https://img-blog.csdnimg.cn/252400bffc06413d840426c74a5d9c2b.png#pic_center
[d65217ad178e49f686acc9c8c50b19a0.png_pic_center]: https://img-blog.csdnimg.cn/d65217ad178e49f686acc9c8c50b19a0.png#pic_center
[7b614ed3b6b24b26ae7b4de317768878.png_pic_center]: https://img-blog.csdnimg.cn/7b614ed3b6b24b26ae7b4de317768878.png#pic_center
[92ef51bba24f426d808e342fd0712b3f.png_pic_center]: https://img-blog.csdnimg.cn/92ef51bba24f426d808e342fd0712b3f.png#pic_center
[0ad9d8b1c2e34ce78bbeff34be7a07eb.png_pic_center]: https://img-blog.csdnimg.cn/0ad9d8b1c2e34ce78bbeff34be7a07eb.png#pic_center
[1ece1a66d7544dd987e2097ce1fdf0ec.png_pic_center]: https://img-blog.csdnimg.cn/1ece1a66d7544dd987e2097ce1fdf0ec.png#pic_center
[2724aa4bf5c745ae81e3768fb7f4197f.png_pic_center]: https://img-blog.csdnimg.cn/2724aa4bf5c745ae81e3768fb7f4197f.png#pic_center
[639a26c38d794532adadee0f4c5cec7f.png_pic_center]: https://img-blog.csdnimg.cn/639a26c38d794532adadee0f4c5cec7f.png#pic_center
[41c02a7301ee4f249dbbd8b593e20c93.png_pic_center]: https://img-blog.csdnimg.cn/41c02a7301ee4f249dbbd8b593e20c93.png#pic_center
[5614a6972c6547df93ef4266bdb1dc0f.png_pic_center]: https://img-blog.csdnimg.cn/5614a6972c6547df93ef4266bdb1dc0f.png#pic_center
[928f3f38697c40c69a4fc025fa396b41.png_pic_center]: https://img-blog.csdnimg.cn/928f3f38697c40c69a4fc025fa396b41.png#pic_center
[b0681eace28d47439ec43512deab7c9a.png_pic_center]: https://img-blog.csdnimg.cn/b0681eace28d47439ec43512deab7c9a.png#pic_center
[caa079037e3c4b3b927c202d052294f5.png_pic_center]: https://img-blog.csdnimg.cn/caa079037e3c4b3b927c202d052294f5.png#pic_center
[1694b0aaea6f4c3daf6e5f2c3e45f176.png_pic_center]: https://img-blog.csdnimg.cn/1694b0aaea6f4c3daf6e5f2c3e45f176.png#pic_center