Express 框架

最新推荐文章于 2022-03-03 16:45:16 发布
最新推荐文章于 2022-03-03 16:45:16 发布
阅读量292 收藏
点赞数
分类专栏： node 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36802214/article/details/120181076
版权

一、使用 express 命令 来快速从创建一个项目目录

1、全局安装Express及express-generator

命令：

$ npm install  -g express 

$ npm install  -g express-generator

2、创建脚手架

命令：

$ express [options] [dir]

Options:
    --version        输出版本号
-e, --ejs            添加对 ejs 模板引擎的支持
    --pug            添加对 pug 模板引擎的支持
    --hbs            添加对 handlebars 模板引擎的支持
-H, --hogan          添加对 hogan.js 模板引擎的支持
-v, --view <engine>  添加对视图引擎（view） <engine> 的支持 (ejs|hbs|hjs|jade|pug|twig|vash) （默认是 jade 模板引擎）
    --no-view        创建不带视图引擎的项目
-c, --css <engine>   添加样式表引擎 <engine> 的支持 (less|stylus|compass|sass) （默认是普通的 css 文件）
    --git            添加 .gitignore
-f, --force          强制在非空目录下创建
-h, --help           输出使用方法

创建了一个名为 app 的 Express 应用，并使用ejs模板引擎

$ express --view=ejs app

这时，你也可以看到在app文件夹下的文件结构；

bin: 启动目录 里面包含了一个启动文件 www 默认监听端口是 3000 (直接node www执行即可)
node_modules：依赖的模块包
public：存放静态资源
routes：路由操作
views：存放ejs模板引擎
app.js：主文件
package.json：项目描述文件

 二、express 简单应用

Express上手非常简单，首先新建一个项目目录，假定叫做express。

进入该目录，新建一个package.json文件，内容如下。

{
  "name": "express",
  "description": "express test app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "4.x"
  }
}

上面代码定义了项目的名称、描述、版本等，并且指定需要4.0版本以上的Express。

然后，就可以安装了。

$ npm install

执行上面的命令以后，在项目根目录下，新建一个启动文件，假定叫做index.js。

var express = require('express');
var app = express();
 
app.use(express.static(__dirname + '/public'));

app.get('/',function(req,res){      //访问根路径时输出hello world
    res.send(`<h1 style='color: blue'>hello world</h1>`);
});
 
app.listen(8080);

然后，运行上面的启动脚本。 

$ node index

三、 路由

路由表示应用程序端点 (URI) 的定义以及响应客户端请求的方式。它包含一个请求方时（methods）、路径（path）和路由匹配时的函数（callback）;

app.methods(path, callback);

字符串路径

app.get("/login",function(req,res){
    res.send("heng... women");
})

此路径地址将与/login匹配

字符串模式路径

此路由路径将与acd和相匹配abcd

app.get('/ab?cd', function (req, res) {
  res.send('ab?cd')
})

这条路线的路径将会匹配abcd，abbcd，abbbcd，等等。

app.get('/ab+cd', function (req, res) {
  res.send('ab+cd')
})

这条路线的路径将会匹配abcd，abxcd，abRANDOMcd，ab123cd，等。

app.get('/ab*cd', function (req, res) {
  res.send('ab*cd')
})

此路由路径将与/abe和相匹配/abcde。

app.get('/ab(cd)?e', function (req, res) {
  res.send('ab(cd)?e')
})

正则表达式路径

此路由路径将匹配其中带有“ a”的任何内容。

app.get(/a/, function (req, res) {
  res.send('/a/')
})

这条路线的路径将匹配butterfly和dragonfly，但不butterflyman，dragonflyman等。

app.get(/.*fly$/, function (req, res) {
  res.send('/.*fly$/')
})

1、基础路由

const express = require("express");
var app = express();
​
app.get("/",function(req,res){
    res.send(`<h1>主页</h1>`);
});
app.get("/login",function(req,res){
    res.send(“登录页面”);
});
app.get("/registe",function(req,res){
    res.send(“注册页面”);
});
​
app.listen(8080);

输入http://127.0.0.1:8080/login和http://127.0.0.1:8080/registe都能进入不同路由。

2、动态路由

路由参数被命名为URL段，用于捕获URL中在其位置处指定的值。捕获的值将填充到req.params对象中，并将路径中指定的route参数的名称作为其各自的键。

