Express Generator Express生成器 EJS模板引擎

目录

• Express Generator Express生成器 EJS模板引擎
  • EJS模板类简析：
  • EJS模板引擎
  • EJS案例

 

Express Generator Express生成器 EJS模板引擎

一个脚手架，主要用于快速生成框架代码

1. 安装 npm install -g express-generator
2. 安装依赖 npm install
3. 在当前目录生成模板，采用ejs引擎 express --view=ejs ./
4. 运行 npm start //package.json有默认配置start

EJS模板类简析：

bin/www.js

入口文件，里面主要实现了三个功能

1. 设置端口，开启服务
2. 解析并监听端口，在控制台显示服务启动相关信息，如端口号
3. 监听异常

app.js

服务的主要文件

1. 异常处理
2. 日志记录
3. 路由导航

//异常处理
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>

效果