资讯专栏INFORMATION COLUMN

Express 介绍

hot_pot_Leo / 2256人阅读

摘要:在向页面发送内容时,程序也不会往下执行我们也可以装在一组中间件路由级中间件路由级中间件和应用级中间件一样,只是它绑定的对象为。安装所需功能的模块,并在应用中加载,可以在应用级加载,也可以在路由级加载。

Express 框架

根据官方的介绍,Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,可以轻松的创建各种 web 或者移动端应用

今天就来简单的了解一下 Express 框架

安装

首先安装 Express ,新建一个工作文件夹,并命名为 myapp ,在此文件夹下进行环境的初始化:

npm init

官方推荐的入口文件名为 app.js

entry point: (index.js) app.js

当然也可以使用 npm 默认的 index.js 的文件名

接下来安装 Express

npm install express --save

环境准备完成,现在尝试创建一个 Express 应用

进入 myapp 目录,新建一个 app.js 的文件,复制如下代码:

const express=require("express");
const app=express();

app.get("/",(req,res)=>{
    res.send("这是一个 Express 应用")
});

var server=app.listen(3000,()=>{
    console.log("服务已启动 http://localhost:3000")
})

上面的代码启动一个服务并监听从 3000 端口进入的所有连接请求。他将对所有 (/) URL 或 路由 返回 “这是一个 Express 应用” 字符串。对于其他所有路径全部返回 404

启动这个应用

node app.js
Express 应用生成器

Express 应用生成器可以快速创建一个应用的骨架

安装:

npm install express-generator -gd

安装完毕,创建一个名为myapp的应用:

express myapp

这条命令会在当前目录下创建 myapp 文件夹,并生成应用骨架

安装依赖包

cd myapp
npm install

依赖安装完成就可以启动此app了

Windows 平台在 cmd 内输入:

set DEBUG=myapp & npm start

Mac 或者 Linux 平台输入:

DEBUG=myapp npm start

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了

当应用首次启动以后,下次启动只需要输入 npm start 就行了

打开 package.json 文件,应用程序的启动实际上是依赖于这句代码:

"scripts": {
    "start": "node ./bin/www"
  }
路由

Express 的主要内容有两个:

路由

中间件

先来说路由

路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET、POST 等)组成的,涉及到应用如何响应客户端对某个网站节点的访问。

每一个路由都可以有一个或者多个处理器函数,当匹配到路由时,这个或者这些函数将被执行。

先写一个简单的路由

在 routes 目录下新建一个 orders.js 的文件:

var express=require("express");
var router=express.Router();

router.get("/",function(req,res,nest){
    res.render("orders",{msg:"订单首页"})
})
router.get("/list",function(req,res,next){
    res.send("订单列表")
})

//导出
module.exports=router;

页面文件写好以后需要在在app.js中进行挂载,

var orders=require("./routes/orders");
···
app.use("/orders",orders)

这两句最好和其他的路由组件写在一起

在地址栏输入对应的 url 即可打开响应的页面

路由方法实例:

// 对网站首页的访问返回 "Hello World!" 字样
app.get("/", function (req, res) {
  res.send("Hello World!");
});

// 网站首页接受 POST 请求
app.post("/", function (req, res) {
  res.send("Got a POST request");
});

// /user 节点接受 PUT 请求
app.put("/user", function (req, res) {
  res.send("Got a PUT request at /user");
});

// /user 节点接受 DELETE 请求
app.delete("/user", function (req, res) {
  res.send("Got a DELETE request at /user");
});
中间件

中间件(Middleware) 是一个函数,它可以访问请求对象(request object (req)), 响应对象(response object (res)), 和 web 应用中处于请求-响应循环流程中的中间件,一般被命名为 next 的变量。

中间件的分类:

应用级中间件

路由级中间件

错误处理中间件

内置中间件

第三方中间件

应用级中间件

应用级中间件绑定到 app 对象 使用 app.use() 和 app.METHOD(), 其中, METHOD 是需要处理的 HTTP 请求的方法,例如 get , put , post 等

var app = express();

