1. 技术文章
  2. Node基础--day03

Node基础--day03

由 好久不见. 提交于 2020-03-06 03:32:46

1. 浏览器端的 AMD 和 CMD 模块化规范 (了解)

浏览器端，不能使用 Common.js 规范，因为 Common.js 是同步加载的；
AMD/CMD 可以理解为，common.js 在浏览器端，的解决方案，是异步加载的；

  • AMD模块化规范代表：RequireJS框架
    对于依赖的模块，AMD 是提前执行；
    推崇依赖前置，先定义模块，再使用；
  • CMD模块化规范代表：SeaJS框架
    对于依赖的模块，CMD 是延迟执行；
    CMD 推崇，尽可能晚的，执行这个模块，类似懒加载；推崇依赖就近；
  • ES6模块化 (大趋势)：ES6 在语言标准层面上(语法上)，实现了模块化功能，而且实现得相当简单；完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器，通用的模块化解决方案；(vue Reat 前端框架会使用)

2. 模块成员的分类

Node.js 由三部分组成：ECMAScript 核心 + 全局成员 + 模块成员
模块成员，分三类： 核心模块、第三方模块、用户自定义模块

  • 核心模块
    随着Node.js的安装包，一同安装到，本地的模块；如：fs，path 等；
    核心模块使用：require(‘核心模块标识符’)
  • 第三方模块
    非官方提供的模块；必须去 NPM 网站上下载，才能使用；
    先从 npm 官网上，下载指定的，第三方模块；
    require(‘第三方模块标识符’) 导入模块；根据 第三方模块的 官方文档，尝试使用；
  • 用户自定义模块
    程序员自己，写的 Javascript 文件；
    使用：require(‘路径标识符’)

3. 包(Packages)的定义和使用

可看作是 模块、代码 和 其它资源 组合起来，形成的 独立作用域；是在模块的基础上，更深一步的抽象；
1) 规范的包结构

  1. 包都要以一个单独的目录而存在；目录名，必须是英文，不能是中文，或数字开头；
  2. package.json 必须在包的顶层目录下；
  3. package.json 文件必须符合 JSON 格式，并包含如下三个属性：
    • name: 包的名字
    • version: 包的版本号
    • main: 包的入口文件
  4. 二进制文件，应该在bin目录下;
  5. javaScript 代码，应该在lib目录下;
  6. 文档应该在doc目录下;
  7. 单元测试，应该在 test目录下;
  8. README.md 包的 使用说明文档；
  9. Node.js 对包的要求，并不严格，只要顶层目录下，有 package.json，并符合基本规范即可;

2) 包描述文件 package.json

name：包的名称，必须是唯一
description：包的简要说明
version：符合语义化版本识别规范的版本字符串
keywords：关键字数据，通常用于搜索
maintainers：维护者数组，每个元素要包含name、email、web可选字段
contributors：贡献者数组，格式与maintainers相同
bugs：提交bug的地址，可以是网址或者电子邮件地址
licenses：许可证数组，每个元素要包含type和url字段
repositories：仓库托管地址数组，每个元素要包含type、url和path字段
dependencies：包的依赖，一个关联数组，由包名称和版本号组成
devDependencies：开发依赖项，表示一个包在开发期间用到的依赖项

calc计算器模块的解构
在这里插入图片描述

4.1 npm 的两层含义

  • NPM：一个 第三方模块的，托管网站：https://www.npmjs.com/；
  • NPM (Node package manager)：Node 的包管理工具，安装 Node 时，就已顺便安装了；

4.2 安装和卸载全局包

  • 全局包：安装到计算机全局环境中的包；可以安装在，任何目录下，直接通过命令行来访问；

  • 安装全局包： npm install 包名 -g ； -g 安装到 全局目录中；

  • 全局包安装目录：C:\Users\用户目录\AppData\Roaming\npm
    工具性质的包，适合安装到全局；

  • 卸载全局包：npm uninstall 包名 -g；uninstall 卸载；

      npm i i5ting_toc -g
  //要转换文件的文件夹 -> 终端 -> i5ting_toc -f .\node_day02.md

4.3 安装和卸载本地包

  • 本地包：跟着项目安装的包；安装到 node_modules 目录下；
  • 一个空项目，必须在当前项目，根目录中，先运行 npm init 或 npm init -y，初始化一个 package.json 配置文件，否则其它包，无法安装到本地项目中；
  • 安装本地包：npm i 包名 --save ；
  • package-lock.json 文件中，记录了曾经装过的，包的下载地址；
  • 卸载本地包：npm uninstall/remove 包名 -S/-D ；

