模板引擎不关心内容

art-template

  • art-template不仅可以在浏览器使用,也可以在node中使用
  • npm install art-template该命令在哪执行就会把包下载在哪里,默认下载到node_modules不要改,也不支持改。

在浏览器中引入art—template

{{}}语法被称之为mustache语法,八字胡语法
注意和Vue相似,但是有区别。
模板引擎不关心内容,全是字符串,不带有格式,全是字符串,只关心这个mustache语法标记的内容。

//使用方法 template('script 标签 id', { 对象 })

<!-- 在浏览器中需要引入的是lib/template-web.js -->
<script src="../node_modules/art-template/lib/template-web.js"></script>
<script type="text/template" id="tpl">hello {{ name }}{{ message }}人生格言:{{each hobbies}} {{$value}} {{/each}}
</script>
<script>var ret = template('tpl', {name: '勇敢牛牛',message: '不怕困难',hobbies: ['天道酬勤', '地道酬善', '人道酬诚', '商道酬信', '业道酬精']})console.log(ret);
</script>

模板引擎最早诞生于服务器领域,后来才发展到前端领域

  • 在需要的文件模块中加载art-template,只需要requir方法加载:require(‘art-template’),参数也就是你下载的包的名字,即install的名字是什么,则你require中的就是什么
  • 查文档,使用模板引擎API

代码描述:

var template = require('art-template');
// 这里不是浏览器
// template('script 标签 id', { 对象 })
var tplStr = `hello {{ name }}{{ message }}人生格言:{{each hobbies}} {{$value}} {{/each}}`;
var ret = template.render(tplStr, {name: '勇敢牛牛',message: '不怕困难',hobbies: ['天道酬勤', '地道酬善', '人道酬诚', '商道酬信', '业道酬精']
})
console.log(ret);

但是我们的html代码不可能是这点的,那如何使得js文件精简呢?

对,读文件。。。。。
利用核心模块把文件读到一个变量里面,再进行替换。

var template = require('art-template');
var fs = require('fs');
var path = require('path');
var tplStr = '';
fs.readFile(path.join(__dirname, "./tpl.html"), function (err, data) {if (err) {return console.log('读取失败');} else {console.log('读取成功,数据内容是' + data.toString());tplStr = data.toString();var ret = template.render(tplStr, {name: '勇敢牛牛',message: '不怕困难',hobbies: ['天道酬勤', '地道酬善', '人道酬诚', '商道酬信', '业道酬精']})console.log(ret);}
})

在服务器中引入art—template实现目录替换