Route path: /users/:userId/books/:bookId
Request URL: http://localhost:3000/users/34/books/8989
req.params: { "userId": "34", "bookId": "8989" }

要使用路由参数定义路由，只需在路由路径中指定路由参数，如下所示。

app.get('/users/:userId/books/:bookId', function (req, res) {
  res.send(req.params)
})

3、路由模块化

使用express.Router该类创建模块化的，可安装的路由处理程序。一个Router实例是一个完整的中间件和路由系统; 因此，它通常被称为“迷你应用程序”。

以下示例将路由器创建为模块，在其中加载中间件功能，定义一些路由，并将路由器模块安装在主应用程序的路径上。

birds.js在app目录中创建一个名为以下内容的路由器文件：

var express = require('express')
var router = express.Router()
​
// middleware that is specific to this router
router.use(function timeLog (req, res, next) {
  console.log('Time: ', Date.now())
  next()
})
// define the home page route
router.get('/', function (req, res) {
  res.send('Birds home page')
})
// define the about route
router.get('/about', function (req, res) {
  res.send('About birds')
})
​
module.exports = router

然后，在应用程序中加载路由器模块：

var birds = require('./birds')
// ...
app.use('/birds', birds)

四、get请求

通过req.query可以获得用户发送的get请求，之后通过node操作将相应数据返回给用户。

如果发送的是：

http://localhost:8080/login?goods1=0001&goods2=0002

响应的话则通过：

req.query

他会获取到全部数据，或

req.query.goods1
req.query.goods2

实例：

const express = require("express");
var app = express();
​
app.get("/",function(req,res){
    res.send("主页");
});
​
app.get("/login",function(req,res){
    console.log(req.query);
    res.send("登录路由，goods1为："+req.query.goods1+"==>   goods2为："+req.query.goods2);
});
​
app.listen(8080);

五、post请求

设置解析body中间件

app.use(express.urlencoded())

获取body数据

req.body.username

实例 

var express = require('express');
var app = express();​

//解析post提交的数据
app.use(express.urlencoded())
​
//处理登陆请求
app.post('/login',async (req,res)=>{
  //获取用户名和密码
  let username = req.body.username 
  let password = req.body.password
})
​
​
module.exports = app;
​

六、中间件

从字面意思，我们可以了解到它大概就是做中间代理操作，事实也是如此；大多数情况下，中间件就是在做接收到请求和发送响应中间的一系列操作。事实上，express是一个路由和中间件的web框架，Express 应用程序基本上是一系列中间件函数的调用。

执行流程

1.浏览器发送请求

2.express接受请求

中间处理的过程

3.路由函数处理渲染（req,res）

4.res.render渲染

1、应用层中间件

const express=require("express");
​
var app=express();
​
//匹配路由之前的操作
app.use(function(req,res,next){
    console.log("访问之前");
    next(); //进行下一步   不写就只允许到访问之前
});
​
app.get("/",function(req,res){
    res.send("主页");
});
​
app.listen(8080);

2.路由中间件

路由级中间件和应用级中间件类似，只不过他需要绑定express.Router();

var router = express.Router()

const express = require("express");
var app = express();
var router=express.Router();
​
router.use("/",function(req,res,next){
    console.log("匹配前");
    next();
});
​
router.use("/user",function(req,res,next){
    console.log("匹配地址：",req.originalUrl);
    next();
},function(req,res){
    res.send("用户登录");
});
​
app.use("/",router);
​
app.listen(8080);

3.错误处理中间件

顾名思义，它是指当我们匹配不到路由时所执行的操作。错误处理中间件和其他中间件基本一样，只不过其需要开发者提供4个自变量参数。

app.use((err, req, res, next) => {
        res.sendStatus(err.httpStatusCode).json(err);
});

const express=require("express");
​
var app=express();
​
app.get("/",function(req,res,next){
    const err=new Error('Not Found');
    res.send("主页");
    next(err);
});
​
app.use("/user",function(err,req,res,next){
    console.log("用户登录");
    next(err);
},function(req,res,next){
    res.send("用户登录");
    next();
});
​
app.use(function(req,res){
    res.status(404).send("未找到指定页面");
});
​
app.listen(8080);

4、内置的中间件

  1. express.static
  2. express.json
  3. express.urlencoded

