登录
当前位置： 首页 > 工具软件 > tpl.js > 使用案例 >

node.js引入模板以及使用模板引擎笔记

慕飞章
2023-12-01

路径操作

  • 以下操作都需要引入

const path = require(‘path’);

/*
    路径操作
*/
const path = require('path');

// 获取路径的最后一部分
console.log(path.basename('/foo/bar/baz/asdf/quux.html'));  //quux.html
console.log(path.basename('/foo/bar/baz/asdf/quux.html', '.html')); //quux

获取路径

console.log(__dirname); //获取当前文件夹路径
console.log(path.dirname(’/abc/qqq/www/abc’)); //abc/qqq/www

获取扩展名称

console.log(path.extname(‘index.html’)); // .html

路径的格式化处理

path.format() obj->string
path.parse() string->obj

当前文件所在的位置

  • string转换为obj

let obj = path.parse(__filename);
console.log(obj.base); // 02.js

{
  root: 'H:\\',
  dir: 'H:\\网页前端\\移动开发\\第四章\\第三章',
  base: '02.js',
  ext: '.js',
  name: '02'
}
  • obj转换为string
 let objpath = {
    root : 'd:\\',
    dir : 'd:\\qqq\\www',
    base : 'abc.txt',
    ext : '.txt',
    name : 'abc'
};
let strpath = path.format(objpath);
console.log(strpath); //d:\qqq\www\abc.txt

判断是否为绝对路径

console.log(path.isAbsolute(’/foo/bar’)); //true
console.log(path.isAbsolute(‘C:/foo/…’)); //true

拼接路径（…表示上层路径；.表示当前路径）,在连接路径的时候会格式化路径

console.log(path.join(’/foo’, ‘bar’, ‘baz/asdf’, ‘quux’, ‘…/…/’)); //\foo\bar\baz\

规范化路径normalize

