【Node学习总结-03】-CSDN博客

一、模板引擎

1. 在node中使用模板引擎

npm install art-template

该命令在哪执行就会把包下载到哪里。默认会下载到 node_modules 目录中。node_modules 不要改，也不支持改。

let http = require('http')
let template = require('art-template')
let fs = require('fs')
let server = http.createServer()
server.on('request', (req, res)=>{
  fs.readFile('./tpl.html', function (err, data) {
    if (err) {
      return console.log('读取文件失败了')
    }
    // 默认读取到的 data 是二进制数据
    // 而模板引擎的 render 方法需要接收的是字符串
    // 所以我们在这里需要把 data 二进制数据转为 字符串 才可以给模板引擎使用
    let ret = template.render(data.toString(), {
      name: 'Jack',
      age: 18,
      province: '广东',
      hobbies: [
        '写代码',
        '唱歌',
        '打游戏'
      ],
      title: '个人信息'
    })
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
    res.end(ret)
  })
})
server.listen(3000, function () {
  console.log('服务运行在3000端口')
})

tpl.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
</head>
<body>
  <p>大家好，我叫：{{ name }}</p>
  <p>我今年 {{ age }} 岁了</p>
  <h1>我来自 {{ province }}</h1>
  <p>我喜欢：{{each hobbies}} {{ $value }} {{/each}}</p>
  <script>
    var foo = '{{ title }}'
  </script>
</body>
</html>

运行结果

2. 在浏览器中使用模板引擎

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06-在浏览器中使用art-template</title>
</head>
<body>
  <!-- 
    注意：在浏览器中需要引用 lib/template-web.js 文件
    强调：模板引擎不关心你的字符串内容，只关心自己能认识的模板标记语法，例如 {{}}
    {{}} 语法被称之为 mustache 语法，八字胡啊。
   -->
  <script src="node_modules/art-template/lib/template-web.js"></script>
  <script type="text/template" id="tpl">
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <p>大家好，我叫：{{ name }}</p>
      <p>我今年 {{ age }} 岁了</p>
      <h1>我来自 {{ province }}</h1>
      <p>我喜欢：{{each hobbies}} {{ $value }} {{/each}}</p>
    </body>
    </html>
  </script>
  <script>
    var ret = template('tpl', {
      name: 'Jack',
      age: 18,
      province: '北京市',
      hobbies: [
        '写代码',
        '唱歌',
        '打游戏'
      ]
    })

    var div = document.createElement('div')
    div.innerHTML = ret
    document.body.append(div)

  </script>
</body>
</html>

拓展

（1）服务端渲染

（2）客户端渲染

服务端渲染
- 说白了就是在服务端使用模板引擎
- 模板引擎最早诞生于服务端，后来才发展到了前端
服务端渲染和客户端渲染的区别
- 客户端渲染不利于 SEO 搜索引擎优化
- 服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的
- 所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的
- 而是两者结合来做的
- 例如京东的商品列表就采用的是服务端渲染，目的了为了 SEO 搜索引擎优化
- 而它的商品评论列表为了用户体验，而且也不需要 SEO 优化，所以采用是客户端渲染

扩展：模板的继承

公共模块

head.html

<div>
    <h1>公共的头部</h1>
</div>

foot.html

<div>
    <h1>公共的底部</h1>
</div>

总体布局模板，这个模板会包含一些公共模块，并留下一些坑

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
    {{ block 'head' }}
    <!-- 留一个样式坑，将要留给继承该模板的模板去填坑 -->
    {{ /block }}
</head>
<body>
<!-- 包含公共头部 -->
{{ include './header.html' }}

{{ block 'content' }}
<!-- 留一个内容坑，将要留给继承该模板的模板去填坑 -->
<!-- 坑里可以有一些默认内容 -->
<h1>默认内容</h1>
{{ /block }}
<!-- 包含公共底部 -->
{{ include './footer.html' }}
<script src="/node_modules/jquery/dist/jquery.js"></script>
{{ block 'script' }}
<!-- 留一个脚本坑 -->
{{ /block }}
</body>
</html>

最终要渲染的模板，这个模板要继承布局模块模板并将其留下的坑填上

index.html

{{extend './layout.html'}}

{{ block 'head' }}
<style>
    body {
        background-color: skyblue;
    }
</style>
{{ /block }}

{{ block 'content' }}
<div>
    <h1>index 页面填坑内容</h1>
</div>
{{ /block }}

{{ block 'script' }}
<script>
    window.alert('index 页面自己的 js 脚本')
</script>
{{ /block }}

list.html

{{extend './layout.html'}}

{{ block 'content' }}
<div>
    <h1>列表页自己的内容</h1>
</div>
{{ /block }}

二、URL模块

var url = require('url')

var obj = url.parse('/pinglun?name=pzz&message=pzzGood', true)

console.log(obj)
console.log(obj.query)

三、处理网站中的静态资源

我们处理的方式就是新建一个public目录，把请求的资源放在这个目录下（js,img,css,lib）。在网页中直接写路径就可以了。

四、Path模块

【注意】./开头的路径是相对路径，/开头的路径其实是绝对路径，/就表示磁盘根目录。

五、文件操作路径问题

【提示】__dirname：全局变量，存储的是文件所在的文件目录。__filename：全局变量，存储的是文件名。

案例

文件操作路径与路径标识路径区别：

// 在文件操作的相对路径中
//    ./data/a.txt 相对于当前目录
//    data/a.txt   相对于当前目录
//    /data/a.txt  绝对路径，当前文件模块所处磁盘根目录
//    c:/xx/xx...  绝对路径
fs.readFile('./data/a.txt', function (err, data) {
  if (err) {
    console.log(err)
    return console.log('读取失败')
  }
  console.log(data.toString())
})


//相对于当前目录
require('./data/foo.js')
// 如果这里忽略了 . 则也是磁盘根目录
require('/data/foo.js')
// 在模块加载中，相对路径中的 ./ 不能省略
require('data/foo.js')
// ==> Error: Cannot find module 'data/foo.js'