使用express 和js开发一个博客系统(五)

前后端的爱恨情仇

未分离时代

MVC设计模式

MVC是一种经典的设计模式，全名为Model-View-Controller，即模型-视图-控制器。大致就是：

模型和视图需要通过控制器来进行粘合。例如，用户发送一个HTTP请求，此时该请求首先会进入控制器，然后控制器去获取数据并将其封装为模型，最后将模型传递到视图中进行展现。需要说明的是，这个View还可以采用Velocity、Freemaker等模板引擎。使用了这些模板引擎，可以使得开发过程中的人员分工更加明确，还能提高开发效率。

从MVC到前后端分离

前后端分离

前端负责开发页面，通过接口（Ajax）获取数据，采用Dom操作对页面进行数据绑定，最终是由前端把页面渲染出来。

前后端分离与耦合架构

为什么前后端分离？

前后端分离"已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。

前后端分离(解耦)的核心思想是：前端Html页面通过Ajax调用后端的RestFul API并使用Json数据进行交互。

在互联网架构中,一般有两种服务器

• web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。
• 应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。( 一般只有Web服务器才能被外网访问，应用服务器只能内网访问。)

一般公司后端开发人员直接兼顾前端的工作，一边实现API接口，一边开发页面，两者互相切换着做，而且根据不同的url动态拼接页面，这也导致后台的开发压力大大增加。前后端工作分配不均。不仅仅开发效率慢，而且代码难以维护。而前后端分离的话，则可以很好的解决前后端分工不均的问题，将更多的交互逻辑分配给前端来处理，而后端则可以专注于其本职工作，比如提供API接口，进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器，直接在本地开发，然后通过一些插件来将api请求转发到后台，这样就可以完全模拟线上的场景，并且与后台解耦。前端可以独立完成与用户交互的整一个过程，两者都可以同时开工，不互相依赖，开发效率更快，而且分工比较均衡。

技术和架构的进步

从经典的JSP+Servlet+JavaBean的MVC时代，到SSM（Spring + SpringMVC + Mybatis）和SSH（Spring + Struts + Hibernate）的Java框架时代，再到前端框架（KnockoutJS、AngularJS、vueJS、ReactJS）为主的MV*时代，然后是Nodejs引领的全栈时代，技术和架构一直都在进步。虽然"基于NodeJS的全栈式开发"模式很让人兴奋，但是把基于Node的全栈开发变成一个稳定，让大家都能接受的东西还有很多路要走。创新之路不会止步，无论是前后端分离模式还是其他模式，都是为了更方便得解决需求，但它们都只是一个"中转站"。前端项目与后端项目是两个项目，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员。前端只需要关注页面的样式与动态数据的解析及渲染，而后端专注于具体业务逻辑。

模板引擎-前后分离

EJS什么是模板引擎

模板引擎（Template Engine）是一个将页面模板和要显示的数据结合起来生成HTML页面的工具。如果说上面讲到的express中的路由控制方法相当于MVC中的控制器的话，那模板引擎就相当于MVC中的视图。模板引擎的功能是将页面模板和要显示的数据结合起来生成HTML页面。它既可以运行在服务器端又可以运行在客户端，大多数时候它都在服务器端直接被解析为HTML，解析完成后再传输给客户端，因此客户端甚至无法判断页面是否是模板引擎生成的。有时候模板引擎也可以运行在客户端，即浏览器中。目前的主流还是由服务器运行模板引擎。在MVC架构中，模板引擎包含在服务器端。控制器得到用户请求后，从模型获取数据，调用模板引
擎将数据和模板结合，生成最终的HTML页面，然后将其返回给客户端。

前后端分离中的模板引擎

在前后端分离的架构中，由于前后端分工明确，前端负责开发页面，后端提供数据接口，因此传统的服务器端模板引擎在这种情况下并不常用。前端通常会选择一种现代的JavaScript框架（如Vue.js、React等）作为视图层，使用前端模板引擎来处理数据绑定和渲染页面。

前端模板引擎是一种将数据和HTML模板结合生成最终页面的工具。它可以通过数据的动态绑定，将数据渲染到HTML模板中，生成具有交互性和动态内容的页面。前端模板引擎通常与前端框架结合使用，使得页面开发更加简单和高效。

前后端分离中的模板引擎通常包含以下几个特点：

1. 数据绑定：模板引擎能够将数据与页面模板进行绑定，实现数据的动态更新和页面的渲染。
2. 条件和循环：模板引擎支持条件判断和循环语句，可以根据不同的条件展示不同的内容或重复渲染某个区块。
3. 模板组件化：模板引擎支持模板的组件化，可以将页面拆分成多个可复用的组件，提高开发效率和页面的可维护性。
4. 客户端渲染：前端模板引擎通常在客户端进行渲染，通过JavaScript执行模板代码生成最终的HTML页面。

常用的前端模板引擎包括Mustache、Handlebars、EJS、Vue.js的模板语法等。这些模板引擎都提供了丰富的语法和功能，方便开发人员进行数据绑定和页面渲染。

总结起来，前后端分离架构中的模板引擎是前端开发中的一种工具，用于将数据和HTML模板结合生成最终的页面。它能够实现数据的动态绑定、条件判断、循环渲染和模板组件化等功能，使得前端开发更加高效和便捷。