Express框架、Webstorm中创建Express项目_陛下，再来一杯娃哈哈_webstorm安装express

网络投稿 02-07 1173

一、初识Express

1、Express的基础知识

2、安装Express

3、利用Express搭建Web服务器

二、Express中间件

1、组成

2、常用的中间件方法

3、利用中间件处理静态资源

4、利用中间件处理错误

三、Express模块化路由

四、Express接收请求参数

1、?Express接收GET请求参数

2、Express接收POST请求参数

3、Express接收路由参数

六、Webstorm中创建Express项目

一、初识Express 1、Express的基础知识

封装了http模块,并对http进行了扩展。简化了基于NodeJS的Web服务器端的开发。可以方便的获取请求参数和进行路由处理。

优势:

（1）简洁的路由定义方式。

（2）简化HTTP请求参数的处理。

（3）提供中间件机制控制HTTP请求。

（4）拥有大量第三方中间件。

（5）支持多种模版引擎。

2、安装Express

（1）项目初始化：npm init ---->生成配置文件

?（2）安装express模块：npm install express --save

?（3）查看express模块的版本号：npm list express? （验证express是否安装成功）

3、利用Express搭建Web服务器

利用Express搭建Web服务器的基本步骤：

? 引入express模块；

? 调用express()方法创建服务器对象app；

? 调用get()方法定义GET路由；

? 调用listen()方法监听端口。

//1、引入express模块 const express = require('express') //2、创建Web服务器对象 const app = express(); //3、创建get路由：接收客户端的get请求 app.get('/',(req,res)=>{ res.end('Hello Express!') }) app.get('/list',(req,res)=>{ res.end('Hello ListPage!') }) //4、启动监听 app.listen(3000) console.log("服务器运行在3000端口上")

二、Express中间件

Express通过中间件接收客户端发来的请求，并对请求做出响应，也可以将请求交给下一个中间件继续处理。

中间件（Middleware）是指业务流程的中间处理环节。可以把中间件理解为处理客户端请求的一系列方法。如果把请求比作水流，那么中间件就是阀门，阀门可以控制水流是否继续向下流动，也可以在当前阀门处对水流进行排污处理，处理完成后再继续向下流动。

?中间件机制可以实现哪些应用？

路由保护：当客户端访问登录页面时，可以先使用中间件判断用户的登录状态，如果用户未登录，则拦截请求，直接响应提示信息，并禁止用户跳转到登录页面。

维护公告：在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，并提示网站正在维护中。

自定义404页面：在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，并提示404页面错误信息。

1、组成

中间件主要由中间件方法和请求处理函数这两个部分构成。

（1）中间件方法：由Express 提供，负责拦截请求。

（2）请求处理函数：由开发人员编写，负责处理请求。

2、常用的中间件方法

常用的中间件方法有app.get()、app.post()、app.use()，其基本语法形式如下：

app.get('请求路径', '请求处理函数'); ?// 接收并处理GET 请求

app.post('请求路径', '请求处理函数'); // 接收并处理POST 请求

app.use('请求路径', '请求处理函数'); // 接收并处理所有请求

（1）当客户端向服务器端发送GET请求时，app.get()中间件方法会拦截GET请求，并通过app.get()中间件中的请求处理函数对GET请求进行处理。

同一个请求路径可以设置多个中间件，表示对同一个路径的请求进行多次处理，默认情况下Express会从上到下依次匹配中间件。

const express = require('express'); const app = express(); // 定义中间件 app.get('/request', (req, res, next) => { req.name = '张三'; next(); //启动下一个中间件 }); app.get('/request', (req, res) => { res.send(req.name); }); app.listen(3000); console.log('服务器启动成功');

?当浏览器向服务器发送POST请求时，app.post()定义的中间件会接收并处理POST请求。

下面通过案例演示如何使用app.post()中间件。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>post中间件</title> </head> <body> <from action="http://localhost:3000/post" method="post"> <button type="submit">发送post请求</button> </from> </body> </html>

