# 一、开发模式

  在 web 计算兴起初期,没有前后端之分,比较典型就是:

JSP 技术

  后端(jsp/asp/php)使用模板引擎进行页面开发


  在前后端分离开发模式诞生后,主流的 web 开发模式有两种:

前后端分离 ✍

  后台提供数据,前端负责显示

  后端给前端提供接口,前端调用后端提供的 REST 风格接口 就行,前端专注写页面(html | jsp)和渲染(JS | CSS| 各种前端框架);后端专注写代码就行

服务器中是不存在跨域问题的。

  • CSR(Client-Side Rendering):客户端渲染
  • SSR(Server-Side Rendering):服务端渲染

# 1、CSR

  常用于后台管理系统

一种基于客户端渲染的 web 开发模式

BSR 开发方式

  前后端(node/php/java 等)通过约定的数据接口进行通信,以相同的数据格式如 JSON 格式进行数据传输:

图片

# 2、SSR

  常用于企业级网站、个人博客

一种基于服务端渲染的 web 开发模式

SSR 开发方式

  为解决 SPA 应用(vue、react)的 SEO 问题而诞生的前端 SSR 框架:

# 3、使用选择

  可以从 SEO 、耗时、开发效率、服务器资源等角度选择。

  当然,一些网站为了同时兼顾首页的渲染速度和前后端分离的开发效率,采用了的开发模式。

# 二、模板引擎

# 1、基础认知

  关于 JavaScript 模板引擎的选择,可以参考文章:Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More (opens new window)

提示

  按照接触的时间,最早是在 Javaweb 中接触到了 art-template (opens new window);后来才是 EJS (opens new window)Handlebars (opens new window)

# 2、express 中

  与 express 配合使用较为流行的模板引擎有 Pug (opens new window)Mustache (opens new window)EJS (opens new window)。其中,express 项目脚手架生成的项目默认的模板引擎为 Jade (opens new window)(后来 Jade 改名为 Pug)

# 3、koa 中

  Koa 并没有像 Express 那样内置模板引擎,因此我们可以自由选择适合我们喜欢的模板引擎。

# 三、开发应用

# 个人偏好 ✨

  其实在现如今的前后端分离时代,无论是 express 还是 koa,更多的是扮演的是 API 服务器的角色。所以:

如果仅仅是为了简单演示,可以使用 ejs (opens new window)(简单、易上手)

如果是想在项目中应用,个人更倾向于使用 Handlebars (opens new window)(基于 Mustache 语法,对于学过 vue 的人来说格外亲切 😂)

# 1、ejs + 插件

  在开发中,我们使用 ejs 库 + EJS language support (opens new window) 可以进行快速开发。

  ejs 中的核心语法大致如下(有点像 PHP):

  • 视图
使用示例
  • login_view.ejs
<body>
  <p>请登录</p>

  <form action="/login/validate" method="POST">
    <div>用户名:<input type="text" name="username" /></div>
    <div>密码:<input type="password" name="password" /></div>
    <div><input type="submit" value="登录" /></div>
  </form>

  <p><%= isShow?'用户名密码错误!':'' %></p>
</body>
  # ejsout 输出(类似于v-html)
  <%=  %>

  # ejsesc 输出(类似v-text)
  <%-  %>

  # ejscom 注释
  <%#  %>
  • 布局
使用示例
  • home_view.ejs
<body>
  <%-include('./header_view.ejs',{ isShowTitle: false }) %>
</body>
  • header_view.ejs
<header>
  <span>首页</span>

  <% if(isShowTitle) {%>
  <span>校园招聘</span>
  <% } %>
</header>
  # ejsinc 导入公共模板页面
  <%- include('') %>

  # ejsif
  <% if (condition) { %>

    # ejselif
    <% } else if ({:condition}) { %>

    # ejselse
    <% } else { %>


  <% } %>
  • 逻辑
使用示例
  • home_view.ejs
<body>
  home-页面

  <ul>
    <% for(var i=0;i<list.length;i++){ %>
      <li></li>
    <% } %>
  </ul>
</body>
  # ejsfor
  <% for( let index = 0; index < array.length; index++ ) { %>

  <% } %>

  # ejseach
  <% array.forEach(element => { %>

  <% }) %>

# 2、Handlebars

Handlebars 是基于 Mustache 的模板引擎

更新于 : 7/8/2024, 10:21:14 AM