Express Generator Express生成器 EJS模板引擎
一个脚手架,主要用于快速生成框架代码
- 安装 npm install -g express-generator
- 安装依赖 node install
- 在当前目录生成模板,采用ejs引擎 express --view=ejs ./
- 运行 npm start //package.json有默认配置start
EJS模板类简析:
bin/www.js
入口文件,里面主要实现了三个功能
- 开启服务,设置端口
- 解析并监听端口,将当前窗口打印到控制台
- 监听异常
app.js
服务的主要文件
- 异常处理
- 日志记录
- 路由导航
//异常处理
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
//日志处理模块
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
//指定模板存储的位置
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function (req, res, next) {
next(createError(404, 'file not found!'));
});
// error handler
app.use(function (err, req, res, next) {
// set locals, only providing error in development
//全局的配置信息
res.locals.message = err.message;
//根据当前环境差异化报错信息,区分开发环境和生成环境
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(500);
//参数是模板的名字
res.render('error');
});
module.exports = app;
EJS模板引擎
关于EJS
一个简单高效的模板语言,通过数据和模板,可以生成html标记文本
一个JavaScript库,可以同时运行再客户端和服务器端
特点
- 快速编译和渲染
- 简单的模板标签
- 自定义标记分割符
- 支持文本包含
- 支持B、C端使用
- 模板静态缓存
- 支持express视图系统
EJS成员函数
Render(path,data,[option]):path是模板路径,data是传入模板的数据,option是配置选项
常用标签
- <% %> 流程控制标签,常用于循环如forEach
- <%= %> 输出标签,用于提取数据输出到html中
- <%- %> 输出标签,可用于include
- <%# %> 注释标签
EJS案例
app.js
var app = require('express')();
//设置视图
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
//配置路由级中间件,在路由中测试
app.use('/test',testRouter);
module.exports = app;
test.js
var router = require("express").Router();
router.get('/include', (req, res) => {
//跳转到views目录下include.ejs
res.render('include', { user: [{ "name": "aaa" }, { "name": "bbb" }] });
})
module.exports = router;
include.ejs
<ul>
<% user.forEach((item)=>{ %>
<%- include('show',{user:item}) %>
<% })%>
</ul>