// 加载http核心模块
var http = require('http');
// 加载文件模块
var fs = require('fs');
// 加载路径模块
var path = require('path');
// 创建server
var server = http.createServer();
// 监听server的request的请求事件,设置请求处理函数
var template = require('art-template');
// 加载模板引擎
var wwwDir = "E:/nodejs/WWW";
server.on('request', function (req, res) {var url = req.url;fs.readFile(path.join(__dirname, "./template.html"), function (err, data) {if (err) {return res.end('404 Not Found');//    如何得到WWW下的目录列表的文件名和,目录名//    fs.readdir//    如何将得到的文件名和目录名替换到template.html中//    模板引擎//    只要做了这两件事,那这个问题就解决了}fs.readdir(wwwDir, function (err, files) {if (err) {return res.end("Can not find www dir")}data = template.render(data.toString(), {files: files})res.end(data);})})
})
//绑定端口号然后很nice
server.listen(3000, function () {console.log('running .....');
})

兄弟们,想了一下午,自己理解了一下同异步和回调。


坎坎坷坷,前路漫漫,自己挖的坑要自己填,各位看官理解的不到之处要指出来嗷
我想在readFile外部使用这个读取到的字符串变量,第一次尝试他直接没出来,查询原因说是readFile是异步,理解同异步的概念我就错过了饭点,唉,这理解力也是没谁了。
问了老师这个问题的解决之道,惭愧,我不知道怎么用到这儿呜呜呜呜……ps老师(你需要自己写一个回调函数,来接受里面的回调函数的结果!),也顺便记录一下老师对我说的话(Nose.js是单线程,可以处理高并发,效果比传统的多线程处理高并发效要好!单线程如何处理高高并发,回调函数如何起作用的,其中异常又是如何捕获的,网络后端到底干啥的,请求是如何响应的。这些有助你理解同步和异步)等我学的好一点再回头看看吧!


异步

  • 所谓"异步",简单说就是一个任务不是连续完成的,可以理解成该任务被人为分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。
  • 比如,我现在的任务是读取文件进行处理,任务的第一段是向操作系统发出请求,要求读取文件。然后就不管了,程序就去执行其他任务,等到操作系统返回文件,再接着执行任务的第二段(处理文件)。这种不连续的执行,就叫做异步。
  • 相应地,连续的执行就叫做同步。由于是连续执行,不能插入其他任务,所以操作系统从硬盘读取文件的这段时间,程序只能干等着,如果同步读取文件发生错误,则需要用try…catch捕获该错误:。

回调函数

JavaScript 语言对异步编程的实现,就是回调函数。 所谓回调函数,就是把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数。回调函数的英语名字callback,直译过来就是"重新调用"。

读取文件进行处理,是这样写的(这是Node.js的File System模块,简写为fs):
readFile 函数异步读取文件的全部内容,并存储在内存中,然后再传递给用户。

fs.readFile(path.join(__dirname, "./a.js"),function(err,data){if(err){console.log("取读失败");}else{console.log("读取成功,数据是"+data.toString());}
})

上面代码中,readFile函数的第二个参数,就是回调函数,也就是任务的第二段。等到操作系统返回了/a.js这个文件以后,回调函数才会执行。

一个有趣的问题是,为什么 Node 约定,回调函数的第一个参数,必须是错误对象err(如果没有错误,该参数就是null)?

原因是执行分成两段,第一段执行完以后,任务所在的上下文环境就已经结束了。在这以后抛出的错误,原来的上下文环境已经无法捕捉,只能当作参数,传入第二段。

写着写着突然灵光乍现,针对fs的readfille读取文件时,返回不了异步函数返回值的解决方法,想来想去,老师的那句话,绝绝子。

获取fs的readfille读取文件时的返回值

之前尝试的错误写法:
有那个意思了但是没有写到点子上

模板引擎不关心内容之——art-template,碰见的同步与fs.readFile异步以及函数回调问题的描述,针对fs的readfille读取文件时,返回不了异步函数返回值的解决方法相关推荐

  1. 获取fs的readfille读取文件时的返回值

    针对fs的readfille读取文件时,返回不了异步函数返回值的解决方法. 首先,例: 一: let file = fs.readFile(path, "utf-8", funct ...

  2. 删除、移动、复制文件时总是要卡在99%一段时间解决方法

    删除文件时总是要卡在99%一段时间解决方法 对我的电脑无效的解决办法 我去百度搜索了一下,用的是这种解决办法 dism /online /Cleanup-Image /RestoreHealth &a ...

  3. 上传文件时$_FILES为空,可能的原因及解决方法

    上传文件时$_FILES为空,可能的原因及解决方法 参考文章: (1)上传文件时$_FILES为空,可能的原因及解决方法 (2)https://www.cnblogs.com/i6010/articl ...

  4. NDK编译c包含C++头文件时,出现 error: unknown type name 'class' 的解决方法

    在进行native开发的时候,难免会遇到C文件包含C++头文件而调用C++函数,若没做什么处理,直接include进行编译的话,会遇到以下错误: error: unknown type name 'c ...

  5. asp.net上传文件时提示,不支持给定路径的格式解决方法

    asp.net的上传图片,在部分浏览器中,提示"不支持给定路径的格式" .该问题是由于浏览器的有些设置会把图片的本地完整路径发送到服务器端,而服务器端在写代码的时候,却是按单独的文 ...

  6. IE浏览器下载excel文件时不弹出下载保存提示框的解决方法

    在IE浏览器中下载文件的时候,下载保存的提示框不弹出了,特意咨询了一下解决的方法,特来和大家分享. 1.打开"我的电脑"后请点击工具列的:"工具 -- 文件夹选项&quo ...

  7. 局域网电脑共享设备或文件时显示无法访问并提示无权限之解决方法

    局域网共享时,能看到共享的文件夹,但是双击访问时提示:你没有权限访问***,请与网络管理员联系请求访问权限: 解决方法: 1.在设置共享此文件夹的电脑,找到该文件夹,右键---属性,点击---安全选项 ...

  8. Linux在vi/vim编辑文件时(104键)键盘右边数字键输入异常解决方法

    出现的问题:当Linux在vi/vim编辑文件时,当输入i编辑文件时,发现用键盘(104键)右边数字键进行输入时输出的不是数字而是英文字母! 应按如下操作解决: 1用Xshell6(目前我用的Xshe ...

  9. matlab读取文件权限被拒绝,安装MATLAB拒绝访问问题的解决方法

    我在安装Matlab R2009a的时候总是出现拒绝访问的问题 我在网上查找解决方案全都无效 现在总算找到了问题所在,我发现很早就有这个问题了就是没有解决的方法 所以我把我自己的解决方法贴出来,希望对 ...

最新文章

  1. 手机端仿ios的1-n级联动脚本二
  2. 更大的工字型电感作为150kHz导航信号接收天线
  3. mysql在mac下的data目录_Mysql在mac中目录结构用法命令
  4. 微软 Mozilla高管评Safari Windows版
  5. android 开发
  6. 深入研究ES6 Generators
  7. 新经济、新选择——人才流动与迁徙2021
  8. VBA调用DOS程序两种方法
  9. python 新建一列_python – 如何在迭代pandas数据框时创建新列并插入行值
  10. Java中递归复制多级文件夹(IO流)
  11. 计算机术语中cook,计算机中的cookie是什么意思
  12. OD数据集(一)—介绍
  13. matlab 合成t检验,[zz]用MATLAB做T检验(ttest)
  14. C++ 单例模式-打印机案例
  15. 【react踩坑】前端显示文件流图片
  16. apmserv 5.2.6 升级php,Windows + APMServ5.2.6/PHP5以上
  17. 计算机权限删除文件win10,win10系统使用管理员权限无法删除部分文件的详细步骤...
  18. c++ Linux windows学习路线
  19. java的意思和含义,2022年最新
  20. C语言实现链表与文件的存取

热门文章

  1. Onenote实用笔记
  2. AcWing 478. 侦探推理 枚举+模拟
  3. java获取过去12个月日期
  4. Matlab运用mapping包在地图上绘制散点图
  5. 好奇号火星车是我梦中的情人
  6. VMware安装Centos7和卸载超详细过程(图文)
  7. GlobalSign 发布了即将要修改代码签名证书的重要通知
  8. 银河系的神秘信号:也许我们正见证真实的科幻故事
  9. 安卓 新闻客户端毕业设计项目
  10. 【GA MTSP】基于matlab GUI遗传算法求解多旅行商问题(多起点不同终点)【含Matlab源码 935期】