使用Node.js的express框架搭建一个简单项目并且添加了一个路由

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








猜你喜欢

转载自blog.csdn.net/baibaider/article/details/79696618