前后端分离——SPA

最新推荐文章于 2024-08-25 17:12:48 发布

pdsu_zhao

最新推荐文章于 2024-08-25 17:12:48 发布

阅读量2.8k

点赞数 3

分类专栏： Node.js 文章标签： nodejs 前后端分离 SPA JSONP AJAX

Node.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、背景

1、什么是前后端分离？

目前，大家一致认同的前后端分离的例子就是SPA(Single-pageapplication)，所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的，前端只管展现。

前端：负责View和Controller层。

后端：只负责Model层，业务处理/数据等。

2、为什么要前后端分离？

1）沟通成本

目前的开发模式，做一些同步展现的业务效率很高，但是遇到同步异步结合的页面，就会比较麻烦。

需要频率与后端交互的页面：前后端需要不断地沟通，修改代码、调试，开发方式过重。

2）前后端职责不清

在业务逻辑复杂的系统里，我们最怕维护前后端混杂在一起的代码，因为没有约束，M-V-C每一层都可能出现别的层的代码，日积月累，完全没有维护性可言。

虽然前后端分离没办法完全解决这种问题，但是可以大大缓解。因为从物理层次上保证了你不可能这么做。

现状：业务分散在 java、php中

目标：业务集中、职责分明

3）开发效率问题

目前的架构决定了前端只能依赖后端；所以我们的开发模式依然是，前端写好静态demo，后端翻译成VM模版。

现状：

> 对前端发挥的局限，前段无法参于页面的组织、页面加载的优化等。

> 后端没法摆脱对展现层的强关注，要时不时写一点js，从而无法专心于业务逻辑层的开发。

目标：

> 给前端自由。让前端自由地组织页面，控制页面渲染的逻辑，以最优化的方式展示用户体验。

> 后端。再也不用碰js了，专注于后台接口即可。

二、基础架构

1、nodeway简介

项目svn路径：

http://172.16.34.106:8043/caogensvn/node/tag/nodeway_20160720

nodeway 基于node.js设计开发，是一个轻量级的httpsever和mvc框架，主要用于实现前后端分离。

Nodeway 依赖的第三方组件：

swig 一个模板渲染引擎，语法简单，易上手

mime 文件类型读取插件，用于静态文件读取，上传、下载文件

zlib 文件压缩协议，用于http server返回的数据流压缩

formidable node的post表单、文件上传处理插件

log4js node的日志框架

基础架构图：

2、设计思路

整体设计思路参考了阿里 webx、淘宝midway。

Ø 页面驱动

让前端开发、设计人员来驱动后台开发人员，来完成页面。

在后台开发人员介入前，前端人员就可以进行页面的开发（不需要后台的支持），以保证开发进程上的并行。

Ø 约定优于配置

框架中减少了很多配置工作，只需要按照约定，即可轻松完成相应开发。

例如：

1）每一个html对应着一个url，同时又对应着一个js文件，用文件的路径来确定了唯一的url标识，无需用编码的方式去解析路由url；

2）每一个异步请求也对应着一个js类里的固定的方法，通过url就能快速定位到该js文件的指定方法。

3）不同的后缀名直接映射到不同的文件，无需专门配置

Ø 屏蔽细节

由于nodeway是专门为前端同学打造的，所以框架的开发过程中，屏蔽了诸如网络通信、同步异步、请求路由、session处理、上下文对象传递、数据加解密等细节，使前端同学在开发过程中，可专注于数据的请求、页面的展示。

Ø 灵活

nodeway在设计过程中，充分考虑了各种开发应用场景，使前端可以以简单易懂的代码来获取数据、处理业务、渲染页面，详见开发说明章节。

Ø 高效

由于node.js 先天的单线程异步IO机制，所以nodeway在性能上很优越，为前后端分离量身定制。

3、关于模板引擎

基于 node 的模板框架比较流行的有jade、EJS、swig等，如下图所示：

当下node最流行的mvc框架express 默认使用的是 Jade 引擎，然而jade是一个过度设计的产品，学习成本过高，所以不采用。

我们对模板引擎的基本要求是：

1、所见即所得，可直接拿前端切好的页面当作模板

2、语法简单，学习成本低，易上手

3、基础功能完善，如标签转义、字段过滤等

