当前位置: 移动技术网 > IT编程>开发语言>JavaScript > Nodejs第2天

Nodejs第2天

2020年07月14日  | 移动技术网IT编程  | 我要评论

学习目标

  • 能够根据不同的路径响应不同的数据
  • 掌握req与res对象中的内容
  • 能够使用nodemon
  • 能够配置mime
  • 能够使用npm下载第三方模块

1.http模块

1.1 创建服务器基本步骤

  • 1.引入http模块
  • 2.创建服务器实例对象
  • 3.监听端口并开启服务器
  • 4.注册事件,监听请求
// 1. 引入http模块
const http = require('http')
// 2. 创建服务器对象
const server = http.createServer()
// 3. 监听端口并开启服务器
// listen方法有三个参数
// 第1个参数 表示要监听的端口 一个端口对应一个应用程序
// 第2个参数 表示服务器的地址 如果不写默认的就是127.0.0.1
// 第3个参数 回调函数 可以用来提示信息
server.listen(3000,'127.0.0.1',()=>{
  console.log('server is running at http://127.0.0.1:3000');
})
// 4.注册事件 监听请求
// 给服务器实例对象注册一个'request'的请求事件
// 当事件被触发的时候 会执行后面的函数中的代码
server.on('request',(req,res)=>{
  // req request的缩写是一个请求对象 所有的请求相关的内容都在这个req对象当中
  // res response的缩写是一个响应对象 所有的响应相关的内容都在这个res对象当中
  // res.write('hello'); // 表示向浏览器响应数据
  // res.write('world'); // 可以响应多次
  // res.end() // 表示所有的数据都响应完毕了

  // res.end('hello world123') // 相当于是res.write('hello world123') + res.end()
  // res.end('<p>这是一个段落标签...</p>')  // 直接向浏览器端响应数据
  res.end('900') // 响应的数据只能是二进制或字符串
})
// ctrl + c 停止服务器

详细说明

  1. 给服务器注册request事件,只要服务器接收到了客户端的请求,就会触发request事件
  2. request事件有两个参数req与res,
    • req,request的缩写,表示请求对象,可以获取所有与请求相关的信息,
    • res,response的缩写,表示响应对象,可以获取所有与响应相关的信息。
  3. 服务器监听的端口范围为:1-65535之间,推荐使用3000以上的端口,因为3000以下的端口一般留给系统使用

1.2 request对象详解

文档地址:

常见属性:

headers: 所有的请求头信息    可以使用req.headers 来查看
method: 请求的方式				  可以使用req.method 来查看
url: 请求的地址					  可以使用req.url

注意:在发送请求的时候,可能会出现两次请求的情况,这是因为谷歌浏览器会自动增加一个favicon.ico的请求

小结request对象中,常用的就是methodurl两个参数

1.3 response对象详解

文档地址:

常见的属性和方法:

res.write(data):     给浏览器发送请求体,可以调用多次,从而提供连续的响应体
res.end();           通知服务器,所有响应头和响应主体都已被发送,即服务器将其视为已完成。
res.end(data);       结束请求,并且响应一段内容,相当于res.write(data) + res.end()
res.statusCode:      响应的的状态码 200 404 500
res.statusMessage:   响应的状态信息, OK Not Found ,会根据statusCode自动设置。
res.setHeader(name, value); 设置响应头信息, 比如content-type
res.writeHead(statusCode, statusMessage, options); 设置响应头,同时可以设置状态码和状态信息。

注意:必须先设置响应头,才能设置响应,注意顺序。

1.4 小结

  • 创建服务器的四个步骤:
    1. 导入http模块
    2. 创建服务器createServer
    3. 启动服务器,监听一个端口,0-65535之间
    4. 给服务器注册request事件,有两个参数,req代表请求,res代表响应
  • req对象中常用的属性
    1. req.url: 获取用户请求的地址
    2. req.method :获取用户的请求方式
    3. req.headers:获取所有的请求头
  • res对象中常用的属性和方法
    1. res.write() : 发送一段响应体,可以多次调用
    2. res.end(): 结束响应,每个请求,都必须调用end()
    3. res.setHeader(): 设置响应头的,需要设置content-type
    4. res.statusCode: 设置状态码 200 404 500
    5. res.writeHead() : 可以同时设置状态码和响应头

2.实现静态WEB服务器

2.1 服务器响应首页

注意:

  • 浏览器中输入的URL地址,仅仅是一个标识,不一定与服务器中的目录一致。

  • 也就是说:返回什么内容是由服务端的逻辑决定

