博客分类：
前后端分离项目实践
对nodejs有了些准备，希望多了解些后端知识，恰逢公司项目调整，分析了前后端分离的优劣，也做了一个完整的demo演示，同事都觉得靠谱，用了两个版本的时间，将公司主站项目用nodejs实现了前后端分离，在此和大家分享下，以求共同进步。案例参见
二、为何做分离
1、开发体系：架构体系决定了后端重于前端，前端做好静态页后，要转为php或vm等，开发要用eclipce等后端环境工作，一大堆让前端迷糊的配置，一旦java人员更新了错误的文件，会导致所有人的环境启动不了，束手无策，只能等待救援。
2、难维护：页面总是会有php\jsp等非前端代码，相互干扰、无法优化，时间越久问题越突出。
3、前后端职责不清晰。
有人会问，分离为什么不全部走ajax，页面就不需要任何服务端语言了。但实际场景并非如此，首先有些数据总是要生成页面时就已经同步获取的，且全异步对SEO不利、纯html页面没有include功能等。
网上还有其它的理解，大致相同就不列举了。
三、如何做分离
1、产品设计确定后，前后端人员共同制定开发接口，为方便接口的制定、显示、测试，使用nodejs+mongodb开发了接口平台。参见
功能：制定接口时就直接在interface平台上新增录入ActionName、description、 method、 param 及 默认值 等并保存到mongodb，当后台开发完成后，直接用在该页面做接口测试，成功后方可交付，避免联调过程中的接口反复。（原本想用 来测试同域名下的项目，但因cookie在不同二级域名下无法共享的问题，暂用了二级目录，不过已有方案，后续优化）
2、从前端角度考虑系统架构图如下：
访问入口 NGINX 代理静态资源到 STATIC 服务器，其它请求则到 NODEJS。
页面请求NODEJS直接render，数据相关NODEJS则做预处理，再发到后台
前端据已定义的接口，通过nodejs+mysql模拟后台完成数据存取，此处会增加些工作量，但只是为了走通业务流程，模拟后台数据表定义及逻辑无需严谨，只要能正常存取即可，如注册用户save to DB，登录验证read from DB，所以提供模式化的工具、写法后，新增表、接口，并不会多耗时间，nginx – nodejs – 模拟后台，即可按实际使用完成所有前端工作。
QA单独测前端时，修改hostIP指向到测试工具。
Java开发完成后接口，在 Interface平台 上验证所有接口，确认无误。QA也可以通过Interface测试Java接口
nodejs修改config里的hostIP配置到java，理想情况下，修改此步配置即完成联调
每个模块的简略部署如下：
Nginx.conf：
Location ~ \.(jpg|png|css|js ){ //静态资源代理
Root /root/static/;
Location \{ //其它接口转发
STATIC 结构如下：使用require.js做模块化加载工具，有朋友问为什么不用seajs，还问这两个优劣，其实前两年的项目用的都是seajs，此处想试试amd vs cmd，所以就用了require.js ，以目前的使用来看，相互可替代
Core：[核心模块，主要是引入第三方必用、稳定模块]
Base.js [自定义通用函数]
Require.js
Bootstrap.js
Backgone.js
Socket.io.js
Public: [业务级公共模块]
Validate.js [表单验证模块]
All.js [所有页面需要执行的业务js，如登录验证]
Zhdoc.js [国际化文本定义]
Reset.css [样式初始化]
common.css
Widget: [自定义组件]
Dialog: [弹框组件]
Dislog.css
Imgs: [弹框组件图片]
Calendar:[日志组件]
Calendar.js
Calendar.css
Imgs: [日历组件图片]
Module: [业务模块]
Issue: [静态模块]
Index: [首页]
news: [新闻]
User: [用户模块]
Register: [注册]
Register.js
Register.css
findPwd: [找回密码]
findPwd.js
findPwd.css
Nodejs结构主要如下： express 框架
Package.json
Node_modules:
Index.js – 路由入口，接收所有请求做转发，并做权限过滤、404等
Issue.js – 接收来自index.js的静态请求
User.js - 接收来自index.js的用户请求，页面请求render，数据请求转发
Views: [使用ejs框架，接收来自 routes 里的页面请求]
Common: [公用模块页]
Header.ejs
Footer.ejs
Issue: [静态模块页]
User: [用户模块页]
Register.ejs
findPwd.ejs
Controls: [业务逻辑模块]
Config.js –公共配置模块，如hostIP、basePath等，切换环境修改此配置
User.js - 接收来自 route/user.js的数据请求，向外转发做逻辑准备
Tool.js - 封装常用函数如http.request/mailer/md5等
Redis.js - redis封装，对于单体封装内容比较多的模块，单独成立一个文件
Log: [日志，采用Log4js，日志是必须的，页面开发者常欠缺日志理念]
Assets: 结构、使用同 STATIC，不配置nginx时，调用此处资源，意义不大
Nodejs + MySql: [模拟后台模块，相对上面的模块，主要多了DB]
Db: [数据处理模块]
Mysql.js – 封装模式化数据存储接口，提供最便捷的新增表、接口的方法
按此结构完成前端所有功能，因目前项目较小，部分模块还有细分空间。
四、分离结果如何
1、开发效率更高，在联调之前，互不干扰，前端开发完成后就是实际可用的代码，不需要再转换成后台编译环境，永远不会被java / php 启动不成功所困扰。
2、部分需要前后端共同开发的功能，如文件上传，通常需要页面端与接收端都进行相关的开发配置，之前较难定位是谁配置错误，现在全部由前端完成，开发、测试都容易定位，上传成功后，只要向java发送文件保存的路径即可。
3、完全分清了前后端开发人员的职责，任一方开发完成后都可以提测，实现同步开发、测试。
4、联调非常简单，若双方接口一致，正常情况下只要修改要接口请求IP即可完成切换。
5、问题责任清晰，联调、测试、预发、上线，每个过程都难免会产生问题，前端、后端、运维三方责任边界清晰，日志中记录nodejs的请求发出，nginx请求接收与转发、java端请求接收与返回，三处任何一处断点，都能马上定位是哪方的问题。
6、前端人员有更高的权限，页面端的展示几乎全由前端实现，但之前一些配置却受制于后台，比如常见的模板功能，纯html页面虽可以通过angularjs实现模板，但实际效果却并不理想，网速差时经常会出现include部分显示后置、甚至加载不成功的情况，nodejs的ejs框架可以很好的实现这个功能。
另外，据浏览器加载不同的css以便实现浏览器兼容，之前处理通常是页面加载后，通过js判断浏览器类型，再去加载不同的css文件，影响渲染效率，并且js判断浏览器类型本身就存在兼容问题，用nodejs则可以在render前就完成该判断，直接用相应的浏览器样式做渲染
7、代码复用，验证模块，页面端与nodejs端可以直接复用
五、注意事项：
1、前端开发人员不仅需要有扎实的nodejs知识，还要有一定的服务端、运维知识，对http通信有更深层次的理解，nginx、redis、socket、buffer等技术也要掌握，多多益善。
2、开发之初对功能充分、宽裕的评估，使用初期不要用nodejs过多开发新功能。初次使用，难免会遇到很多意想不同的问题，前端开发人员本身对服务端知识有限，java人员又对nodejs语法不熟，若处理不好会导致项目延期。我原本认为redis同memcached一样就是connect + set + get，但实际开发时遇到一些考虑不周而产生的怪异问题，延长该部分开发时间，最终导致项目delay。
3、前端开发人员可尝试用linux系统开发，第一版用win7开发时，npm部分模块的安装会不顺利，如node-canvas在win7上安装需要6步，而原本在32上已配置成功了，在64位上的系统上又不成功，后来该接口暂由java实现。实际上即使配置成功了，该模块在发布服务器的linux系统上也无法使用，需要重新安装。第二版开发时，我使用了ubuntu，虽然有一定的学习成本，但对后期的效率提升十分有益，多学习一种系统操作，和运维调试时也更加主动。不过ubuntu下没有找到做PSD切图的工具，所以安装双系统更合适切换使用。
六、总结：
目前用分离方式做了两版项目，开发效率提升、协作沟通便捷上有明显优势，作为前端也学习了很多新知识、扩大影响范围，是共赢的。目前使用还较初级，要继续学习、探索。在此贴出以便和同仁共进步之。
浏览 11206
逐行分析JS源代码 写道jinyanhui2008 写道大概看了一下，这种设计的话，就编程前端工程师编写前端代码+服务端接口调用。服务端工程师只需要关注接口开发即可，其实这种设计的话，用php、java等等都可以实现，甚至直接在客户端组装页面都可以，但是就同你前面所说的不利于seo，从设计角度上来说这个是一个比较不错的开发模式，不过对公司来说技术曲线有点高，可以考虑将技术语言统一起来，这样可以方便开发人员快速的进行角色转换。探讨下：分离主要优势，还是在1、开发过程互不干扰，提高效率2、职责清晰，除了接口，没有耦合。如上面写的上传附件这个功能。php/java，完全可以实现拼页面功能，但不清楚你指的技术，是不是还是要用到vm这样的模板，前端完成的页面，分割header/footer等公用布局及定义全局量时，还是需要转到java环境，开发过程中涉及到双方的修改，也会影响效率。技术门槛存在的，毕竟除了专业大型互联网公司里成熟的前端团队外，很少有能全局驾驭这些技术的前端。目前我们团队能用这个架构也是因为项目处于初级阶段，有个渐深的过程，技术上刚好也有些积累。两版开发后的结果，是相当有益的。前两天在infoq上看了一个袍子社区的技术介绍，他们是基于js的可以参考一下.OK，谢谢，你可以加我下，平时一起讨论下
jinyanhui2008 写道大概看了一下，这种设计的话，就编程前端工程师编写前端代码+服务端接口调用。服务端工程师只需要关注接口开发即可，其实这种设计的话，用php、java等等都可以实现，甚至直接在客户端组装页面都可以，但是就同你前面所说的不利于seo，从设计角度上来说这个是一个比较不错的开发模式，不过对公司来说技术曲线有点高，可以考虑将技术语言统一起来，这样可以方便开发人员快速的进行角色转换。探讨下：分离主要优势，还是在1、开发过程互不干扰，提高效率2、职责清晰，除了接口，没有耦合。如上面写的上传附件这个功能。php/java，完全可以实现拼页面功能，但不清楚你指的技术，是不是还是要用到vm这样的模板，前端完成的页面，分割header/footer等公用布局及定义全局量时，还是需要转到java环境，开发过程中涉及到双方的修改，也会影响效率。技术门槛存在的，毕竟除了专业大型互联网公司里成熟的前端团队外，很少有能全局驾驭这些技术的前端。目前我们团队能用这个架构也是因为项目处于初级阶段，有个渐深的过程，技术上刚好也有些积累。两版开发后的结果，是相当有益的。前两天在infoq上看了一个袍子社区的技术介绍，他们是基于js的可以参考一下.
大概看了一下，这种设计的话，就编程前端工程师编写前端代码+服务端接口调用。服务端工程师只需要关注接口开发即可，其实这种设计的话，用php、java等等都可以实现，甚至直接在客户端组装页面都可以，但是就同你前面所说的不利于seo，从设计角度上来说这个是一个比较不错的开发模式，不过对公司来说技术曲线有点高，可以考虑将技术语言统一起来，这样可以方便开发人员快速的进行角色转换。探讨下：分离主要优势，还是在1、开发过程互不干扰，提高效率2、职责清晰，除了接口，没有耦合。如上面写的上传附件这个功能。php/java，完全可以实现拼页面功能，但不清楚你指的技术，是不是还是要用到vm这样的模板，前端完成的页面，分割header/footer等公用布局及定义全局量时，还是需要转到java环境，开发过程中涉及到双方的修改，也会影响效率。技术门槛存在的，毕竟除了专业大型互联网公司里成熟的前端团队外，很少有能全局驾驭这些技术的前端。目前我们团队能用这个架构也是因为项目处于初级阶段，有个渐深的过程，技术上刚好也有些积累。两版开发后的结果，是相当有益的。
逐行分析JS源代码
浏览: 52600 次
来自: 杭州
C:\Users\Administrator\Desktop\ ...
曾经的王1996 写道wuqingdong 写道Express ...
wuqingdong 写道Express server lis ...
Express server listening on por ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'nodejs里面调用一个java程序的函数,并返回结果
比如高强度的计算 需要调用java来运算
Copyright (C)
All Rights Reserved | 京ICP备 号-2其他回答(4)
如果要向另外的页面传参数同时跳转的完直接用&a href="default.aspx?id=1"/&这样不就可以么？或者使用JS，
location="default.aspx?id=1"也可以。
为什么要用jQuery?
或者还是有什么特殊的需求？
你要的应该是jQuery.ajax()吧。
$(function(){});应该是不行的。
试试下面的
$.ajax(function(){type:"POST",dataType:"json",url:"default.aspx",//请求页面data:"{id=1}",complete:function(){location.href ="default.aspx"}//跳转页面})
园豆：5587
直接用form啦，
为什么用Jquery跳转？..window.location.href=""不是更方便吗。
jquery 就是javascript编写的一个框架。用jquery就是为了方便简单的应用已经封装好的javascript功能。
跳转：直接window.location.href就可以了。传参window.location.href='测试界面.aspx?id=12'
园豆：11116
JQuery也可以直接这样写：location.href="login.aspx";
不都是用JS实现的吗？
园豆：40785
题主找到什么方法解决没
&&&您需要以后才能回答，未注册用户请先。博客分类：
本文章已收录于：
环境：windows7
下载地址：http://nodejs.org/download/
官网下载一个安装文件点击下一步安装完成即可.
验证安装是否成功：node -v
基本HTTP服务器
c:/http.js
//http是内置模块、直接引入
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8080);
console.log('Server running on port 8080.');
http://localhost:8080
小结 该例中所创建的并不是一个功能全面的HTTP服务器，它并不能处理任何HTML文件、图片。事实上，无论你http://localhost:8080/后添什么，请求后，它都将返回“Hello World”
express框架【处理GET和POST请求】
Express是对Node.js的一个高性能的封装，是Node.js上最流行的高性能Web开发框架。
如果你用过Ruby的Sinatra.rb, 会觉得Express非常熟悉。Express作者是参考sinatra, 写了一个基于node.js的实现。
第一步：在任意磁盘创建hello-world目录
第二步：进入hello-world目录执行:npm info express version
查看express最新版本，可以看到版本号
第三步：在hello-world目录中新建文件名为：package.json，内容如下，主要将第二步的版本号填入
"name": "hello-world",
"description": "hello world test app",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "3.3.8"
文件包含了应用程序的基本信息。其中“dependencies”部分描述了你想安装模块的名称和版本。该案例，接受Express 3.3.8版本,如果是3.3表示接受3.3相关的任何版本。你可以在该部分列出你想要的所有依赖。 如果你想安装其他的依赖模块，类似安装express一样，可以在dependencies中定义你的模块名称和版本，执行npm install即可安装,一旦找到，即可安装所列出的所有依赖。
第四步：在hello-world目录下执行：npm install进行安装.
一旦npm安装依赖包完成，项目根目录下会出现node_modules的子目录。项目配置所需的express包都存放于这里。
说明：第三步和第四步还有更简单的操作方式，直接输入命令：npm install express，会出现如下画面直到安装完成
第五步：nmp ls验证express是否安装完成
一：处理GET请求
c:/hello-world/app.js
var express = require('express');
var app = express();
//接着，我们可以使用app.动词()定义路由。
//比如使用"GET /"响应"Hello World"字符串，因为res、req都是Node提供的准确的对象，因此你可以调用res.pipe()
//或req.on('data', callback)或者其它。
//app.get('/hello.txt', function(req, res){
var body = 'Hello World';
res.setHeader('Content-Type', 'text/plain');
res.setHeader('Content-Length', body.length);
res.end(body);
//ExpressJS框架提供了更高层的方法，比如res.send()，它可以省去诸如添加Content-Length之类的事情。如下：
//处理GET请求
//http://127.0.0.1:8080/hello/?name=wujintao&email=cino.
app.get('/hello/*', function(req, res){
console.log(req.query.name);
console.log(req.query.email);
res.send('Get Over');
//以上表示凡是url能够匹配/hello/*的GET请求，服务器都将向客户端发送字符串“Hello World"
//app.get('/', function(req, res){
// res.render('index', {
title: 'Express'
//上面的代码意思是，get请求根目录则调用views文件夹中的index模板，并且传入参数title为“Express”，这个title就可以在模板文件中直接使用。
//现在可以绑定和监听端口了，调用app.listen()方法，接收同样的参数，比如：
app.listen(8080);
console.log('Listening on port 8080');
请求：http://127.0.0.1:8080/hello/?name=wujintao&email=cino.
通过Chrome的DEV HTTP CLIENT插件请求结果如下：
服务器日志信息如下：
二：处理POST请求 c:/hello-world/app.js
var express = require('express');
var app = express();
app.configure(function() {
//默认情况下Express并不知道该如何处理该请求体，因此我们需要增加bodyParser中间件，用于分析
//application/x-www-form-urlencoded和application/json
//请求体，并把变量存入req.body。我们可以像下面的样子来“使用”中间件[这个保证POST能取到请求参数的值]：
app.use(express.bodyParser());
//处理POST请求
//name和email是POST请求域中的参数名
app.post('/hello', function(req, res) {
console.log(req.body.name);
console.log(req.body.email);
res.send('Post Over');
post_mtd = function(req,res){
res.send('我是Wujintao');
//其中这两种形式中的function均可以定义在外部，然后引进方法名即可。其中方法post_mtd要在引用其前定义
app.post("/wujintao",post_mtd);
//除了app.get、app.post这种形式外，还可以采用：app.all在这里all表示get,post等任何一种请求方式，当然也可以指定为某种特定的请求方式。
//或者app['get']('/path', function(req,res));这种形式。
//现在可以绑定和监听端口了，调用app.listen()方法，接收同样的参数，比如：
app.listen(8080);
console.log('Listening on port 8080');
请求：http://127.0.0.1:8080/hello
通过Chrome的DEV HTTP CLIENT插件请求结果如下：
服务器日志信息如下：
至此，HTTP服务器处理GET和POST请求已经详细讲完
http://www.nodejs.org/api/http.html#http_http_request_options_callback
http://www.nodejs.org/api/
/visionmedia/express
/guide.html
浏览 40070
JavaCrazyer
浏览: 2508644 次
来自: 河南
这些example有些过时了，官方建议使用HBase-1.0
重命名了一下搞定了
为什么下载以后老解压不了呢？
读写以及修改excel文件，试试用pageoffice吧。
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'后端 Node.js 与 Java 进行通信，请问有什么好的实现思路吗？ - 知乎67被浏览27566分享邀请回答3添加评论分享收藏感谢收起2添加评论分享收藏感谢收起查看更多回答2 个回答被折叠（）