专题页面一般是一些为了当时的活动而作的一些短时间的页面,有的专题,仅仅是一些说明信息,没有过多的连接,此时直接切大图就能够完成。而有一些专题是为了推广自家或者其余方的产品,经常会有不少连接在页面中,而一般状况下,产品提供给开发人员的是一个包含不少URL地址和图片地址的Excel文件,要把这些连接填到页面中,难道真要一个个复制粘贴吗?若是真这么作,那么这件事就变成了一件体力活。程序猿一般是很“懒”的,这种机械的劳动固然不符合程序猿的风格。html
咱们看一下,要完成这件事,其实就是使用Excel中的数据生成一个静态页面,咱们引用《变形金刚》里堕落金刚的一句话:node
The Cube was merely a vessel.Its power, its knowledge, can never be destroyed.It can only transform.
魔方只不过是个载体,它的能量和知识永远不会毁灭,只是变换了形态。git
数据无处不在,区别仅在于存储形式,咱们能够从文本、数据库、远程等等方式获取数据,只要有了数据,即可以作任何能够作的事情了。github
下面介绍一下实现过程,咱们以nodejs语言为例说明(其余语言相似)。数据库
第一步就是把Excel中的数据提取出来,咱们使用node-xlsxexpress
var xlsx = require('node-xlsx'); var xlsxData = xlsx.parse(path.join(__dirname, 'file.xlsx'));
Excel形式为segmentfault
获得的xlsxData
的数据形式为服务器
{ "worksheets": [ { "name": "Sheet1", // sheet "data": [ [ // 每个array为表格中的一行数据 { // 每个obj为表格中的一个单元格 "value": "火热桑巴(大)", "formatCode": "General" }, { "value": null, "formatCode": "General" }, { "value": null, "formatCode": "General" } ], [ { "value": "文案", "formatCode": "General" }, { "value": "图片URL", "formatCode": "General" }, { "value": "转化后连接", "formatCode": "General" } ], [ { "value": 1, "formatCode": "General" }, { "value": "http://p5.123.sogoucdn.com/imgu/2014/06/20140619140300_884.jpg", "formatCode": "General" }, { "value": "http://xxxxx", "formatCode": "General" } ] ...
第二步就是处理数据,产品在填写Excel表格时固然不会考虑开发人员会怎么使用,而咱们就须要把获得的数据处理成咱们方便使用的形式。咱们发现,Excel的填写仍是很是有规律的(感谢产品妹子),页面的每个区域,首先是文字说明,而后是数据类型的说明(文案、图片URL、URL地址),而后就是地址数据了。函数
咱们首先剔除不须要的数据ui
// 此处仅仅是以个人项目为例,应对应具体状况修改 xlsxData = xlsxData.worksheets[0].data; xlsxData = xlsxData.map(function(line, index) { return line.filter(function(td, index) { return typeof td.value !== 'number'; }); });
而后根据区域的文字说明,定义一个文字到key的map
var codeMap = { '火热桑巴(大)': 'huoresangba1', '火热桑巴(小)': 'huoresangba2', '火热桑巴(文字链)': 'huoresangbaText', '官方战服(大)': 'guanfangzhanfu1', ... };
以后就是遍历每一行的数据
var result = {}, index = 0, obj = null, arr = null, item = null, currTitle = ''; while (item = xlsxData.shift()) { if (item[0]) { if (codeMap[item[0].value]) { var pinyin = codeMap[item[0].value]; currTitle = item[0].value; result[pinyin] = arr = []; } else if (item[0].value !== '文案') { obj = {}; obj.txt = item[0].value; obj.url = item[1].value; arr.push(obj); } } }
最终获得的是一个名为result
的object。
最后就是使用获得的对象生成静态页面,这里将会用到模板引擎,咱们使用的是swig(ejs,jade,nunjucks等等均可以)
模板的大体形式以下:
{% for item in huoresangba1 %} <a href="{{ item.url|safe }}" target="_blank"> <img src="{{ item.img }}" alt="图片"> </a> {% endfor %}
生成页面
var tpl = swig.compileFile(path.join(__dirname, 'page.tpl')); try { fs.writeFileSync('worldcup2014.html', tpl(result)); } catch (e) { console.log(e); }
生成的worldcup2014.html
页面就是最终的页面了。
此文章的最终形式为http://mai.sogou.com/zhuanti/worldcup2014.html(已失效)
为了实现产品的自助编辑,咱们能够在服务器上搭建一个samba服务器,把excel文件放到samba服务器上,而后告诉产品直接编辑Excel文件便可。
咱们能够把生成页面的这个过程写成一个nodejs的脚本,产品编辑完以后执行node make.js
便可生成页面。或者能够更加傻瓜一点,把过程写到一个http回调函数中(express的get请求或者原生的nodejs的http方法),这样产品访问某一个URL就能够自动生成页面了。又或者终极一点,把上线过程也写到http回调函数中,这样便实现了从excel到线上页面的所有自动化,整个过程对产品人员彻底不可见。
对于常常须要修改的页面,这个过程可使得开发人员从枯燥的复制粘贴连接的过程当中解放出来,彻底交给产品自助完成,而产品使用起来也是十分方便,仅须要关注Excel的编辑便可,能够节省大量的交流成本。这种形式适合于短时间的,须要常常修改的,而又不必作一个完整后台的页面。
通常来讲,一个健全的部门或者公司应该都有一个专门的专题制做、发布系统。这种方法相对来讲仍是较为原始的。