express的相关内容

最新推荐文章于 2025-02-24 21:29:16 发布

綝~

最新推荐文章于 2025-02-24 21:29:16 发布

阅读量144

点赞数

文章标签： express vue.js npm

本文链接：https://blog.youkuaiyun.com/m0_48154833/article/details/129724405

版权

express概述

基于Node.js（Node.js）平台，快速、开房、极简的Web开发框架，（核心就是封装了http模块及辅助相关模块）。

Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网

express入门

安装

npm i express -S

入门案例

//导入express
const express = require('express')
//导出的核心方法就创建应用的方法 createApplication
const app = express() //创建应用
//处理接口 app设计了相关的方法来帮助你处理请求
//get 处理get请求
//post 处理post
//delete 处理delete请求
//put 处理put请求
//all 处理所有请求
//接收俩个参数 第一个为对应的路由地址（不写默认为/） 第二个为处理函数(请求对象,响应对象,next下
一个)
app.get("/user",(req,res,next)=>{
res.setHeader("content-type","text/html;charset=utf-8")
res.write("你好 用户")
res.end()
})
//app监听端口号
app.listen(8888,()=>{
console.log('server is running')
})

express相关对象介绍

express （相当于createApplication）

json 方法（读取请求体匹配对应的content-type为json）
static 方法 (读取静态资源（html，css，img）形成服务接口)
Router 方法（产生一个路由对象）
urlencoded 方法（读取请求体匹配对应content-type为x-www-from-urlencoded）

//静态方法 中间件方法使用在对应的app里面
app.use(express.static('./css')) //中间件使用
//读取content-type为json body里面的内容
app.use(express.json())
//读取content-type为x-www-from-urlencoded 借助了第三方包 body-parse （格式化body里面的
数据）
app.use(express.urlencoded())
//产生路由
let router = express.Router()
app.use(router) //中间件引入

application

属性

locals 本地路径
mountpath 挂载路径
router 路由对象

方法

all 处理所有请求（所有的请求都能进入）
delete 处理delete请求
get 处理get请求
post 处理post请求
put 处理put请求
use 中间件引入
engine 模板引擎开启
get 获取配置 set 设置配置
listen 监听
disable 禁用某个配置 disabled 查看是否禁用
enable 开启某个配置 enabled 查看是否开启
render 渲染
route 进行路由配置
path 路径配置
param 参数配置
...

const express = require('express')
//生成应用对象
const app = express()
//利用all可以进行拦截
app.all("/",(req,res,next)=>{
// res.end('all请求处理')
console.log('进入了all')
//到下一个匹配的
next()
})
//请求处理的方法
app.get('/',(req,res,next)=>{
res.end('get请求处理')
})
app.post('/',(req,res,next)=>{
res.end('post请求处理')
})
app.delete('/',(req,res,next)=>{
res.end('delete请求处理')
})
app.put('/',(req,res,next)=>{
res.end('put请求处理')
})
//产生一个路由对象 相当一个路由地址处理
let router = express.Router()
router.get('/user',(req,res)=>{
res.end('吃饭了')
})
//利用中间件引入对应的路由 分离
app.use(router)
//设置相关配置
app.set("hello",'你好')
//获取配置
console.log(app.get('hello'))
console.log(app.enabled('hello'))//判断是否开启配置
app.disable("hello") //关闭当前配置
console.log(app.disabled('hello')) //判断是否关闭
//监听方法
app.listen(9999,()=>{
console.log('server is running！！')
})

Request

属性

query 获取get请求传递的参数（?后面携带的参数）
params 获取path路径后携带的参数 / 后面带的内容（配合路由地址使用）
body 获取请求体（post请求数据存在于请求体）
app 获取应用对象
baseUrl 获取请求头的baseUrl （根路径）
cookies 获取携带的cookie
ip 获取ip地址 ips 获取所有ip
host 获取主机 hostname 获取主机名
method 请求的方法
originalUrl 跨域地址
path 获取路径
protocol 获取协议
secure 判断当前是否为https
headers 获取请求头内容
...

方法

get 获取请求相关内容
...

Response

属性

app 获取应用对象
headerSent 响应头相关
locals 本地地址

方法

jsonp jsonp接口
send 发送数据（自动end 自动序列化）
json 发送json数据（自动end 自动序列化）
status 设置对应的状态码
sendStatus 发送状态码
render 服务器渲染核心（结合对应模板引擎进行渲染）
redirect 重定向
type 设置对应的contentType类型
append 追加内容发送
attchment 下载的相关设置
cookie 设置响应头的cookie
clearCookie 清空cookie
download 下载
end 结束当前响应
format 格式化
get 获取相关内容
...

