2、模板引擎的基础概念 · 2021 web前端工程师

1.1模板引擎 ![](https://img.kancloud.cn/2d/ea/2deaba07cf68fb2efa2fe1acfc9d2e1c_1095x402.png) 1.2 art-template模板引擎 1.在命令行工具中使用`npm install art-template`命令进行下载 2.使用`const template = require('art-template')`引入模板引擎 3.告诉模板引擎要拼接的数据和模板在哪`const html = template(‘模板路径’ ,数据)`; 4.使用模板语法告诉模板引擎,模板与数据应该如何进行拼接 1.3 art-template代码示例 ![](https://img.kancloud.cn/60/24/60248632729c05f00dbde4866ae195df_1083x364.png) 文件后缀为 XXX.art ![](https://img.kancloud.cn/4f/5a/4f5a02500ec4c2ea6eb904dad7b80e51_1662x574.png) 2.1模板语法 ●art-template同时支持两种模板语法:**标准语法**和**原始语法**。 ●标准语法可以让模板更容易读写,原始语法具有强大的逻辑处理能力。标准语法: {{ 数据}} 原始语法: 2.2输出将某项数据输出在模板中，标准语法和原始语法如下: ●标准语法: {{ 数据}} D原始语法: ~~~  <h2>{ {value}}</h2> <h2>{{a ? b : c}}</h2> <h2>{{a + b}}</h2>  <h2><%= value %></h2> <h2><%= a?b:c %</h2> <h2><%= a+ b %></h2> ~~~ 2.3原文输出（将标签数据也能显示在页面上）如果数据中携带HTML标签,默认模板引擎不会解析标签,会将其转义后输出。 ●标准语法:{{@数据}} ●原始语法: 2.4条件判断（在模板中可以根据条件来决定显示哪块HTML代码。） ~~~  { {each target} } {{$index}} { {$value} } { {/each} }  <% for(var i = 0; i < target. length; i++) { %> <%= i %> <%= target[i] %> <%}%> ~~~ ![](https://img.kancloud.cn/71/8c/718c61584b5111e2173b94a213e48084_1653x688.png) 2.6子模版使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。 ●标准语法: {{include '模板'}} ●原始语法: ~~~  { {include ' ./header.art' }}  <% include(' . /header.art') %> ~~~ 新建一个XXX.art 文件存放公共html 代码 ![](https://img.kancloud.cn/95/b6/95b6e8c6c733efd576231aa464a305d7_1304x488.png) 2.7模板继承使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。 ![](https://img.kancloud.cn/d3/79/d3794d49d4c30cb712d8a970d63ab2ad_990x407.png) ![](https://img.kancloud.cn/b7/a2/b7a26ebf043eb537d657c31d8ffd1ffc_863x270.png) 2.8模板继承示例 ~~~ < !doctype html> <html> <head> <meta charset="utf-8"> <title>HTML骨架模板</title> {{block 'head'}}{{/block} } </head> <body> { {block ' content'}}{{/block}} </body> </html> ~~~ `` ~~~  { {extend ' ./layout.art'}} { {block 'head'}} <link rel="stylesheet" href ="custom.css"> { {/block} } { {block 'content'}} <p>This is just an awesome page. </p> {{/block}} ~~~ 模板继承样式 ![](https://img.kancloud.cn/09/f4/09f446d65eb2bdb90ba4cc2335ce9e6e_1440x317.png) 2.9模板配置 1.向模板中导入变量template.defaults.imports.变量名 =变量值; 2.设置模板根目录template.defaults.root =模板目录 3.设置模板默认后缀 template.defaults.extname = ' .art' 下载[https://www.npmjs.com/package/dateformat](https://www.npmjs.com/package/dateformat) 时间格式化在当前项目下 `npm install dateformat` ![](https://img.kancloud.cn/ed/c2/edc240946943e89776c8d6748a5e7134_1666x870.png) 2.设置模板根目录template.defaults.root =模板目录 ![](https://img.kancloud.cn/b0/67/b0672dd055698a3ce673d2b86e2bb6b8_1320x865.png) 3.设置模板默认后缀 template.defaults.extname = ' .art' ![](https://img.kancloud.cn/d4/6e/d46efd343f80f8074b63781c8655b26f_1041x569.png) # 3.1案例介绍-学生档案管理目标:模板引擎应用，强化node.js项目制作流程知识点: http请求响应、数据库、模板引擎、静态资源访问。 ![](https://img.kancloud.cn/13/2e/132ea873a11cfa7c3c9a790307886fb7_1141x467.png) ## 3.2制作流程 1.建立项目文件夹并生成项目描述文件 2.创建网站服务器实现客户端和服务器端通信 3.连接数据库并根据需求设计学员信息表 4.创建路由并实现页面模板呈递 5.实现静态资源访问 6.实现学生信息添加功能 7.实现学生信息展示功能 ### 1.建立项目文件夹并生成项目描述文件命令行输入`npm init -y`生成项目描述文件 ### 2.创建网站服务器实现客户端和服务器端通信当前目录创建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(80) ; console.log( '服务器启动成功'); ~~~ ### 3.连接数据库并根据需求设计学员信息表 `npm inskall mongoose`下载数据库连接模板新建一个 connect.js ~~~ //连接数据库 mongoose.connect( ' mongodb: //localhost/ playground ' ,{useNewUrlParser:true}) .then(() => console.log( '数据库连接成功')) .catch(() => console.log('数据库连接失败)) ~~~ 然后在app.js 输入`require(' . / model/ connect');`把方法引入到app.js里面设计学员信息表 ![](https://img.kancloud.cn/ec/dc/ecdc41ae6b0e0b666782a4f16415cb1c_811x774.png) 创建一个新文件 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 } //创建学生信息集合 const Student = mongoose.model( ' Student'，student sSchema) ; //将学生信息集合进行导出 module.exports = Student ; }) ~~~ 在app.js 引入当前文件的创建规则 `const Student = require(' . /model /user')` 引入后可以在app.js 利用Student 插入数据删除数据等方法 ### 4.创建路由并实现页面模板呈递 3.3第三方模块router 功能:实现路由 1.获取路由对象 2.调用路由对象提供的方法创建路由 3.启用路由，使路由生效 ~~~ const getRouter = require(' router') const router = getRouter() ; router.get(' /add'，(req, res) => { res.end('Hello world! ') }) server.on(' request'，(req, res) => { router (req, res) }) ~~~ 使用当前目录下下载模板`npm install router` ~~~ //引入router模块 const getRouter = require( ' router'); //获取路由对象 const router = getRouter(); // 修当人家访问 /test res.end 响应 test页面给他 req 请求 router.get(' /add', (req, res) => { res.end( ' test' ) }) router.get(' /list' ，(req, res) =>{ res.end( ' index') }) //当客户端访问服务器端的时候 app. on(' request', (req, res) => { // 引用 router模板的方法 router (req,res, () => {}) }); ~~~ 页面模板传递命令行当前目录下下载页面模板传递`npm install art-template` 创建文件夹存放页面文件 views app.js 文件里写入 ~~~ //引入模板引擎 const template = require( ' art-template' ); //引入path模块 const path= require('path'); //配置模板的根目录（配置绝对路径） template.defaults.rootpath.join(_ dirname, ' views'); //修呈递学生档案信息页面 router.get(' /add' ，(req, res) => { Let html = template( ' index.art'，{}); res.end(html); }) //修呈递学生档案信息列表页面 router.get(' /list'，(req, res) =>{ Let html = template( 'list.art', {}) res.end( ' html ' ) }) ~~~ ### 5.实现静态资源访问 3.4第三方模块serve-static 功能:实现静态资源访问服务步骤: 1. 引入serve-static模块获取创建静态资源服务功能的方法 2.调用方法创建静态资源服务并指定静态资源服务目录 3.启用静态资源服务功能 ~~~ const serveStatic = require(' serve-static') const serve = serveStatic('public') server.on('request', () => { serve (req, res) }) server.listen (3000) ~~~ 下载静态资源访问服务`npm install serve-static` 在app.js 写入 ~~~ //引入静态资源访问模块 const serveStatic = require( ' serve-static' ) //实现静态资源访问服务页面存放css js等文件的目录 const serve = serveStatic(path. join(_ dirname, ' public')) // 修当客户端访问服务器端的时候（在这里添加 serve 的方法） app.on( request ，(req,res) => { router(req, res ，()=>{}) serve(req, res, ( ) => {}) }); ~~~ ### 6.实现学生信息添加功能 1. 在模板的表单中指定请求地址与请求方式 2.为每一个表单项添加name属性 3.添加实现学生信息功能路由 4.接收客户端传递过来的学生信息 5.将学生信息添加到数据库中 6.将页面重定向到学生信息列表页面 2. 在模板的表单中指定请求地址与请求方式在模板页面修改加入属性 ~~~ action=" /add" （传递的页面） method= " post" 传递方式 <form action=" /add" method= " post"> ~~~ 3.添加实现学生信息功能路由在app.js 下输入 ~~~ //引入querystring模块将传过来的字符串格式转化为对象格式 const querystring = require( ' querystring' ); //实现学生信息添加功能路由 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() }) }); ~~~ 4.接收客户端传递过来的学生信息 5.将学生信息添加到数据库中 6.将页面重定向到学生信息列表页面 ### 7.实现学生信息展示功能 3.6学生信息列表页面分析 1.从数据库中将所有的学生信息查询出来 2.通过模板引擎将学生信息和HTML模板进行拼接 3.将拼接好的HTML模板响应给客户端在app.js 页面添加 ~~~ // 修呈递学生档案信息列表页面 router.get( ' /list'，async (req, res) =>{ //查询学生信息（新添加） Let students = await Student.find(); console.log(students); Let html = template(' list.art', { students:student ; }) res.end( html) }) }) ~~~ 在当前项目下载时间格式模板`npm install dateformat` 在app.js ~~~ //引入处理日期的第三方模块 const dateformat = require( ' dateformat'); //引入处理日期的第三方模块 const dateformat = require( ' dateformat'); ~~~ ![](https://img.kancloud.cn/a3/59/a3590be30046927d6e61fd12aa501cdc_1702x879.png) 优化app.js代码将这个代码单独创建一个文件装起来