Node.js (第三方模块/静态资源/处理表单)_第三方网站表单js-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40980087/article/details/102074156

在node中使用art-template模板引擎。

步骤：

1.安装。在需要的目录下，

npm install art-template

2.在需要的文件模块中使用 require（）加载。

var template = require('art-template')

3.调用相应模板引擎的API

 template('id',{对象})   //浏览器中使用

template.compile(source, options); 

template.render('模板字符串', 替换对象 );     //解析替换
  template.render('age{{age}}', {age:18 } );

重点：模板引擎只解析自己认识的模板标记语法，不关心其他的内容当字符串处理。

1.在浏览器中使用：

   <!-- 1.在需要文件模板中引入template-web.js -->
    <script src="node_modules/art-template/lib/template-web.js"></script>

    <!-- 2.存放模板引擎  必须给script标签定义id 。必须设置script标签的type为除了javascript以外的类型。
        否则浏览器默认javascript解析-->
    <script type="text/template" id="temp">
    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
       <p>名字: {{name}}</p>
       <p>年龄： {{age}}</p>
       <p>爱好：{{ each interest}} {{$value}} {{/each}}  </p> 
    </body>
    </html>
    </script>

    <!-- 3.渲染模板引擎 (根据定义的id)   template('id',{ })    -->
    <script>
    var result = template('temp',{
        name:'Alice',
        age:'18',
        interest:[
            '敲代码',
            '码代码',
            '......'
        ]
    })
    console.log(result)
    </script>

2.在node.js使用

当要获取的值数量庞大时，将模板引擎存放到html文件中，文件模块通过 fs.readFile() 获取需要的html文件。

然后通过template.render() 渲染模板引擎（服务端渲染）

服务端渲染：在服务端使用模板引擎。浏览器只需发送一次请求，服务端读取如index.html页面请求之后，模板引起渲染通过 template.render() 进行页面的渲染处理，然后把响应结果返回给浏览器。

客户端渲染：客户端访问服务端。至少经过两次请求，第一次，浏览器通过url地址访问，返回的是页面。第二次，浏览器从上到下解析页面，在解析过程中，如果发现有ajax请求，则再次发生请求，引起模板引擎渲染，返回的是动态数据。

服务端渲染和客户端渲染的区别：

客户端渲染不利于SEO搜索引擎优化；

服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的

现在网站既不是纯异步也不是纯服务端渲染出来的，而是两者结合来做

+例如京东的商品列表就采用的是服务端渲染，目的了为了SEO 搜索引擎优化

+而它的商品评论列表为了用户体验，而且也不需要SEO优化，所以采用是客户端渲染

注意：浏览器收到 HTML 响应内容之后，就会从上到下依次解析，当在解析的过程中，如果发现：

link script img iframe video audio 等带有 src 或者 href（link）属性标签（具有外链的资源）的时候

浏览器会自动对这些资源发起新的请求。

为了便于统一管理这些静态资源，约定把所有的静态资源存放在根目录下的public目录下

所以在服务端中请求路径不要写相对路径，因为服务端资源的请求都是通过url 完成，所以将请求路径写成：

/public/xxx

表单提交：

表单中需要提交的表单控件元素必须具有 name 属性，表单提交分为：

1. 默认的提交行为 action="check.php"

2. 表单异步提交自己做对应的处理

当表单异步提交时，同样也是根据url地址进行，例

/pinglun?name=xxxx&message=xxx

 <form action="/pinglun" method="get">

1.在文件模块中引入 url 模块

var url = require('url')

2.url.parse（）方法，将路径解析为一个方便操作的对象

var parseObj = url.parse(request.url,true)

参数一：路径

参数二：布尔值，是否将 ? 后面的地址解析成对象

路径url 对象中的属性：

 {
//     protocol: 'https:', // 协议
//         slashes: true,
//         auth: 'user:pass', // 用户名密码
//         host: 'sub.host.com:8080', // host主机名
//         port: '8080', // 端口号
//         hostname: 'sub.host.com', // 主机名不带端口号
//         hash: '#hash', // 哈希值
//         search: '?query=string',// 查询字符串
//         query: 'query=string', // 请求参数
//         pathname: '/p/a/t/h', // 路径名
//         path: '/p/a/t/h?query=string', // 带查询的路径名
//         href: 'https://user:pass@sub.host.com:8080/p/a/t/h?query=string#hash' // 原字符串本身

判断·路径名与表单提交的 action 是否同一个