博客系统后端设计(四) - 实现获取博客详情页功能

灰太狼 2023-10-09 22:36 97阅读 0赞

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

*  实现获取博客详情页功能
 *   *  约定前后端接口
     *  实现后端代码
     *  实现前端代码

## 实现获取博客详情页功能 ##

在 博客列表页 点击 “查看全文” 按钮，就能跳转到博客详情页中。  
跳转过去之后，在博客详情页中发起一个 **ajax**，从服务器获取到当前博客的具体内容。  
  
![fd5af4321ca344ecb4507d4b236ae357.png_pic_center][]  
  
通过 **blog.detail.html** 再去发一个 ajax 请求，从服务器获取到博客的详情数据。

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

> 此时约定请求是 GET，路径是 /blog?blogId=1  
> 响应也是一个 json 格式的，但是不是一个数组了，**HTTP/1.1 200 OK**

![50cdf7403262408d945d456e33b7cd78.png_pic_center][]  
  
因为在博客详情页只需要展示一篇博客，因此不需要一个数组，只包含一篇博客即可。  
而且因为此处展示的是一篇博客的详情页，因此，不需要像列表页一样对文章进行截断。  
  
此处的路径可以和博客列表页相同也可以不相同。  
如果相同，就直接在 **BlogServlet**(在实现博客列表页功能中)类中修改代码即可。  
如果是不同的路径，重新创建一个类，在新的类中实现功能即可。  
  
之前的博客列表，请求里没有 **query string**，此处的博客详情是带有 **query string**。  
如果存在，就返回指定博客的详情页；如果不存在，就返回把博客列表页。

### 实现后端代码 ###

此处我们采用与博客列表页相同的路径，此时在 **BlogServlet** 类中修改代码即可。

@WebServlet("/blog")
    public class BlogServlet extends HttpServlet {
        
        private ObjectMapper objectMapper = new ObjectMapper();
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            // 尝试获取 queryString 里的 blogId 字段
            BlogDao blogDao = new BlogDao();
            String blogId = req.getParameter("blogId");
            if (blogId == null) {
        
                // queryString 不存在，转化为符合要求的字符串
                List<Blog> blogs = blogDao.selectAll(); // 调用方法直接查询出全部的博客列表
                // 使用 ObjectMapper 将 blogs 转成符合要求的 json 格式的字符串
                String respJson = objectMapper.writeValueAsString(blogs);
                resp.setContentType("application/json; charset=utf8");
                resp.getWriter().write(respJson);
            } else {
        
                // queryString 存在，此时请求获取的是指定 id 的博客
                Blog blog = blogDao.selectById(Integer.parseInt(blogId));
                String respJson = objectMapper.writeValueAsString(blog);
                resp.setContentType("application/json; charset=utf8");
                resp.getWriter().write(respJson);
            }
        }
    }

如果 queryString 不存在，要显示出来的是所有的博客，因此，调用的方法是 **selectAll**。  
如果 queryString 存在，要显示的是具体的某一篇博客，因此，调用的方法是 **selectById**，  
也就是根据博客 id 来查找具体是哪一篇博客。

String blogId = req.getParameter("blogId");

以上这条语句中的 blogId 看起来是一个整数，但是实际上 **getParameter**返回的是一个字符串。  
只能在后续使用的时候，手动转成 int。

Blog blog = blogDao.selectById(Integer.parseInt(blogId));

通过以上代码中的 **Integer.parseInt(blogId)**，将 blogId 转为 int，再通过 selectById 查找。

### 实现前端代码 ###

![b8a49cce88194bac84e88611a9dc6789.png_pic_center][]  
  
选择上面的 **blog.detail.html** 以 vscode 打开。  
  
![28c0e5978d8b4230b705479b53e457e9.png_pic_center][]

将博客的**正文、标题、发布时间**部分删除。  
  
  
(1) 在一个 script 标签里引入 jQuery。  
  
![d4e8b340013e4dbfadbc849a56659be5.png_pic_center][]  
  
  
(2) 使用一个新的 script 标签来发起请求。  
  
![e4e02aaeae884bd495d72d2f6fb6f295.png_pic_center][]  
  
这和之前约定好的是一样的，请求的类型是 get。

**location.search** 会获取到当前页面的 query string。  
  
打开开发者工具控制台，键入 **location.search**，就可以得到以下的路径。  
  
![3192369086c04462af17ef6216d15853.png_pic_center][]  
  
![619b9a5be6d24aa99e9abf6629c3c458.png_pic_center][]  
  
而这个路径就是具体的博客详情页的路径。  
  
  
(3) 更新博客标题  
  
![c44cd2e455454b338fb84e5265fbbf61.png_pic_center][]  
  
  
(4) 更新发布时间  
  
![a0d6217ced3442e18e9af7d16715ec0c.png_pic_center][]  
  
  
(5) 更新正文  
  
首先将 类选择器 更改为 id 选择器。  
  
![86082fa532e7495c99d842482c4fdd6a.png_pic_center][]  
  
当前写的博客，是使用 markdown 格式来组织的。  
  