const express = require('express'); const app = express(); // 定义中间件 app.post('/post', (req, res, next) => { req.name = '李四'; next(); }); app.post('/post', (req, res) => { res.send(req.name); }); app.listen(3000); console.log('服务器启动成功');

?通过app.use()定义的中间件既可以处理GET请求又可以处理POST请求。在多个app.use()设置了相同请求路径的情况下，服务器都会接收请求并进行处理。

下面通过案例演示如何使用app.use()中间件。

3、利用中间件处理静态资源

使用static() 中间件，在客户端访问服务器的静态资源时使用。

express.static()：是express内置的中间件，参数是静态资源所在的目录,要作为app.use的参数。

常用的静态资源有图片、CSS、JavaScript和HTML文件等。

express.static()需要作为app.use()的参数使用

下面通过案例演示express.static()中间件如何实现静态资源访问。

const express = require('express'); const app = express(); // 静态资源处理 app.use(express.static('public')); app.listen(3000); console.log('服务器启动成功');

?在public 目录下创建index.html文件，用于实现通过浏览器访问静态资源index.html文件，具体代码如下。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>首页</h1> </body> </html>

4、利用中间件处理错误

在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如文件读取失败、数据库连接失败等。这时候就需要用到错误处理中间件了，用它来集中处理错误。

编写如下代码，实现在app.get()中间件中进行文件读取操作，并在读取发生错误时，返回文件读取失败的错误信息。

三、Express模块化路由

通过前面讲解的内容，已可以使用app.get()方法和app.post()方法来实现简单的路由功能，但没有对路由进行模块化管理。在实际的项目开发中，不推荐将不同功能的路由都混在一起存放在一个文件中，因为随着路由的种类越来越多，管理起来会非常麻烦。为了方便路由的管理，通过express.Router()实现模块化路由管理。

express.Router()方法用于创建路由对象route，然后使用route.get()和route.post()来注册当前模块路由对象下的二级路由，这就是一个简单的模块化路由。

(1)创建路由对象

const route = express.Router();

route.get('请求路径', '请求处理函数'); ? // 接收并处理route 下的GET 请求

route.post('请求路径', '请求处理函数'); // 接收并处理route 下的POST 请求

moudle.exports = route

例如：?route.get('/index',()=>{}) //二级路由,'/'表示当前路由的上一级目录

（2）在主程序中引入路由模块

app.use( ' /请求路径?' , ' 路由模块名?' )?

例如：app.use('/deyun',route); //一级路由, '/'表示的是服务器的根目录

拼接路由：http://localhost:3000/deyun/index

?例1：新建home.js文件，实现“模块路由化”的页面效果。

const express = require('express'); //创建路由对象 const route = express.Router(); //用路由对象实现路由 route.get('/index',(req,res)=>{ res.send('路由模块化') }) //将路由对象导出 module.exports = route;

新建main.js，使用app.use()注册home模块化路由。

const express = require('express') //导入路由文件 const route = require('../router/home') const app = express() //应用路由 app.use('/home',route) //注册监听 app.listen(3000) console.log("服务器运行在3000端口上")

在浏览器中打开“http://localhost:3000/home/index”，访问结果如下。?

?例2：

home.js

const express = require('express'); //创建路由对象 const route = express.Router(); //用路由对象实现路由 route.get('/index',(req,res)=>{ res.send('欢迎来的首页') }) route.get('/blog',(req,res)=>{ res.send('欢迎来到博客页面') }) //将路由对象导出 module.exports = route;

user.js?

const express = require('express'); //创建路由对象 const route = express.Router(); //用路由对象实现路由 route.get('/index',(req,res)=>{ res.send('欢迎来到用户主页') }) route.get('/info',(req,res)=>{ res.send('欢迎来到用户信息页面') }) //将路由对象导出 module.exports = route;

main.js

const express = require('express') //导入路由文件 const shopRoute = require('../router/home') const userRoute = require('../router/user') const app = express() //应用路由 app.use('/shop',shopRoute) app.use('/user',userRoute) //注册监听 app.listen(3000) console.log("服务器运行在3000端口上")

