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(true){ %>
<p>这是渲染内容</p>
<%}%>
Node.js框架 —— Express的更多相关文章
- node.js框架express的安装
node.js框架express的安装 首先假定你已经安装了 Node.js,接下来为你的应用创建一个目录,然后进入此目录并将其作为当前工作目录. $ mkdir myapp $ cd myapp 通 ...
- 【前端node.js框架】node.js框架express
server.js /* 以下代码等下会有详细的解释 */ var express = require('express'); // 用来引入express模块 var app = express() ...
- node.js 框架express有关于router的运用
1.express 路由入门 const express = require('express'); let server = express(); server.listen(8087); //用户 ...
- node.js 框架express关于报错页面的配置
1.声明报错的方法,以及相对应的页面 //把数据库的调用方法配置到请求中 server.use((req, res, next) => { //把数据库存入req中 req.db = db; / ...
- node.js和express.js安装和使用步骤 [windows]
PS: NODEJS:https://nodejs.org NPM:https://www.npmjs.com/ 一.node.js安装与配置 到https://nodejs.org/en/downl ...
- Node.js基于Express框架搭建一个简单的注册登录Web功能
这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...
- node.js使用express框架进行文件上传
关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...
- node.js之express框架
之前学习过node.js接触过express框架,最近为了编写一个mock server正好用到了express.下面正好就跟大家介绍一下关于express.今天的内容主要围绕这么几个方面? expr ...
- Node.js 框架对比之 Express VS Koa
背景 上图是一个典型的采用 Node.js 开发 web 应用的前后端结构,下面介绍一下 Node 服务层在其中的作用以及使用 Node.js 的一些优劣. Node 服务层作用: 请求代理 传统做法 ...
随机推荐
- 4.1 State Snapshot Transfer
摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...
- NET控件Designer架构设计
总体结构 Designer总体上由三大部分组成:View,ViewModel和Model,这个结构借鉴了流行的MVVM模式.这三部分的职责分工是: View 负责把ViewModel以图形的方式展现出 ...
- Head First设计模式之生成器模式
一.定义 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示.建造者模式是一种对象创建型模式. 二.结构 角色 Builder(抽象建造者):它为创建一个产品Product对象的 ...
- docker for windows & dotnet core app
Step 1: 安装docker for windows Step 2: 从github 上 clone 源代码:https://github.com/dotnet/dotnet-docker-sam ...
- Fiddler工具的界面说明
1.Fiddler界面说明 2.session的模块说明 包含部分如下: 注:标蓝色区域的内容为平时较常用的部分 3.session不同图标和不同颜色的含义 默认颜色的含义如下: 部分图标的含义如下: ...
- Neo4j学习笔记(2)——数据索引
和关系数据库一样,Neo4j同样可以创建索引来加快查找速度. 在关系数据库中创建索引需要索引字段和指向记录的指针,通过索引可以快速查找到表中的行. 在Neo4j中,其索引是通过属性来创建,便于快速查找 ...
- vue2.0 页面A跳转到页面B，B页面停留在A页面的滚动位置的解决方法
如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫 ...
- php 抽象类abstract
程序中,有些类的作用只是用来继承,无须实例化: 为了满足类的这种需求,php提供了抽象类的概念 ,关键词abstract: 抽象类原则: 抽象类不能被实例化 有抽象方法的类一定是抽象类:类必须要abs ...
- webstorm工具的字体、主题等相关设置
Ctrl + /:单行注释Ctrl + Shift + /:块注释Ctrl + Alt + ↓:向下复制当前行Alt + ↑:向上移动Alt + ↓:向下移动Ctrl + D:删除当前行Ctrl + ...
- yield next和yield* next的区别
yield next和yield* next之间到底有什么区别?为什么需要yield* next?经常会有人提出这个问题.虽然我们在代码中会尽量避免使用yield* next以减少新用户的疑惑,但还是 ...