使用Node.js的express框架搭建一个简单项目并且添加了一个路由
2018-03-26 23:12
1106 查看
express简介:
Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,让你创建健壮、友好的 API 变得既快速又简单。
Express 不对 Node.js 已有的特性进行二次抽象,我们只是在它之上扩展了 Web 应用所需的基本功能。
中间件:
中间件(Middleware) 是一个函数,它可以访问请求对象(request object (req)),
响应对象(response object (
res)), 和 web 应用中处于请求-响应循环流程中的中间件,一般被命名为
next的变量。
中间件的功能包括:
执行任何代码。
修改请求和响应对象。
终结请求-响应循环。
调用堆栈中的下一个中间件。
如果当前中间件没有终结请求-响应循环,则必须调用
next()方法将控制权交给下一个中间件,否则请求就会挂起。
Express 应用可使用如下几种中间件:
应用级中间件
路由级中间件
错误处理中间件
内置中间件
第三方中间件
使用可选则挂载路径,可在应用级别或路由级别装载中间件。另外,还可以同时装在一系列中间件函数,从而在一个挂载点上创建一个子中间件栈。
应用级中间件
应用级中间件绑定到 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('route')方法将控制权交给下一个路由。 注意:
next('route')只对使用
app.VERB()或
router.VERB()加载的中间件有效。
路由级中间件
路由级中间件和应用级中间件一样,只是它绑定的对象为express.Router()。路由级使用
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 个参数,定义错误处理中间件时必须使用这4 个参数。即使不需要
next对象,也必须在签名中声明它,否则中间件会被识别为一个常规中间件,不能处理错误。
错误处理中间件和其他中间件定义类似,只是要使用 4 个参数,而不是 3 个,其签名如下:
(err, req, res, next)。
app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); });
第三方中间件:
通过node安装对应所需要的模块,require了之后通过app.use(定义的模块名)去调用这个中间件。内置中间件:
express.static是
Express 唯一内置的中间件。它基于 serve-static,负责在
Express 应用中提托管静态资源。
安装:
$ mkdir myFirstApp
$ cd myFirstApp
$ npm init //生成package.json文件,一路回车
$ npm install express --save //安装express并将其保存到依赖中
$ npm install express-generator -g //安装生成器,用于快速生成一个应用的骨架
$ express myFirstApp //生成应用
$ cd myFirstApp
$ npm install //安装所有依赖
$ npm start //启动项目,就可在
http://localhost:3000/看到这个页面,默认为index的页面
一些基础文件的意义:
app.js:启动文件,或者说入口文件
package.json:存储着工程的信息及模块依赖,当在 dependencies 中添加依赖的模块时,运行
npm install,npm 会检查当前目录下的 package.json,并自动安装所有指定的模块
node_modules:存放 package.json 中安装的模块,当你在 package.json 添加依赖的模块并安装后,存放在这个文件夹下
public:存放 image、css、js 等静态文件
routes:存放路由文件
views:存放视图文件或者说模版文件
bin:存放可执行文件
express可用的模版引擎:
jade:
在app.js里设置app.set('view engine', 'jade'); // 设置模板引擎为jade
test.jade
p hello jade
其上的 jade 模板会被解析成
<p>hello jade</p>
如果文本比较长可以使用
p | foo bar baz | rawr rawr
或者
p. foo bar baz rawr rawr
两种情况都可以处理为
<p>foo bar baz rawr rawr</p>
循环:
- var array = [1,2,3] ul - for (var i = 0; i < array.length; ++i) { li hello #{array[i]} - }
结果
<ul> <li>hello 1</li> <li>hello 2</li> <li>hello 3</li> </ul>
ejs:
app.set('viewengine',
'ejs');
// 设置模板引擎为ejs
在 routes/index.js 中通过调用
res.render()渲染模版,并将其产生的页面直接返回给客户端。它接受两个参数,第一个是模板的名称,即
views 目录下的模板文件名,扩展名 .ejs 可选。第二个参数是传递给模板的数据对象,用于模板翻译。
ejs 的标签系统非常简单,它只有以下三种标签:
<% code %>:JavaScript 代码。
<%= code %>:显示替换过 HTML 特殊字符的内容。
<%- code %>:显示原始 HTML 内容。
打开 views/index.ejs ,内容如下:
index.ejs
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> </body> </html>
当我们
res.render('index', { title: 'Express' });时,模板引擎会把 <%= title %> 替换成 Express,然后把替换后的页面显示给用户。
渲染后生成的页面代码为:
<!DOCTYPE html> <html> <head> <title>Express</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1>Express</h1> <p>Welcome to Express</p> </body> </html>
注意:我们通过
app.use(express.static(path.join(__dirname, 'public')))设置了静态文件目录为 public 文件夹,所以上面代码中的
href='/stylesheets/style.css'就相当于
href='public/stylesheets/style.css'。
循环:
The Data
supplies: ['mop', 'broom', 'duster']
The Template
<ul> <% for(var i=0; i<supplies.length; i++) {%> <li><%= supplies[i] %></li> <% } %> </ul>
The Result
<ul> <li>mop</li> <li>broom</li> <li>duster</li> </ul>
添加路由:
在routes下添加add.js文件var express = require('express'); var router = express.Router(); /* GET users listing. */ router.get('/', function(req, res) { res.render('add', { title: 'baibaia' }); //res.render为渲染视图模板。 }); module.exports = router;
在view下添加add.jade文件
extends layout block content h1= title p nihaoa
相关文章推荐
- 使用idea搭建一个简单的SSM框架:(1)使用idea创建maven项目
- 【Node.js Koa框架入门】(一)Koa 框架介绍以及环境搭建、简单使用
- 一个使用了nodejs+express的简单jsonp接口模拟脚本
- Nodejs express框架一个工程中同时使用ejs模版和jade模版
- 使用Node.js的express框架建立项目
- node使用express搭建简单web框架并实现文件上传
- 【转】MEAN:Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog
- 一个nodejs+mongodb搭建的博客,使用module: ejs, express, mongodb, underscore等,不错的入门文章
- Nodejs express框架一个工程中同时使用ejs模版和jade模版
- Express---node.js-express框架中的主要方法,使用中间件关联 多个路由
- Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog
- 简单得不得了的教程-一步一步用 NODE.JS, EXPRESS, JADE, MONGODB 搭建一个网站
- 使用node.js ,Express, 和Mongodb 简历一个简单的Restful 网页服务-part1
- 建立一个node.js服务器(使用express搭建第一个Web环境)
- node.js框架 服务器express的使用 及 route路由的使用
- 使用node.js搭建一个简单的本地服务器
- nodejs express框架一个工程中同时使用ejs模版和jade模版
- node.js之express4.x使用命令创建一个ejs项目及常用命令
- Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog
- node入门笔记:使用node.js搭建一个简单的服务