console.log(path.normalize(’/foo/bar//baz/asdf/quux/…’)); //…返回上一级 \foo\bar\baz\asdf
console.log(path.normalize(‘C:\temp\\foo\bar\…\’)); // C:\temp\foo\

计算相对路径

console.log(path.relative(’/data/orandea/test/aaa’, ‘/data/orandea/impl/bbb’)); //…\impl\bbb
console.log(path.relative(‘C:\orandea\test\aaa’, ‘C:\orandea\impl\bbb’)); //…\impl\bbb

解析路径

console.log(path.resolve(‘wwwroot’, ‘static_files/png/’, ‘…/gif/image.gif’)); //H:\网页前端\移动开发\第四章\第三章\wwwroot\static_files\gif\image.gif

两个特殊属性

console.log(path.delimiter);//表示路径分隔符（windows是\ Linux是/） //;
console.log(path.sep);//环境变量分隔符(windows中使用; linux中使用:) //\

文件操作

/*
    文件操作-查看文件状态
*/
const fs = require('fs');
console.log(1);
fs.stat('./abc',(err,stat) => {
    // 一般回调函数的第一个参数是错误对象，如果err为null,表示没有错误，否则表示报错了
    if(err) return;
    if(stat.isFile()){
        console.log('文件');
    }else if(stat.isDirectory()){
        console.log('目录');
    }
    console.log(stat);
    /*
    atime 文件访问时间
    ctime 文件的状态信息发生变化的时间（比如文件的权限）
    mtime 文件数据发生变化的时间
    birthtime 文件创建的时间
    */
    console.log(2);
});
console.log(3); //1 3 stat相关信息 2

同步操作

console.log(1);
let ret = fs.statSync('./data.txt');
console.log(ret);
console.log(2); //1 ret对象信息 2

读文件操作

const fs = require('fs');
const path = require('path');

let strpath = path.join(__dirname,'data.txt'); //获取读取当前文件下的data.txt文件 路径 
fs.readFile(strpath,(err,data)=>{
    if(err) return;
    console.log(data.toString());
});
  • 如果有第二个参数并且是编码，那么回调函数获取到的数据就是字符串
  • 如果没有第二个参数，那么得到的就是Buffer实例对象
const fs = require('fs');
const path = require('path');

let strpath = path.join(__dirname,'data.txt');
fs.readFile(strpath,'utf8',(err,data)=>{
    if(err) return;
    // console.log(data.toString());
    console.log(data);
});

同步操作

const fs = require('fs');
const path = require('path');

let strpath = path.join(__dirname,'data.txt');
let ret = fs.readFileSync(strpath,'utf8');
console.log(ret);

写文件操作

  • 写入文件
	const fs = require('fs');
	const path = require('path');

	let strpath = path.join(__dirname,'data.txt');
	fs.writeFile(strpath,'hello nihao','utf8',(err)=>{
		if(!err){
			console.log('文件写入成功');
		}
	});
  • buf写入文件
	const fs = require('fs');
	const path = require('path');
	let strpath = path.join(__dirname,'data.txt');
	let buf = Buffer.from('hi');
	fs.writeFile(strpath,buf,'utf8',(err)=>{ //不指定编码格式，采用默认编码格式
		if(!err){
			console.log('文件写入成功');
		}
	});
  • 同步操作
	const fs = require('fs');
	const path = require('path');

	let strpath = path.join(__dirname,'data.txt');
	fs.writeFileSync(strpath,'tom and jerry'); //同步操作无提示

大文件操作（流式操作）

  1. fs.createReadStream(path[, options])
  2. fs.createWriteStream(path[, options])
  • 大文件传统处理方式
   const path = require('path');
   const fs = require('fs');
   
   let spath = path.join(__dirname,'../03-source','file.zip');
   let dpath = path.join('C:\\Users\\www\\Desktop','file.zip');
   
   let readStream = fs.createReadStream(spath);
   let writeStream = fs.createWriteStream(dpath);
   
   // 基于事件的处理方式
   // $('input[type=button]').on('click',function(){
   //     console.log('hello');
   // });
   let num = 1;
   readStream.on('data',(chunk)=>{
       num++;
       writeStream.write(chunk);
   });
   
   readStream.on('end',()=>{
       console.log('文件处理完成'+num);
   });
  • 管道读写操作

读取 input.txt 文件内容，并将内容写入到 output.txt 文件中
pipe的作用直接把输入流和输出流
readStream.pipe(writeStream);

const path = require('path');
const fs = require('fs');
let spath = path.join(__dirname,'../03-source','file.zip');
let dpath = path.join('C:\\Users\\www\\Desktop','file.zip');
fs.createReadStream(spath).pipe(fs.createWriteStream(dpath));

目录操作

1、创建目录
fs.mkdir(path[, mode], callback)
fs.mkdirSync(path[, mode])
2、读取目录
fs.readdir(path[, options], callback)
fs.readdirSync(path[, options])
3、删除目录
fs.rmdir(path, callback)
fs.rmdirSync(path)

  • 创建目录
const path = require('path');
const fs = require('fs');
// 创建目录
fs.mkdir(path.join(__dirname,'nihao'),(err)=>{ //在当前目录下创建nihao文件夹
    console.log(err);
});
  • 创建目录 同步
const path = require('path');
const fs = require('fs');
fs.mkdirSync(path.join(__dirname,'hello'));
  • 读取目录
const path = require('path');
const fs = require('fs');
fs.readdir(__dirname,(err,files)=>{
    files.forEach((item,index)=>{
        fs.stat(path.join(__dirname,item),(err,stat)=>{
            if(stat.isFile()){
                console.log(item,'文件');
            }else if(stat.isDirectory()){
                console.log(item,'目录');
            }
        });
    });
});

结果：

01.js 文件
02.js 文件
04.js 文件
03.js 文件
05.js 文件
06.js 文件
07.js 文件
08.js 文件
abc 目录
data.txt 文件
hello 目录
笔记.md 文件
  • 同步读取文件
const path = require('path');
const fs = require('fs');
let files = fs.readdirSync(__dirname);
files.forEach((item,index)=>{
    fs.stat(path.join(__dirname,item),(err,stat)=>{
        if(stat.isFile()){
            console.log(item,'文件');
        }else if(stat.isDirectory()){
            console.log(item,'目录');
        }
    });
});
  • 删除文件
const path = require('path');
const fs = require('fs');
// 删除目录
fs.rmdir(path.join(__dirname,'abc'),(err)=>{
    console.log(err);
});
  • 同步删除目录
 fs.rmdirSync(path.join(__dirname,'qqq'));

初始化文件目录

/*
    文件操作案例（初始化目录结构）
*/
const path = require('path');
const fs = require('fs');

let root = 'C:\\Users\\Administrator\\Desktop';
let fileContent = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>welcome to this</div>
</body>
</html>
`;

// 初始化数据
let initData = {
    projectName : 'mydemo',
    data : [{
        name : 'img',
        type : 'dir'
    },{
        name : 'css',
        type : 'dir'
    },{
        name : 'js',
        type : 'dir'
    },{
        name : 'index.html',
        type : 'file'
    }]
}

// 创建项目跟路径
fs.mkdir(path.join(root,initData.projectName),(err)=>{
    if(err) return;
    // 创建子目录和文件
    initData.data.forEach((item)=>{
        if(item.type == 'dir'){
            // 创建子目录
            fs.mkdirSync(path.join(root,initData.projectName,item.name));
        }else if(item.type == 'file'){
            // 创建文件并写入内容
            fs.writeFileSync(path.join(root,initData.projectName,item.name),fileContent);
        }
    });
});

开发

 全局安装 -g：
    全局安装的包位于Node.js环境的node_modules目录下，全局安装的包一般用于命令行工具
    
    本地安装：
    本地安装的包在当前目录下的node_modules里面，本地安装的包一般用于实际的开发工作
    ------------------------------------------------------------
    npm常用的命令：
    1、安装包（如果没有指定版本号，那么安装最新版本）
    npm install -g 包名称 (全局安装)
    npm install 包名称 (本地安装)

    2、安装包的时候可以指定版本
    npm install -g 包名称@版本号

    3、卸载包
    npm uninstall -g 包名

    4、更新包（更新到最新版本）
    npm update -g 包名
    
    开发环境（平时开发使用的环境）
    生产环境（项目部署上线之后的服务器环境）
    --save 向生产环境添加依赖 dependencies
    --save-dev 向开发环境添加依赖 DevDependencies

安装工具

 yarn工具基本使用

    安装yarn工具：npm install -g yarn

    1、初始化包
    npm init
    yarn init
    2、安装包
    npm install xxx --save
    yarn add xxx
    3、移除包
    npm uninstall xxx
    yarn remove xxx
    4、更新包
    npm update xxx
    yarn upgrade xxx
    5、安装开发依赖的包
    npm install xxx --save-dev
    yarn add xxx --dev
    6、全局安装
    npm install -g xxx
    yarn global add xxx
    7、设置下载镜像的地址
    npm config set registry url
    yarn config set registry url
    8、安装所有依赖
    npm install
    yarn install
    9、执行包
    npm run
    yarn run

安装全局 es-checker

H:\网页前端\移动开发\第四章\第三章>npm install -g es-checker

  • 使用 es-checker

H:\网页前端\移动开发\第四章\第三章>es-checker

  • i5ting_toc

作用i5ting_toc是在node环境下的实现工具,可以把 md文档转为 html页面。

  • 安装i5ting_toc

H:\网页前端\移动开发\第四章\第三章>npm install i5ting_toc -g

  • 将md文件转换为html格式文件

H:\网页前端\移动开发\第四章\第三章\outline>i5ting_toc -f outline.md -o

指定文件

创建hello文件，在内部创建index.js文件，输入 console.log(‘hello nihao I am a student’);
使用cd命令来到hello文件夹目录
输入 npm init 例如 H:\网页前端\移动开发\第四章\第三章\hello>npm init
会自动在该目录生成package.json文件

{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

输入 node . 执行文件 并输出

可以使用快捷命令npm init -y

配置包可以修改为

{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "node index.js"
  },
  "author": "",
  "license": "ISC"
}
  • 运行命令

npm run test

H:\网页前端\移动开发\第四章\第三章\hello>npm run test
> hello@1.0.0 test
> node index.js
hello nihao I am a student

安装本地art-template框架

npm install art-template@latest

使用art-template框架

  • index.js 入口文件
/*
    包的入口文件
*/
var template = require('art-template');
var html = template(__dirname + '/tpl-user.art', { //引入模板文件
    user: {
        name: '张三'
    }
});
console.log(html);
  • 创建tpl-user.art模板文件
{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}
  • 运行命令 node.

结果 <H2>张三 </H2>

安装生产的包

npm install --production
如果去掉production 开发环境与生产环境的包都会出现

安装yarn框架

npm install yarn -g
yarn add art-template

出现在开发环境里
{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "art-template": "^4.13.2"
  }
}

简单的服务器

  1. 请求页面 .tpl格式
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>查询成绩</title>
</head>
<body>
	<form action="http://localhost:3000/score" method="post">
	    请输入考号：<input type="text" name="code">
	    <input type="submit" value="查询">
	</form>
</body>
</html>
  1. 返回结果页面
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>成绩结果</title>
</head>
<body>
	<div>
		<ul>
			<li>语文： $$chinese$$</li>
			<li>数学：$$match$$</li>
			<li>历史：$$history$$</li>
			<li>数学：$$teletory$$</li>
			<li>科学：$$english$$</li>
		</ul>
	</div>
</body>
</html>
<!-- "chinese":"120",
		"match":"160",
		"history":"240",
		"teletory":"60",
		"english":"100" -->
  1. json数据文件
{
	"stu001":{
		"chinese":"120",
		"match":"160",
		"history":"240",
		"teletory":"60",
		"english":"100"
	},
	"stu002":{
		"chinese":"220",
		"match":"10",
		"history":"140",
		"teletory":"160",
		"english":"300"
	},
	"stu003":{
		"chinese":"220",
		"match":"260",
		"history":"40",
		"teletory":"60",
		"english":"10"
	},
	"stu004":{
		"chinese":"100",
		"match":"50",
		"history":"140",
		"teletory":"40",
		"english":"30"
	}
}
  1. 创建js文件
/*
    动态网站开发

    成绩查询功能
*/
const http = require('http');
const path = require('path');
const fs = require('fs');
const querystring = require('querystring');
const scoreData = require('./score.json');

http.createServer((req,res)=>{
	// 路由（请求路径+请求方式）
	// 查询成绩的入口地址 /query
	if(req.url.startsWith('/query') && req.method=='GET'){
		fs.readFile(path.join(__dirname,'view','index.tpl'),'utf8',(err,content)=>{
			//http://localhost:3000/query
			if(err){
				res.writeHead(500,{
					'Content-Type':'text/plain;charset=utf8'
				});
				res.end('服务器错误，请与管理员联系');
			}
			res.end(content);
		});
	}else if(req.url.startsWith('/score') && req.method=='POST'){
		// 获取成绩的结果 /score
		let pdata = '';
		req.on('data',(chunk)=>{
			 pdata += chunk;
		});
		req.on('end',()=>{
			let obj =querystring.parse(pdata);
			let result = scoreData[obj.code]; //考生编号
			fs.readFile(path.join(__dirname,'view','result.tpl'),'utf8',(err,content)=>{
				if(err){
					res.writeHead(500,{
						'Content-Type':'text/plain;charset=utf8'
					});
					res.end('服务器错误，请与管理员联系');
				};
				console.log(result);
				// 返回内容之前要进行数据渲染
				content = content.replace('$$chinese$$',result.chinese);
				content = content.replace('$$match$$',result.match);
				content = content.replace('$$history$$',result.history);
				content = content.replace('$$teletory$$',result.teletory);
				content = content.replace('$$english$$',result.english);
				res.end(content);
			});
		});
		
		
	}
}).listen(3000,()=>{
	console.log('running...........');
});

简单的服务器

  • 在网址栏上输入 localhost:3000
// 简单服务器
const http = require('http');
let server = http.createServer();
server.on('request',(erq,res)=>{
	res.end('欢迎光临 ');
});
server.listen(3000);

查找本机Ip配置

ipconfig

关闭node启动的服务器

ctrl + C

指定ip的服务器

const http = require('http');
http.createServer((req,res)=>{
	res.end('ok');
}).listen(3000,'192.168.31.51',()=>{
	console.log('服务器启动成功');
});

node js

Node.js的Web开发相关的内容：
1、Node.js不需要依赖第三方应用软件（Apache），可以基于api自己实现
2、实现静态资源服务器
3、路由处理
4、动态网站
5、模板引擎
6、get和post参数传递和处理

Web开发框架：express

传统的动态网站开发需要应用软件

PHP ： Apache + php模块
java ：Tomcat 、Weblogic
Node.js : 不需要应用软件（可以自己实现）

请求路径分发

/*
    处理请求路径的分发
    1、req对象是Class: http.IncomingMessage的实例对象
    2、res对象是Class: http.ServerResponse的实例对象
*/
const http = require('http');
http.createServer((req,res)=>{
    // req.url可以获取URL中的路径（端口之后部分）
    // res.end(req.url);
    if(req.url.startsWith('/index')){
        // write向客户端响应内容,可以写多次
        res.write('hello');
        res.write('hi');
        res.write('nihao');
        // end方法用来完成响应，只能执行一次
        res.end();
    }else if(req.url.startsWith('/about')){
        res.end('about');
    }else{
        res.end('no content');
    }
}).listen(3000,'192.168.0.106',()=>{
    console.log('running...');
});

响应完整路径页面

/*
    响应完整的页面信息
*/
const http = require('http');
const path = require('path');
const fs = require('fs');

// 根据路径读取文件的内容，并且响应到浏览器端
let readFile = (url,res) => {
    fs.readFile(path.join(__dirname,'www',url),'utf8',(err,fileContent)=>{
        if(err){
            res.end('server error');
        }else{
            res.end(fileContent);
        }
    });
}

http.createServer((req,res)=>{
    // 处理路径的分发
    if(req.url.startsWith('/index')){
        readFile('index.html',res);
    }else if(req.url.startsWith('/about')){
        readFile('about.html',res);
    }else if(req.url.startsWith('/list')){
        readFile('list.html',res);
    }else{
        // 设置相应类型和编码
        res.writeHead(200,{
            'Content-Type':'text/plain; charset=utf8'
        });
        res.end('页面被狗狗叼走了');
    }
}).listen(3000,'192.168.0.106',()=>{
    console.log('running...');
});

静态页面 自定义方法

const path = require('path');
const fs = require('fs');
const mime = require('./mime.json');

exports.staticServer = (req,res,root) => {
    fs.readFile(path.join(root,req.url),(err,fileContent)=>{
        if(err){
            // 没有找到对应文件
            res.writeHead(404,{
                'Content-Type':'text/plain; charset=utf8'
            });
            res.end('页面被狗狗叼走了');
        }else{
            let dtype = 'text/html';
            // 获取请求文件的后缀
            let ext = path.extname(req.url);
            // 如果请求的文件后缀合理，就获取到标准的响应格式
            if(mime[ext]){
                dtype = mime[ext];
            }
            // 如果响应的内容是文本，就设置成utf8编码
            if(dtype.startsWith('text')){
                dtype += '; charset=utf8'
            }
            // 设置响应头信息
            res.writeHead(200,{
                'Content-Type':dtype
            });
            res.end(fileContent);
        }
    });
}
  • 调用
const http = require('http');
const ss = require('./06.js');
const path = require('path');
http.createServer((req,res)=>{
    // ss.staticServer(req,res,path.join(__dirname,'www'));
    ss.staticServer(req,res,path.join('C:\\Users\\www\\Desktop','test')); //可以指定其他路径
}).listen(3000,()=>{
    console.log('running....');
})

get参数处理-url核心模块

	const url = require('url');
	parse方法的作用就是把URL字符串转化为对象
	let str = 'http://www.baidu.com/abc/qqq?flag=123&keyword=java';
	let ret = url.parse(str,true); //增加true ，query就是一个返回一个对象 否则返回就是字符串
	console.log(ret.query.keyword);

	//format的作用就是把对象转化为标准的URL字符串
	let obj = {
	  protocol: 'http:',
	  slashes: true,
	  auth: null,
	  host: 'www.baidu.com',
	  port: null,
	  hostname: 'www.baidu.com',
	  hash: null,
	  search: '?flag=123&keyword=java',
	  query: 'flag=123&keyword=java',
	  pathname: '/abc/qqq',
	  path: '/abc/qqq?flag=123&keyword=java',
	  href: 'http://www.baidu.com/abc/qqq?flag=123&keyword=java' 
	};
	let ret1 = url.format(obj);
	console.log(ret1);

get参数解析

const http = require('http');
const path = require('path');
const url = require('url');

http.createServer((req,res)=>{
    let obj = url.parse(req.url,true);
    res.end(obj.query.username + '=========' + obj.query.password);
}).listen(3000,()=>{
    console.log('running....');
})

post请求

// parse方法的作用就是把字符串转成对象
	let param = 'username=lisi&password=123';
	let param = 'foo=bar&abc=xyz&abc=123';
	let obj = querystring.parse(param);
	console.log(obj);
	// stringify的作用就是把对象转成字符串
	let obj1 = {
		flag : '123',
		abc : ['hello','hi']
	}
	let str1 = querystring.stringify(obj1);
	console.log(str1);

接受logo开头的post请求

http.createServer((req,res)=>{
    if(req.url.startsWith('/login')){
        let pdata = '';
        req.on('data',(chunk)=>{
            // 每次获取一部分数据
            pdata += chunk;
        });

        req.on('end',()=>{
            // 这里才能得到完整的数据
            console.log(pdata);
            let obj = querystring.parse(pdata);
            res.end(obj.username+'-----'+obj.password);
        });
    }
}).listen(3000,()=>{
    console.log('running...');
})

安装 markdown-it

C:\Users\Administrator>npm install -g markdown-it

应用

var md = require('markdown-it')();
var result = md.render('## markdown-it rulezz!'); //## markdown-it rulezz! 是渲染的md格式 h2标签
console.log(result);
  • 模板文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板页面</title>
    <style type="text/css">
    h1 {
        color: blue;
    }
    </style>
</head>
<body>
    <%content%>
</body>
</html>
  • md 文件
	# 一级标题
	## 二级标题
	### 三级标题
	- 列表信息
		+ 二级列表
			* 三级列表
  • 执行
const path = require('path');
const fs = require('fs');
const md = require('markdown-it')();

let tplPath = path.join(__dirname,'tpl.html');
let mdPath = path.join(__dirname,'demo.md');
let targetPath = path.join(__dirname,'demo.html');
// 获取markdown文件
fs.readFile(mdPath,'utf8',(err,data)=>{
    if(err) return;
    // 对markdown内容进行转换操作
    let result = md.render(data);
    // 读取模板内容
    let tpl = fs.readFile(tplPath,'utf8',(err,tplData)=>{
        if(err) return;
        tplData = tplData.replace('<%content%>',result);
        // 生成的最终页面写入目标文件
        fs.writeFile(targetPath,tplData,(err)=>{
            console.log('转换完成');
        });
    })
});

登录验明模块

/*
    登录验证功能
*/
const http = require('http');
const url = require('url');
const querystring = require('querystring');
const ss = require('./06.js');

http.createServer((req,res)=>{
    // 启动静态资源服务
    if(req.url.startsWith('/www')){
        ss.staticServer(req,res,__dirname);
    }
    console.log(req.url);
    // 动态资源
    if(req.url.startsWith('/login')){
        // get请求
        if(req.method == 'GET'){
            let param = url.parse(req.url,true).query;
            if(param.username == 'admin' && param.password == '123'){
                res.end('get success');
            }else{
                res.end('get failure');
            }
        }
        // post请求
        if(req.method == 'POST'){
            let pdata = '';
            req.on('data',(chunk)=>{
                pdata += chunk;
            });
            req.on('end',()=>{
                let obj = querystring.parse(pdata);
                if(obj.username == 'admin' && obj.password == '123'){
                    res.end('post success');
                }else{
                    res.end('post failure');
                }
            });
        }
    }

}).listen(3000,()=>{
    console.log('running....');
});

模板引擎

  • .art模板
{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}
  • 渲染一
let template = require('art-template');
// let html = template(__dirname + '/mytpl.art', {
//     user: {
//         name: 'lisi'
//     }
// });
// console.log(html);
  • 渲染二
let template = require('art-template');
let tpl = '<ul>{{each list as value}}<li>{{value}}</li>{{/each}}</ul>';
let render = template.compile(tpl);
let ret = render({
    list : ['apple','orange','banana']
});
console.log(ret);
  • 渲染三
let template = require('art-template');
let tpl = '<ul>{{each list}}<li>{{$index}}-------------{{$value}}</li>{{/each}}</ul>';
let ret = template.render(tpl,{
    list : ['apple','orange','banana','pineapple']
});
console.log(ret);
  • art模板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩结果</title>
</head>
<body>
    <div>
        <ul>
            <li>语文：{{chinese}}</li>
            <li>数学：{{math}}</li>
            <li>外语：{{english}}</li>
            <li>综合：{{summary}}</li>
        </ul>
    </div>
</body>
</html>
  • 入口
let html = template(__dirname + '/score.art', {
    chinese : '120',
    math : '130',
    english : '146',
    summary : '268'
});
console.log(html);
 类似资料：

相关阅读

BaiduTemplate模板引擎使用示例（附源码）Spring Boot thymeleaf模板引擎的使用详解可以将AngularJS与Jinja2模板引擎一起使用吗？Spring Boot使用模板引擎JSP实例解析javascript轻量级模板引擎juicer使用指南

相关文章

模板方法模式JSF Facelets模板C++类模板入门教程C++函数模板入门教程Vue.js 模板语法

相关问答

Thymeleaf作为Spring Starter Mail中的模板引擎百里香模板引擎(布局:装饰)不加载Spring Boot的模板文件允许Apache的FreeMarker模板引擎从外部资源文件夹加载模板Angular2-NgSwitch内部的模板引用在prestashop 1.7注册的javascript文件中使用smarty模板引擎

相关文档

Smarty 模板引擎中文文档Jade 模板引擎 中文文档vue-cli webpack 模板中文文档应用引擎 V2 开发文档厘米游戏引擎接入指南和开发文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.