// 没有挂载路径的中间件,应用的每个请求都会执行该中间件
app.use(function (req, res, next) {
  console.log("Time:", Date.now());
  next();
});

// 挂载至 /user/:id 的中间件,任何指向 /user/:id 的请求都会执行它
app.use("/user/:id", function (req, res, next) {
  console.log("Request Type:", req.method);
  next();
});

// 路由和句柄函数(中间件系统),处理指向 /user/:id 的 GET 请求
app.get("/user/:id", function (req, res, next) {
  res.send("USER");
});

在执行完一个中间件之后,next() 会使程序继续执行下一个中间件,如果没有 next(),程序则不会往下执行。

在向页面发送内容时,程序也不会往下执行

我们也可以装在一组中间件

app.use("/user/:id",function(req,res,next){
    console.log("Request URL:", req.originalUrl);
    next();
},function(req,res,next){
    console.log("Request Type:", req.method);
    next();
})
路由级中间件

路由级中间件和应用级中间件一样,只是它绑定的对象为 express.Router()。

在上一节中,我们自己写的 orders.js ,其内容就是一个路由级中间件

路由级使用 router.use() 或 router.VERB() 加载。

上述在应用级创建的中间件系统,可通过如下代码改写为路由级:

var app = express();
var router = express.Router();

// 没有挂载路径的中间件,通过该路由的每个请求都会执行该中间件
router.use(function (req, res, next) {
  console.log("Time:", Date.now());
  next();
});

// 一个中间件栈,显示任何指向 /user/:id 的 HTTP 请求的信息
router.use("/user/:id", function(req, res, next) {
  console.log("Request URL:", req.originalUrl);
  next();
}, function (req, res, next) {
  console.log("Request Type:", req.method);
  next();
});

// 一个中间件栈,处理指向 /user/:id 的 GET 请求
router.get("/user/:id", function (req, res, next) {
  // 如果 user id 为 0, 跳到下一个路由
  if (req.params.id == 0) next("route");
  // 负责将控制权交给栈中下一个中间件
  else next(); //
}, function (req, res, next) {
  // 渲染常规页面
  res.render("regular");
});

// 处理 /user/:id, 渲染一个特殊页面
router.get("/user/:id", function (req, res, next) {
  console.log(req.params.id);
  res.render("special");
});

// 将路由挂载至应用
app.use("/", router);
错误处理中间件

错误处理中间件和其他中间件定义类似,只是要使用 4 个参数,而不是 3 个,其签名如下: (err, req, res, next)。

app.use(function(err, req, res, next) {
  console.error(err.stack);
  res.status(500).send("Something broke!");
});

在其他 app.use() 和路由调用后,最后定义错误处理中间件,比如:

var bodyParser = require("body-parser");
var methodOverride = require("method-override");

app.use(bodyParser());
app.use(methodOverride());
app.use(function(err, req, res, next) {
  // 业务逻辑
});

在我们创建的这个app中,app.js 内的错误处理中间件是这样写的:

app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

错误中间件执行时,会调用 views 目录下的 error.jade 文件,在页面中打印详细的错误信息

内置中间件

express.static(root,[options])

express.static 是 Express 唯一内置的中间件。它基于 serve-static,负责在 Express 应用中提托管静态资源。

在 app.js 文件内也可以找到这个内置中间件

app.use(express.static(path.join(__dirname, "public")));

详细信息参阅官方文档:www.expressjs.com.cn/guide/using-middleware.html

第三方中间件

通过使用第三方中间件从而为 Express 应用增加更多功能。

安装所需功能的 node 模块,并在应用中加载,可以在应用级加载,也可以在路由级加载。

实际上,我们创建的这个应用已经引入了两个第三方的中间件,在 package.json 中就可以找到

"dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "jade": "~1.11.0",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
}

其中 body-parser 和 cookie-parser 就是两个第三方中间件

模板引擎

Express 默认的模板引擎是 jade 。现在 jade 已经更名为 pug ,没错,似李,巴扎嘿!

pug 的语法请参阅 pug 文档:

https://pug.bootcss.com/api/g...

