Express服务端渲染

创建项目

全局安装 express-generator

npm i -g express-generator

快速创建项目

// 命令行内初入
express -e demo
// 进入创建好的文件夹下,安装依赖
npm install

demo文件夹下的文件结构

bin:启动目录,启动文件 www 默认监听端口是 3000
node_modules:安装的依赖模块包
public:静态资源
routes:路由模块
views:ejs 模块引擎
app.js:主文件
package.json:配置文件

由于使用 node start 每次保存后都需要重新启动,所以可以使用 nodemon

// 安装
npm i nodemon -g

在 package.json 中修改调试的 start 命令,将 node 修改为 nodemon

之后每次启动项目都是 nodemon start

ejs模板引擎

模板引擎是分离用户页面和业务数据的一种技术。(将 js 从 html 中彻底分开)

简单的例子

// demo.js
const ejs = require('ejs')
const fs = reuqire('fs')
const str = fs.readFileSync('/demo.html').toString()
// 条件渲染
const name = tom
// 列表渲染
const arr = ['A','B','C','D','E']
const result = ejs.render(str,{name,arr})
// demo.html
······
<body>
<% if(tom) { %>
<span>渲染成功</span>
<% arr.forEach(item=>{ %>
<li>
<%= item %>
</li>
<% }) %>
<% }else {%>
<span>渲染失败</span>
<% } %>
</body>
······

其中:

<% xxx %>:里面写入的是js语法,
<%= xxx %>:里面是服务端发送给ejs模板转义后的变量,输出为原数据
<%- xxx %>:里面也是服务端发送给ejs模板后的变量,解析html
<%# 注释标签,不执行、不输出内容 %>:注释语句
posted @   超重了  阅读(58)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示