Node 笔记叁章模板引擎

最新推荐文章于 2023-05-03 03:45:00 发布

Anbelin

最新推荐文章于 2023-05-03 03:45:00 发布

阅读量134

点赞数

分类专栏：前端文章标签： node.js

本文链接：https://blog.csdn.net/qq_39518871/article/details/110678583

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

1. 模板引擎的基础概念

1.1 模板引擎

模板引擎是第三方模块。让开发者以更加友好的方式拼接字符串，是项目代码更加清晰、更加易于维护。

1.2 art-template 模板引擎

在命令行工具中使用 npm install art-template 命令进行下载。
使用 const template = require(’ art-template’ )引入模板引擎，该语句返回一个方法。
告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据)。

新建模板文件夹views，在views文件夹中新建index.art模板文件。

index.art文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	{{ name }}
	{{ age }}
</body>
</html>

模板引擎文件app.js：

// 导入模板引擎
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', 'index.art');
// template方法是用来拼接字符串的
// 1. template第一个参数为模板路径 绝对路径
// 2. template第二个参数为要在模板中显示的数据 对象类型
// template方法返回拼接好的字符串
const html = template(views, {
	name: '张三',
	age: 20
});
console.log(html);

在控制台中使用node执行app.js文件：
在这里插入图片描述

2. 模板引擎语法

2.1 模板语法

art-template同时支持两种模板语法：标准语法和原始语法。
标准语法可以让模板更容易读写，{{ 数据 }}。
原始语法具有强大的逻辑处理能力，<%=数据 %>。

2.2 语法输出

将某项数据输出在模板中，标准语法和原始语法如下：标准语法：{{ 数据 }}，原始语法：<%= 数据 %>。

	<!-- 标准语法 -->
	<p>{{ name }}</p>
	<p>{{ 1 + 1 }}</p>
	<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
	<!-- 原始语法 -->
	<p><%= name %></p>
	<p><%= 1 + 2%></p>
	<p><%= 1 + 1 == 2 ? '相等' : '不相等' %></p>

2.3 原文输出

如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。
标准语法：{{ @数据 }}。原始语法：<%- 数据 %>。

01.js文件：

const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '01.art');
const html = template(views, {
	name: '张三',
	age: 20,
	// content 需要原文输出才能解析里面的<h1>标签
	content: '<h1>我是标题</h1>'
})
console.log(html);

01.art文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 标准语法 -->
	<p>{{ name }}</p>
	<p>{{ 1 + 1 }}</p>
	<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
	<p>{{ content }}</p>
	<p>{{@ content }}</p>
	<!-- 原始语法 -->
	<p><%= name %></p>
	<p><%= 1 + 2%></p>
	<p><%= 1 + 1 == 2 ? '相等' : '不相等' %></p>
	<p><%= content%></p>
	<p><%- content%></p>
</body>
</html>

在这里插入图片描述

2.4 条件判断

在模板中可以根据条件来决定显示哪块HTML代码。

{{if age > 18}}
	年龄大于18
{{else if age < 15 }}
	年龄小于15
{{ else }}
	年龄不符合要求
{{/if}}

<% if (age > 18) { %>
	年龄大于18
<% } else if (age < 15) { %>
	年龄小于15
<% } else { %>
	年龄不符合要求
<% } %>

执行02.js文件：

const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '02.art');
const html = template(views, {
	name: '张三',
	age: 17
});
console.log(html);

在这里插入图片描述

2.5 循环语法

标准语法：{{ each 数据 }} {{/each}}；原始语法：<% for() { %> <% } %>。
有03.js文件：

const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '03.art');
const html = template(views, {
	users: [{
		name: '张三',
		age: 20,
		sex: '男'
	},{
		name: '李四',
		age: 30,
		sex: '男'
	},{
		name: '玛丽',
		age: 15,
		sex: '女'
	}]
});
console.log(html);

有03.art文件

<ul>
	{{each users}}
		<li>
			{{$value.name}}
			{{$value.age}}
			{{$value.sex}}
		</li>
	{{/each}}
</ul>

<ul>
	<% for (var i = 0; i < users.length; i++) { %>
		<li>
			<%=users[i].name %>
			<%=users[i].age %>
			<%=users[i].sex %>
		</li>
	<% } %>
</ul>