5、第三方中间件

  1. 网址：http://expressjs.com/en/guide/using-middleware.html
  2. 比如：body-parser、compression，cookie-parser、morgan、response-time、serve-static、session

七、cookie

安装

cnpm install cookie-parser --save

引入

const cookieParser=require("cookie-parser");

设置中间件

app.use(cookieParser());

设置cookie

res.cookie("name",'zhangsan',{maxAge: 900000, httpOnly: true});
//res.cookie(名称,值,{配置信息})

关于设置cookie的参数说明：

  1. domain: 域名
  2. name=value：键值对，可以设置要保存的 Key/Value，注意这里的 name 不能和其他属性项的名字一样
  3. Expires： 过期时间（秒），在设置的某个时间点后该 Cookie 就会失效，如 expires=Wednesday, 09-Nov-99 23:12:40 GMT。
  4. maxAge： 最大失效时间（毫秒），设置在多少后失效 。
  5. secure： 当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效 。
  6. Path： 表示 在那个路由下可以访问到cookie。
  7. httpOnly：是微软对 COOKIE 做的扩展。如果在 COOKIE 中设置了“httpOnly”属性，则通过程序（JS 脚本、applet 等）将无法读取到COOKIE 信息，防止 XSS 攻击的产生 。
  8. singed：表示是否签名cookie, 设为true 会对这个 cookie 签名，这样就需要用 res.signedCookies 而不是 res.cookies 访问它。被篡改的签名 cookie 会被服务器拒绝，并且 cookie 值会重置为它的原始值。

实例：

const express=require("express");
const cookieParser=require("cookie-parser");
​
var app=express();
​
//设置中间件
app.use(cookieParser());
​
app.get("/",function(req,res){
    res.send("首页");
});
​
//设置cookie
app.get("/set",function(req,res){
    res.cookie("userName",'张三',{maxAge: 20000, httpOnly: true});
    res.send("设置cookie成功");
});
​
//获取cookie
app.get("/get",function(req,res){
    console.log(req.cookies.userName);
    res.send("获取cookie成功，cookie为："+ req.cookies.userName);
});
​
app.listen(8080);

八、session

session是另一种记录客户状态的机制，与cookie保存在客户端浏览器不同，session保存在服务器当中； 当客户端访问服务器时，服务器会生成一个session对象，对象中保存的是key:value值，同时服务器会将key传回给客户端的cookie当中；当用户第二次访问服务器时，就会把cookie当中的key传回到服务器中，最后服务器会吧value值返回给客户端。

因此上面的key则是全局唯一的标识，客户端和服务端依靠这个全局唯一的标识来访问会话信息数据。

安装express-session

cnpm install express-session --save

引入express-session模块

const session=require("express-session");

设置session

session(options);

实例：

const express=require("express");
const session=require("express-session");
​
var app=express();
​
//配置中间件
app.use(session({
    secret: "keyboard cat",
     resave: false,
     saveUninitialized: true,
     cookie: ('name', 'value',{maxAge:  5*60*1000,secure: false})
}));
​
app.use('/login',function(req,res){
    //设置session
    req.session.userinfo='张三';
    res.send("登陆成功！");
});
​
app.use('/',function(req,res){
    //获取session
    if(req.session.userinfo){
        res.send("hello "+req.session.userinfo+"，welcome");
    }else{
        res.send("未登陆");
    }
});
​
app.listen(8080);

以下演示通过销毁session的方式来退出登录

const express=require("express");
const session=require("express-session");
​
var app=express();
​
//配置中间件
app.use(session({
    secret: "keyboard cat",//加密字符串
     resave: false,//强制保存session
     saveUninitialized: true,//是否保存初始化的session
     cookie: ('name', 'value',{ maxAge:  5*60*1000,
                                secure: false,
                                name: "seName",
                                resave: false})
}));
​
app.use('/login',function(req,res){
    //设置session
    req.session.userinfo='张三';
    res.send("登陆成功！");
});
​
app.use('/loginOut',function(req,res){
    //注销session
    req.session.destroy(function(err){
        res.send("退出登录！"+err);
    });
});
​
app.use('/',function(req,res){
    //获取session
    if(req.session.userinfo){
        res.send("hello "+req.session.userinfo+"，welcome to index");
    }else{
        res.send("未登陆");
    }
});
​
app.listen(8080);

