web学习笔记（四十九）

本文主要是介绍web学习笔记（四十九），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

1. 初识 Express

1.1 什么是 Express

1.2 Express 能做什么

1.3 Express 的基本使用

1.4  如何把内容响应给客户端

2. 托管静态资源 

2.1  express.static()

---

1. 初识 Express

1.1 什么是 Express

之前我们有讲过可以通过node.js内置的http模块来创建服务器，但是http创建服务器的过程比较繁琐而且开发效率比较低，而 Express就是npm上用来创建wdb服务器的一个包，通过 Express包我们可以快速创建 Web 服务器。Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。Express就是基于http模块封装出来的一个包。

1.2 Express 能做什么

Express可以用来快速创建web网站服务器和apl接口服务器。

• Web 网站服务器：专门对外提供 Web 网页资源的服务器。
• API 接口服务器：专门对外提供 API 接口的服务器。

1.3 Express 的基本使用

1.初始化项目

通过下面的命令行可以进行初始化项目，

npm init -y 
//或者npm init 

推荐在每一次拿到一个新项目后都先进行项目的初始化，进行完项目的初始化后一般会多出图中橙色的三个文件。

2. 安装 Express包

在控制台输入下面的这个命令就可以进行下载Express包的操作。

npm i express

3. 启动服务

参数一	端口号
参数二	回调函数

app.listen('8080', () => {console.log('服务已启动 http://127.0.0.1:8080');
})

4.  解析表单

app.use(express. urlencoded({extended: false
}));

5. 监听请求

可以监听get请求，也可以监听post请求。

（1）监听get请求，get请求中包含两个参数。

参数一	url(前端请求的路径)
参数二	回调函数()

在回调函数中也有两个参数： 

参数一	请求体req
参数二	响应体 res

在使用get请求时，如果前端发生请求。需要携带参数，那可以加一个查询字符串 eg:  url?username=tom&pwd=123456，然后在后端就可以通过req.query来拿到前端发过来的信息。

app.get('/user', (req, res) => {// 请求体 reqconsole.log(req.url, req.method, req.query); ///user GET {}res.send({code: 0,msg: '成功',data: req.query})});

（2） 监听post请求，post请求中包含两个参数。

参数一	url(前端请求的路径)
参数二	回调函数()

 

在回调函数中也有两个参数： 

参数一	请求体req
参数二	响应体 res

post请求中传递参数是不可以通过查询字符串来传递的，post请求中获取前端传过来的数据需要用req.body。

app.post('/login', (req, res) => {console.log(req.body);res.send({code: 0,msg: "登录成功",data:req.body})
})

（3） 动态接口

在动态接口中如果想要动态获取某个参数的数值那就需要用到:  例如：/delete/:id可以动态获取id1的值。req是请求体， req获取的数据最后在后端显示,在动态接口中可以通过req.params来获取数据

app.get('/delete/:Id', (req, res) => {// req是请求体 数据最后在后端显示console.log(req.url, req.method);console.log(req.query,req.body);//结果是{ }{ },拿不到数据console.log(req.params);//动态接口中用req.params 来拿数据 拿到的是动态参数// res是响应体  res.send({code:0,msg:'删除成功',data:req.params})
})

1.4  如何把内容响应给客户端

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

 res.send({code: 0,msg: '成功',data: req.query})

 

2. 托管静态资源 

2.1  express.static()

express 提供了一个非常好用的函数，叫做 express.static()，通过它，我们可以非常方便地创建一个静态资源服务器，此时，在地址栏输入http://127.0.0.1:8080/pages/login.html就可以进入登录页面。

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

也可以挂载路径前缀，当挂载完路径前缀后 在浏览器中输入路径时也要将挂载路径里面的那部分路径加载到地址栏内。当添加完挂载路径后得输入http://127.0.0.1:8080/public/pages/login.html才能进入登录页面。

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

在项目中并不是只能托管一个静态资源，我们可以通过多次编写 app.use(express.static('文件名'))语句来托管多个文件夹。

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

这篇关于web学习笔记（四十九）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---