node.js 11 Web框架Express 介绍,安装,静态页面,路由

本文参考原文-http://bjbsair.com/2020-03-22/tech-info/2815/
前面介绍了node.js的文件模块,http server以及静态网站的创建。有了这些知识作为基础,我们可以了解一下node.js的Web框架了。

从Java一路过来的朋友可能觉得Web框架还是比较重量级的,比如最初的Struts到后来的Spring,中间Apache组织也有过一些其他的模板框架,总体而言无论是从使用还是学习来讲,都是需要花费较多时间的。对于大型应用而言,这个投入是值得的。如果需要在较短的时间开发小型web应用,就值得商榷了。

好在有了node.js的出现,出现了像Express这样的轻量级,灵活的web框架,中小型web应用的开发速度就有了飞速的提升。

express.js

node.js Web框架

Java的世界里,Spring的使用目前处于绝对优势。但是其他语言就不一样了,无论node.js还是python,都有多个web应用框架。尤其是node.js,web框架较多,业界甚至评出了10大node.js web框架。不过不要惊慌,万变不离其宗,很多node.js web框架都是在Express的基础上开发的。这也是为什么在我的node.js系列里一定会出现node.js。最近炙手可热的框架koa也是之前Express的一帮开发人员后来做的,后面我也会专门写一篇介绍Koa。

之所以介绍Express,一是因为很多node.js框架都是在Express基础上的,另一个原因是Express非常轻便,上手很快,快到做一个CRUD的时间可以缩短到几个小时或者更短。这让我想起若干年前,我在使用Java Blueprint EJB做一个CRUD用了大约2天时间,包括了服务器的配置,在不同的web server上调试。然而node.js不需要这些,因为http server 以及Application server都是程序员自己用node.js代码写的。从另一个层面来讲,真正的大型企业级应用,我个人不推荐node.js。小型轻量级应用,node.js是首选。

Express JS

Github上收获了47.7k个星,目前来看是下载量最多的node.js框架。我之前介绍的node.js博客系统Ghost使用的web框架就是Express。

通过Express可以提供静态网站服务,路由,中间件,以及与模板引擎配合使用。

Express JS安装运行

安装通过npm进行。

  1. 安装express "npm install express --save"
D:\Projects\nodejs\NodeDemo\forms>npm install express --save
npm WARN [email protected] No description
npm WARN [email protected] No repository field.  

+ [email protected]
added 50 packages from 37 contributors and audited 127 packages in 11.149s
found 0 vulnerabilities
  1. 在第一步完成后,express就已经在本地安装完成。但是没办法像create-react-app那样创建程序框架。好在express有一个程序生成器,express-generator。通过命令"npm install express-generator -g"即可安装。
D:\Projects\nodejs\NodeDemo\forms>npm install -g express-generator
D:\Program Files\nodejs\node_global\express -> D:\Program Files\nodejs\node_global\node_modules\express-generator\bin\express-cli.js
+ [email protected]
added 10 packages from 13 contributors in 6.346s
  1. 运行"express"命令创建项目文件

由于我们已经建好了forms项目目录,所以直接运行express就可以在目录下创建项目文件和子目录。如果项目目录没有创建号,可以运行"express <project>"。该命令会自动创建<project>目录,并在目录下创建相关子目录和文件。