4、扩展性强，支持inclule 、macro等特性

5、速度不要太慢

基于以上各点，我最终选择 swig 作来本框架的模板引擎。

三、下载安装

1、目录结构

nodeway svn路径：

http://172.16.34.106:8043/caogensvn/node/tag/nodeway_20160720

node_modules node的第三方库

webapp 项目主路径

controll mvc中的controll层（控制层），编写应用逻辑的地方

rpc ajax请求的处理类

screen html模块页的处理类

lib 核心库

resource 静态资源库

view mvc中的view层（展示层）

error 错误信息页面

include 页面片面模板

layout 布局文件模板

macro 宏定义模板文件

screen html模板

nodeway.json 配置文件

startup.sh/bat 启动脚本

2、安装node

https://nodejs.org/download/release/v6.3.0/

去该网站上下载相应环境包安装即可，

如何验证安装成功？

通过 node –v npm –v ，如果有返回值则表示安装成功，如下图所示

3、启动项目

Ø 运行startup.sh（win平台startup.bat）即可；

Ø 带参数的启动

默认启动会加载 nodeway.json配置文件（参数项说明见注释），里面的配置参数可通过命令行参数覆盖，如：

node ./webapp/lib/main.js --model=dev--listen_port=9001 &

四、开发与使用

1、html请求

在 webapp/view/screen 下新建 xxx.html 文件（可含子路径），

此时通过浏览器 http://localhost:9000/xxx.html 就可查看到该页面

1）向 html页面传递参数

传参方式分get、post两种，在 nodeway中2种方式的处理方式相同：

在 webapp/controll/screen下新建相同文件名的js文件（子路径也要相同），

编写以下代码

module.exports = function(context,session){

var userName = context.get('userName');

var pwd =context.get('passwrod');

//此处调用接口并进行其它业务操作

};

使用 context.get('参数名') 即可获取相应的请求参数。

2）输出内容到html

在webapp/view/screen目录下，每一个html文件都是一个模板页面，使用swig模板引擎渲染，我们只需要在对应的js中输出数据，然后在html文件中用swig标签展示数据即可，如：

使用以下代码输出数据到上下文对象：

context.put('address','中国');

context.put('day',‘2016-07-20’ );

然后在对应的 html 即可输出：

地址：{{ address }}<br/>

日期：{{ day }}

最终浏览器端会展示

地址：中国<br/>

日期：2016-07-12

swig 使用手册：

官方：http://paularmstrong.github.io/swig/docs

中文翻译：http://www.cnblogs.com/elementstorm/p/3142644.html

3）url重写

对于get请求，出于网站seo的需求，/xxx/xxx.html?param1=333&param2=333

这样的请求需要转义，去掉.html后面的参数，所以nodeway实现了url重写的功能，具体如下：

原始url：/xxx/xxx.html?param1=p1&param2=p2

目标url：/xxx/xxx_p1_p2.html

可以看出，我们用下划线_拼接了参数值，做为了url的一部分，那么怎样去接收参数值？

首先 /xxx/xxx_p1_p2.html 会路由到 webapp/view/screen/xxx/xxx.html模板和 webapp/controll/screen/xxx/xxx.js处理类

下面xxx.js文件中的关键代码：

其中：

以下代码表示该类可接收 url 重写发来的请求：

this.urlRewrite= true;

if(!this.urlRewrite){

return ;

}

如果 this.urlRewrite为true，那么我们在接收参数时，就要用数组方式接收了，如：

var userId = context.get(0);

var userName =context.get(1);

2、ajax请求

在nodeway中，ajax请求分2种：.do .json，其中.do请求是在webapp/controll/rpc中自定义的，而.json请求只做了一层中转（处理一些安全校验的逻辑）直接从java api接口请求数据返回到浏览器。

1）.do请求

该类请求只有js文件，没有对应的html模板页，全部以json格式输出

例如我们要编写/user/order/detail.do，并获取返回值：{success:true, data:{}}

此时我们需要编写js文件： webapp/controll/rpc/user/order.js

由此可看出一个.do请求对应着rpc类中一个方法，detail.do对应着detail方法

在rpc中接收参数的方式与 screen相同。

唯一不同之处是需要在 rpc方法中返回一个对象，该对象会直接以json格式输出到浏览器。

