欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Nodejs第2天

程序员文章站 2022-04-10 09:52:08
学习目标能够根据不同的路径响应不同的数据掌握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. 监听端口并开启服...

学习目标

  • 能够根据不同的路径响应不同的数据
  • 掌握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对象详解

文档地址:http://nodejs.cn/api/http.html#http_message_headers

常见属性:

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

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

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

1.3 response对象详解

文档地址:http://nodejs.cn/api/http.html#http_class_http_serverresponse

常见的属性和方法:

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/index.html'),(err,data)=>{
    // 读取失败要报错
    if(err) return console.log(err.message); 
    // 将读取到的数据响应给浏览器
    res.end(data)
  })
})

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

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

  • 1.如果浏览器端输入的是http://127.0.0.1:3000/index.html,则要显示index.html页面内容
  • 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 == '/index.html')) {
    fs.readFile(path.join(__dirname, './views/index.html'), (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的缩写

出现报错问题:
Nodejs第2天
出现图片类似禁止脚本问题,是win10系统的问题

Set-ExecutionPolicy RemoteSigned

运行以上代码即可
Nodejs第2天
查看当前镜像源

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/index.html'))
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