九、文件下载

文件下载非常简单，仅需通过res.download()执行即可，他可以写为3种形式：

res.download('/report-12345.pdf');

 以下是一个对选择对应文件进行下载的实例：

<form action="http://localhost:8080/" method="post" enctype="application/x-www-form-urlencoded">
	<input type="file" name="files" value="选择下载的文件"><br><br>
	<input type="submit" value="下载">
</form>
const express=require("express");
const bodyParser=require("body-parser");

var app=express();

var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.post('/',urlencodedParser,function(req,res){
	res.download("./public/"+req.body.files,err=>{
		if(err){
			res.send("下载失败！");
		}else{
			console.log("下载成功！");
		}
	});
});

app.listen(8080);

十、文件上传

再上传文件时，我们通常会使用到他。Multer用于处理multipart/form-data 类型的表单数据。首先我们先安装它：

cnpm install multer --save

单个文件上传应用 

<form action="http://localhost:8080/" method="post" enctype="multipart/form-data">
	<input type="file" name="files" value="指定文件">
	<br><br>
	<input type="submit" value="上传">
</form>
const express=require("express");
const multer=require('multer');
//初始化上传对象
var upload=multer({dest:'./upload/'});
var fs = require('fs');

var app=express();

//post 上传处理
//如果上传单个文件，可调用upload.single('files')  file对于<input type="files" name="files" id="file"> 的name
app.use("/",upload.single("files"),function(req,res){	//files为input type="file"的name值
	var oldFile=req.file.destination+req.file.filename;	//指定旧文件
	var newFile=req.file.destination + req.file.originalname;	//指定新文件
	fs.rename(oldFile,newFile,function(err){
		if(err){
			res.send('上传失败！');
		}else{
			res.send('上传成功！');
		}
	});
});

app.listen(8080);

在这里我们可以指定单个文件上传到根目录的upload文件夹里。这里值得注意的是req.file会返回文件的基本信息：

  fieldname: ***,	//input type="file"的name值
  originalname: ***,	//用户计算机上的文件的名称
  encoding: '***',		//文件编码
  mimetype: ***',		//文件的 MIME 类型
  destination: './***/',		//保存路径
  filename: ***,		//保存在 destination 中的文件名
  path: ***,		//已上传文件的完整路径
  size: **		//文件大小（字节单位）

多个文件上传应用 

在HTML找中input type="file"需要加上multiple来实现过滤，multiple不写参数则可以读取·所有文件。而在服务端上，我们需要将single()改为array(“name”,num);的形式来接收多个文件的上传请求。最后对他们全部进行重命名。在这之前我们首先看看multer支持哪些文件上传方式：

.single(fieldname)	//接受一个以 fieldname 命名的文件。.fields(fields)
.array(fieldname[, maxCount])	//接受一个以 fieldname 命名的文件数组。可以配置 maxCount 来限制上传的最大数量。
.fields(fields)	//接受指定 fields 的混合文件。fields是一个拥有name和maxCount的数组对象。
.none()		//只接受文本域。如果任何文件上传到这个模式，将发生 "LIMIT_UNEXPECTED_FILE" 错误。
.any()	//接受一切上传的文件。

下面我们将会演示如何上传多个文件： html：

<form action="http://localhost:8080/" method="post" enctype="multipart/form-data">
	<input type="file" name="files" value="指定文件" multiple>
	<br><br>
	<input type="submit" value="上传">
</form>
const express=require("express");
const multer=require('multer');
var upload=multer({dest:'./upload/'});
var fs = require('fs');


var app=express();

app.use("/",upload.array("files",5),function(req,res,next){
	req.files.forEach(function(ele,index){
		console.log(ele);
		var oldFile=ele.destination+ele.filename;	//指定旧文件
		var newFile=ele.destination+ele.originalname;	//指定新文件
		fs.rename(oldFile,newFile,function(err){
			err?console.log('上传失败！'):console.log('上传成功！');
		});
	});
	res.send("成功上传");
});

