Node.js阶段学习笔记 4.0 --- 实战训练(hackerNews)

hackerNews介绍

• Hacker News 示例

路由

路由（route）：就是一套映射规则，根据url地址分配到对应的处理程序

art-template 模板引擎

• 文档
• 安装

npm install art-template

• 核心方法

// 引入template

// 基于模板路径渲染模板
//参数1：文件的路径
//参数2：数据
//返回值：返回渲染后的内容
// template(filename, data)
let html = template(path.join(__dirname, "pages", "index.html"), {name:"大吉大利，今晚吃鸡"});

注意点：文件的路径必须是绝对路径

hacknews 数据处理

• 采用后端渲染将模板页面和数据渲染为用户能够看懂的正常页面返回

url模块

• 说明：用于 URL 处理与解析
• 注意：通过url拿到的查询参数都是字符串格式

// 导入url模块
var url = require('url')

// 解析 URL 字符串并返回一个 URL 对象
// 第一个参数：表示要解析的URL字符串
// 第二个参数：是否将query属性（查询参数）解析为一个对象，如果为：true，则query是一个对象
// let id = url.parse(req.url,true).query.id
var ret = url.parse('http://localhost:3000/details?id=1&name=jack', true)
console.log(ret.query) // { id: '1', name: 'jack' }

querystring模块

• 用于解析与格式化 URL 查询字符串
• 注意：只在专门处理查询字符串时使用

// foo=bar&abc=xyz&abc=123
var querystring = require('querystring')

// 将查询参数转化为对象
// 第一个参数: 要解析的 URL 查询字符串
querystring.parse('foo=bar&abc=xyz') // { foo: 'bar', abc: 'xyz' }

服务端重定向

• HTTP 状态码说明
• 301 和 302
• 说明：服务端可以通过HTTP状态码让浏览器中的页面重定向

res.writeHead(302, {
  'Location': '/'
})
res.end()

POST请求参数的处理

• 说明：POST请求可以发送大量数据，没有大小限制

// 接受POST参数
var postData = []

// data事件：用来接受客户端发送过来的POST请求数据
var result = "";
req.on('data', function (chunk) {
  result += chunk;
})

// end事件：当POST数据接收完毕时，触发
req.on('end', function () {
  cosnole.log(result); 
   // 将查询字符串转换成对象
    queryString.parse(result)
})

HackNews步骤分析

一. 处理 req.url === ‘/’

二. 静态资源的 mime 类型

• 获取真正的 mime 类型 (代码里使用 本地安装)
• 设置响应头
  res.setHeader(‘content-type’,mime.getType(req.url))
• 读取文件, req.url

2.1. 安装 npm i mime
2.2 引入
2.3 使用 mime.getType()

三 : 详情页

1. 获取 id
   /details?id=2 url query={id:2}

• 有一个url模块 , 就是可以解析 url路径 , 可以拿到 id
• 1.1. 引入 url : const url = require('url')
• 1.2. let id = url.parse(req.url,true).query.id

2. 获取数组 data
3. 根据 id 从数组里查找到对应的对象 (find)
4. 渲染页面 (template)

四 : 添加页 add get

• 1. 收集数据组成一个对象
     obj.id = +new Date()
• 2. 获取 data 数组
• 3. 把对象添加到数组里 data.unshift(obj)
• 4. 添加后的数组重新写入到本地 data.json

  数组 => 字符串
  JSON.stringify(data,null,2)

• 5. 跳转回首页 (重定向)
     res.statusCode = 301
     res.setHeader(‘location’,’/’)
     res.end()

五 : 处理 data.json 没有值的情况

data = JSON.parse(data || ‘[]’)// 小坑

六 : 添加页 add post

要把submit.html 30行 => method="post"

• 1. 收集数据组成一个对象
• 2. 获取数组data
• 3. 要把这个对象添加到数组里
• 4. 把添加后的数组 重新写入到data.json
• 5. 重定向

区别 :

• /add?title=123&url=123&text=321 url路径 <==== url模块

• title=123&url=123&text=321 查询字符串 <===== querystring模块

收集数据组成一个对象
let str = ‘’
req.on(‘data’, chunk => {
str += chunk
})
req.on(‘end’ , () => {
// title=123&url=123&text=321
let obj = querystring.parse(str)
obj.id = +new Date()

})

总结步骤

• 首页

  1. 读取data.json数据-数组
  2. 渲染页面
  3. 响应给浏览器

• 详情页

  1. 根据url 获取id ul.parse(req.url,true).query.id
  2. 获取data.json数据 -数组
  3. 根据id ,获取数组里 对应的对象
  4. 渲染页面
  5. 响应给浏览器

• 提交页

  1. 读取页面响应给浏览器

• add get

  1. 收集数据组成一个对象 ( obj.id = +new Date())
  • url.parse(req.url,true).query
  • /add?text=123&text=123&text=123
  2. 获取data.json-数组
  3. 把对象添加到数组里
  4. 把添加对象后的数组重新写入到本地data.json
  5. 重定向

• add post

  1. 收集数据组成一个对象 ( obj.id = +new Date())
  • text=123&text=123&text=123
  • querystring.parse(str)
  2. 获取data.json-数组
  3. 把对象添加到数组里
  4. 把添加对象后的数组重新写入到本地data.json
  5. 重定向

• 静态资源

  1. req.url =>. 读取req.url 响应给浏览器
  2. mime类型 res.setHeader(‘content-type’,mime.getType(req.url))

• 其他

补充es6语法

需求: 获取一个新数组arr1,arr1的元素跟arr一样,但是地址不一样

let arr = [1,23,45,2]
// 遍历 arr 的元素, 一个一个都添加到一个新数组里
// 老方法 , for 循环,arr1.push()
let arr1 =[]

// es6语法 ...XXX	 (...展开)
let arr1 = [...arr]	// 效果一样


// 应用场景
let arr1 = [1,2,3,4]
let arr2 = [3,1,5]
// 1. 把数组1的元素和数组2的元素拼接到一起
let arr3 = [...arr1,...arr2]

//2. 在数组1的后面追加一个方方
let arr = [...arr1,'方方']


[...arr] 把arr里面的元素都一个一个的遍历放到一个新数组里
[...obj] 把obj里面的元素一个一个的遍历放到一个新对象里