自学node.js day2

代码风格

当采用了无封号代码格式 当一行代码前面以（ [ ` 开头的时候 在前面补上封号，避免一些错误

``es是6新增的一种字符串包裹方式 模板字符串 支持换行和拼接变量

除了content-type来指定编码格式 也可以在HTML页面中通过meta元数据来声明当前文本的编码格式，浏览器也会识别

元数据：描述网页特征信息

Apache服务器

Apache服务器软件默认有一个www目录，所有存放在www，目录中的资源都可以通过网址地址来访问

例：127.0.0.1：80/a.txt

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kYIGoPG2-1626133796770)(C:\Users\甜味少女静\Pictures\QQ截图20210709173250.png)]

Apache目录列表

fs.readdir(要读取目录的路径)//读取目录

在服务端使用模板引擎（服务端渲染）

一次请求完成渲染 响应的就是最终的结果 直接拿到页面和数据 客户端不需要再做任何处理

检查元素可在代码中看到 会看到刷新页面的情况

js模板引擎是数据与界面分离中重要的一环

提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据生成的HTML片段、渲染不同的效果。

buiduTemplate、artTemplate、juicer、doT 引擎模板整体性能有绝对优势

doT在ie与safari浏览器中表现优越 tmpl模板引擎在ie中运行完美 但在其他浏览器就差很多

不同浏览器渲染能力不同 渲染得快打开页面就快 chrome与360浏览器打开速度是最快的，ie浏览器是最慢的

---

art-template

第三方模块使用时必须下载

不仅可以在浏览器使用 也可以在node中使用

采用预编译方式

性能优越外，调试功能也值得一提 模板体调试器可以精确定位到引发渲染错误的模板语句。

安装：npm install art-template

该命令在哪执行就会把包下载到哪里

引入模板引擎const template=require（‘art-template’）

template.render(‘字符串’，{要替换的对象})

一般读文件成功返回的data是二进制的值 要data调用toString（）方法才可以当作第一个参数

在浏览器中使用art-template

1、使用script标签的src属性引用node_modules/art-template/lib/template-web.js

客户端渲染：（两次请求完成）

• 第一次请求拿到的是页面

• 第二次请求拿到的是动态数据（渲染）

  检查元素看不到相关代码就是客户端渲染

  异步请求 不需要刷新页面 体验好

处理网站中的静态资源

浏览器收到HTML响应内容后，从上到下开始解析

在解析过程中遇到带有src或者herf（link）属性的标签的时候，浏览器会自动对这些静态资源发起新的请求

为了方便的统一处理这些静态资源 约定把所有静态资源放在public目录中

url.indexOf(’/public’)===0 //说明url是以/public/开头的

fs.readFile(’.’+url)//读到public里要请求的文件

哪些资源能被用户访问 哪些不能 可以通过代码灵活控制

在服务端静态资源的路径不要写相对路径 因为这个时候所有资源都是通过url标识来获取的

处理表单get提交

以前表单提交的方式：

• 表单中需要提交的表单控件元素必须具有name属性
• 表单提交分为默认提交行为和表单异步提交
• form标签中属性 action就是表单的提交地址 就是请求的url地址 method是请求方法
  • get
  • post

对于表单提交的请求路径，由于其中具有用户动态填写的内容 不能通过判断完整的url路径来处理这个请求

url.parse(‘要解析的路径’,true)//第二个参数是将后面的查询字符串转为对象（通过query属性来访问 obj.query 就是表单提交的数据）（前面的是pathname obj.pathname）//只能拿get请求方法的请求参数 post方法不行

接下来要做的：

1. 获取表单提交的数据 obj.query
2. 将当前系统时间添加到数据对象中，然后存储到数组中
3. 让用户重定向跳转到首页/（当用户重新请求/的时候 数组中的数据已经变化了，所以用户看到的页面也是变化的）

表单提交重定向

如何通过服务器让客户端重定向？

1. 状态码设置为302 临时重定向（浏览器会记忆 下一次浏览器不请求 直接跳转） //301为永久重定向 res.statusCode=302
2. 在响应头中通过Location告诉客户端往哪儿重定向 res.setHeader(‘Location’,’/’)
3. 结束响应

客户端发现收到服务器的响应的状态码是302 就会自动去响应头中找Location，然后对该地址发起新的请求 自动跳转

一次请求对应一次响应 响应结束后客户端就离开 不进行后面的响应

node中的console

命令行中直接输入node回车

帮助做一些辅助性测试
2 就会自动去响应头中找Location，然后对该地址发起新的请求 自动跳转

一次请求对应一次响应 响应结束后客户端就离开 不进行后面的响应

node中的console

命令行中直接输入node回车

帮助做一些辅助性测试