文章目录

实现获取博客列表页功能

博客系统的后端设计：

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

2.数据库的封装操作

实现获取博客列表页功能

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

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

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

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

1. 约定前后端交互接口

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

以上就是一个 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 打开这个博客列表页的文件。

在博客列表页加载过程中，触发 ajax ，访问服务器中的数据，再把拿到的数据构造到页面中。

将原来博客列表页的文章摘抄只留下一篇作为一个样例，这个样例在代码写完的时候也可以删除。

可以看到此时的博客就只有一篇了。

(1) 引入 jQuery

在前端代码下使用一个 script 标签，在这个标签里引入 jQuery。

(2) 在页面加载的时候，向服务器发起请求，获取博客列表的数据

 <script>
     // 在页面加载的时候，向服务器发起请求，获取博客列表的数据
     function getBlogs() {
    
    
         $.ajax({
    
    
             type: 'get',
             url: 'blog',
             success: function(body) {
    
    
                 // 响应的正文是一个 json 格式的字符串，此时已经被 jQuery 自动解析成一个 js 的对象数组了
                 // 此时直接 for 循环遍历即可
                 for (let blog of body) {
    
    
                     // 按照之前的写好的 html 代码构造页面内容
                        
                 }
             }
         })
     }
     
     // 记得调用方法
     getBlogs();
 </script>

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

(3) 构造页面内容

这里所构造的页面内容要参考之前写好的 html 代码。

根据上面的图片可以看到，有 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。

④ 构造博客摘要

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

这里的 blog.content 是由于前后端交互接口约定好了。

⑤ 构造查看全文按钮

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

blog.detail.html 这是博客详情页的文件名，通过 blogId 来获取具体哪一篇博客。

此时的 blogDiv 只是创建出来了，还没有把它放到下图圈出的 div 里面。

此时需要先找到父元素，上述图片中的 container-right 就是父元素。

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

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

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

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

整体代码

<script>
    // 在页面加载的时候，向服务器发起请求，获取博客列表的数据
    function getBlogs() {
    
    
        $.ajax({
    
    
            type: 'get',
            url: 'blog',
            success: function(body) {
    
    
                // 响应的正文是一个 json 格式的字符串，此时已经被 jQuery 自动解析成一个 js 的对象数组了
                // 此时直接 for 循环遍历即可
                for (let blog of body) {
    
    
                    // 按照之前的写好的 html 代码构造页面内容
                    let containerRight = document.querySelector('.container-right');
                    // 构造整个博客
                    let blogDiv = document.createElement('div');
                    blogDiv.className = 'blog';

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

                    // 构造博客摘要
                    let descDiv = document.createElement('div');
                    descDiv.className = 'desc';
                    descDiv.innerHTML = blog.content;
                    blogDiv.appendChild(descDiv);

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

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

    // 记得调用方法
    getBlogs();    
</script>

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

4. 测试代码

首先要在数据库中插入测试数据。

在地址栏中输入 http://127.0.0.1:8080/blog-system/blog.list.html。

blog.list.html 是博客列表页的文件名，blog-system 是项目名称。

可以看到此时在数据库插入的数据就显示到了博客列表页中。

此时点击 “查看全文” 按钮，就会自动跳转到博客详情页。

此时显示的就是博客详情页界面了。

代码中实现的和跳转到博客详情页之后得地址栏是相同的。

5. 涉及到的两个 Bug

1、时间戳

可以看到此时显示的是一个时间戳，而不是一个格式化时间。

2、顺序

按照书写博客的逻辑，应该是先完成的博客在下面，后完成的在上面。
但是此时的顺序是相反的

根据上面在数据库中插入的结果可以看出，博客列表页展示出来的效果的顺序的确是不符合逻辑的。

(1) 顺序问题的解决办法

在 BlogDao 类(在封装数据库的操作中) 中找到 selectAll 方法，将这个方法中的 sql 语句更改为以下语句：

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

也就是在 blog 后面添加上 order by postTime desc。
order by postTime 表示的是 按照发布时间排序，desc 表示的是排的是降序。

(2) 时间戳问题的解决办法

搜索 SimpleFormatter，查一下它的格式。

接下来在 Blog 类中，添加上下面的这段代码。

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

重启服务器后在地址栏输入路径。

可以看到此时的发布时间和顺序就已经正确了，此时博客列表页就已经全部完成了。

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