在这里插入图片描述

2.6 子模版

使用子模版可以将网站公共区块（头部、底部）抽离到单独的文件中。
views 文件目录下新建 common 文件夹，将网站公共区块抽离到 common 文件夹中的 header.art 文件和 footer.art 文件中。

// header.art文件
我是头部

// footer.art文件
我是头部

views文件夹下新建04.art文件

{{ include './common/header.art' }}
<% include('./common/header.art') %>
<div> {{ msg }} </div>
{{ include './common/footer.art' }}
<% include('./common/footer.art') %>

template文件夹新建04.js文件

const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '04.art');
const html = template(views, {
	msg: '我是首页'
});
console.log(html);

node中运行04.js文件
在这里插入图片描述

2.7 模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
在这里插入图片描述
在common文件夹中新建layout.art文件为骨架模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	{{block 'link'}} {{/block}}
</head>
<body>
	{{block 'content'}} {{/block}}
</body>
</html>

在views文件夹下新建05.art首页模板，该首页模板继承了当前目录的common文件夹下的layout.art文件，即骨架模板。

{{extend './common/layout.art'}}

{{block 'content'}}
<p>{{ msg }}</p>
{{/block}}

{{block 'link'}}
<link rel="stylesheet" type="text/css" href="./main.css">
{{/block}}

template目录下新建05.js文件引入05.art模板

const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '05.art');
const html = template(views, {
	msg: '首页模板'
});
console.log(html);

命令行工具总运行05.js文件
在这里插入图片描述
我们可以看到引入成功。

2.9 模板配置

向模板中导入变量 template.defaults.imports.变量名 = 变量值;。
先导入自己想要的模块，例如：npm install dateformat，之后再文件中引用该模块，例如：var dateformat = require(' dateformat' )，接着导入模板变量 template.defaults.imports.dateFormat = dateFormat;，之后就可以在模板中使用模板变量了。
设置模板根目录 template.defaults.root = 模板目录。
设置模板默认后缀 template.defaults.extname = '.art'。

template目录下新建06.js文件

const template = require('art-template');
const path = require('path');
const dateFormat = require('dateformat');
// 设置模板的根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;
// 配置模板的默认后缀
template.defaults.extname = '.html';
const html = template('06.art', {
	time: new Date()
});
console.log(template('07', {}));
console.log(html);

views目录下新建06.art文件和07.html文件

{{ dateFormat(time, 'yyyy-mm-dd')}}

3. 学生档案管理

建立项目文件夹并生成项目描述文件。
新建students文件夹，切换到该文件夹下并使用 npm init -y 命令生成package.json文件；

之后再在students文件夹下新建app.js文件。
创建网站服务器实现客户端和服务器端通信。
在app.js文件中写入创建网站服务器端代码，之后命令行工具中使用 nodemon app.js 启动服务器。

// 引入HTTP模块
const http = require('http');
// 创建网站服务器
const app = http.createServer();
// 当客户端访问服务器端的时候
app.on('request', (req, res) => {
    res.end('OK');
});
app.listen(8080);
console.log('服务器启动成功！');

在这里插入图片描述
在浏览器地址栏中输入localhost:8080，返回了OK，说明客户端和服务器端实现了通信。

3. 连接数据库并根据需求设计学员信息表。
数据库操作需要mongoose第三方模块，所以先下载 npm install mongoose。

下载完成后重新开启服务器
在这里插入图片描述
连接数据库

// 引入HTTP模块
const http = require('http');
const mongoose = require('mongoose');
// 连接数据库
mongoose.connect('mongodb://localhost/playground',
    { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('数据库连接成功！'))
    .catch(() => console.log('数据库连接式表！'));
// 创建网站服务器
const app = http.createServer();
// 当客户端访问服务器端的时候
app.on('request', (req, res) => {
    res.end('OK');
});
app.listen(8080);
console.log('服务器启动成功！');

在这里插入图片描述
接下来将跟数据库相关的代码从app.js中分离出去。在students目录下新建model文件夹，在model文件夹下新建connect.js文件。之后，将如下代码从app.js文件中剪切到connect.js文件中。

const mongoose = require('mongoose');
// 连接数据库
mongoose.connect('mongodb://localhost/playground',
    { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('数据库连接成功！'))
    .catch(() => console.log('数据库连接式表！'));

之后在app.js中导入connect.js

require('./model/connect.js');

在model文件下新建user.js文件，该文件用于创建数据库集合规则，之后使用规则创建集合并将集合导出，内容如下。

const mongoose = require('mongoose');
// 创建学生集合规则
const studentsSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
        minlength: 2,
        maxlength: 10
    },
    age: {
        type: Number,
        min: 10,
        max: 25
    },
    sex: {
        type: String
    },
    email: String,
    hobbies: [String],
    collage: String,
    enterDate: {
        type: Date,
        default: Date.now
    }
});
// model返回集合的构造函数
const Student = mongoose.model('Student', studentsSchema);
// 将学生信息集合进行导出
module.exports = Student;

