Node.js Express at ejs

2022-04-21
javascript node.js

express 是一个高度包容和快速包容且极简的 Node.js Web 框架，主要用于其 API 路由以及对数据的集成支持，可通过 express 模块完成各种使用程序方法和中间件，方便快捷的创建一个强大的 API。

通过 express 和模板引擎 ejs 的配合，以 ejs 十分简单以及对 express 良好的集成，可以充分的完成前后端的相关开发需求，并以此来完成一个非常规范的 node start 写法，在此之前我们需要安装 express 以及 ejs 模块

npm install ejs \ npm install express

路由用于确定应用程序特定端点的客户端请求，主要通过 express 来进行实现，而这其中 app 与 HTTP 方法相对应的 Express 对象方法来定义路由，如 app.get() 用于处理 GET 请求，而 app.post 则用于处理 POST 请求。

Express

这些路由方法都指定了回调函数（或者：“处理程序函数”），当程序接收到指定的路由（端点）的时候（也就是说 HTTP 方法请求时被调用），来调用回调函数，换句话说就是应用程序监听与指定路由和方法匹配的请求，当检测到匹配时，他会调用对应的回调函数。

比如我们要创建一个非常符合 node 风格的项目并搭配 ejs 进行开发，可以目录结构可以为：

node/
├── server.js
├── package.json
├── package-lock.json
├── route
│   └── index.js
└── views
    └── index.ejs

除去 node_modules 目录

var path = require('path')
var express = require('express')
var app = express()

var indexRoute = require('./route/index')

// app.set(name, value)，将 set name 分配给 value，因此他可以存储任何想要的值
app.set('views', path.join(__dirname, 'views'))

// 指定渲染引擎使用使用 ejs
app.set('view engine', 'ejs')

// 路由将匹与 path 相同的路径
app.use('/', indexRoute)

app.listen(8021)

路由参数

接下来在 route/ 目录里面添加 use 所对应的文件，并引入 express 库，并通过 express.Router 创建模块化，之后以 router.get 实例来检测端点参数的访问，之后通过 res.render 将 HTML 字符串发送到客户端：

res.render(view[, locals][, callback])
- view 参数是一个字符串，是视图文件，用于渲染文件的路径
- locals，一个对象，其属性定义了视图的局部变量。
- callback，回调函数。如果提供，该方法将返回可能的错误和呈现的字符串，但不执行自动响应。当发生错误时，该方法会在next(err)内部调用。

var express = require('express')
var router = express.Router()

router.get('/:name', function (req,res) {
    res.render('index', {
        name: req.params.name
    })
})

module.exports = router

在上述 code 中，在 router.get 监控路由端点中所使用的路由参数（:name）是一个包含映射命名路由，其作用是捕获 URL 中位置所指定的值，并填充在 req.params 对象中，你可以随意定义：

var express = require('express')
var router = express.Router()

router.get('/user/:username/uid/:userid', function (req,res) {
    res.render('index', {
        username: req.params.username,
        userid: req.params.userid
    })
})

module.exports = router

http://localhost:8021/user/kunlun/uid/20

当然如果不需要 ejs 进行交互也可以通过其 res.render 方法 options参数来进行实现：

var express = require('express')
var router = express.Router()

router.get('/:name', function (req,res) {
    res.render('index', function (err,html) {
        res.send(html)
    })
})

module.exports = router

http://localhost:8021/hehe

在这其中 res.send 是一个用于发送 HTTP 响应的方法，所描述的 body 可以是 buffer、string\boolean\array 对象等。

Ejs

在 ejs 试图中非常简单，我们只需要掌握 ejs 是那个非常关键的几个语法就可以进行使用：

Id	Name	Info
1	<% code %>	用于运行 `JavaScript` 代码
2	<%= code %>	显示转义后的 HTML 内容
3	<%- code %>	显示原始的 HTML 内容

<!DOCTYPE html>
<html>
<head>
    <title>DOCTYPE</title>
</head>
<body>
    <h1>User: <%= username%></h1>
    <p>Uid: <%= userid%></p>
</body>
</html>

⬅️ Go back