博客系统(二)——实现获取博客列表页功能

实现获取博客列表页功能

此处就需要打通前后端交互的操作。
博客列表页在加载的时候,网页通过 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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值