// 1. 引入模块
const http = require('http')
const path = require('path')
const fs = require('fs')
// 2. 创建服务器实例对象
const server = http.createServer()
// 3. 监听端口并开启服务器
server.listen(3000, () => {
  console.log('server is running at 127.0.0.1:3000')
})
// 4. 注册事件,并响应数据
server.on('request', (req, res) => {
  // 读取静态文件中的数据,响应给浏览器
  fs.readFile(path.join(__dirname,'./views/'),(err,data)=>{
    // 读取失败要报错
    if(err) return console.log(err.message); 
    // 将读取到的数据响应给浏览器
    res.end(data)
  })
})

2.2 根据不同的路径,响应不同的文件

思考:如果有如下的需求怎么办?

  • 1.如果浏览器端输入的是http://127.0.0.1:3000/,则要显示页面内容
  • 2.如果浏览器端输入的是http://127.0.0.1:3000/movie.html,则要显示movie.html页面内容
  • 3.如果浏览器端输入的是http://127.0.0.1:3000/detail.html,则要显示detail.html页面内容

思路:

  • 1.使用req.url获取浏览器端发送过来的请求路径 请求路径是端口号后面的内容
  • 2.使用req.method获取请求方式
  • 3.根据路径和请求方式来判断,然后响应不同的页面源代码
  • 4.如果文件不存在,那么会读取失败,响应404页面
// 1. 引入模块
const http = require('http')
const path = require('path')
const fs = require('fs')
// 2. 创建服务器实例对象
const server = http.createServer()
// 3. 监听端口并开启服务器
server.listen(3000, () => {
  console.log('server is running at 127.0.0.1:3000')
})
// 4. 注册事件,处理请求
server.on('request', (req, res) => {
  // 4.1 获取请求的路径
  let url = req.url
  // 4.2 获取请求的方式
  let method = req.method
  // 4.3 根据不同的请求路径和方式响应不同的页面
  if (method == 'GET' && (url == '/' || url == '/')) {
    fs.readFile(path.join(__dirname, './views/'), (err, data) => {
      if (err) return console.log(err.message)
      res.end(data)
    })
  } else if (method == 'GET' && url == '/movie.html') {
    fs.readFile(path.join(__dirname, './views/movie.html'), (err, data) => {
      if (err) return console.log(err.message)
      res.end(data)
    })
  } else if (method == 'GET' && url == '/detail.html') {
    fs.readFile(path.join(__dirname, './views/detail.html'), (err, data) => {
      if (err) return console.log(err.message)
      res.end(data)
    })
  } else {
    res.statusCode = 404
    res.end('404,file not found...')
  }
})

如果有css样式及js文件会如何呢?

3.nodemon

由于每次修改了js代码之后,都需要使用node命令重新启动服务器,这样不是太方便

我们可以通过nodemon这个小工具,来实现自动帮助我们重启

3.1 nodemon的安装

npm install nodemon -g   // 使用全局的方式进行安装  -g表示全局安装

会将这个第三方插件安装到:C:\Users\用户名\AppData\Roaming\npm

3.2 nodemon的使用

nodemon app.js // 启动服务器

4.NPM-Node包管理工具

4.1 npm的基本概念

1. npm 是node的包管理工具,
2. 它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。
3. 来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。
  • 作用:通过npm来快速安装开发中使用的包
  • npm不需要安装,只要安装了node,就自带了npm

4.2 配置下载源

原始的npm包是从https://www.npmjs.com/下载的,这是一个外国的网站,可能会导致下载速度比较慢

为了有一个更快的下载速度,淘宝将npm官方网站的那些模块或包同步到了国内的淘宝提供的服务器上

查看镜像源

npm config list

因此可以镜像源切换到国内淘宝提供的服务器

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4.3 nrm的使用

nrm:npm registry manager(npm仓库地址管理工具)

如果在国内开发的话,可以使用淘宝服务器提供的镜像

如果是在国外开发的话,可以使用国外的官方镜像源

因此,我们可以使用nrm来方便的切换镜像源

安装nrm

npm i -g nrm    // -g 就是--global的缩写  i是install的缩写

出现报错问题:
在这里插入图片描述
出现图片类似禁止脚本问题,是win10系统的问题

Set-ExecutionPolicy RemoteSigned

运行以上代码即可
在这里插入图片描述
查看当前镜像源

nrm ls   // 带*表示当前正在使用的地址  ls就是list的缩写

切换镜像源地址

nrm use taobao  // 切换到淘宝提供的镜像源  以后下载的包都是从淘宝镜像源服务器来下载

4.3 npm基本使用