D:\Projects\nodejs\NodeDemo\forms>express  

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade‘ or `--help‘ for additional options  

destination is not empty, continue? [y/N] y  

   create : public\
   create : public\javascripts\
   create : public\images\
   create : public\stylesheets\
   create : public\stylesheets\style.css
   create : routes\
   create : routes\index.js
   create : routes\\users.js
   create : views\
   create : views\error.jade
   create : views\index.jade
   create : views\layout.jade
   create : app.js
   create : package.json
   create : bin\
   create : bin\www  

   install dependencies:
     > npm install  

   run the app:
     > SET DEBUG=node10:* & npm start

注意我们在运行时,系统有提示“destination is not empty, continue? [y/N]”,直接输入"y"就好。这是因为我们在forms目录下创建,并且该目录下已有部分通过"npm -i"创建的项目文件。

  1. 运行"npm install"安装express相关依赖包
D:\Projects\nodejs\NodeDemo\forms>npm install
added 4 packages from 3 contributors, removed 2 packages, updated 16 packages and audited 141 packages in 12.091s
found 0 vulnerabilities
  1. 运行项目"npm start"
D:\Projects\nodejs\NodeDemo\forms>npm start  

> [email protected] start D:\Projects\nodejs\NodeDemo\forms
> node ./bin/www  

GET / 200 17.703 ms - 207
GET /stylesheets/style.css 200 5.473 ms - 111

此时,打开自己的浏览器,访问http://localhos:3000/即可显示express创建的项目的主页。

expressjs homepage

ExpressJS 静态页面处理

使用框架有一个好处,那就是很多底层的处理不需要自己通过代码一行一行敲,框架的价值在于可以提供很多封装好的接口。

在静态页面的处理上,我们不需要在通过fs模块读取文件,通过response返回给客户端。在express中,只需要调用response.render()方法,传入模板文件名称即可。

示例代码:<project>/routes/index.js

//引入express
var express = require(‘express‘);
var router = express.Router();  

/* 获取静态页面 */
router.get(‘/‘, function(req, res, next) {
  res.render(‘index‘, { title: ‘Express‘ });
});
//导出抹开
module.exports = router;

上面的代码从express创建的项目的代码中抽取,可以看到返回静态页面只需要引入express模块,调用路由Router,然后通过get方法,调用response.render()读取到index模板文件,将该静态模板文件返回客户端即可。注意,在这里有一个{title:‘Express‘}是模板中的参数,我们后面会介绍。

短短数行代码,没有绕人的逻辑,静态页面处理就完成了。

ExpressJS 路由

在上面的静态页面处理过程中,我们已经使用了路由Router。路由的具体使用方法如下:

  1. 在入口文件app.js中引入实际处理的路由。比如我们实际处理静态页面index的路由是<project>/routes/index.js, 那么在app.js中我们可以通过下列代码引入index 路由router
var indexRouter = require(‘./routes/index‘);
  1. 设定静态页面/模板目录
app.set(‘views‘, path.join(__dirname, ‘views‘));
......
//中间省略数行代码
......
app.use(express.static(path.join(__dirname, ‘public‘)));

这里的__dirname表示当前目录,这行代码指定了静态页面/模板的目录。

3.通过app.use指定相关路径的处理路由

app.use(‘/‘, indexRouter);

这里表示,当访问网站时,系统会使用index路由处理,即<project>/routes/index.js。

而前面我们讲到过在index.js中,系统调用了res.render()方法传入模板文件,即返回浏览器静态页面。

ExpressJS 动态页面处理

通过res.send()方法进行。

router.get(‘/‘, function(req, res, next) {
  res.send(‘respond with a resource‘);
});

示例代码可以查看<project>/routes/users.js

这就是处理路径/users的路由,将路由信息在app.js中写入即可。

var usersRouter = require(‘./routes/users‘);
app.use(‘/users‘, usersRouter);

当用户通过浏览器访问http://localhost:3000/users时,系统会调用<project>/routes/users.js中的response.get()方法返回信息给客户端。

users路由

原文地址:https://blog.51cto.com/14744108/2481516

时间: 2024-08-04 10:10:55

node.js 11 Web框架Express 介绍,安装,静态页面,路由的相关文章

基于node.js的web框架express

1.安装node.js方法: window :https://nodejs.org/en/ linux:http://www.runoob.com/nodejs/nodejs-install-setup.html Express的官网 http://www.expressjs.com.cn/ 2.安装express方法: http://www.expressjs.com.cn/starter/installing.html 3.使用express创建第一个hello world 实例 :http

node.js的web框架Express首次尝试!

环境:win7 64+node.js v0.10.33+npm 1.4.28+git Bash(声明:以下截图可能会有不一样的地方,因为我的这篇一部分是在公司完成的,一部分是在家里完成的,但命令和步骤是相同的) 1.安装Express 在控制台中输入npm install -g express(这里选择全局安装) 在安装express的命令工具,在控制台中输入npm install -g express-generator[最新express4.0+版本中将命令工具分家出来了(项目地址:http

Express 4.x Node.js的Web框架

为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3821150.html 本文使用node.js v0.10.28 + express 4.2.0 1 Express概述 Express 是一个简洁而灵活的node.js的MVC Web应用框架,提供一系列强大特性创建各种Web应用. Express 不对 node.js 已有的特性进行二次抽象,我们只是在它之上扩展了We

Express 4.x Node.js的Web框架----《转载》

本文使用node.js v0.10.28 + express 4.2.0 1 Express概述 Express 是一个简洁而灵活的node.js的MVC Web应用框架,提供一系列强大特性创建各种Web应用. Express 不对 node.js 已有的特性进行二次抽象,我们只是在它之上扩展了Web应用所需的功能. Expressd底层由Node.js的HTTP模块实现. 1.1 express 4.x 安装 express 4.x与之前的版本有了许多的变化,书里和网上的很多方法都不再适用.学

Node.js 没有Web容器

Node.js 特点 1.单线程 在Java.PHP或者.net等服务器端语言中,会为每一个客户端连接创建一个新的线程.而每个线程需要耗费大约2MB内存.也就是说,理论上,一个8GB内存的服务器可以同时连接的最大用户数为4000个左右.要让Web应用程序支持更多的用户,就需要增加服务器的数量,而Web应用程序的硬件成本当然就上升了. Node.js不为每个客户连接创建一个新的线程,而仅仅使用一个线程.当有用户连接了,就触发一个内部事件,通过非阻塞I/O.事件驱动机制,让Node.js程序宏观上也

mac下配置Node.js开发环境、express安装、创建项目

mac下配置Node.js开发环境.express安装.创建项目 一.node.js的安装 去官网下载对应的平台版本就可以了,https://nodejs.org 二.express安装 sudo npm install -g express 进行全局安装. 这时有可能会安装不成功,用下面的命令即可 sudo npm install express-generator -g 三.创建项目 终端输入 express -e 你的项目名称 -e 为使用ejs框架 express默认为jade,为了 学

安装NodeJS Web框架express

原本npm install -g express的方法已经不适用 express 3安装: sudo npm install -g [email protected] express 4 安装: sudo npm install -g express-generator 安装NodeJS Web框架express

快速使用node.js进行web开发

首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这是一个比较好的学习模式和过程.由于这本书是2012年出的,书中的一个web教学项目是开发一个微博.从2012到现在,node.js及其生态环境发生了很大改变,所以关于该书的学习如果照着书本显然是过于陈旧的.到目前为止,node.js的web开发框架已经升级到了Express4.12.1,对于Mong

基于Node.js的web聊天系统 - 真正意义上的web实时聊天系统

简单介绍一下这个实时web聊天系统的功能,首先进入系统的人填入名字和邮件地址后会获取到一个由系统创建的URL地址,你可以把这个地址发给另外一个人,另外一个人进入系统后就可以和你进行实时的聊天对话咯.主要用到了Node.js和socket.io 两个库,另外还用到了的库有express,  gravatar, ejs, 具体细节查看package.json,需要的这些库如果本地没有的话运行会报错的,需要使用npm install 安装.大家可以下载demo源代码进行运行测试. 源代码下载后解压有如