我们在 views 目录下创建一个 orders.jade 的文件

doctype html
html
  head
    title 订单
  body
    h1 #{msg}
    p before the time begian

然后使用路由渲染它:

router.get("/",function(req,res,nest){
    res.render("orders",{msg:"订单首页"})
})

在向主页请求时,orders.jade 会被渲染为 HTML 文档

进程管理器

在编写程序时,我们发现,每次更改文件之后,都需要在命令行内停止当前的服务,然后输入 npm start ,很麻烦。我们需要一款自动刷新的工具

这里介绍一下 pm2

安装:

npm install pm2 -gd

安装完毕,运行我们的程序吧:

还记得我们之前说的 npm start 的启动路径没

> pm2 start ./bin/www --watch

[PM2] Applying action restartProcessId on app [www](ids: 0)
[PM2] [www](0) ✓
[PM2] Process successfully started
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬──────────┬──────────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem      │ user     │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼──────────┼──────────┼──────────┤
│ www      │ 0  │ fork │ 14448 │ online │ 0       │ 0s     │ 0%  │ 8.6 MB   │ pureview │ enabled  │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴──────────┴──────────┴──────────┘
 Use `pm2 show ` to get more details about an app

当显示 status 为 online 时,说明程序启动成功

现在可以打开 http://localhost:3000 就可以看到运行的程序了

从命令行中我们可以看出我们的 app 名称, id ,状态,内存和 cpu 占用,监视状态等信息

启动完成之后我们就可以根据我们程序的id进行控制了

下次启动可以输入

pm2 start 0 --watch

别忘了 --watch ,没有它,程序是无法自动刷新的

停止应用:

pm2 stop 0

重启

pm2 restart 0

显示程序信息

pm2 show 0

删除程序

pm2 delete 0

查看程序列表

pm2 list
好了,这次关于 Express 的介绍就到这里了,谢谢大家

官方文档地址:http://www.expressjs.com.cn

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89196.html

相关文章

  • 4.1 开发环境目录结构配置文件功能梳理-博客后端Api-NodeJs+Express+Mys

    摘要:从本章开始,正式学习如何使用搭建一个博客。但通常我们都会有许多环境,如本地开发环境测试环境和线上环境等,不同的环境的配置不同,我们不可能每次部署时都要去修改引用或者。会根据环境变量的不同从当前执行进程目录下的目录加载不同的配置文件。 从本章开始,正式学习如何使用 Nodejs + Express + Mysql 搭建一个博客。 开发环境 首先说下开发环境安装的核心依赖版本: Node....

    DevWiki 评论0 收藏0
  • express分析和对比

    摘要:前言目前最新版本是所以本文分析也基于这个版本。源码分析直接切入主题由于目前是一个独立的路由和中间件框架。所以分析的方向也以这两个为主。源码去年的时候有分析过现在对比分析思考下。 前言 目前express最新版本是4.16.2,所以本文分析也基于这个版本。目前从npm仓库上来看express使用量挺高的,express月下载量约为koa的40倍。所以目前研究下express还是有一定意义...

    mmy123456 评论0 收藏0
  • VueCli3.0中集成MockApi

    摘要:缺点需要增加本地的代码量,以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高,跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。 VueCli3.0中集成MockApi 一:使用场景 哎哟,好烦啊,这个需求还么结束就来下一个需求,程序员不要排期的吗? 没办法啊,资本主义的XX嘴脸啊 来吧,技术评审我俩把接口...

    刘玉平 评论0 收藏0
  • express + mock 让前后台并行开发

    摘要:下面来介绍一种让前后台并行开发。服务在端口上已启用我们需要在同级目录添加以下文件中的内容如下访问时查询成功张三访问时我们现在在浏览器中访问我们初步模拟数据基本就完成了。 在我们平时项目刚启动时,由于后台也是刚开始开发,我们前端往往在开发过程中没有数据和接口请求的,都要造一些假数据进去或者使用mock造一些数据进去,但是这样的话往往会偶合一些没用的代码进去。到时候还得删除。 下面来介绍一...

    lansheng228 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<