const express = require('express')
const app = express()
app.use(express.urlencoded()) //读取body里面的内容 content为x-www-form-urlencoded
//通过id获取数据
app.get('/getDataById',(req,res)=>{
//获取请求传入的id (get请求)
let id = req.query.id
//响应数据
res.send({
id,
username:'jack'
}).status(200)
})
//获取post请求的数据
app.post('/login',(req,res)=>{
//获取请求传入的id (get请求)
let {username,password} = req.body
//响应数据
if(username == 'admin' && password == '123'){
res.type("json")
res.send({
code:200,
data:{
username,password
},
msg:"登录成功"
}).status(200)
}else{
res.json({
msg:"登录失败"
})
}
})
//获取path路径携带的参数 :id只是一个占位符 他的名字为id
app.get("/:id",(req,res)=>{
console.log(req.params.id) //获取当前占位地方的值
res.send({
id:req.params.id
})
})
app.listen(8888,()=>{
console.log('server is running！！！')
})

Router对象

路由对象主要是帮助我们来分离对应的接口。

主要方法

get 处理get请求
post 处理post请求
delete 处理delete请求
put 处理put请求
all 处理all请求
use 中间件

利用Router对象来进行分离

app.js

//导入express
const express = require('express')
const cors = require('cors')
//构建对应的应用
const app = express()
//简单的中间件使用
app.use(express.urlencoded()) //获取body中的数据
//中间件解决跨域问题
// app.use(function(req,res,next){
// //解决跨域
// res.setHeader("Access-Control-Allow-Origin","*")
// next()
// })
app.use(cors())
//导入对应的路由对象
const {userRouter,shopRouter} = require("./router")
//静态资源托管
app.use(express.static("./static"))
//use可以传入对应的路径 这个路径就是对应的前缀
app.use("/user",userRouter)
app.use("/shop",shopRouter)
//404拦截中间件
app.use(function(req,res,next){
res.send("404页面") //服务器渲染一个页面
})
//500中间件
app.use(function(err,req,res,next){
if(err){
res.send("500") //服务器渲染一个页面
}else{
next()
}
})
//监听对应的端口
app.listen(9999,()=>{
console.log("server is running")
})

router相关文件

userRouter

const express = require('express')
//构建路由对象
let userRouter = express.Router()
//导入对应的handler处理
const {handlerUserByID,handlerUserIndex,handlerUserInfo} = require("../handler")
//构建userRouter的接口
userRouter.get("/",handlerUserIndex)
userRouter.get("/info",handlerUserInfo)
userRouter.get("/:id",handlerUserByID)
module.exports = userRouter

shopRouter

const express = require('express')
//构建商品的接口
let shopRouter = express.Router()
//构建userRouter的接口
shopRouter.get("/",(req,res,next)=>{
throw new Error()
res.send("商品主页")
})
shopRouter.get("/list",(req,res,next)=>{
res.send("商品列表信息")
})
shopRouter.get("/:id",(req,res,next)=>{
res.send("通过id获取商品"+req.params.id)
})
module.exports = shopRouter

index.js

//统一导出 按需导入
module.exports = {
userRouter:require("./userRouter"),
shopRouter:require("./shopRouter")
}

handler文件

const handlerUserIndex = (req,res,next)=>{
throw new Error()
res.send("用户主页")
}
const handlerUserInfo =(req,res,next)=>{
res.send("用户信息")
}
const handlerUserByID =(req,res,next)=>{
res.send("通过id获取用户"+req.params.id)
}
module.exports = {
handlerUserIndex,
handlerUserInfo,
handlerUserByID
}

express-genarator

express基础结构生成

安装express-generator

npm i -g express-generator

使用express-generator生成对应的express基础结构（默认端口号为3000）

使用express指令（自动新建）

express 项目名

使用npx （新建文件夹进入其中）

npm express

服务器渲染

借助第三方模板引擎

art-template
express-art-template
jade
ejs
...

express-art-template

安装

npm i -S art-template
npm i -S express-art-template

主文件开启对应的配置

// 模板引擎
var art = require('express-art-template')
app.engine('html', art);
app.set('view options', {
debug: process.env.NODE_ENV !== 'production'
});

接口渲染

/* 必须带后缀 */
router.get('/', function(req, res, next) {
//进行渲染 自动寻找views下的index.html 传输的数据
res.render('index.html', { title: '你好吗' ,foods:["苹果","香蕉","橘子"]});
});

页面

<!--模板语法来解析传入的数据-->
<h1>{{title}}</h1>
<ul>
<!--遍历-->
<% foods.forEach(item=>{ %>
<li>{{item}}</li>
<% }) %>
</ul>

ejs

安装

npm i ejs -S

配置

//开启ejs
app.set('view engine','ejs');

接口

app.get("/user/list",(req,res)=>{
res.render("user",{
isLogin:true,
username:"jack",
list:['a','b','c','d']
})
})

页面

<!-- 数据渲染 -->
<h1><%= username%></h1>
<!-- 判断 -->
<% if(isLogin){%>
<a href="">已经登录</a>
<% }else{ %>
<a href="">去登录页面</a>
<% } %>
<!-- 列表渲染 -->
<ul>
<% list.forEach(item=>{ %>
<li><%=item%></li>
<% }) %>
</ul>