实现获取博客详情页功能

在博客列表页点击 “查看全文” 按钮，就能跳转到博客详情页中。
跳转过去之后，在博客详情页中发起一个 ajax，从服务器获取到当前博客的具体内容。

通过 blog.detail.html 再去发一个 ajax 请求，从服务器获取到博客的详情数据。

约定前后端接口

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

因为在博客详情页只需要展示一篇博客，因此不需要一个数组，只包含一篇博客即可。
而且因为此处展示的是一篇博客的详情页，因此，不需要像列表页一样对文章进行截断。

此处的路径可以和博客列表页相同也可以不相同。
如果相同，就直接在 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 查找。

实现前端代码

选择上面的 blog.detail.html 以 vscode 打开。

将博客的正文、标题、发布时间部分删除。

(1) 在一个 script 标签里引入 jQuery。

(2) 使用一个新的 script 标签来发起请求。

这和之前约定好的是一样的，请求的类型是 get。

location.search 会获取到当前页面的 query string。

打开开发者工具控制台，键入 location.search，就可以得到以下的路径。

而这个路径就是具体的博客详情页的路径。

(3) 更新博客标题

(4) 更新发布时间

(5) 更新正文

首先将类选择器更改为 id 选择器。

当前写的博客，是使用 markdown 格式来组织的。

比如博客的内容是

当前的内容是带有一些 markdown 的符号的，但是最终显示到网页上的是经过渲染之后效果。

以上就是一个 markdown 渲染前的情况。

以上就是一个渲染后的效果，也就是最终显示在页面上的效果。

此时可以使用 editor.md 对 markdown 内容进行转换。

具体转换的方式是， editor.md 提供了一个方法，editormd.markdownToHTML。
这个方法把 markdown 字符串转成了 html 字符串。

接下来是引入 editor.md 依赖

打开 blog.edit.html 文件，在这个文件里之前引入过 editor.md 依赖。

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<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>

直接将以上代码复制到以下位置。

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />

如下图以上这条语句可以放在最顶端。

第一个参数描述的是 有哪个标签相关联，第二个参数描述 针对哪个内容进行格式化转换。

editormd 里面有一个 api ，能把 markdown 格式的字符串转成 HTML
输出到 #content 这个标签内部了。

现在前后端的代码就写完了，接下来启动服务器看看什么效果。

完整代码

<script>
    $.ajax({
        type: 'get',
        url: 'blog' + location.search,
        success: function(body) {

            // 处理此处的响应结果，此处的 body 表示的就是一个博客 js 对象
            // 1.更新标题
            let titleDiv = document.querySelector('.container-right .title');
            titleDiv.innerHTML = body.title;
            // 2.更新日期
            let dateDiv = document.querySelector('.date');
            dateDiv.innerHTML = body.postTime;
            // 3.更新博客正文
            // 此处不应该直接把博客正文填充到这个标签里
            // 而是应该渲染后再填充
            editormd.markdownToHTML('contet', {markdown: body.content});
        }
    })
</script>