文章目录
- 前言
- 一、express使用中间件body-parser获取请全体的数据
- 1. 代码
- 2. 效果
- 二、express使用ejs（了解即可）
- 1.安装
- 2.作用
- 3.基本使用
- （1）代码
- （2）代码分析和效果
- 4.列表渲染
- （1）代码
- （2）代码分析和效果
- 5.if的条件渲染
- （1）代码
- （2）代码分析和效果
前言
提示：希望你了解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('服务器启动了')
})
2. 效果
二、express使用ejs（了解即可）
ejs 中文官网：https://ejs.bootcss.com/#install
1.安装
npm install ejs
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);
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>
（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);
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>
（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);
html 文件
<body>
<header>
<% if(isEat){ %>
<span>我吃了饭</span>
<% }else{ %>
<span>我还没吃饭</span>
<% } %>
</header>
</body>
（2）代码分析和效果
