本文主要介绍关于webstorm,前端的知识点，对【【Express框架、Vs-code、Webstorm中创建Express项目】】和【express框架如何启动】有兴趣的朋友可以看下由【꒰ঌsna
本文主要介绍关于webstorm,前端的知识点，对【【Express框架、Vs-code、Webstorm中创建Express项目】】和【express框架如何启动】有兴趣的朋友可以看下由【꒰ঌsnail໒꒱】投稿的技术文章，希望该技术和经验能帮到你解决你所遇的相关技术问题。
express框架如何启动
目录 一、初识Express1、Express的基础知识2、在vscode中安装Express（法一）3、使用Express搭建Web服务器 二、Express框架的功能1、设立中间件响应http请求2、执行基于HTTP方法和URL不同动作的路由3、允许动态渲染基于参数传递给模板HTML页面 三、在vs-code安装Express(法二），创建Express项目1、安装Express2、查看Express版本号3、创建项目4、修改项目监听的端口号：/bin/www5、安装nodemon模块6、Express项目的目录结构 四、Express中间件1、Express中间件介绍2、中间件的功能3、中间件的组成4、中间件方法5、利用中间件处理静态资源6、利用中间件处理错误 五、Express的模块化路由管理1、使用方法：
一、初识Express
Node框架：半成品,开发人员按照框架的规范(要求)进行不同配置就可以实现不同的需求Node的常用框架：Express、Koa、egg
1、Express的基础知识
封装了http模块,并对http进行了扩展。简化了基于NodeJS的Web服务器端的开发。可以方便的获取请求参数和进行路由处理。
优势：
（1）简洁的路由定义方式。
（2）简化HTTP请求参数的处理。
（3）提供中间件机制控制HTTP请求。
（4）拥有大量第三方中间件。
（5）支持多种模版引擎。
2、在vscode中安装Express（法一）
打开vs-code终端：
使用npm包管理工具安装Express。创建根目录， 并在该目录下新建server目录作为项目的根目录。server目录下执行如下命令。
(1)项目初始化：npm init -y --生成package.json（配置）文件
(2)安装express模块：npm install express --save
(3)安装完成后，在当前目录下打开命令行工具执行"npm list express"命令,查看Express版本。
3、使用Express搭建Web服务器
利用Express搭建Web服务器的基本步骤:
(1)引入express模块；
(2)调用express()方法创建服务器对象app；
(3)调用get()方法定义GET路由；
(4)调用listen()方法监听端口
const express = require('express')
const app = express();
app.get('/',(req,res)=>{
res.end('Hello Express!')
})
app.get('/list',(req,res)=>{
res.end('Hello ListPage!')
})
app.listen(3000)
console.log("服务器运行在3000端口上")
二、Express框架的功能 1、设立中间件响应http请求 2、执行基于HTTP方法和URL不同动作的路由 3、允许动态渲染基于参数传递给模板HTML页面 三、在vs-code安装Express(法二），创建Express项目
打开cmd窗口：
1、安装Express
安装Express框架全局使用NPM,以便它可以被用来使用Node终端创建Web应用程序。
npm install -g express-generator
2、查看Express版本号
express --version
3、创建项目
打开vs-code终端：
(1)创建一个目录
(2)进入该目录执行指令：express 项目名
例如：express system
(3)进入项目所在目录,执行指令：npm install ( 安装相关依赖模块)
例如： cd system
system> npm install
(4)启动项目：npm start ( 项目默认的端口号是3000)
(5)启动浏览器访问：http://localhost:3000
4、修改项目监听的端口号：/bin/www
5、安装nodemon模块
安装nodemon模块，实时跟踪源程序的变化。安装完成后打开package.json文件,做如下修改。（动态监听.js文件，改变端口号，要刷新才可以被监听到）
“scripts”: {
“start”: “nodemon ./bin/www”
}
6、Express项目的目录结构
(1)bin：启动配置文件，在www里修改运行端口号
(2)node_modules：存放所有的项目依赖库
(3)public：用于存放静态资源文件 图片，CSS，Javascript文件
(4)routers：路由文件夹。存放的是路由文件
(5)views：存放页面的地方
(6)package.json：项目的配置信息文件(项目依赖配置及开发者信息)。
(7)app.js：应用核心配置文件，项目入口
四、Express中间件 1、Express中间件介绍
Express中间件：中间件(Middleware)是指业务流程的中间处理环节.可以把中间件理解为处理客户端请求的一系列方法。
Express通过中间件接收客户端发来的请求，并对请求做出响应，也可以将请求交给下一个中间件继续处理。
中间件（Middleware）是指业务流程的中间处理环节。可以把中间件理解为处理客户端请求的一系列方法。如果把请求比作水流，那么中间件就是阀门，阀门可以控制水流是否继续向下流动，也可以在当前阀门处对水流进行排污处理，处理完成后再继续向下流动。
2、中间件的功能
中间件机制可以实现哪些应用？
路由保护：当客户端访问登录页面时，可以先使用中间件判断用户的登录状态，如果用户未登录，则拦截请求，直接响应提示信息，并禁止用户跳转到登录页面。
维护公告：在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，并提示网站正在维护中。
自定义404页面：在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，并提示404页面错误信息。
3、中间件的组成
中间件主要由中间件方法和请求处理函数这两个部分构成。
（1）中间件方法：由Express 提供，负责拦截请求。
中间件方法作用get()响应用户的get请求post()响应用户的post请求put()响应用户的put请求.通常用于修改数据delete()响应用户的delete请求.通常用于删除数据use()处理所有的请求static()响应用户对静态资源的访问
（2）请求处理函数：由开发人员编写，负责处理请求。
get(‘请求路径’,请求处理函数)
例如：
get(‘/’,(req,res,next)=>{
处理代码
next()
})
4、中间件方法
常用的中间件方法有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('服务器启动成功');
（2） 当浏览器向服务器发送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('服务器启动成功');
（3）通过app.use()定义的中间件既可以处理GET请求又可以处理POST请求。在多个app.use()设置了相同请求路径的情况下，服务器都会接收请求并进行处理。
5、利用中间件处理静态资源
使用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>
6、利用中间件处理错误
在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如文件读取失败、数据库连接失败等。 这时候就需要用到错误处理中间件了，用它来集中处理错误。
编写如下代码，实现在app.get()中间件中进行文件读取操作，并在读取发生错误时，返回文件读取失败的错误信息。
const express = require('express');
const fs = require('fs')
const app = express();
app.get('/readfile',(req,res,next)=>{
fs.readFile('./a.txt','utf8',(err,result)=>{
if(err != null){
next(err);
}else {
res.send(result)
}
})
})
app.use((err,req,res,next)=>{
res.status(500).send(err.message)
})
app.listen(3000)
console.log("服务器运行在3000端口上")
五、Express的模块化路由管理
通过前面讲解的内容，已可以使用app.get()方法和app.post()方法来实现简单的路由功能，但没有对路由进行模块化管理。在实际的项目开发中，不推荐将不同功能的路由都混在一起存放在一个文件中，因为随着路由的种类越来越多，管理起来会非常麻烦。为了方便路由的管理，通过express.Router()实现模块化路由管理。
express.Router()方法用于创建路由对象route，然后使用**route.get()和route.post()**来注册当前模块路由对象下的二级路由，这就是一个简单的模块化路由。
1、使用方法：
(1)创建路由文件：扩展名为.js的文件(index.js)
(2)在路由文件中引入express模块
var express = require(‘express’);
(3)使用express模块创建路由器对象
var router = express.Router();
(4)定义中间件响应用户的请求
router.get()或router.post()
(5)导出路由器对象
module.exports = router;
(6)在项目的核心文件app.js中引入路由文件
var indexRouter = require(‘./routes/index’);
(7)指定路由文件的请求路径
app.use(‘/’, indexRouter);
student.js：
var express =require('express');
var router = express.Router();
router.get('/info',(req, res, next) => {
res.send('你好，我是Student路由器')
})
router.get('/',(req, res, next) => {
res.send('你好，我是Student的根')
})
router.post('/postdemo',(req, res) => {
res.send('你好，这是post的请求')
})
module.exports =router
强调：自定义路由文件的请求路径的拼接过程
http://localhost:3000/students/info
app.js
var studentRouter =require('./routes/student');
app.use('/students',studentRouter);
前后端分离思想，在vs-code写了post.html代码如下:
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="token punctuation">"> <title>Document
title>
head> <body> <form action="http://localhost:3000/students/postdemo" method="post"> <button type="submit">提交post请求
button>
form>
body>
html>
本文《【Express框架、Vs-code、Webstorm中创建Express项目】》版权归꒰ঌsnail໒꒱所有，引用【Express框架、Vs-code、Webstorm中创建Express项目】需遵循CC 4.0 BY-SA版权协议。
京公网安备 11010802041100号