猿人进化系列17——实战之一文学会前后端分离套路

      看完上一个章节，相信你已经掌握了一个高效无误地编写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 Travel