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 <%# 注释标签,不执行、不输出内容 %>:注释语句
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析