前端node: http模块和express入门_node express html-优快云博客

本文链接：https://blog.youkuaiyun.com/yeah_bin/article/details/142650642

目录看这里😊

node的http模块
Express

node的http模块

什么是http模块

http模块是Node.js官方提供的、用来创建web服务器的模块。通过http模块提供的http.createServer0方法，就
能方便的把一台普通的电脑，变成一台Wb服务器，从而对外提供Web资源服务。

IP地址

P地址就是互联网上每台计算机的唯一地址，因此P地址具有唯一性。如果把“个人电脑”比作”一台电话”，那么“P地址”就相当于“电话号码”，只有在知道对方P地址的前提下，才能与对应的电脑之间进行数据通信。
IP地址的格式：通常用"点分十进制"表示成(a.b.c.d)的形式，其中，a,b,c,d都是0~255之间的十进制整数。例如：用点分十进表示的1P地址(192.168.1.1)

互联网中每台Web服务器，都有自己的IP地址，例如：大家可以Windows的终端中运行ping www.baidu.com命令，即可查看到百度服务器的P地址。
在开发期间，自己的电脑既是一台服务器，也是一个客户端，为了方便测试，可以在自己的浏览器中输入127.0.0.1这个IP地址，就能把自己的电脑当做一台服务器进行访问了。

创建最基本的web服务器

创建web服务器的基本步骤

导入http模块

const htpp = require('http')

创建web服务器实例

调用http.createServer()方法，即可快速创建一个web服务器实例：

const server = http.createServer()

为服务器实例绑定request事件，监听客户端的请求

为服务器实例绑定request事件，即可监听客户端发送过来的网络请求：

// 使用服务器实例的.on()方法，为服务器绑定一个request事件
server.on('request',(req,res)=> {
	// 只要有客户端来请求我们自己的服务器，就会触发request事件，从而调用这个事件处理函数
	console.log('Someone visit our web server.')
})

启动服务器

调用服务器实例的。listen0方法，即可启动当前的web服务器实例：

//调用server,listen(端口号，cb回调)方法，即可启动web服务器
server.listen(80, ()=> {
	console.log('http server running at http://127.0.0.1')
})

req请求对象

只要服务器接收到了客户端的请求，就会调用通过server.on0为服务器绑定的request事件处理函数。如果想在事件处理函数中，访问与客户端相关的数据或属性，可以使用如下的方式：

server.on('request', (req)=> {
	//req是请求对像，它包含了与客户端相关的数据和属性，例做如：
	//req.url是客户端请求的URL地址
	//req,method是客户端的method请求类型
	const str =`Your request url is ${req.url),and request method is ${req.method}`
	console.log(str)
})

在这里插入图片描述

res相应内容

在服务器的request事件处理函数中，如果想访问与服务器相关的数据或属性，可以使用如下的方式：

server.on('request',(req,res) => {
	//res是响应对像，它包含了与服务器相关的数据和属性，例做如：要发送到客户端的字符串
	const str = `Your request url is ${req.url},and request method is ${req.method}`
	//res.end（）方法的作用：
	//向客户端发送指定的内容，并结束这次请求的处理过程
	res.end(str)
})

解决中文乱码问题

当调用rs.end0方法，向客户端发送中文内容的时候，会出现乱码问题，此时，需要手动设置内容的编码格式：
在这里插入图片描述

server.on('request',(req,res)=>{
	//发送的内容包含中文
	const str=`您请求的url地址是$(req.url},请球的method类型是$(req,method}`
	//为了防止中文显示码的问题，需要设置响应头Content-Type的值为text/htm; charset=utf-8
	res.setHeader('Content-Type','text/html;charset=utf-8')
	//把包含中文的内容，响应给客户端
	res.end(str)
})

根据不同的url响应不同的html内容

核心实现步骤

已请求html页面为例：

获取请求的url地址
设置默认的响应内容为404 Not found
判断用户请求的是否为/或/index.html首页
判断用户请求的是否为/about.html关于页面
设置Content-Type响应头，防止中文乱码
使用res.end()把内容响应给客户端

