什么是Express
官方:Express是基于Node.js 平台,快速、开放、极简的Web开发框架;
通俗:Express的作用和Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器的;
Express的本质:就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法。
Express官网: http://expressjs.com
进一步理解Express
问题:不使用Express 能否创建 Web 服务器?
答案:能,使用 Node.js 提供的原生 http模块也行。
问题:有了http内置模块,为什么还用Express?
答案:http 内置模块用起来复杂,效率低,Express 是基于内置 http 模块进一步封装的,效率高;
问题:http内置模块与 Express 是什么关系?
答案:类似于浏览器 Web Api 和 JQuery 的关系,后者是基于前者进一步封装出来的。
Express 能做什么?
对于前端程序员来说,最常见的两种服务器,分别是:
Web网站服务器:对外提供 Web 网页资源的服务器;
API接口服务器:对外提供 API 接口的服务器。
使用 Express,我们可以方便、快速的创建 Web网站的服务器或 API接口的服务器。
Express 安装
项目所在目录下执行终端命令。
指定版本的意思是说,跟当前教程保持同步;

创建基本的Web服务器
1)导入 express
2)创建 Web服务器
3)调用 app.listen(port,fn) 启动服务器
const express = require('express')
const app = express()
app.listen(8000,()=>{
console.log('server is running at http://127.0.0.1:8000');
})
监听GET请求
通过 app.get() 方法,可以监听客户端 GET 请求:
// 参数1:客户端请求的URL地址
// 参数2:请求对应的处理函数
// req:请求对象(包含了与请求相关的属性和方法)
// res:响应对象(包含了与响应相关的属性和方法)
app.get('请求地址',function(req,res){
// 处理函数
})
监听POST请求
通过 app.post() 方法,可以监听客户端 POST 请求:
// 参数1:客户端请求的URL地址
// 参数2:请求对应的处理函数
// req:请求对象(包含了与请求相关的属性和方法)
// res:响应对象(包含了与响应相关的属性和方法)
app.post('请求地址',function(req,res){
// 处理函数
})
把内容响应给客户端
通过 res.send() 方法,可以把处理好的内容,发送给客户端:
app.get('/user',(req,res)=>{
// 向客户端发送 JSON 对象
res.send({name:'jack',age:20,gender:'male'})
})
app.post('/user',(req,res)=>{
// 向客户端发送文本
res.send("The request succeeded.")
})
res.send() 方法比较强大,即可以响应 JSON数据,也可以响应文本字符串;
创建基本Web服务器(代码整理)
新建个 server.js 文件
const express = require('express')
const app = express()
app.get('/user',(req,res)=>{
res.send({name:'jack',age:20,gender:'male'})
})
app.post('/add',(req,res)=>{
res.send('the request accessed.')
})
app.listen(8000,()=>{
console.log('Server is running at http://127.0.0.1:8000')
})
在 apifox(或postman)来测试新建的Web服务器
GET请求:

POST请求:

获取URL中携带的查询参数
通过 req.query 对象,可以访问到客户通过查询字符串的形式,发送到服务器的参数:
app.get('/',(req,res)=>{
console.log(req.query)
res.send(req.query)
})
apifox中新建 get 请求,地址+端口

提示:req.query 默认是一个空对象
客户端使用 ?name=jack&age=20
这种查询文字符串形式,发送到服务器的参数,可以通过 req.query 对象访问到。

结果:

获取到 res.query
后,可以通过 req.query.name
req.query.age
来使用。
获取URL的动态参数
通过 res.params 对象,可以访问到 URL中通过 :
匹配的动态参数;
app.get('/user/:id',(req,res)=>{
console.log(req.params);
})
提示: 这里的 :id
,是一个动态的参数
注意::
是固定用法,id 并不是;
req.params 默认是个空对象,里面存放着通过 :
动态匹配的参数值

红框:URL地址中的参数;
黄框:就是动态匹配来的参数值;
还可以传递多个参数
app.get('/user/:userid/:username',(req,res)=>{
console.log(req.params);
})
提示:这次改了两个参数名
apifox 试一下:

红框发送参数,黄框是匹配的参数
托管静态资源 express.static()
Express 提供一个非常好用的函数,叫 express.static() ,通过它,可以方便地创建静态资源服务器。
通过如下代码可以将 public 目录中的图片、css样式、js文件对外开放访问了
app.use(express.static('public'))
现在,就可以访问 public 目录中的所有文件了;
把之前做的 clock 文件夹放在当前根目录中:

服务器文件是 server.js ,要共享的文件夹是 clock;
完整代码:
const express = require('express')
const app = express()
app.use(express.static('./clock')) // 注意相对路径不能写错了
app.listen(8000,()=>{
console.log('Server is running at http://127.0.0.1:8000')
})
注意:Express在指定的静态目录中查找文件,并对外提供资源的访问路径,因此,存放静态文件的目录名不会出现在 URL中。
浏览器分别访问clock目录中的三个文件:



注意:共享出去的 clock 目录并不会显示在URL上。
看起来是很强大,一行代码,就可以共享整个目录了(包括子目录)。
托管多个静态资源
const express = require('express')
const app = express()
app.use(express.static('./clock')) // 注意相对路径不能写错了
app.use(express.static('./files')) // 共享多个目录
app.listen(8000,()=>{
console.log('Server is running at http://127.0.0.1:8000')
})
可以共享多少个目录,同样的方法多写一行代码就可以了;
如果两个目录中都有 index.html 文件算谁的呢?
按顺序加载,谁先加载显是谁。
路径前缀
如果希望在托管在静态资源访问路径之前,挂载路径前缀:
app.use('/myfloder',express.static('clock'))
有时,希望把挂载的目录也显示出来,那就加个访问前缀;

回顾一下
创建基本Web服务器的几个要点
// 引入 express
const express = require('express')
// 创建实例
const app = express()
// 监听 get 请求
app.get('/user',(req,res)=>{
// 响应 json 数据
res.send({name:'jack',age:20,gender:'male'})
})
// 监听 post 请求
app.post('/add',(req,res)=>{
// 响应文本字符串数据
res.send('the request accessed.')
})
// 接收query字符串参数 ?name=jack&age=20&gender=male
app.get('/',(req,res)=>{
console.log(req.query);
res.send(req.query)
})
// 接收匹配参数 /user/66/jacky
app.get('/user/:userid/:username',(req,res)=>{
console.log(req.params);
res.send(req.params)
})
// 对外共享文件 express.static()
app.use('/clock',express.static('clock'))
// 启动服务,端和回调
app.listen(8000,()=>{
console.log('Server is running at http://127.0.0.1:8000')
})
看起来不是很难,上手几段代码熟悉一下就会了。