比如博客的内容是  
  
![6f2f96a9071941969da914c03dc28287.png_pic_center][]  
  
当前的内容是带有一些 markdown 的符号的，但是最终显示到网页上的是经过渲染之后效果。  
  
![8a3cc17145484201b092e267c177aab0.png_pic_center][]  
  
以上就是一个 markdown 渲染前的情况。  
  
![6947430d5c5d48dab2cd568223605969.png_pic_center][]  
  
以上就是一个渲染后的效果，也就是最终显示在页面上的效果。  
  
此时可以使用 **editor.md** 对 markdown 内容进行转换。

具体转换的方式是， editor.md 提供了一个方法，editormd.markdownToHTML。  
这个方法把 markdown 字符串转成了 html 字符串。  
  
接下来是引入 **editor.md** 依赖  
  
![0e622a3da91c40c591892110453fd654.png_pic_center][]  
  
打开 blog.edit.html 文件，在这个文件里之前引入过 editor.md 依赖。

直接将以上代码复制到以下位置。  
  
![d491edd5732847289a78fcd4945339ca.png_pic_center][]

如下图以上这条语句可以放在最顶端。  
  
![306c461bb30d42df973d1e4a2cc294ef.png_pic_center][]  
  
![5c75be9630ef46919173188de17bdcf9.png_pic_center][]  
  
第一个参数描述的是 **有哪个标签相关联**，第二个参数描述 **针对哪个内容进行格式化转换**。  
  
**editormd** 里面有一个 api ，能把 markdown 格式的字符串转成 HTML  
输出到 \#content 这个标签内部了。  
  
现在前后端的代码就写完了，接下来启动服务器看看什么效果。  
  
完整代码

[fd5af4321ca344ecb4507d4b236ae357.png_pic_center]: https://img-blog.csdnimg.cn/fd5af4321ca344ecb4507d4b236ae357.png#pic_center
[50cdf7403262408d945d456e33b7cd78.png_pic_center]: https://img-blog.csdnimg.cn/50cdf7403262408d945d456e33b7cd78.png#pic_center
[b8a49cce88194bac84e88611a9dc6789.png_pic_center]: https://img-blog.csdnimg.cn/b8a49cce88194bac84e88611a9dc6789.png#pic_center
[28c0e5978d8b4230b705479b53e457e9.png_pic_center]: https://img-blog.csdnimg.cn/28c0e5978d8b4230b705479b53e457e9.png#pic_center
[d4e8b340013e4dbfadbc849a56659be5.png_pic_center]: https://img-blog.csdnimg.cn/d4e8b340013e4dbfadbc849a56659be5.png#pic_center
[e4e02aaeae884bd495d72d2f6fb6f295.png_pic_center]: https://img-blog.csdnimg.cn/e4e02aaeae884bd495d72d2f6fb6f295.png#pic_center
[3192369086c04462af17ef6216d15853.png_pic_center]: https://img-blog.csdnimg.cn/3192369086c04462af17ef6216d15853.png#pic_center
[619b9a5be6d24aa99e9abf6629c3c458.png_pic_center]: https://img-blog.csdnimg.cn/619b9a5be6d24aa99e9abf6629c3c458.png#pic_center
[c44cd2e455454b338fb84e5265fbbf61.png_pic_center]: https://img-blog.csdnimg.cn/c44cd2e455454b338fb84e5265fbbf61.png#pic_center
[a0d6217ced3442e18e9af7d16715ec0c.png_pic_center]: https://img-blog.csdnimg.cn/a0d6217ced3442e18e9af7d16715ec0c.png#pic_center
[86082fa532e7495c99d842482c4fdd6a.png_pic_center]: https://img-blog.csdnimg.cn/86082fa532e7495c99d842482c4fdd6a.png#pic_center
[6f2f96a9071941969da914c03dc28287.png_pic_center]: https://img-blog.csdnimg.cn/6f2f96a9071941969da914c03dc28287.png#pic_center
[8a3cc17145484201b092e267c177aab0.png_pic_center]: https://img-blog.csdnimg.cn/8a3cc17145484201b092e267c177aab0.png#pic_center
[6947430d5c5d48dab2cd568223605969.png_pic_center]: https://img-blog.csdnimg.cn/6947430d5c5d48dab2cd568223605969.png#pic_center
[0e622a3da91c40c591892110453fd654.png_pic_center]: https://img-blog.csdnimg.cn/0e622a3da91c40c591892110453fd654.png#pic_center
[d491edd5732847289a78fcd4945339ca.png_pic_center]: https://img-blog.csdnimg.cn/d491edd5732847289a78fcd4945339ca.png#pic_center
[306c461bb30d42df973d1e4a2cc294ef.png_pic_center]: https://img-blog.csdnimg.cn/306c461bb30d42df973d1e4a2cc294ef.png#pic_center
[5c75be9630ef46919173188de17bdcf9.png_pic_center]: https://img-blog.csdnimg.cn/5c75be9630ef46919173188de17bdcf9.png#pic_center