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
Express是一个基于NodeJS实现的WEB应用开发框架
本质上是一个NodeJS第三方模块,使用的时候可以通过npm命令安装操作
npm install express -S

2.入门程序
创建第一个应用:demo01.js

//引入express
const express = require('express')
// 创建应用
const app = express()
// 接受用户请求
app.get('/', (req, res) => {
    res.send('hello express')
})
// 启动应用
app.listen(3000, err => {
    console.log('服务器已在3000启动');
})

http1.1规范中,根据用户处理数据的不同,将请求方式规范了8中请求方式

GET: 用于向服务器获取数据的请求 查
POST:用于向服务器提交新的数据的请求 增
PUT: 用于向服务器提交新的更新的请求 改
DELETE: 用于先服务器提交删除数据的请求 删
向用户/客户端发送数据
res.send(字符串数据或者对象数据)

3.问题处理

第三方模块安装缓慢问题
默认情况下,npm install 命令安装第三方模块,从http://npmjs.org网站上进行下载和安装,网站服务器部署在国外,访问网速受到限制
建议:使用淘宝部署的NPM镜像服务器进行下载
临时下载
npm install express -S --registry https://registry.npm.taobao.org
全局下载
npm config set register http://registry.npm.taobao.org
npm config list
使用淘宝命令替换npm命令
npm install 命令默认从https://register.npmjs.org下载依赖
下载cnpm
npm install cnpm -g
使用cnpm替换npm命令
cnpm install express -S

git忽略清单

git仓库中,添加一个隐藏文本文件.gitignore
该文本文件中,添加忽略的文件、文件夹
以后再执行git命令时,这些被忽略的文件、文件夹就不会再被管理
/node_modules/

2.express核心操作

1.response响应对象
服务器返回个客户端的数据,一般使用response表示,Express框架中,默认给response响应对象提供了一些基础函数

response.send()
作用:服务器给客户端返回基础数据,如字符串数据、JSON对象数据
应用场景:前后端分离的项目中,用于返回具体数据,一般用于数据接口函数中

response.sendFile()
作用:服务器给客户端返回文件数据,如HTML网页文档、图片文件、css样式文件
应用场景:前后端耦合项目中可以返回网页、前后端分离项目中可以返回图片数据

response.setHead()
作用:服务器给客户端返回响应对象时,设置响应头
应用场景:响应头中有特殊数据的话可以传递


const express = require('express')
const path = require('path')
const app = express()
// 返回字符串数据
app.get('/str',(req,res)=>{
    let uname = 'zhansgan'
    res.send(uname)
})
// 返回对象数据
app.get('/json',(req,res)=>{
    let obj = {name:'zhangsan',age:18}
    res.send(obj)
})
// 返回文件
app.get('/html',(req,res)=>{
   let htmlPath = path.join(__dirname,'index.html')
    res.sendFile(htmlPath)
})
// 返回图片
app.get('/image',(req,res)=>{
    let imgPath = path.join(__dirname,'1.jpg')
     res.sendFile(imgPath)
 })
 app.listen(3000,err=>{
     console.log('服务器已在3000端口启用');
 })

2.Route路由访问

路由:本质上就是一个映射对象,将用户的请求分发到对应的组件进行处理的过程
路由的作用:核心作用就是将用户发送的不同路径的请求,交给不同的业务函数进行业务处理,最终完成具体的业务受理,给用户响应正确的数据
Express中的app.method(path路径,fn)就是一种封装的路由
method:get/post/put/delete/options/connect/trace/head

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

// 路由分发请求

app.get('/index',(req,res)=>{
    res.send('主页数据')
})
// 返回文件
app.get('/login',(req,res)=>{
   res.send('登录页面')
})
// 返回图片
app.get('/register',(req,res)=>{
     res.sendFile('注册页面')
 })
 app.listen(3000,err=>{
     console.log('服务器已在3000端口启用');
 })

3.middleware中间件

中间件:工作在客户端喝服务程序中间的一个组件
中间件可以拦截请求,针对请求进行数据处理,扩展请求的功能
请求中设置参数
请求中参数类型进行数据验证
请求中设置请求头
验证请求权限
中间件可以拦截响应,针对响应进行数据处理,扩展响应的功能
设置响应数据格式
转换项目数据类型
提取响应数据,按条件进行筛选
设置响应头数据

express中的中间件,主要区分为
内置中间件,express已经提供的、封装好的中间件
第三方中间件,第三方企业/团队开发的、封装的中间件
自定义中间件,按照需求定义的中间件

静态文件的处理
原生NodeJS应用中如果要处理静态文件(css/js/images)需要单独设置请求头,并且根据文件类型的不同,需要针对文件进行不同的读取操作
express中这针对静态文件的处理进行了优化, 提供了内置中间件可以支持某些特定的功能,如静态文件根据路径直接提取,如静态文件处理中间件express.static
app.use(express.static(‘public’))

自定义中间件
开发人员在项目中通过固定语法添加的中间件,可以用于请求和响应的拦截
app.use((req,res,next)=>{
//req拦截到的请求对象
//res:拦截到的响应对象
//next() 请求继续向后传递
})

错误中间件

app.use((req,res,next)=>{
	res.status(404)
	return res.send('404notfond')
})

4.request请求对象

请求:即用户发送的一个url地址,用于向服务器请求数据
请求的格式在HTTP1.1规范中,定义了8种不同方式的请求
GET:向服务器请求获取数据
POST:向服务器请求新增数据
PUT:向服务器请求更新数据
DELETE:向服务器请求删除数据
HEAD:获取响应头数据,判断响应数据格式、大小等信息
TRACE:一般用于服务器存货状态的心跳检测

Express种的请求对象
Express中的路由组件中,业务处理函数的参数中包含请求对象
app.method(path,function(request请求对象,response响应对象){})
请求对象常见属性
url:用户请求地址的路径
method:用户请求方式
params:用户请求路径中附带的参数
query:用户请求URL地址中附带的查询字符串参数
body:需要第三方中间件支持,获取post参数

参数:GET参数的发送和接收
用户发送请求URL: http://localhost:3000/get?name=zhangsan&age=20

app.get('/get',(req,res)=>{
    let params = req.query
    res.send(params.name+params.age)
})

参数:REST参数的发送和接收
为了保障服务器的数据安全出现的一种新的数据参数传递方式
用户发送URL请求: http://localhost:3000/r/12/article

app.get('/rest/:id/article',(req,res)=>{
    let params = require.params
    res.send(params.id)
})

参数:post参数的请求和接收
项目中存在一个问题,用户通过GET请求或者REST请求发送的参数,参数数据会展示在URL地址中,如果传递的数据有保密性要求,不适合使用GET/REST参数进行传递
Express在4.x版本开始,将post参数接收数据的部分拆分出去作为第三方中间件
npm install body-parser
项目中添加/注册中间件

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

post路由中接收POST请求参数

let params = req.body
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-24 14:50:47  更:2021-10-24 14:51:38 
 
开发: 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年5日历 -2024/5/13 2:13:30-

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