初始化包

npm init;    //这个命令用于初始化一个包,创建一个package.json文件,我们的项目都应该先执行npm init
npm init -y;  //快速的初始化一个包, 不能是一个中文名

安装包

npm install 包名;  //安装指定的包名的最新版本到项目中
npm install 包名@版本号;  //安装指定包的指定版本

npm i 包名; //简写

卸载包

npm uninstall 包名;  //卸载已经安装的包

清除缓存

npm cache clean -f // 如果npm安装失败了,可以用这个命令来清除缓存

快速下载项目中所有的依赖项:

npm i   // 这个命令会根据package.json文件中的依赖项去下载对应的第三方库或包

4.4 package.json文件

package.json文件,包(项目)描述文件,用来管理组织一个包(项目),它是一个纯JSON格式的。

  • 作用:描述当前项目(包)的信息,描述当前包(项目)的依赖项

  • 如何生成:npm init或者npm init -y

  • 作用

    • 作为一个标准的包,必须要有package.json文件进行描述
    • 一个项目的node_modules目录通常都会很大,不用拷贝node_modules目录,
    • 可以通过package.json文件配合npm install直接安装项目所有的依赖项
  • 描述内容

    {
      "name": "03-npm",  //描述了包的名字,不能有中文
      "version": "1.0.0",  //描述了包的的版本信息, x.y.z  如果只是修复bug,需要更新Z位。如果是新增了功能,但是向下兼容,需要更新Y位。如果有大变动,向下不兼容,需要更新X位。
      "description": "", //包的描述信息
      "main": "index.js", //入口文件(模块化加载规则的时候详细的讲)
      "scripts": {  //配置一些脚本,在vue的时候会用到,现在体会不到
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],  //关键字(方便搜索)
      "author": "",  //作者的信息
      "license": "ISC",  //许可证,开源协议
      "dependencies": {   //重要,项目的依赖, 方便代码的共享  通过 npm install可以直接安装所有的依赖项
        "bootstrap": "^3.3.7",
        "jquery": "^3.3.1"
      }
    }
    

    注意:一个合法的package.json,必须要有name和version两个属性

4.5 安装依赖

依赖分两种

  • 一个是部署依赖,即:在开发和部署上线都需要使用的包
    • 使用命令:npm install 包名 --save 其中:--save 可以简单写成-S
  • 一个是开发依赖,即:只在项目开发阶段需要用到的包,比如某些打包工具,格式化工具等…
    • 命令:npm install 包名 --save-dev 其中:--save-dev可以简写成-D

5. MIME

5.1 MIME的说明

MIME 类型

  • 1.MIME(Multipurpose Internet Mail Extensions)多用途Internet邮件扩展类型 是一种表示文档性质和格式的标准化方式
  • 2.浏览器通常使用MIME类型(而不是文件扩展名)来确定如何处理文档;
  • 3.常见的mime类型
  • 4.因此服务器将正确的MIME类型附加到响应对象的头部是非常重要的
  • 5.通过响应头的content-type可以设置mime类型
  • 6.如果没有给浏览器设置正确的mime类型,浏览器会根据响应的内容猜测对应的mime类型。
  • 7.但是不能保证所以浏览器能够得到一致的效果。
  • 8.对于服务器开发,需要给每一个响应都设置一个正确的mime类型

4.2 mime模块的使用

nodejs核心并没有提供用于处理mime的模块。但是我们可以在npm上下载开发中遇到的第三方包。

安装:

npm i mime

使用:

// 引入mime模块
const mime = require('mine')
// 获取路径对应的MIME类型
console.log(mime.getType('.css'))
console.log(mime.getType('.html'))
console.log(mime.getType('.gif'))
...
// 也可以根据路径来生成指定的mime类型
console.log(mime.getType('http://127.0.0.1:3000/views/'))
console.log(mime.getType('http://127.0.0.1:3000/views/index.css'))
console.log(mime.getType('http://127.0.0.1:3000/views/index.js'))
console.log(mime.getType('http://127.0.0.1:3000/images/aa.jpg'))
console.log(mime.getType('http://127.0.0.1:3000/images/aa.gif'))

6. 静态网站与动态网站

静态网站:

  • 页面中的数据是不会发生变化的
  • 每次打开与之前都是一样的

动态网站:

  • 页面中的数据是会发生变化的,甚至是时时发生变化的
  • 网站上的数据来源于服务器端
  • 有可能是前端渲染出来的数据
  • 也有可能是服务器端渲染出来的数据

本文地址:https://blog.csdn.net/m0_46597922/article/details/107304418

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网