博客系统（二）——实现获取博客列表页功能

实现获取博客列表页功能

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

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

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

1.约定前后端交互接口

（在博客列表页，前端要发送什么请求，后端返回什么响应）

约定前端发的请求是GET，路径是/blog

后端返回的响应使用json格式来组织数据

（这里的前后端交互接口的约定方式，是可以随心所欲的~）

2.实现后端代码

创建BlogServlet类

import com.fasterxml.jackson.databind.ObjectMapper;
import model.Blog;
import model.BlogDao;
import model.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet("/blog")
public class BlogServlet extends HttpServlet {
    private ObjectMapper objectMapper=new ObjectMapper();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        BlogDao blogDao=new BlogDao();
        String blogId=req.getParameter("blogId");
        String respJson="";
        //请求中没有query string，请求来自博客列表页
        //查询数据库，得到博客列表页
        if(blogId==null){
            List<Blog> blogs= null;
            blogs = blogDao.getBlogs();
            respJson=objectMapper.writeValueAsString(blogs);
        }
        //请求中存在query string，请求来自博客详情页
        else{
            Blog blog= null;
            blog = blogDao.getBlog(Integer.parseInt(blogId));
            respJson=objectMapper.writeValueAsString(blog);
        }
        System.out.println("respJson"+respJson);
        resp.setContentType("application/json;charset=utf8");
        resp.getWriter().write(respJson);
    }

}

3.实现前端代码

打开blog_list.html

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

（1）引入jQuery

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

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

(3) 通过获取到的博客列表的数据构造页面内容

<script>
        //js中定义函数，使用function关键字，不必写返回值类型，（）也是形参列表，不必写类型
        function getBlogs() {
            $.ajax({
                type:'get',
                url:'blog',
                success:function(body){
                    let containerDiv=document.querySelector('.container-right');
                    for (let i = 0; i < body.length; i++) {
                        let blog=body[i];
                        //构建整个博客
                        let blogDiv=document.createElement('div');
                        blogDiv.className='blog';
                        //构建标题
                        let titleDiv=document.createElement('div');
                        titleDiv.className='title';
                        titleDiv.innerHTML=blog.title;
                        //构建发布时间
                        let dateDiv=document.createElement('div');
                        dateDiv.className='date';
                        dateDiv.innerHTML=blog.postTime;
                        //构建博客的摘要
                        let descDiv=document.createElement('div');
                        descDiv.className='desc';
                        descDiv.innerHTML=blog.content;
                        //构造查看全文按钮
                        let a=document.createElement("a");
                        a.innerHTML='查看全文 &gt;&gt;'
                        //点击不同的博客，要跳转到不同的博客详情页
                        a.href='blog_detail.html?blogId='+blog.blogId;

                        //组装
                        blogDiv.appendChild(titleDiv);
                        blogDiv.appendChild(dateDiv);
                        blogDiv.appendChild(descDiv);
                        blogDiv.appendChild(a);
                        //把blogDiv组装到页面上
                        containerDiv.appendChild(blogDiv);
                                        }
                }
            })

        }
        //定义完函数，还需要调用，才能执行
        getBlogs();
</script>