当前位置: 首页 > news >正文

Node.js 蚕食计划(三)—— Express 启航

如果看过上一篇《Node.js 蚕食计划》,就会发现手动搭建一个 web 服务器还是比较繁琐

而 express 就是一个可以极大地提高开发效率的 web 开发框架

 

一、创建项目

在 express 4.0 之前,我们使用 npm install -g express 来全局安装 express

但是 4.0 之后,express 的命令行工具被单独分离出来,叫做 express-generator

npm install -g express-generator

// 如果了解过 vue,express-generator 和 express 的关系就像 vue-cli 和 vue 的关系

然后可以通过 express --version 命令来验证是否安装成功

 

然后在需要创建项目的目录下,直接使用 express 命令创建项目

express Node-Project

上面的 Node-Project 是自定义的项目名称

命令执行完成后,会在当前目录生成一个 Node-Project 项目文件夹,目录如下:

进入项目目录(cd Node-Project),安装依赖

npm install

然后通过 npm start 命令启动项目

npm start

开发过程中建议在 debug 环境中运行,所以通常使用这个命令启动项目:

set DEBUG=Node-Project & npm start

然后在浏览器中打开 http://localhost:3000/ 就能打开项目

如果 3000 端口被占用,可以在 bin / www 文件中修改端口

 

 

二、认识路由

在生成的项目文件中,有一个 routes 文件夹,存放着 express 框架预置的基本路由

路由一般由一个 URI、HTTP 请求(GET、POST)和若干个句柄组成

基本句柄的结构通常都是 app.METHOD(path, callback)

其中 METHOD 除了 get、post 等 http 方法之外,express 还提供了一个 all() 用来处理所有请求

express.Router 对基本路由做了封装,实际项目中使用的是 router.METHOD()

 

上图中的 users.js 是一个最简单的路由

 

然后在 app.js 中引入模块

并配置路由结点

然后在浏览器中打开 http://localhost:3456/users 就能查看到响应内容

 

如果希望路由对外输出一个 html 页面,只需要使用 res.sendfile(url)

假如已经在 views 文件夹下准备了一个模板 test.html,然后在 users.js 中追加一个句柄

router.get('/test', function(req, res) {
  res.sendfile("./views/test.html")
});

然后打开 http://localhost:3456/users/test 就能查看到 test.html

// 实际开发中更多的是使用 jade 或 ejs 来返回一个页面

 

 

三、托管静态文件

如果刚才的 test.html 文件中,关联了 views 文件夹下的外部 css 或者 js 文件,就会发现这些文件都没有被加载

只要将 css 文件放到 public 文件夹下,并将文件路径改为绝对路径

这样外部文件就能正常加载了

甚至可以通过 http://localhost:3456/css/test.css 查看到对应的 css 文件

 

这是因为在 app.js 中,已经通过 express.static 中间件将 public 文件夹设置为静态资源的根目录

静态资源目录可以有多个,只需要多次调用 express.static 就行

app.use(express.static('public'));
app.use(express.static('wise'));
app.use(express.static('wrong'));

访问静态资源文件时,express.static 中间件会根据目录添加的顺序查找文件

 express 允许给这些文件夹指定一个虚拟挂载点

app.use('/static', express.static('public'));

这样就能通过带有 “/static” 前缀的地址来访问 public 目录下面的文件

比如之前的 test.css 文件的地址就变成了 http://localhost:3456/static/css/test.css

 

如果有多个静态资源目录,还可以把它们都指定在同一个挂载点下

这种方式必须要保证每个文件的路径不会冲突

如果多个文件都是同一个路径,就只有第一个文件能被正常访问

 

 

四、中间件

上面有提到 express.static 是一个中间件

在软件领域中,中间件在应用与应用之间起到连接的作用

比如一瓶可乐的生产流水线是这样的: 水 > 净化 > 调配 > 装瓶 > 质检 > 可乐

其中除了起点 “水” 和终点 “可乐” 都可以看做中间件