4.4 其它常用命令

  • –save 缩写 -S；npm 5.x 版本，可以不指定 --save 命令；
  • –save-dev 缩写 -D
  • install 缩写 i
  • dependencies 节点，表示项目上线部署时，需要的依赖项；
    devDependencies节点，表示项目在开发阶段，需要的依赖项，当项目部署上线了，devDependencies节点中的包，就不需要了；
  • npm i --production 只安装 dependencies 节点下的包，不安装 devDependencies 节点下的包；npm i 会安装所有的包，当项目要上线时，删除文件夹，运行 npm i --production
    发送自己的，项目文件给同事，先删除 node_modules文件夹，再发送；
    收到文件后，右键–>打开终端窗口–>npm i；当使用 npm i 快速装包时，npm 会检查 package.json 文件中，所有的依赖项，然后都安装到项目中；

4.5 解决 npm 下载慢问题

  • NPM 下载包时，连接的是，国外的服务器，网速不好，下载不了；
  • 此时，全局安装一个 cnpm 工具： npm i cnpm -g
  • 在装包时，只需把 npm 替换成 cnpm 即可；例如安装 jquery： cnpm i jquery -S
    安装 nrm 设置淘宝镜像，解决下载慢问题
1. npm i nrm -g
2. nrm ls
3. nrm use taobao    
npm config set registry https://registry.npm.taobao.org   //设置淘宝镜像

5. 使用 Node 构建 web 应用

  • PHP是后端，网站开发语言，PHP 开发出来的网站，可以通过 Apache 服务器托管，运行起来；
  • Node中，有没有类似于 Apache，这样的服务器呢？没有，要自己写；

1) B/S 交互模型：特指 浏览器（Browser）和 服务器（Server） 这种交互形式；
HTTP 协议通信模型：请求 - 处理 - 响应 的过程；

  • 请求：由客户端，发起请求；
  • 处理：服务器端，处理请求；
  • 响应：服务器端，把处理结果，发送给客户端；

静态资源：服务器端只需要读取，并直接发送给客户端，不需要进一步，处理的资源；
动态资源：服务器端没有现成的资源，需要服务器端，动态生成的资源；

2) 实现一个 类似于Apache的 静态资源服务器

  • 使用 http核心模块 http.createServer() 方法，创建最基本的 web 服务器；
  • 绑定监听事件 并指定 处理函数：
    server.on(‘request’, function(req, res) { 请求的处理函数 })
  • 启动服务器：
    server.listen(端口, IP地址, 启动成功的回调函数)
// 1. 导入 http 核心模块
const http = require('http')

// 2. http.createServer 创建一个 web 服务器对象；此时，并不能监听任何 客户端请求，也没有启动；
const server = http.createServer()

// 3. 为 server服务器，绑定 监听函数，通过 on方法，绑定 request请求事件，监听 客户端的请求；
server.on('request', function (req, res) {
  // reg 请求对象;res 响应对象
  /* 防止中文乱码，需要写在res.end之前；
     通过设置 响应报文头的 Content-Type，来指定，响应内容的编码类型，从而防止乱码；*/
  res.writeHeader(200, {
    'Content-Type': 'text/plain; charset=utf-8' //配置响应头
  }) 
  res.end('你好') //服务器返回中文，会有乱码问题；只要监听到有人请求服务器，就返回固定的内容：‘你好’；
})

// 4. server.listen 启动服务器
server.listen(3000, '127.0.0.1', function () {
  console.log('server running at http://127.0.0.1:3000')
})

//防止中文乱码2
server.on('request', function(req, res) {
    res.write('<head><meta charset="UTF-8"></head>')
    res.end('你好')
})

3) 根据不同的 URL，返回不同的内容

  • 使用 req.url 获取客户端，请求的URL地址；
  • 根据请求的不同路径，返回不同的内容；
const http = require('http')
const server = http.createServer()

server.on('request', function (req, res) {  
  // console.log(req.url) -->客户端请求的 URL地址
  const url = req.url
      
  // 防止中文乱码
  res.writeHeader(200, {
    'Content-Type': 'text/plain; charset=utf-8'
  })

  if (url === '/' || url === '/index.html') { '/'根目录?
    res.end('首页')
  } else if (url === '/movie.html') {
    res.end('电影')
  } else if (url === '/about.html') {
    res.end('关于')
  } else {
    res.end('请求内容不存在！')
  }
})

server.listen(3000, function () {
  console.log('server running at http://127.0.0.1:3000')
})

text/plain 和 text/html 的区别：
plain 表示普通的文本字符串； html 表示以 HTMl 标签的形式，去解析服务器的，返回内容；

// 防止中文乱码
res.writeHeader(200, {
  'Content-Type': 'text/plain; charset=utf-8'
})
res.end('<h3>首页</h3>') //返回 <h3>首页</h3> ，不解析； 
    
res.writeHeader(200, {
  'Content-Type': 'text/html; charset=utf-8'
})
res.end('<h3>首页</h3>') //返回解析过的‘首页’

4) 根据不同的 URL，返回不同的 HTML页面
使用 fs模块 读取，URL 对应的 HTML，页面内容，并使用 res.end() 响应给客户端；

const fs = require('fs')
const path = require('path')
const http = require('http')
const server = http.createServer()

server.on('request', function (req, res) {
  const url = req.url
  if (url === '/' || url === '/index.html') {
    //返回首页页面: 使用 fs模块，读取 首页文件；把读取到的首页，通过 res.end 返回即可；
    //没有出现乱码，是因为 index.html中 <meta charset="UTF-8"> 防止了页面乱码；
    fs.readFile(path.join(__dirname, './views/index.html'), 'utf-8', (err, dataStr) => {
      if (err) return res.end('404. Not found.')
      res.end(dataStr)
    })
  } else if (url === '/movie.html') {
    // 返回电影页面
    fs.readFile(path.join(__dirname, './views/movie.html'), 'utf-8', (err, dataStr) => {
      if (err) return res.end('404. Not found.')
      res.end(dataStr)
    })
  } else if (url === '/about.html') {
    // 返回关于页面
    fs.readFile(path.join(__dirname, './views/about.html'), 'utf-8', (err, dataStr) => {
      if (err) return res.end('404. Not found.')
      res.end(dataStr)
    })
  }
})

server.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000')
})
//__dirname +'./views/movie.html' 不能加‘.’也不能少‘/’；path.join则无限制；

fs.readFile(path.join(__dirname, './views/about.html'), 'utf-8', (err, dataStr) => {
   res.end(dataStr)
})
// 以 utf-8 形式的字符串读取；如果省略掉，读取的内容，变成二进制的格式；
// res.end() 方法，接收两种类型的数据 String，二进制；
// 如果是string，先把字符串->二进制，再通过网络发送出去，客户端接收后，再转成字符串，所以'utf-8'可以省略

5) 处理并返回 css样式，和 Javascript文件

  • 如果客户端要拿到，页面引入的 css 或 js样式；必须在服务器端，监听这个请求地址；
  • 客户端所请求的，任何文件或资源；服务器端，必须要监听，并响应之后，客户端才能拿到；
const fs = require('fs')
const path = require('path')    
const http = require('http')
const server = http.createServer()

server.on('request', function (req, res) {
  let url = req.url
  if (url === '/css/1.css') {
    // 读取样式表
    fs.readFile(path.join(__dirname, '/css/1.css'), (err, buf) => {
      if (err) return res.end('404. Not found.')
      res.end(buf)
    })
  } else if (url === '/js/1.js') {
    // 读取 JS 文件
    fs.readFile(path.join(__dirname, '/css/1.js'), (err, buf) => {
      if (err) return res.end('404. Not found.')
      res.end(buf)
    })
  }
})

server.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000')
})
    
//项目最终优化
server.on('request', function (req, res) {
  let url = req.url //url地址是改变的，所以不能用const
  if (url === '/') url = '/views/index.html'
  fs.readFile(path.join(__dirname, url), (err, buf) => {
    if (err) return res.end('404. Not found.')
    res.end(buf)
  })
})

6) Node中 结合模板引擎 渲染动态页面

  • art-template 模板引擎；同时支持 Node.js 和 浏览器；
  • 安装模板引擎 npm init -y (项目名称 package name: test) npm i art-template
  • 导入模板引擎：const template = require(‘art-template’)
const template = require('art-template')
const path = require('path')
const http = require('http')
const server = http.createServer()

server.on('request', function (req, res) {
  const url = req.url
  if (url === '/') {
    // template('要渲染的 html页面路径',{要渲染的数据/没有要渲染的数据，指定一个空对象})
    // template 方法的返回值，就是渲染好的 html页面，直接通过 res.end 发送给客户端
    const htmlStr = template(path.join(__dirname, '/views/1.html'), { name: 'zs', age: 22, hobby: ['吃饭', '唱歌', '跳舞'] })
    res.end(htmlStr)
  }
})

server.listen(3000, function () {
  console.log('server running at http://127.0.0.1:3000')
})

html 内容

<h1>Node 服务器，结合 art-template 模板引擎，渲染的动态页面</h1>
<p>姓名：{{name}}</p>
<p>年龄：{{age}}</p>
<p>
    爱好： 
    {{each hobby}}          //{{开始循环 each 数组名称}} 
    <span>{{$value}}</span> //{{$value 循环的每一项数据}}
    {{/each}}               // {{结束循环 /each}}  爱好：吃饭 唱歌 跳舞
</p>
标签
const
node
文件目录
url
首页
require
art-template
http请求
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!