您的位置:首页 > Web前端 > Node.js

使用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('view
engine',
'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





内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: