Nodejs第2天
学习目标
- 能够根据不同的路径响应不同的数据
- 掌握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 停止服务器
详细说明
- 给服务器注册request事件,只要服务器接收到了客户端的请求,就会触发request事件
- request事件有两个参数req与res,
- req,request的缩写,表示请求对象,可以获取所有与请求相关的信息,
- res,response的缩写,表示响应对象,可以获取所有与响应相关的信息。
- 服务器监听的端口范围为: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对象中,常用的就是method和url两个参数
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 小结
- 创建服务器的四个步骤:
- 导入http模块
- 创建服务器
createServer
- 启动服务器,监听一个端口,0-65535之间
- 给服务器注册
request
事件,有两个参数,req代表请求,res代表响应
- req对象中常用的属性
- req.url: 获取用户请求的地址
- req.method :获取用户的请求方式
- req.headers:获取所有的请求头
- res对象中常用的属性和方法
- res.write() : 发送一段响应体,可以多次调用
- res.end(): 结束响应,每个请求,都必须调用end()
- res.setHeader(): 设置响应头的,需要设置
content-type
- res.statusCode: 设置状态码 200 404 500
- 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的缩写
出现报错问题:
出现图片类似禁止脚本问题,是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的说明
- 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
上一篇: vue的自适应布局(媒体查询)