看完上一个章节,相信你已经掌握了一个高效无误地编写SQL的办法,学会了完成小项目的注册功能,对如何使用之前学过的一些知识有了一定的认识,今天我们继续学习,一起来搞懂前后端分离的套路。
猿进化是一个原创系列文章,帮助你从一只小白快速进化为一个猿人,更多精彩内容,敬请大家关注公主号猿人工厂,点击猿人养成获取!
在搞懂MVC框架原理一文中,上面这个MVC的模型图片大家应该有点印象了,客户端发起响应,服务端使用模板技术从当了view的角色,在服务端的应用服务器中渲染html,然后返回给客户端,客户端完成解析。
但实际上,对于浏览器而言,关心的只是html,css,js等元素,对于是谁返回给它的,它并不关心。浏览器解析html,完成样式渲染,加载运行脚本语言。在这个过程中,js是可以去改变页面结构的,也可以再次发起请求。那么问题就来了,js可以改变页面结构,那渲染页面html代码的事情,交给它不就完了?
从这个点考虑,前端脚本只用做两件事情就可以了——获取后端动态数据和改变html的页面结构。后端只用提供改变html的结构所需要的数据就好了。这样子,前端的开发人员可以只用关注前端的事情,后端的开发人员关注返回的数据,职责上明确了,程序的开发方式也就明确了。前端和后端程序的开发相对独立了,也就是所谓的前后端分离了。分离的是职责,是工作方式,具体使用什么技术,做到了就好,而不是框架,不是一堆技术名词……
返回静态页面的事情,可以交给web服务器,在这种静态文件的处理能力上,web服务器比应用服务器强悍多了。浏览器获取到web服务器返回的静态资源,html,css,js……然后在渲染的过程中,js通常发起一个异步请求,到后端获取数据,至于为什么后端应用服务器中的程序返回JSON格式的数据,其实只是JSON是一种比较方便的能够序列化对象数据的格式而已,用其他的也可以,只是JSON格式的数据和javascript的对象和数组可以方便转换,用着比较方便。
这样做了之后,页面还可以保留一些静态节点,即使后端程序挂了,这些静态节点的存在,也不影响页面的展示功能。
动态导航栏
导航栏属于公共头部的一部分,导航栏的内容,实际上属于ul标签下的li标签。想要动态的展示导航栏的内容,需要从数据库里查询分类数据(查询travel_category表),可以使用json的方式返回。页面需要解析json数据,拼接成导航内容的,然后将内容插入到ul标签下即可。
后端代码
package com.pz.route.dao;
importjava.util.List;
importcom.pz.route.domain.TravelCategory;
/**
*
* @author pangzi
*
*/
public interface TravelCategoryDao {
/**
* 查询所有
* @return
*/
public List<TravelCategory>findAllTravelCategory();
}
public class TravelCategoryDaoImpl implements TravelCategoryDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public List<TravelCategory>findAllTravelCategory() {
String sql = "select travel_cid,travel_name fromtravel_category ";
returntemplate.query(sql,newBeanPropertyRowMapper<TravelCategory>(TravelCategory.class));
}
}
package com.pz.route.service;
import java.util.List;
import com.pz.route.domain.TravelCategory;
public interface TravelCategoryService {
public List<TravelCategory>findAll();
}
package com.pz.route.service.impl;
import java.util.List;
import com.pz.route.dao.TravelCategoryDao;
import com.pz.route.dao.impl.TravelCategoryDaoImpl;
import com.pz.route.domain.TravelCategory;
import com.pz.route.service.TravelCategoryService;
public class TravelCategoryServiceImpl implements TravelCategoryService {
//初始化数据访问接口
private TravelCategoryDao travelCategoryDao= new TravelCategoryDaoImpl();
@Override
public List<TravelCategory> findAll(){
List<TravelCategory> catrgoryList= null;
//调用数据访问接口从数据库查询类目信息
catrgoryList =travelCategoryDao.findAllTravelCategory();
return catrgoryList;
}
}
编写类目servlet
package com.pz.route.web.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.pz.route.domain.TravelCategory;
import com.pz.route.service.TravelCategoryService;
import com.pz.route.service.impl.TravelCategoryServiceImpl;
//继承之前封装的BaseServlet通配符匹配所有/category/的路径
@WebServlet("/category/*")
public class CategoryServlet extends BaseServlet {
//初始化service接口
private TravelCategoryService service = new TravelCategoryServiceImpl();
/**
* 查询所有
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
publicvoidfindAll(HttpServl