node插件express（路由）的插件使用（二）——body-parser和ejs插件的基本使用

文章目录

前言
一、express使用中间件body-parser获取请全体的数据
- 1. 代码
- 2. 效果
二、express使用ejs（了解即可）

前言

提示：希望你了解express后进行查看后面的内容。

一、express使用中间件body-parser获取请全体的数据

1. 代码

// 1：导入express body-parser
const express = require('express')
const bodyParser = require('body-parser')

// 2：创建应用对象
const app = express();

// 3：解析querystring格式请全体的中间件
const urlenncodeParser = bodyParser.urlencoded({extended: false})

// 5：创建路由规则
app.get('/login', (req, res) => {
    // 6：响应html文件
    res.sendFile(__dirname + '/06_index.html')
})

// 7：post规则（点击html页面的登录触发回调函数）
app.post('/login', urlenncodeParser, (req, res) => {
    console.log(req.body); // 获取用户名和密码
    res.send('获取用户数据')
})

// 4：监听并启动服务器
app.listen(9000, () => {
    console.log('服务器启动了')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2. 效果

在这里插入图片描述

二、express使用ejs（了解即可）

ejs 中文官网：https://ejs.bootcss.com/#install

1.安装

npm install ejs
1

2.作用

将html页面和js逻辑拆分开来，

3.基本使用

（1）代码

js 文件

// 1：导入express body-parser
const fs = require('fs')
const ejs = require('ejs')

const name = '张三'
const age = 18

let str = fs.readFileSync('./07_.html').toString();

/**
 * ejs.render
 * str, data, options
 * @str str 参数1，渲染的html页面
 * @data Object 参数2，传递给html页面的参数
 * @options 参数3，配置
 * 作用：输出渲染后的 HTML 字符串
 */

let renderStr = ejs.render(str, { name: name, age: age });

console.log(renderStr);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

html 文件

<!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>ejs初体验</title>
</head>
<body>
    <h1>我是 <%= name %>, 今年<%= age %> 岁</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

（2）代码分析和效果

在这里插入图片描述

4.列表渲染

（1）代码

js 文件

// 1：导入express body-parser
const fs = require('fs')
const ejs = require('ejs')

const nameList = ['张三', '李四', '王五', '赵六']

let html = fs.readFileSync('./08_.html').toString();

let renderStr = ejs.render(html, { nameList: nameList });

console.log(renderStr);
1
2
3
4
5
6
7
8
9
10
11

html 文件

<!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>ejs列表渲染</title>
</head>
<body>

    <% nameList.forEach(item => { %>
    <li><%= item %></li>
    <% }) %>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

（2）代码分析和效果

在这里插入图片描述

5.if的条件渲染

（1）代码

js 文件

// 1：导入express body-parser
const fs = require('fs')
const ejs = require('ejs')

const isEat = true;

let html = fs.readFileSync('./09_.html').toString();

let renderStr = ejs.render(html, { isEat: isEat });

console.log(renderStr);
1
2
3
4
5
6
7
8
9
10
11

html 文件

<body>
   <header>
        <% if(isEat){ %>
        <span>我吃了饭</span>
        <% }else{ %>
        <span>我还没吃饭</span>
        <% } %>
   </header>
</body>
1
2
3
4
5
6
7
8
9

（2）代码分析和效果

在这里插入图片描述

相关阅读:
医药制药行业有机VOCs废气治理
猿创征文｜Cglib代理之代理类方法的动态传递
热量传递总复习
HTML+CSS+JS网页设计期末课程大作业—— 艺术官网17页(包含登陆注册)
2023年中国半导体缺陷检测设备市场规模及发展趋势分析[图]
丁鹿学堂前端培训：前端性能优化css篇（一）
Spring系列18：Resource接口及内置实现
前端应用聚合整改
操作系统：中断和异常
JAVA:实现RabinKarpAlgorithm拉宾卡普算法(附完整源码)

原文地址：https://blog.csdn.net/weixin_44784401/article/details/134221281