江苏龙网

  1. 主页 > 生活百科 > >

Node.js构建 Web 服务( 二 )

Node.js


Node.js构建 Web 服务

文章插图
 
2. 多模版组合渲染在同一 Web 应用中，所有的页面通常都由相同的头部和底部元素，所以为了减少代码的冗余，提高重用率，开发者们通常会考虑将重复的部分独立成一个单独的模版文件，然后用相互包含的方式组合成页面 。下面就继续以art-template模板引擎为例来演示一下如何将多个模版组合渲染成单一的 HTML 页面，其具体步骤如下：
  1. 在code/04_templatingEngine目录下执行touch tpl1.art tpl2.art命令，创建两个模版文件，然后在这两个文件中分别输入以下代码：
1、tpl1.art :
<header><h1>查看个人信息</h1><br></header>2、tpl2.art ：
<footer><div><p>© 2016 owlman.org；本站系纯HTML5站点 。</p></div></footer>2、在code/04_templatingEngine目录下执行touch multiTpl.htm命令创建用于组合的 HTML 页面文件，并在其中输入以下代码：
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href=https://www.isolves.com/it/wlyx/fwq/2020-08-31/"style.css" />查看个人信息_江苏龙网{{ include './tpl1.art' }}

{{ name }}的个人信息

姓名：{{ name }}
年龄：{{ age }}
性别：{{ sex }}
爱好：{{ each items }} {{ $value }} {{ /each }}
{{ include './tpl2.art' }}3、在code/04_templatingEngine目录下执行
cp 04-useTemplating_engine.js 04-useTemplating_engine2.js命令，将之前的代码复制一份，并修改如下：
const http = require('http')const fs = require('fs')const template = require('art-template')template.defaults.root = __dirname // 配置模版的查找根目录class human {constructor(name, age, sex, items=[]){this.name = namethis.age = agethis.sex = sexthis.items = items}}const server = http.createServer()server.on('request', function(req, res){const url = req.urllet boy = nullif ( url === '/' ) {boy = new human('凌杰', '37', '男', ['看书', '看电影','旅游'])} else if ( url === '/wang' ) {boy = new human('蔓儿', '25', '女', ['看书', '看电影','写作'])}if ( boy === null ) {return res.end('<h1>404 页面没找到！</h1>')}fs.readFile('./multiTpl.htm', function(err, data){ // 修改了要读取的模版文件if ( err !== null ) {return res.end('<h1>404 没找到模版文件！</h1>')}const strHtml = template.render(data.toString(), {name : boy.name,age : boy.age,sex : boy.sex,items: boy.items})res.end(strHtml)})})server.listen(8080, function(){console.log('请访问http://localhost:8080/，按Ctrl+C终止服务！')})4、保存所有文件后，在code/04_templatingEngine目录下执行node 04-useTemplating_engine2.js命令，然后打开浏览器并访问http://localhost:8080，就会看到如下页面：
Node.js构建 Web 服务

文章插图
 
3. 多模版继承渲染当然，如果重复的元素只有头部和尾部的话，有时候使用模版继承语法来渲染页面会是一个更好的选择，下面就来继续演示一下art-template模板引擎的继承语法来渲染 HTML 页面，其具体步骤如下：
  1. 在code/04_templatingEngine目录下执行touch baseTpl.art命令，创建父模版文件，然后在该文件中输入以下代码：
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href=https://www.isolves.com/it/wlyx/fwq/2020-08-31/"style.css" />{{ name }}的个人信息_江苏龙网

查看个人信息


{{ block 'message' }}{{ /block }}

?2016 owlman.org；本站系纯HTML5站点 。

2、在code/04_templatingEngine目录下执行touch extendTpl.htm命令，创建子模版文件，然后在该文件中输入以下代码：
{{ extend 'baseTpl.art' }}{{ block 'message' }}<h1>{{ name }}的个人信息</h1><table><tr><td>姓名：</td><td>{{ name }}</td></tr><tr><td>年龄：</td><td>{{ age }}</td></tr><tr><td>性别：</td><td>{{ sex }}</td></tr><tr><td>爱好：</td><td>{{ each items }} {{ $value }} {{ /each }}</td></tr></table>{{ /block }}


推荐阅读


上一篇：微服务平台之全链路追踪

下一篇：没有了