四、Express接收请求参数

使用原生Node.js处理GET和POST请求参数是非常麻烦的，例如，为了获取GET请求参数，需要使用url模块对请求地址进行解析。为了降低开发的难度，Express通过req.query、req.body和第三方模块body-parser对请求参数进行了处理。

1、?Express接收GET请求参数

Express框架中的req.query用于获取GET请求参数，框架内部会将GET参数转换为对象并返回。

const express = require('express'); //创建路由对象 const route = express.Router(); //用路由对象实现路由 route.get('/index',(req,res)=>{ let name = req.query.username let age = req.query.userage console.log('姓名：',name) console.log('年龄：',age) res.send('欢迎来到用户主页') }) route.get('/info',(req,res)=>{ res.send('欢迎来到用户信息页面') }) //将路由对象导出 module.exports = route;

2、Express接收POST请求参数

Express中的req.body用于获取POST请求参数，需要借助第三方body-parser模块将POST参数转换为对象形式。

body-parser是一个解析HTTP请求体的模块，使用这个模块可以处理POST请求参数，使用起来非常方便。使用body-parser模块处理表单数据的示例代码如下。

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

{ extended: false}表示在方法的内部使用querystring系统模块来处理POST请求参数；

{ extended: true}表示使用qs第三方模块进行处理。

在处理POST请求参数之前，首先要完成body-parser模块的安装。

npm install body-parser@1.18.3 --save

新建body.js文件，实现返回req.body请求参数。

const express = require('express') const bodyParser = require('body-parser') const app = express() app.use(bodyParser.urlencoded({extended:false})) app.post('/body',(req,res)=>{ res.send(req.body) }) app.listen(3000) console.log("服务器运行在3000端口上")

使用表单发起POST请求，请求参数会被自动添加到请求地址后面，在服务器端使用req.body来获取请求参数。在001.html文件中，修改<form>标签的action属性为“http://localhost:3000/body”，示例代码如下。?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>form表单页面</title> </head> <body>  <form action="http://localhost:3000/body" method="post" style="width: 245px"> 用户名：<input type="text" style="float: right;" name="username" /> <br><br> 密码：<input type="password" style="float: right;" name="password" /> <br><br> <input type="submit" value="提交" /> </form> </body> </html>

在浏览器中打开index.html文件，输入用户名“zhangsan”和密码“123456”，单击 “提交”按钮，结果如图所示。?

3、Express接收路由参数

在定义路由时，可以在请求路径中传递参数，例如请求路径“/find/:id”中的“:id”是一个参数占位符，当浏览器向“/find/:id”地址发送请求时，“:id”对应的值就是参数值。

通常情况下，把写在路由请求路径中的参数称为路由参数。

通过请求路径传递参数，可以让路由代码看起来非常美观，且请求参数会被清晰地展示出来。 Express路由参数的示例代码如下。

app.get('/find/:id', (req, res) => { res.send(req.params); });

?新建params.js文件，编写如下代码，使用req.params获取路由参数。

const express = require('express'); const app = express(); app.get('/find/:id', (req, res) => { res.send(req.params); }); app.listen(3000); console.log('服务器启动成功');

?在浏览器的地址栏中输入请求地址：localhost:3000/find/123

?修改上述步骤（1）中的app.get()代码，实现多个参数的传递，通过路由参数:id、:name和:age分别传递用户id、用户名和年龄。

在浏览器中打开“http://localhost:3000/find/123/zhangsan/30”。

六、Webstorm中创建Express项目

1、修改项目使用的端口号：bin->www

2、项目的静态资源目录：public

3、路由文件夹：routes ?? ? 4、视图文件夹(页面文件)：views

5、项目的启动文件(入口文件)：app.js

附： ?? ? (1)moment模块，监控源代码的变化,若源代码发生改变会自动重新运行程序

(2)在cmd中运行express项目的命令：npm start ?? ?