server.on('request',function(req,res){
	//1,获取请求的ur1地址
	const url = req.url
	//2.设置默认的内容为404 Not found
	let content='<h1>404 Not found!</h1>'
	if (url ==='/' || url ==='/index.html') {
		//3.用户请求的是首页
		content='<h1>首页</h1>'
	}else if(url ==='/about.html'){
		//4.用户请求的是关于页面
		content='<h1>关于页面</h1>'
	}
	//5.设置Content-Type响应头，防止中文乱码
	res.setHeader('Content-Type','text/html;charset=utf-8')
	//6.把内容发送给客户端
	res.end(content)
})

Express

什么是Express

官方给出的概念：Express是基于Node.js平台，快速，开放，极简的Web开发框架
通俗的理解：Express的作用和Node.js内置的http模块类似，是专门用来创建Web服务器的
Express的本质：就是一个npm上的第三方包，提供了快速创建Web服务器的便捷方法

Express的中文官网：http:/www.expressis…com.cn/

http内置模块用起来很复杂，开发效率低；Express是基于内置的http模块进一步封装出来的，能够极大的提高开发效率。
类似于浏览器中Web API和jQuery的关系。后者是基于前者进一步封装出来的。

基本使用

安装

npm i express@4.17.1

创建基本的web服务器

//1.导入express
const express require('express')
//2. 创建web服务器
const app = express()
//3.调用app.listen(端口号，启动成功后的回调函数)，启动服务器
app.listen(80,()=> {
	console.log('express server running at http://127.0.0.1')
})

监听GET请求

通过app.get0方法，可以监听客户端的GET请求，具体的语法格式如下：

//参数1：客户端请求的URL地址
//参数2：请求对应的处理函数
//req:请求对象（包含了与请求相关的属性与方法）
//res:响应对像（包含了与响应相关的属性与方法）
app,get('请求URL',function(req,res){/*处理函数*/})

监听POST请求

通过app.post0方法，可以监听客户端的POST请求，具体的语法格式如下：

//参数1：客户端请求的URL地址
//参数2：请求对应的处理函数
//req:请求对像（包含了与请求相关的属性与方法）
//res:响应对像（包含了与响应相关的属性与方法）
app.post('请求URL',function(req,res){/*处理函数*/))

把内容响应给客户端

通过res.send0方法，可以把处理好的内容，发送给客户端：

