express模板引擎(服务端渲染)

为什么需要模板引擎?

  • 我们都知道,使用express框架能够很快的搭建一个服务器,服务器能够向,前端返回接口数据,渲染页面亦或者返回一段html的代码片段,但是我们要将代码片段写在res.send('这里面'),就显得非常的麻烦和复杂,并且我们在加载静态资源的时候,通过请求url来发送请求,而url后面就需要携带.html为后缀,这就非常的不好看,因此就衍生了模板引擎!

  • 使用模板引擎过后,在程序运行时，模板引擎使用实际的值替换模板文件中的变量，并将模板转换为要发送给客户端的HTML文件。这种方法使得设计HTML页面变得更加容易，轻松实现数据与视图分离，有利于大型项目中的前后端开发的分工协作。

安装pug模板引擎

npm install pug --save

项目目录:

├── dist
|	└── js
|		└── js.js
├── app.js
└── view
    ├── home.pug
	└── style.css

重点设置:

// 引入pug模板
app.set('views', path.join(__dirname, 'view'));//__dirname表示当前目录下
app.set('view engine', 'pug');

代码展示:

  • app.js(服务器)
// pug模板引擎的基本使用

// 引入express框架
const express = require('express')
const app = express();

// 设置模板引擎
app.set('view engine' , 'pug')//指定模板解析引擎
app.set('views' , './views')//指定模板代码的读取目录

// 将dist中的所有文件变成静态资源托管到服务器上
app.use(express.static('dist'))

// 发送get请求
app.get('/',(req , res)=>{
    // 模板引擎最重要的一点:能够将服务器中的参数传给前端页面
    var obj = {//通过对象的形式
        name:'lam',
        age:100
    }
    // 使用render函数来解析pug模板(views文件夹下的home.pug)
    res.render('home',obj)//渲染模板后返回给前端,并且携带参数
    // 相较于send(),render()只能解析模板,但send()能发送接口数据和解析html片段

})

// 开启服务器
app.listen(3000,()=>{
    console.log(`服务器已启动,端口3000正在监听...`);
})
  • home.pug(渲染模板)
doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title 首页
        //- 引入js(非同一目录下)
        script 
            include ../dist/js/js.js
        //- 引入css样式(同一目录)
        style 
            include style.css 
    body 
        h1 你好! pug
        p(class='h') this is #{name}'s website

结果展示:

image

express生成器

  • 官方文档
  • express项目生成器，是一个nodejs程序,类似与脚手架，可以帮助我们快速搭建一个express项目。

使用方法:

  1. 首先要安装express-generator(生成器)这个express项目生成器工具
// 可以使用npx进行安装(但是Nodejs必须在8.2.0及更高版本才行)
$ npx express-generator
 
// 相对于较老的Nodejs版本 建议还是用npm将express-generator安装到全局中使用
$ npm install -g express-generator
//安装完毕后可以在命令行输入 express 检查是否安装成功
 
// -h 参数可以列出所有可用的命令行参数
$ express -h
  1. 创建项目
// 创建项目  这样直接就可以快速的创建出一个项目 但是这样默认使用的是jade模板
$ express 项目名    
 
// 如果想要使用别的模板 则用 --view=[模板名] 创建项目
// 这里演示pug模板项目创建
$ express 项目名 --view=pug
  1. 项目结构

  • 将创建好的项目在vscode中打开 可看到如下项目结构
    image

  • 可以看到,项目的模板是pug，还有就是项目并没有帮我们安装依赖，那么我们就需要自己手动安装项目的依赖

  • 项目根目录下有4个自带的文件夹

    • bin:存放项目源代码的文件夹。
    • public:项目静态文件夹。
    • routers:存放路由的文件夹。
    • views:存放模板的文件夹。

  • 这里讲解一下一个很重要的文件app.js

    • app.js引入各种模块包，其中最重要是express框架，使用框架包创建应用程序实例，在应用程序运行过程中，需要其他模块包配合它。比如：http-error记录请求过程中的错误信息。再比如morgan记录请求日志.
    • 再比如cookie-parser记录cookie解析。还是express.json()，express.urlencoded()。相对比较重要的路由中间件（必须掌握如何定义路由）。
/*
    http-errors 这个模块包主要是监听在请求的过程中出现的错误和错误信息，
    是一个中间件本质也是一个模块，其实是一个函数
*/ 
var createError = require('http-errors');
// 语句->函数->脚本库->模块->框架->平台
// 引入express模块
var express = require('express');
// 引入path模块，路径
var path = require('path');
// 主要对cookie进行设置或者获取的功能
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'));
// 使用json解析对象或者字符串
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// 使用两个路由文件
app.use('/', indexRouter);
// 可以为一个路由文件的接口添加前缀,把路由前缀加上/users/
app.use('/users', usersRouter);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  // next把本次请求传递给另一个中间件,如果没有next,服务器就没有响应.
  // 每一次请求都要走中间件,中间件会对请求进行加工然后再给服务器
  next(createError(404));
});
 
// 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(err.status || 500);
  res.render('error');
});
 
module.exports = app;
  1. 安装依赖
// 进入到项目的根目录
$ cd myapp
// 进行依赖的安装
$ npm install || npm i
  1. 项目的启动

  • 打开项目中的package.json文件可以看到
    image

  • 默认帮我们生成了一个start 命令 运行当前项目bin目录下的www文件 其实这个文件就相当于这个项目的入口文件

// 启动项目 在项目的根目录下打开终端 运行下面命令就可以运行项目了
$ npm run start
 
// 也可以使用 以下命令来启动项目 因为www文件就是我们项目的有个入口文件
$ node ./bin/www
  1. 项目的热更新

  • 上面的项目启动方式 当我们项目早运行的过程中修改代码 浏览器中的内容是不会自动更新的这时就需要我们重启项目 这样给我们开发项目带来非常的不便 这时我们就可以使用热部署模块来改造我们的项目

  • 下面我就推荐两款热部署工具 当代码被修改时项目会重新启动

// 第一款 node-dev 
// 安装命令 如下  
$ npm install -g node-dev
//安装完后就可以用如下命令来启动项目了 当项目代码修改时启动的项目的内容也会发生变化
$  node-dev [文件名]
 
// 第二款 nodemon
// 安装命令如下
$ npm install -g nodemon
//安装完后就可以用如下命令来启动项目了 当项目代码修改时启动的项目的内容也会发生变化
$ nodemon [文件名]
  • 这样我们就可以修改 package.json 里面的启动命令 来达到一个项目热部署的效果 这里,我将start 改成了 "start": "nodemon ./bin/www"
"scripts": {
  "start": "nodemon ./bin/www"
},

运行结果:

image