实现获取博客列表页功能
此处就需要打通前后端交互的操作。
博客列表页在加载的时候,网页通过 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='查看全文 >>'
//点击不同的博客,要跳转到不同的博客详情页
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>