一、 前言
本系列文章旨在快速复习并上手轻量级服务器开发Node技术,并在适当分享在项目实战过程中遇到的一些比较有价值的知识内容:
- 01-📝Node.js核心知识|Node开发概述【了解Node开发、Node运行环境搭建
- 02-📝Node.js核心知识|Node.js语法【ES6+Node模块API】
- 03-📝Node.js核心知识|模块加载及第三方包【Node.js模块化开发、系统模块、 第三方模块、模块的加载机制、package.json文件】
- 04-📝Node.js核心知识|请求响应原理及HTTP协议【服务器基础概念、创建web服务器、 HTTP协议、HTTP请求与响应、异步编程】
- 05-📝Node.js核心知识|MongoDB数据库【数据库概述及环境搭建、MongoDB增删改查】
- 06-📝Node.js核心知识|模板引擎artTemplate【模板引擎概念、模板引擎语法、模板引擎案例】
- 07-📝Node.js核心知识| Express框架【Express框架简介及初体验、Express中间件、Express框架请求处理、模板引擎】
搭建博客站点实战笔记待输出
正所谓,抬头看路纲举目张,我们学习一项技能是要有清晰的任务目标的，不然就容易脱离原本的路线,不断胡乱发散,导致自己的精力消耗,但收获不大。因此我们不妨先划定一个大纲,然后一步一步来吃透这些具备可实践性的知识点。避免不必要的口水话,让所学一步一步变现！
本系列文章内容篇幅如下:
- 一、了解Node开发
- 了解Node开发
- Node运行环境搭建
- Node.js语法快速入门
- Node.js模块化开发
- 服务器端基础概念
- MongoDB数据库
- 模板引擎artTemplate
- Express框架简介及初体验
- Express中间件
- Express框架请求处理
- express-art-template模板引擎
- 项目环境搭建
- 项目功能实现
- 项目包含的知识点
二、 模板引擎的基础概念
1. 模板引擎
- 模板引擎是第三方模块。
- 让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。
// 未使用模板引擎的写法
var ary = [{ name: '张三', age: 20 }];
var str = '';
for (var i = 0; i < ary.length; i++) {
str += '-
'+ ary[i].name +'
'+ ary[i].age +'
';
}
str += '
';
{{each ary}}
{{$value.name}}
{{$value.age}}
{{/each}}
2. art-template模板引擎
- 在命令行工具中使用
npm install art-template命令进行下载 - 使用
const template = require('art-template')引入模板引擎 - 告诉模板引擎要拼接的数据和模板在哪
const html = template(‘模板路径’, 数据); - 使用模板语法告诉模板引擎，模板与数据应该如何进行拼接
3. art-template代码示例
// 导入模板引擎模块
const template = require('art-template');
// 将特定模板与特定数据进行拼接
const html = template('./views/index.art',{
data: {
name: '张三',
age: 20
}
});
{{data.name}}
{{data.age}}
三、模板引擎的语法
1. 模板语法
- art-template同时支持两种模板语法：标准语法和原始语法。
- 标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。
标准语法： {{ 数据 }}
原始语法：
2. 输出
将某项数据输出在模板中，标准语法和原始语法如下:
- 标准语法：
{{ 数据 }} - 原始语法：
{{value}} {{a ? b : c}} {{a + b}}
3. 原文输出
如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。
- 标准语法：{{@ 数据 }}
- 原始语法：
{{@ value }}
4. 条件判断
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
...
... ...
5. 循环
- 标准语法：{{each 数据}} {{/each}}
- 原始语法：
{{each target}}
{{$index}} {{$value}}
{{/each}}
6. 子模版
使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
- 标准语法：
{{include '模板'}} - 原始语法：
{{include './header.art'}}
7. 模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
8. 模板继承示例
HTML骨架模板
{{block 'head'}}{{/block}}
{{block 'content'}}{{/block}}
{{extend './layout.art'}}
{{block 'head'}} {{/block}}
{{block 'content'}} This is just an awesome page. {{/block}}
9. 模板配置
- 向模板中导入变量 template.defaults.imports.变量名 = 变量值;
- 设置模板根目录 template.defaults.root = 模板目录
- 设置模板默认后缀 template.defaults.extname = '.art'
四、案例
1. 案例介绍 – 学生档案管理
- 目标：模板引擎应用，强化node.js项目制作流程。
- 知识点：http请求响应、数据库、模板引擎、静态资源访问。
2. 制作流程
3. 第三方模块 router
功能：实现路由
使用步骤:
- 获取路由对象
- 调用路由对象提供的方法创建路由
- 启用路由，使路由生效
const getRouter = require('router')
const router = getRouter();
router.get('/add', (req, res) => {
res.end('Hello World!')
})
server.on('request', (req, res) => {
router(req, res)
})
4. 第三方模块 serve-static
功能：实现静态资源访问服务
步骤：
const serveStatic = require('serve-static')
const serve = serveStatic('public')
server.on('request', () => {
serve(req, res)
})
server.listen(3000)