在 express 中,中间件就是处理 http 请求的各种函数,这些函数通过 next() 方法连接,形成了一个流水线

 

中间件一般用 app.use() 注册,针对不同的请求,还可以使用 all 或者 HTTP 动词作为方法名,如 get、post

中间件可以接收三个参数,依次为 request(HTTP请求)、response(HTTP响应),next 回调函数(下一个中间件)

每个中间件都可以对 request 进行加工,并使用 next() 将 request 对象传给下一个中间件

如果向 next() 传入参数(字符串 ‘route’ 除外),则代表抛出一个错误,参数为错误文本

而后的中间件将不再执行,直到发现一个错误处理函数为止

 

在注册中间件的时候,还可以传入一个 url,让中间件的调用具有针对性

比如这个例子,只会对路径前缀为 “/home” 的请求调用中间件

 

稍微改动一下...

眼熟吗?没错,这货成了一个路由

 

这时候再来看这段代码,是不是理解得更清晰了呢?

 

Express 其实就是由路由和中间件构成的,从本质上来说,一个 Express 应用就是在调用各种中间件

 4.0 版本之后,除了 express.static 之外的中间件都被独立出来作为模块安装使用

更多的中间件将在后续文章中介绍

转载于:https://www.cnblogs.com/wisewrong/p/7366359.html

相关文章:

  • Kepler452b被发现 那么房价缩水究竟有没有指望?
  • 视频|每日CeBIT总结:中国元素充斥 多元化工业展也Fashion
  • Java学生管理系统
  • js和JQuery区别
  • Puppet apply命令参数介绍(五)
  • Spring中Bean的depends-on属性
  • esxi嵌套华为Fusioncomputer安装VRM几个关键步骤。
  • SQL Server 中的6种事务隔离级别简单总结
  • 《区块链原理、设计与应用》一3.1 应用场景概览
  • json数据导出excel
  • spring cloud 学习(9) - turbine stream无法在eureka注册的解决办法
  • 什么是Ubuntu的云计算?
  • 高危预警!移动设备安全面临的5大新型威胁
  • IOCP vs EPOLL
  • 体验Windows Mobile 6.5 (模拟器)
  • ES6指北【2】—— 箭头函数
  • 《Javascript高级程序设计 (第三版)》第五章 引用类型
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • Java超时控制的实现
  • JAVA之继承和多态
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • MySQL数据库运维之数据恢复
  • node-glob通配符
  • PyCharm搭建GO开发环境(GO语言学习第1课)
  • 翻译--Thinking in React
  • 和 || 运算
  • 基于 Babel 的 npm 包最小化设置
  • 检测对象或数组
  • 解析带emoji和链接的聊天系统消息
  • 警报:线上事故之CountDownLatch的威力
  • 免费小说阅读小程序
  • 时间复杂度与空间复杂度分析
  • 微信开放平台全网发布【失败】的几点排查方法
  • 我建了一个叫Hello World的项目
  • 宾利慕尚创始人典藏版国内首秀,2025年前实现全系车型电动化 | 2019上海车展 ...
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • ​如何在iOS手机上查看应用日志
  • # 睡眠3秒_床上这样睡觉的人,睡眠质量多半不好
  • #前后端分离# 头条发布系统
  • (done) 两个矩阵 “相似” 是什么意思?
  • (LeetCode C++)盛最多水的容器
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (六)c52学习之旅-独立按键
  • (一)为什么要选择C++
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转) Face-Resources
  • .FileZilla的使用和主动模式被动模式介绍
  • .net mvc 获取url中controller和action
  • .net6解除文件上传限制。Multipart body length limit 16384 exceeded
  • .NET委托:一个关于C#的睡前故事
  • @column注解_MyBatis注解开发 -MyBatis(15)
  • @selector(..)警告提示
  • [ C++ ] STL priority_queue(优先级队列)使用及其底层模拟实现,容器适配器,deque(双端队列)原理了解
  • [ C++ ] 继承
  • [ Linux 长征路第五篇 ] make/Makefile Linux项目自动化创建工具