前端流程化的一些方案

由于“团队”主要就是做一些内部项目,包括一些小demo和一些小系统,所以前端的人员情况不是特别乐观,一些同学没有服务器的权限,导致只能在自己的window机器上开发~

我仔细想了下,采用问题+解决方案的方式来写这个文章也许更能表达清楚我的想法与做法.

问题一:没有采用任务代码版本控制

问题二:因为在window上都是开发的静态页面,html+css+js,html 中引入的也是源码,导致浏览器有缓存问题。在js中ajax请求后端数据的时候,因为前后端是分离的,要不就是跨域访问,要不就是后端给的不是8080,8081这些浏览器端js能请求到的端口

问题三:如何部署?前端同学在window上开发完,因为问题二提到的跨域什么问题自己也搞不清楚原因,就把代码打包给后端,后端放到服务器上;把ip+port给产品就算完成任务~后续的维护及其麻烦,首先前端同学可能都没有在自己的window机器上确认过数据是否OK?其次修改bug,多人协作,后端对代码版本的维护等都是问题

问题一解决方案:这个就不用多说了,没有版本控制就没有协作,就没有代码管理,直接上了git.

问题二解决方案:

其实对于团队来说,我们接手的主要是两类项目。一类就是小demo,大概一,两个静态页面的样子;一类就是后台系统。

一:先说小demo的解决方案:

既然是小demo,那么我认为快速交付就是它的宗旨,所以采用静态页面的方式,html+css+js,

jquery+bootstrap不仅前端同学上手快也是他们效率最高的。代码组织结构如下:

代码组织结构

  • .html各种html文件
  • css ,js, images都是顾名思义的目录
  • ackage.json基本信息和gulpfile.js中需要用到的包

gulpfile.js当然也就是大家熟悉的对静态资源压缩,合并,增加md5 hash这类的功能,也是为了解决浏览器的缓存问题。在gulpfile.js中,还会对引用资源的路径做替换,比如开发的时候:

1
2
3
4
5
6
7
8
9
10
#html中对外部css的引用
<link rel="stylesheet" type="text/css" href="css/page/city.css"/>

#html中对外部js的引用
<script src="js/page/city.js"></script>

#page.css的对image的引用
div{
   background: url(../../images/same.png);
}

在上线前会替换成绝对路径

1
2
3
4
5
6
7
8
#替换以后
<link rel="stylesheet" type="text/css" href="/dist/css/page/city-3d7d979f53.css">

#替换以后
<script src="/dist/js/page/city-b513faff42.js"></script>

#替换以后
div{background:url(/dist/images/same.png)}

规定了下各静态文件在引用资源时候的规范:

  • css文件中引用image图片路径, 如: ../../images/**.png
  • js文件中引用image图片路径,如images/**.png
  • html文件中引用css或者js路径,如
  • jquery+bootstrap直接引用cdn的路径

这是为了gulpfile.js的通用性(有点小私心,不用每个项目我都还要去再重写下gulpfile),方便部署(部署的问题后面聊).

二:接口部分的解决方案

再小的demo也需要去后端拉取数据,针对存在的问题。一开始采用的是ngnix转发的方式,

1
2
3
location ^~ /test/ {
proxy_pass http://10.*.*.*:30000/;
}

后来发现要转发的接口越来越多;另外有些接口还可以再做一些逻辑处理,比如后端给的接口只支持单id查询,如果有一个转发层,还可以给js封装一个支持多id查询的前端接口;相对其他语言js是我最熟悉的语言,所以理所当然就选择了用node来做这个转发层。

考虑到只是简单的转发+一些小逻辑处理, 所以这个node转发层,也没有采用什么mvc框架. 总共引用的模块如下:

1
2
3
4
5
var http = require('http');
var request = require('request');
var urllib = require('url');
var querystring = require("querystring");
var iconv = require("iconv-lite");

所做的事情 简单到就是 转发+某些接口需要编码转换

解决跨域+返回的数据格式如下:

1
2
3
4
5
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
res.setHeader('Content-Type', 'application/json;charset=UTF-8')

虽然转发层这里太简单,但是我依然秉承着严谨的态度(^_^),还加了测试代码(supertest+mocha)比如:

1
2
3
4
5
6
7
8
9
var request = require('supertest')("http://localhost:3001");

describe('get 热度数据', function() {
it('returns json data', function(done) {
request
.get('/getHeat')
.expect('Content-Type', 'application/json;charset=UTF-8', done)
});
});

三:后台系统

其实这是问题二的第二类前端涉及到的部分,采用的是node+express+webpack的方式。

采用node是因为相对于php,python来说,我更熟悉js; 采用express是因为资料相对多一些,网络上也有一些解决方案(我也是第一次做node项目);webpack就是打包工具(私心也是因为react现在比较火,在内部系统上可以尝试下,学习嘛)

前面也提到到团队人员配置的问题,所以最近也是用 express-generator的代码修改了下,把jade替换成swig模板,然后增加webpack的配置。做了一个myexpress-generator,放到了公司内部

当然还不完善,这样方便团队人员开发的时候,能够直接用~

项目目录如下:

项目目录

  • 在开发的时候,运行wpDevServer.js,为了修改静态文件的时候,能够直接刷新页面看到结果,而不用再webpack打包一次
  • 其他的其实就是express