Node.js框架 —— Express

一、安装express

1.需先安装express-generator

npm install -g express-generator

2.安装express

npm install -g express

3.验证是否安装成功

express --version

二、新建项目

1.创建ejs项目模板

express --view=ejs Express

2.安装依赖

cd  Express
npm install

三、启动项目

查看package.json里的 scripts命令，例如：

"scripts": {
"start": "node ./bin/www"
},

执行命令

node ./bin/www

打开 http://localhost:3000/

四、目录文件详解

bin/www 配置服务器监听端口

router/index.js 配置路由控制文件可在里面配置多个路由

views/index.ejs 模板文件，即router/index.js 中调用的模板 <%= title %> 表示引用router/index.js 中的变量，如 <%= name %>

app.js 配置express对象

关于experss的路由配置

在 router/index.js 里配置各个路由

除了固定的路由路径外，express还支持配置动态的路由，即路由后面可以带参数，使用 req.params.参数名获得参数值

路由规则同样支持js正则表达式，例如 router.get(' \/user\/正则' ，callback)，这样的好处在于可以匹配更加复杂的路由。访问参数通过req.params[0] 进行访问

例子：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/test', function(req, res, next) {     // 配置固定的路由
  res.send('test路径已经存在');
});


router.get('/user/:username', function(req, res, next) {    // 配置带参数的动态路由
  res.send('user：'+req.params.username);                     // req.params.参数名
});

module.exports = router;

REST风格的路由规则

Experss支持REST风格的请求方式，REST意思是表征状态转移，它是一种基于HTTP协议的网络应用的接口风格，充分利用HTTP的方法实现了统一风格的接口和服务

HTTP协议定义了以下8个标准请求方法：

GET ：请求获取指定的资源获取

POST : 向指定资源提交数据提交

DELETE : 请求服务器删除指定资源删除

PUT : 请求服务器存储一个资源存储

HEAD : 请求指定资源的响应头

TRACE : 回显服务器接到的请求，主要用于用户测试和诊断

CONNECT ： HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器

OPTIONS : 返回服务器支持的HTTP请求方法

这8个方法都是安全的，所谓的安全指的是连续访问多次所获得的结果不受访问者的影响，而幂等指的是重复请求多次与一次请求的效果是一样的，比如获取。更新和删除操作是幂等，与新增不同

EXperss对每种HTTP请求方法都设计了不同的路由绑定函数，例如该路径绑定了GET请求，向这个路劲发起其他的请求方式不会被响应

router.all (path , callback，next) 方法可以响应所有的请求方式

例如：

router.get(path , callback) 

router.post(path , callback)

router.put(path , callback)

router.delete(path , callback)

路由的控制权转移

Experss 支持同一路径绑定多个函数，使用next() 可以让改请求执行下一个函数

例子：

router.all('/test',function(req,res,next){
  console.log('执行 all 请求方法的函数')
  next();       // 两个函数执行方法冲突，默认执行第一个。使用next()  则跳过该函数，执行下一个回调函数，即get
})

router.get('/test',function(req,res,next){
  res.end('执行 get 请求方法的函数')
})

关于Express的模板引擎

express 的模板引擎有 ejs 和 jade 两种，它们的书写语法不同

ejs 模板的标签：

<% code %> JavaScript代码

<%= code %> 显示替换过的HTML特殊字符内容解析文本

<%- code %> 显示原始HTML内容，一般用于配置公共模板

关于模板引擎中的公共模板 layout.ejs

Express 支持定义公共模板，在views文件夹中创建 layout.ejs 文件注意使用 <%- body %>

jade公共模板的实现：在我们请求的目的页面中的第一句写上 extends(继承) name(模板布局名称)

ajs公共模板的实现：引入express-partials 实现定义 layout.ejs

npm install express-partials

app.js里面引用express-partials: 
1 添加引用var partials = require(‘express-partials’); 
2 在app.set(‘view engine’, ‘ejs’);下面添加app.use(partials());

ajs模板引擎中使用layout.ejs例子：

路由：

router.get('/', function(req, res, next) {
  res.render('test', { title: 'Express' });
});

引用模板：

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<p>这是测试模板引擎</p>

自动调用公共模板 layout.js

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>这是公共模板头部</h1>
    <%- body %>
    <h1>这是公共模板底部</h1>
  </body>
</html>

如果不愿意使用默认的layout.ejs，可自行指定在定义参数里加上 layout : '模板名字' 使用 layout: false 则不使用公共模板

router.get('/', function(req, res, next) {
  res.render('test', { title: 'Express' , layout:'layout2'});
});

关于模板引擎中的局部模板（视图片段） <%- partial %>

在某些情况下需要循环遍历输出数据，这时候就要用到局部模板，在视图中使用 partial 实现

在父模板中使用 partial('commentName', list) 遍历输出数据，传入两个参数，第一个为子模板的名字（也是遍历到的每个变量名），第二个为需要遍历的数据

定义子模板，输出遍历到的数据，使用的变量名称为父模板中引用的子模板名字

例子：

路由：

router.get("/",function(req,res){                                                  
  res.render("index",{title:"片段视图",list:['第一','第二','第三']});                                
});

父模板：

<!-- 这里的 comment 是子模板的名字，list 是需要遍历输出的变量（数组或对象） -->
<ul><%- partial("comment", list)%></ul>

子模板：

<!-- comment 表示每个遍历到的数据，不过名称必须和父模板中的 partial方法第一个参数相同 -->
<li><%= comment %></li>

如果遍历输出的数据需要判断是第一个或者最后一个，可以使用 firstCollection 或者 lastCollection

判断第一个输出的数据加action类的例子：

<li class="<%if(firstInCollection){%> action <%}%>"> 
 <%=comment%>
</li>

如果数据是由后台返回的数组，则可以使用下面的方式遍历输出：

<% arr.forEach(function(post,index){
    if(index % 3==0){ %>
        <div class="row">
    <%}%>
    <div class="span4">
        <h2><a href="/u/<%=post.user%>"><%=post.user %></a>说</h2>
        <p><small><%=post.time%></small></p>
        <p><%=post.post%></p>
    </div>
     <% if(index % 3 == 2){%>
        </div> <!--结束行-->
     <%}%>
<%})%>
    <% if (posts.length % 3 !=0){ %>
      </div>  <!--结束行-->
    <%}%>

视图助手 locals 在app.js中声明 (可以理解为定义全局的函数或变量，每个视图都可以调用)

视图助手分为静态视图助手和动态视图助手，两者的差别在于，静态视图助手可以是任何类型的对象，包括可接收任意类型参数的函数。但访问到的对象必须是和用户请求无关的。

而动态视图助手只能是一个函数，并且不能接收任何参数，但是可以访问 req 和 res 两个对象

静态视图助手：

app.locals.sayHello = function(data){
  return data+'Wenlcome to locals'
}

可以在任意一个视图中调用：

<li class="<%if(firstInCollection){%> action <%}%>"> 
 <%=sayHello(comment)%>
</li>

动态视图助手：必须声明在 app.use('/', index)之前使用 next()

// 动态视图助手
app.use(function(req, res, next){
  res.locals.Welcome = function(){
    return req
  }
  next()
})

app.use('/', index);
app.use('/users', users);

关于Express的条件渲染 if判断

格式：

<% if (条件){ %>

渲染内容

<%}%>

例子：

    if(true){ %>
        <p>这是渲染内容</p>
    <%}%>

posted @ 2017-09-30 09:39 嘉爷阅读(300) 评论(0) 编辑收藏举报

刷新页面返回顶部

嘉爷