app.listen(8080);
罗罗诺亚丶索隆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
express-generator ,实现了express框架
qq_39168286的博客
05-21 449
express-generator ,实现了express框架 直接借助一个工具来搭建一个Node.js项目，这个工具叫做 express-generator ,这个工具帮助我们实现了express框架 安装 express-generator $ cnpm i express-generator -g 创建express 项目 $ express -e 项目名称 -e是安装 ejs 模...
Express框架
thwr1881的博客
07-24 2420
Express框架
node.js后端express框架express-generator脚手架入门（一）
laimaodashuaige的博客
05-03 489
所需软件： vscode，官网链接下载：https://code.visualstudio.com/；（也可以用自己习惯的编辑器） node.js，官网链接下载：http://nodejs.cn/ 安装自己电脑的合适版本即可。 安装这些一般直接点击下一步即可，对于一些国外的软件注意安装目录中最好不要有中文路径，以免出现问题。 1.首先我们进入终端创建一个expresstest目录，进入重点安装脚手架命令：npm install express-generator -g “-g”为全局安装，mac安装如果出现
Sirius 框架和概念
aloe_lh的博客
03-03 495
sirius框架
Express框架.docx
07-09
Express框架简介 Express中间件 Express框架请求处理 express-art-template模板引擎 ​​​​
node.js express框架简介与实现
10-16
主要介绍了node.js express框架简介与实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
node.js express框架
02-04
express框架，使用PM2部署后台项目
Node.js Express 框架
01-03
Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 ...
node+express框架中连接使用mysql(经验总结)
01-20
最近在学习node.js，做了一个练手项目，使用node.js+express框架，配合mysql数据库和前端vue框架开发一个多人文档编辑系统。 node.js环境下express+mysql的服务端项目示例 首先是环境搭建： node环境下 $ npm ...
node.js express框架实现文件上传与下载功能实例详解
10-16
主要介绍了node.js express框架实现文件上传与下载功能,结合具体实例形式详细分析了node.js express框架针对文件上传与下载的前后台相关实现技巧,需要的朋友可以参考下
Nodejs封装类似express框架的路由实例详解
10-15
在本篇文章里小编给大家整理的是关于Nodejs封装类似express框架的路由实例内容，有需要的朋友们学习下。
node的express框架
08-04
NULL 博文链接：https://jm1999.iteye.com/blog/2005534
搭建基于express框架运行环境的方法步骤
01-01
搭建基于express框架运行环境 开发后端的node服务 1.安装express  ① 安装全局变量 npm install express-generator -g （全局变量会在C盘node文件下） ②查看安装成功:express -version 2.通过生成器自动创建项目...
Express框架基本使用
weixin_42733970的博客
06-11 364
Express 是一个基于Node 平台的web 应用开发框架，它提供了一系列的强大特性，帮助你创建各种 Web 应用 可以使用 npm install express 命令进行下载 基本使用： // 引入express框架 const express = require('express'); // 创建网站服务器 const app = express(); app.get('/' , (req, res) => { // send() // 1. send方法内部会检测响应..
Express框架的基本使用
wangxiaochaoc的博客
04-17 428
文章目录一、Express框架简介1.1 Express框架是什么1.2 Express框架特性1.3原生Node.js与Express框架对比之路由1.4原生Node.js与Express框架对比之获取请求参数二、Express初体验2.1send方法三、中间件3.1什么是中间件四、app.use中间件用法五、中间件应用案例六、错误处理中间件七、捕获错误八、构建模块化路由九、GET参数的获取十、...
express解决跨域post请求变成OPTIONS
qq_36971710的博客
01-09 4872
在app.js中加入以下代码： 代码如下： app.all(’’, function(req, res, next) { res.header(“Access-Control-Allow-Origin”, ""); res.header(“Access-Control-Allow-Headers”, “X-Requested-With,Content-Type”); res.header(“Ac...
nodejs express中设置请求头允许跨域，自定义了请求头，就会多发送一次options请求
艾小逗
12-02 6425
nodejs express中设置请求头允许跨域 设置请求头允许跨域请求 app.js 文件中添加 代码 var app = express(); app.all('*', function (req, res, next) { // 设置请求头为允许跨域 res.header('Access-Control-Allow-Origin', '*'); // 设置服务器支持的所有头信息...
express框架：
最新发布
03-23
以下是Express框架的一些特点和功能： 1. 简洁而灵活：Express提供了一组简单而灵活的API，使得构建Web应用程序变得非常容易。它没有过多的约束，允许开发者按照自己的需求进行定制。 2. 路由功能：Express提供了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值