app.get('/user',(req,res)=> {
	//向客户端发送JS0N对象
	res.send({name:'zs',age:20,gender:'}
)
app.post('/user',(req,res)=>{
	//向客户端发送文本内容
	res.send('请求成功')
})

获取URL中携带的查询参数

通过req.quey对象，可以访问到客户端通过查询字符串的形式，发送到服务器的参数：

app.get('/',(req,res)=> {
	//req.query默认是一个空对像
	//客户端使用?name=zs&age=20这种查询字符串形式，发送到服务器的参数，
	//可以通过req.query对像访问到，如：
	//req.query.name
	req.query.age = console.log(req.query)
})

获取URL中的动态参数

通过req.params对象，可以访问到URL中，通过：匹配到的动态参数：

//URL地址中，可以通过:参数名的形式，匹配动态参数值
app.get('/user/:id', (req,res)=>{
//req.params默认是一个空对像
//里面存放着通过：动态匹配到的参数值
	console.log(req.params)
})

托管静态资源

express.static()

express提供了一个非常好用的函数，叫做express.static()，通过它，我们可以非常方便地创建一个静态资源服务器
例如，通过如下代码就可以将public目录下的图片、CSS文件、JavaScript文件对外开放访问了：

app.use(express.static('public'))

//现在，你就可以访问public目录中的所有文件
//http://localhost:3000/images/bg.jpg
//http://localhost:3000/css/style.css
//http://localhost:3000/js/login.js

注意：Express在指定的静态目录中查找文件，并对外提供资源的访问路径。因此，存放静态文件的目录名public不会出现在URL中，

托管多个静态资源目录

如果要托管多个静态资源目录，请多次调用express…static0函数：

app.use(express.static('public'))
app.use(express.static('files'))

访问静态资源文件时，express.static0函数会根据目录的添加顺序查找所需的文件。

挂载路径前缀

如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式：

app.use('/public',express.static('public'))

现在，你就可以通过带有/public前缀地址来访问public目录中的文件了
http://localhost:3000/public/images/kitten.jpg
http://localhost:3000/public/css/style.css
http://localhost:3000/public/js/app.js

nodemon

为什么要使用nodemon

在编写调试Node.js项目的时候，如果修改了项目的代码，则需要频繁的手动close掉，然后再重新启动，非常繁琐。
现在，我们可以使用nodemon(https:lwww.npmjs.com/package/nodemon)这个工具，它能够监听项目文件的变动，当代码被修改后，nodemon会自动帮我们重启项目，极大方便了开发和调试。

安装

npm install -g nodemon

使用nodemon

当基于Node.js编写了一个网站应用的时候，传统的方式，是运行node app.js命令，来启动项目。这样做的坏处是：代码被修改之后，需要手动重启项目。
现在，我们可以将node命令替换为nodemon命令，使用nodemon app.js来启动项目。这样做的好处是：代码被修改之后，会被nodemon监听到，从而实现自动重启项目的效果。

路由

Express中的路由

在Express中，路由指的是客户端的请求与服务器处理函数之间的映射关系。
Express中的路由分3部分组成，分别是请求的类型、请求的URL地址、处理函数，
格式如下：

app.METHOD(PATH,HANDLER)

//举例：
//四配GET请求，且请求URL为/
app.get('/',function (req,res){
	res.send('Hello World!'
})
/、匹配POST请求，且请求URL为/
app.post('/',function (req,res){
	res.send('Got a POST request')
})

路由的匹配过程

每当一个请求到达服务器之后，需要先经过路由的匹配，只有匹配成功之后，才会调用对应的处理函数。
在匹配时，会按照路由的顺序进行匹配，如果请求类型和请求的URL同时匹配成功，则Express会将这次请求，转交给对应的function函数进行处理。
在这里插入图片描述

路由匹配的注意点：
按照定义的先后顺序进行匹配，请求类型和请求的URL同时匹配成功，才会调用对应的处理函数。

路由的使用

最简单的用法

在Express中使用路由最简单的方式，就是把路由挂载到app上，示例代码如下：

const express = require('express')
//创健Web服务器，命名为app
const app = express()
//挂载路由
app.get('/',(req,res)=>res.send('Hello World.')}
app.post('/',(req,res)=>{res.send('Post Request.')})
//启动Web服务器
app.listen(80,()=>console.log('server running at http://127.0.0.1'))

模块化路由

为了方便对路由进行模块化的管理，Express不建议将路由直接挂载到app上，而是推荐将路由抽离为单独的模块。
将路由抽离为单独模块的步骤如下：

创建路由模块对应的js文件
调用express.Router()函数创建路由对象
向路由对象上挂载具体的路由
使用module.exports向外共享路由对象
使用app.use()函数注册路由模块

创建路由模块

//1.导入express
var express = require('express')
//2.创健路由对像
var router = express.Router()
//3.挂载获取用户列表的路由
router.get('/user/1ist',function(req,res){
	res.send('Get user list.')
//4.挂载添加用户的路由
router.post('user/add',function(req,res){
	res.send('Add new user.')
//5向外导出路由对象
module.exports router

注册路由模块

//1.导入路由模块
const userRouter require('./router/user.js')
//2.使用app.use（）注册路由模块
app.use(userRouter)

注意：
app.use（）函数的作用，就是来注册全局中间件

为路由摸块添加前缀

类似于托管静态资源时，为静态资源统一挂载访问前缀一样，路由模块添加前缀的方式也非常简单：

//1.导入路由模块
const userRouter require('./router/user.js')
//2.使用app.use（）注册路由模块，并添加统一的访问前缀/api
app.use('/api',userRouter)