当Javascript发迹于浏览器市场，然后向C/C++，Java，C#等语言看齐的时候，传统语言该有的Javascript都会存在。其中Web后端开发是必不可少，Javascript的Web后端开发技术，本主题介绍一款通用的框架Express。本主题主要内容：
1. Express编程模式；
2. Express核心组件；
3. Express的模板使用；
介绍这个知识的目的是想用于如下两个场景：
1. 区块链的DApp应用开发；
2. 人工智能Web训练平台应用开发（Tensorflow已经提供Javascript开发API）；
关于Express
Express的工作原理
- Express与我们前面写的Http Server一样的工作原理，但是封装了更加丰富强大的功能：
- 创建Http Server
- 更加方便的处理请求Request与相应Response
- get请求方法
- post请求方法
- 求URL的资源（Web页面）路由
- 资源管理规范
- 强大Web页面结构模板；
- 同时提供了数据处理与解析的相关模块：
- body-parer:处理JSON，Text等数据
- cookie-parser：处理Cookie
- multer:处理表单上传数据
Express的安装
- 为了不污染系统的node_modules，采用当前项目安装。
- 首先创建一个工程；
- 然后在该工程目录下安装；
-
工程目录
- express安装指令：
-
npm install express- 没有采用全局安装，全局安装某些时候需要root权限。
-
安装过程
-
使用模式
Express开发模式主要步骤
- 创建express对象
- 定义访问url-pattern
- 使用express对象启动HTTP服务
代码示例
// 第 01 步
// 引入express类
var express = require('express');
// 创建express对象
var app = express();
// 第 02 步
app.get('/index.html', function (req, res) {
// 响应头等通信细节，都由Express框架自动处理，这里只需要直接发送数据，也可以加载html资源发送。
var html = '<!doctype html>';
html += '<html>';
html += '<head><title>Express例子</title><meta charset="uft-8"></head>';
html += '<body>';
html += 'Express框架';
html += '</body>';
html += '</html>';
res.send(html);
})
// 第 03 步
var server = app.listen(
9999,
function () {
var host = server.address().address;
var port = server.address().port;
console.log("Web服务器启动，访问地址为 http://%s:%s", host, port);
}
);
运行测试
-
启动服务器程序
node e01_express_server.js
-
使用浏览器访问
-
浏览器访问
-
Express核心组件
Express核心组件说明
- Express的核心组件的可以从帮助文档获取
-
http://www.expressjs.com.cn/4x/api.html- Application: express类
- Request类
- Response类
- Router类
-
核心组件的API文档
-
- 上面几个核心组件合作关系相对来说还是比较复杂，所以express提供了一个工具express-genertor来创建一个结构化的express项目
express-generator
安装
- 因为要使用express工具，需要全局安装，安装指令：
sudo npm install express express-generator -g --unsafe-perm-
全局安装的mac用户控制选项
创建express项目
- 创建指令（默认是jade模板）
express jade_demo-
创建基于JADE模板的项目工程
express项目结构解析
- express的项目结构目录如下：
-
工程项目结构
-
- 目录说明：（MVC）
- bin：Http服务器的js脚本，使用node可以直接执行
- public：浏览器可以直接使用的静态资源（CSS，浏览器使用的js脚本，HTML，图像等资源）
- routes：路由器对象封装（属于模式层接口）
- views：jade，pug或者ejs模板视图文件（视图层）
- app.js：Express的核心配置（可以作为控制器）
- package.json：所有项目模块的依赖配置等
- 其中配置了使用npm可以直接运行的脚本配置：
"start": "node ./bin/www"
- 其中配置了使用npm可以直接运行的脚本配置：
- 启动服务
-
node ./bin/www -
npm start
-
注意：
- 运行缺少包的错误提示，可以自行安装；
- 我运行的时候补安装了两个：cookie-parser 与Morgan模块
- 运行时，还需要安装jade或者pug（pug是jade升级版本，jade不推荐使用了）
- 环境依赖安装大招：
- 使用npm install安装相关依赖；
-
npm install也有大用途
- 运行缺少包的错误提示，可以自行安装；
-
模板
-
Express提供三种模板支持：
- jade（被pug替代，不推荐使用，下面可以看看不推荐的理由，晦涩的语法，与HTML不同的语法）
- pug（Jade的升级版本）
- ejs
- hbs（handlebars）
- hogan
-
I模板选择与视图选择
jade模板语法例子
- 这种语法规则需要重新学习，起码得熟悉下才能使用，不是可以直接上手的。
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
pug模板语法例子
- jade的升级版本
extends layout
block content
h1= title
p Welcome to #{title}
ejs模板语法例子
- 推荐使用ejs，这个与asp，jsp类似的常规语法，学习成本低。
<!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>
hbs模板语法例子
- 采用框架结构与操作区分隔的方式，灵活性不足
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
{{{body}}}
</body>
</html>
hogan模板语法例子
- 采用ejs与jade的综合方便语法
<!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>
engine与View engine的区别
-
engine用来把模板翻译成html，只支持如下五种：
- jade
- pug
- ejs
- hbs
- hogan
-
view engine是设置模板的扩展名，在代码中是不要指定扩展名的
*.jade*.dust*.ejs*.hbs*.hjs*.pug*.twig*.vash-
no view直接使用html- 使用静态的资源，不支持视图数据层。
- 4大核心组件的详细说明，因为不是主要目标，这里暂时不详细介绍，先留白。
-
# Router组件- 负责用户访问的逻辑url-pattern（前）与实际页面（后）服务渲染的映射关系；
-
# Response组件- 负责http相应，包含页面渲染的调用服务（页面渲染的实际实现再Application对象中实现）；
- 包括传递给渲染器（renderer）的数据
- 负责http相应，包含页面渲染的调用服务（页面渲染的实际实现再Application对象中实现）；
-
# Request组件- 负责用户的请求处理，包含表单数据，上传数据的处理；
-
# Application组件- 负责一些配置与公共功能的实现；
参考资源
- Express的官网参考：http://www.expressjs.com.cn/4x/api.html
- 模块环境的安装：直接使用npm start安装
- 服务器启动：直接使用npm start
- 说明：本主题是梳理技术点，没有争对具体的技术细节介绍。
网友评论