Nodejs基础之Express框架和art-template引擎(四)，2024年字节跳动、阿里等大厂前端面试题

1.2.6、动态路由

// 引入 express 框架

const express = require(‘express’);

// 实例化 express 赋值给 app

const app = new express();

// 配置路由,匹配URI地址实现不同的功能

// app.get 主要用来显示数据

app.get(‘/article’, function(req, res) {

res.send(“新闻页面”);

})

//动态路由 配置路由的时候也要注意顺序

app.get(“/article/:id”, (req, res) => {

var id = req.params[“id”]; //获取动态路由

res.send(“动态路由” + id);

})

app.get(“/article/add”, (req, res) => {

res.send(“article add”);

})

/// 监听端口

app.listen(3000);

1.2.7、GET传值

// 引入 express 框架

const express = require(‘express’);

// 实例化 express 赋值给 app

const app = new express();

// 配置路由,匹配URI地址实现不同的功能

//get 传值 http://localhost:3000/product?name=zhangsan&age=20

app.get(“/product”, (req, res) => {

let query = req.query; //获取get传值

console.log(query);

console.log(“name:” + query.name);

console.log(“age:” + query.age);

res.send(“name:” + query.name + “age:” + query.age);

})

/// 监听端口

app.listen(3000);

1.3、Express框架中EJS的使用

---

EJS 是后台模板，可以把我们数据库和文件读取的数据显示到 HTML页面上面。它是一个第三方模块，需要通过 npm 安装。Express 框架里面集成了 EJS 模板引擎，所以我们来看下两者结合的使用。

1. 安装

npm install ejs --save

2. 配置ejs app.set("view engine","ejs)

3. 使用ejs（默认加载模板引擎的文件夹是views，所以 index 前面不需要加 views）

res.render(“index”,{

})

例如：

const express = require(“express”);

const app = express()

//配置模板引擎

app.set(“view engine”,“ejs”)

// 访问127.0.0.1:3000/ 渲染的是index模板

app.get(“/”,(req,res)=>{

res.render(“index”,{

})

})

//监听端口 端口号建议写成3000以上

app.listen(3000);

之后我们在 views 文件夹下新建 index.ejs

我是一个ejs模板引擎

1.3.1、EJS常用标签

• <% %> 流程控制标签

• <%= %>输出标签(原文输出 HTML 标签)

• <%- %>输出标签(HTML会被浏览器解析)

1.3.2、绑定数据

例如：

const express = require(“express”);

const app = express()

//配置模板引擎

app.set(“view engine”,“ejs”)

// 访问127.0.0.1:3000/ 渲染的是index模板

app.get(“/”,(req,res)=>{

let title = “你好ejs”; // 假如这个数据是从数据库获取到的

res.render(“index”,{

title: title, // 这样就绑定到 index.ejs 模板里面了

})

})

//监听端口 端口号建议写成3000以上

app.listen(3000);

接下来我们去 index.ejs 里面输出这个数据

我是一个ejs模板引擎

<%=title%>

1.3.3、绑定对象

我们也可以绑定对象中的数据并将其渲染到 html 页面。

例如：

const express = require(“express”);

const app = express()

//配置模板引擎

app.set(“view engine”, “ejs”)

app.get(“/news”, (req, res) => {

let userinfo = {

username: “张三”,

age: 20

};

res.render(“news”, {

userinfo: userinfo, // 绑定 userinfo 对象数据

})

})

app.listen(3000);

接下来我们去 views 文件夹下新建 news.ejs

绑定对象中的数据

<%=userinfo.username%>—<%=userinfo.age%>

1.3.4、输出 HTML标签

我们也可以输出 HTML标签，既可以原格式输出，又可以解析 HTML 标签输出。

• <%= %>输出标签(原文输出 HTML 标签)

• <%- %>输出标签(HTML会被浏览器解析)

const express = require(“express”);

const app = express()

//配置模板引擎