2）.json请求

该类请求无需前端同学处理，会直接发送到java服务器，并输出数据到页面。

3、静态文件请求

nodeway在处理动态页面渲染的同时，也是一个类似于nginx的http server，只需将文件放在resource目录下，然后通过对应的url请求即可。

4、session缓存

对于有些数据，我们希望能做缓存，而不是每次请求时都去请求接口，例如用户的登录状态信息。Session机制提供了会话级的缓存，在用户清除cookie或者cookier失效前，cookie中的数据会一直存在。

session读写数据的方法：

//写数据

session.put(‘name’, ‘张三’);

session.put(‘age, 25);

//读数据

var name = session.get(‘name’);

var age = session.get(‘age’);

5、网络请求

由于只支持异常IO去做网络请求，所以在nodeway中，所有的网络请求、业务数据处理都是以回调函数的形式来实现的，具体如下：

注：如果是.do请求，需在最后一个 httpCallback里return一个对象。

1）单次请求

session

.httpRequest({

url:'/cgjr/account/login.json', //请求url，可使用绝对地址

method: 'post', //可为空，默认为post

dataType: 'json', //可为空，默认为json，不为json时返回字符串

param:{ //请求参数

'account':'15722222223',

'password':session.md5('123456'),

'accessFrom':'nodeway'

}

}).httpCallback(function(result){ //请求成功后以回调形式处理数据

context.put('result', result.data);

});

2）依赖请求

即请求B依赖请求A返回的结果。

场景举例：在用户登录成功后，将用户的订单信息返回到页面

session

.httpRequest({

url:'/cgjr/account/login.json',

method: 'post',

dataType: 'json',

param:{

'account':'15722222223',

'password':session.md5('123456'),

'accessFrom':'nodeway'

}

})

.httpCallback(function(result){

if(result.success){

return result; //如果请求成功，则返回数据

}else{

throw newError(result.errorMsg); //抛出异常，终止后续请求

}

})

.httpRequest({

url:'/cgjr/order/list.json',

method: 'post',

param:{

'userId':'${data.userId}', //引用了上一接口返回的数据 userId

'token':'${data.token}', //引用返回数据 token

'accessFrom': 'nodeway'

}

})

.httpCallback(function(result){

context.put('orderList',result.data); //将最终结果返回到页面

});

以上代码中，第一个接口返回的数据是：

{"data":{"mobileNumber":15722222223,"personCard":"4205021*****86538","shortUrl":"bcAJkJn","status":2,"token":"9514f4e3092b47b29ef0831d6bd6f569","userId":191800180277,"userRealName":"张三丰"},"success":true}

3）并发请求

指在一个业务场景中，需要从多个http请求中获取数据。

场景举例：个人中心首页，需要同时展示用户基本信息和用户的借款信息

session

.httpRequest({

url:'/cgjr/user/get_info.json',

param:{

'user_id': session.get('userId'),

'token': session.get('token'),

'accessFrom': 'nodeway'

}

})

.httpRequest({

url: '/cgjr/order/get_order_list.json',

param:{

'user_id': session.get('userId'),

'token': session.get('token'),

'accessFrom': 'nodeway'

}

})

.httpCallback(function(result){

var data1 = result[0]; //此处需用数组来获取返回数据

vardata2 = result[1];

…….

})

[ 从代码结构上来看，只是比依赖请求少了一个 httpCallack，但本质上有很大区别 ]

在该模式下，若干个http请求会并发执行，直到全部获取到数据后，才会执行 httpCallback方法。此时返回的是数组对象，数组的长度等于http请求的数量，数组内结果的顺序与httpRequest请求的顺序相同

6、文件上传下载

1）文件上传

直接上代码，

前端html：

后端js:

控制台输出：

{"size":6164,"path":"/Users/xiaobowang/upload_d04ff55a025783aa9dd1ffb8c7c12820","name":"绘图.png","type":"image/png","mtime":"2016-07-20T11:23:03.234Z"}

从输出的json可以看出nodeway上传文件的处理很简洁，屏蔽了复杂的文件流处理细节。

nodeway文件上传是先将post上传的文件存储到本地路径，然后再以操作本地文件的方式做后续处理。