同样在app.js文件中导入user模块

const Student = require('./model/user');

创建路由并实现页面模板呈递。
常见路由部分见 3.1 。
接下来实现页面模板呈递。
首先下载第三方模块 npm install art-template，

接下来在students目录下新建views文件夹，该新建文件夹用于存放模板文件。将模板文件拷贝至views目录下。

由于css文件时静态资源文件，所以我们在students目录下再新建一个文件目录public，并把views目录下的css文件夹剪切至public目录下。

在app.js中将模板引擎引入到项目当中，配置模板的根目录。由于配置模板根目录的时候需要进行路径拼接，所以需要引入path模块。

// 引入模板引擎
const template =  require('art-template');
// 引入path模块
const path = require('path');
// 配置模板的根目录
template.defaults.root = path.join(__dirname, 'views');

将模板文件后缀由html改为art，之后只需要在路由中渲染相应的模板。
在这里插入图片描述

// 呈递学生档案信息页面
router.get('/add', (req, res) => {
    let html = template('index.art', {});
    res.end(html);
});

在命令行工具中重新开启服务器，接着在浏览器输入localhost:8080/add，之后发现浏览器一直在加载，并没有给我们返回结果。
在这里插入图片描述
点击X号暂停，按F12键得知main.css报红，这个时候我们直到这个文件没有响应。因此，我们应该对静态资源做一个处理。

5. 实现静态资源访问。
这个在3.2部分说明。
6. 实现学生信息添加功能。

在模板文件的表单中指定请求地址与请求方式。
为每个表单项添加name属性。

	<form action="/add" method="post">
		<fieldset>
			<legend>学生档案</legend>
			<label>
				姓名: <input class="normal" type="text" autofocus placeholder="请输入姓名" name="name">
			</label>
			<label>
				年龄: <input class="normal"  type="text" placeholder="请输入年龄" name="age"> 
			</label>
			<label>
				性别: 
				<input type="radio" value="0" name="sex"> 男
				<input type="radio" value="1" name="sex"> 女
			</label>
			<label>
				邮箱地址: <input class="normal" type="text" placeholder="请输入邮箱地址" name="email">
			</label>
			<label>
				爱好: 
				<input type="checkbox" value="0" name="hobbies"> 敲代码
				<input type="checkbox" value="1" name="hobbies"> 打篮球
				<input type="checkbox" value="1" name="hobbies"> 睡觉
			</label>
			<label>
				所属学院: 
				<select class="normal" name="collage">
					<option value="前端与移动开发">前端与移动开发</option>
					<option value="PHP">PHP</option>
					<option value="JAVA">JAVA</option>
					<option value="Android">Android</option>
					<option value="IOS">IOS</option>
					<option value="UI设计">UI设计</option>
					<option value="C++">C++</option>
				</select>
			</label>
			<label>
				入学日期: <input type="date" class="normal" name="enterDate">
			</label>
			<label class="btn">
				<input type="submit" value="提交" class="normal">
			</label>
		</fieldset>
	</form>

添加实现学生信息功能路由。

// 引入queryString模块
const querystring = require('querystring');

// 实现学生信息添加功能路由
router.post('/add', (req, res) => {
    // 接收post请求参数
    let formData = '';
    req.on('data', param => {
        formData += param;
    });
    req.on('end', () => {
        console.log(querystring.parse(formData));
        res.end('必须响应');
    });
})

在表单中添加信息提交
在这里插入图片描述

接收客户端传递过来的学生信息。
将学生信息添加到数据库中。
将页面重定向到学生信息列表页面。
修改代码

