IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Express框架 -> 正文阅读

[JavaScript知识库]Express框架

目录

一、Express框架

1、Express简介

2、Express的优势

3、安装Express

4、创建Web服务器的步骤

(1)引入express模块

(2)调用express()方法创建服务器对象

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

(4)启动监听:调用listen()方法

5、Express的中间件(Middleware)

(1)中间件机制可以实现的用

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

(3)常用的中间件方法有app.get()、app.post()、app.use()

(4)利用中间件处理静态资源

(5)错误处理的中间件

6、模块化路由:通过express.Router()实现路由的模块化管理

(1)创建路由对象

(2)在主程序中引入路由模块

7、Express接收请求参数


一、Express框架

1、Express简介

Express是目前流行的基于Node.js运行环境的Web应用程序开发框架,它简洁且灵活,为Web应用程序提供了强大的功能。Express提供了一个轻量级模块,类似于jQuery(封装的工具库),它把Node.js的HTTP模块的功能封装在一个简单易用的接口中,用于扩展HTTP模块的功能,能够轻松地处理服务器的路由、响应、Cookie和HTTP请求的状态

2、Express的优势

1)简洁的路由定义方式。

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

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

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

5)支持多种模版引擎。

3、安装Express

(1)项目初始化:npm init

(2)安装express模块:npm install express

(3)查看express模块的版本号:npm list express

4、创建Web服务器的步骤

(1)引入express模块

(2)调用express()方法创建服务器对象

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

//app.get()方法的示例代码
app.get('/', (req, res) => {
  console.log(req, res);
});

(4)启动监听:调用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端口上")

//    http://localhost:3000    Hello Express

5、Express的中间件(Middleware)

是指业务流程的中间处理环节。可以把中间件理解为处理客户端请求的一系列方法。

?

(1)中间件机制可以实现的用

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

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

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

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

中间件方法由Express 提供,负责拦截请求。

请求处理函数由开发人员编写,负责处理请求。

(3)常用的中间件方法有app.get()、app.post()、app.use()

app.get('请求路径','请求处理函数'):拦截get方式的请求

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

const express = require('express')
const app = express()

app.get('/request',(req,res,next)=>{
    req.name = "张三"  //req请求对象给一个属性叫name,值是张三。next是函数,进行下一个中间件
    next() //启动下一个中间件
})

app.get('/request',(req,res)=>{
    res.send(req.name)  //res向客户端发送一个响应信息
})

app.listen(3000)
console.log('服务器运行在3000端口上')

app.post('请求路径','请求处理函数'):拦截post方式的请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>post中间件</title>
</head>
<body>
    <form action="http://localhost:3000/pt" method="post">
        <button type="submit">发送post请求</button>
    </form>
</body>
</html>
const express = require('express')
const app = express()

app.post('/pt',(req,res,next)=>{
    req.name = '小王'
    next()
})
app.post('/pt',(req,res)=>{
    res.send(req.name)
})
app.listen(3000)
console.log('服务器运行在3000端口上')

app.use('请求路径','请求处理函数'):调用其他模块

const express = require('express')
const app = express()

app.use('/pt',(req,res,next)=>{
    req.name = '小张'
    next()
})
app.use('/pt',(req,res)=>{
    res.send(req.name)
})
app.listen(3000)
console.log('服务器运行在3000端口上')

(4)利用中间件处理静态资源

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

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

常用的静态资源:图像、css、JavaScript、html

const express = require('express')
const app = express()

app.use(express.static('public'))  //static:静态资源的根目录
                                   //public在网络上是虚拟的文件夹,在前端访问时,不需要加public

app.listen(3000)

console.log('服务器运行在3000端口上')
//    http://localhost:3000/images/flc-3.png

(5)错误处理的中间件

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

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端口上')

6、模块化路由:通过express.Router()实现路由的模块化管理

(1)创建路由对象

const route = express.Router();

route.get('请求路径','请求处理函数');

route.post('请求路径','请求处理函数')

module.exports = route

例如:

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

(2)在主程序中引入路由模块

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

例如:

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

http://localhost:3000/yunxi/index

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;
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;
const express = require('express');
const shopRoute = require('./router/home');//导入路由文件
const userRouter = require('./router/user');
const app = express();

//应用路由
app.use('/shop',shopRoute);
app.use('/user',userRouter);
app.listen(3000);
console.log('服务器运行在3000端口上');

7、Express接收请求参数

(1)接收get请求的参数:使用 'req.query.参数名' 来获取

(2)接收post请求的数

????????????????①?使用body-parser模块

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

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

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

????????????????②?使用' req.body.参数名' 来获取参数

(3)接收路由参数

在定义路由时,可以在请求路径上进行参数传递

const express = require('express');
const bodyParse = require('body-parser');
const shopRoute = require('./router/home');//导入路由文件
const userRouter = require('./router/user');
const bodyRouter = require('./router/body');
const paramsRouter = require('./router/params');
const app = express();

app.use(bodyParse.urlencoded({ extended:false }))
//应用路由
app.use('/shop',shopRoute);
app.use('/user',userRouter);
app.use('/body',bodyRouter);
app.use('/parmas',paramsRouter);
app.listen(3000);
console.log('服务器运行在3000端口上');
const express = require('express');
//创建路由对象
const route = express.Router();

route.post('/info',(req,res)=>{
    let name = req.body.username
    let pwd = req.body.userpwd

    console.log("用户名:",name);
    console.log("密码:",pwd)
    res.send('欢迎来到用户信息页')
})
//将路由对象导出
module.exports = route;

//    用户名: 云汐
//    密码: 123456
const express = require('express');
//创建路由对象
const route = express.Router();
//用路由对象实现路由
route.get('/find/:id/:name',(req,res)=>{
    console.log(req.params)
    res.send('欢迎来到用户信息页')
})
//将路由对象导出
module.exports = route;

//    http://localhost:3000/params/find/112/张三
//    { id: '112', name: '张三' }
//    欢迎来到用户信息页

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-26 11:22:00  更:2022-02-26 11:22:11 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 9:42:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码