// 实现学生信息添加功能路由
router.post('/add', (req, res) => {
    // 接收post请求参数
    let formData = '';
    req.on('data', param => {
        formData += param;
    });
    req.on('end', async () => {
        await Student.create(querystring.parse(formData));
        res.writeHead(301, {
            Location: '/list'
        });
        res.end('请求结束掉，这个必选操作');
    });
})

重新提交信息
在这里插入图片描述

7. 实现学生信息展示功能。

从数据库中将所有的学生信息查询出来。

// 呈递学生档案信息列表页面
router.get('/list', async (req, res) => {
    // 查询学生信息
    let students = await Student.find();
    console.log(students);
    let html = template('list.art', () => {});
    res.end(html);
})

切换到浏览器当中，刷新页面，回到命令行工具，看到返回结果
在这里插入图片描述

通过模板引擎将学生信息和HTML模板进行拼接。
修改app.js代码

// 呈递学生档案信息列表页面
router.get('/list', async (req, res) => {
    // 查询学生信息
    let students = await Student.find();
    console.log(students);
    let html = template('list.art', () => {
        students: students
    });
    res.end(html);
})

修改list.art代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学员信息</title>
	<link rel="stylesheet" href="./css/list.css">
</head>
<body>
	<table>
		<caption>学员信息</caption>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>邮箱地址</th>
			<th>爱好</th>
			<th>所属学院</th>
			<th>入学时间</th>
		</tr>
		{{each students}}
			<tr>
				<th>{{$value.name}}</th>
				<th>{{$value.age}}</th>
				<th>{{$value.sex}}</th>
				<th>{{$value.email}}</th>
				<th>{{$value.hobbies}}</th>
				<th>{{$value.collage}}</th>
				<th>{{$value.enterDate}}</th>
			</tr>
		{{/each}}

	</table>
</body>
</html>

回到浏览器中刷新页面

将拼接好的HTML模板响应给客户端。

3.1 第三方模块 router

使用步骤：

获取该模块提供的路由对象。
调用路由对象提供的方法创建路由。
启用路由，是路由生效。

打开命令行工具下载router第三方模块

app.js文件中创建并启动路由

// 引入HTTP模块
const http = require('http');
// 引入ROUTER模块
const getRouter = require('router');
// 获取路由对象
const router = getRouter();
// 创建路由
router.get('/add', (req, res) => {
    res.end('test');
});
router.get('/list', (req, res) => {
    res.end('index');
})
require('./model/connect');
const Student = require('./model/user');
// 创建网站服务器
const app = http.createServer();
// 当客户端访问服务器端的时候
app.on('request', (req, res) => {
    // 启用路由
    router(req, res, () => {
        console.log('路由生效');
    });
});
app.listen(8080);
console.log('服务器启动成功！');

3.2 第三方模块 serve-static

serve-static 第三方模块实现静态资源访问服务功能。

引入serve-static模块获取创建静态资源服务功能的方法。
调用方法创建静态资源服务并指定静态资源服务目录。
启用静态资源服务功能。

同样，先下载这个第三方模块 npm install serve-static ，之后重启服务器。

引入静态资源访问模块、实现静态资源访问服务、启用该服务

// 引入静态资源访问模块
const serveStatic = require('serve-static');
// 实现静态资源访问服务
const serve= serveStatic(path.join(__dirname, 'public'));
app.on('request', (req, res) => {
    // 启用路由
    router(req, res, () => {});
    serve(req, res, () => {});
});

在浏览器输入localhost:8080/add，页面此时没有问题了。
在这里插入图片描述
接下来完成列表页面的呈递

// 呈递学生档案信息列表页面
router.get('/list', (req, res) => {
    let html = template('list.art', () => {});
    res.end(html);
})

回到浏览器中访问localhost:8080/list，也没有问题。
在这里插入图片描述

Anbelin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node 笔记叁章模板引擎

1. 模板引擎的基础概念1.1 模板引擎模板引擎是第三方模块。让开发者以更加友好的方式拼接字符串，是项目代码更加清晰、更加易于维护。1.2 art-template 模板引擎在命令行工具中使用 npm install art-template 命令进行下载。使用 const template = require(’ art-template’ )引入模板引擎，该语句返回一个方法。告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据)。新建模板
复制链接

扫一扫