摘要:或者可以更加傻瓜一点,把过程写到一个回调函数中的请求或者原生的的方法,这样产品访问某一个就可以自动生成页面了。又或者终极一点,把上线过程也写到回调函数中,这样便实现了从到线上页面的全部自动化,整个过程对产品人员完全不可见。
专题页面通常是一些为了当时的活动而做的一些短期的页面,有的专题,仅仅是一些说明信息,没有过多的链接,此时直接切大图就可以完成。而有一些专题是为了推广自家或者其他方的产品,常常会有很多链接在页面中,而通常情况下,产品提供给开发人员的是一个包含很多URL地址和图片地址的Excel文件,要把这些链接填到页面中,难道真要一个个复制粘贴吗?如果真这么做,那么这件事就变成了一件体力活。程序猿通常是很“懒”的,这种机械的劳动当然不符合程序猿的风格。
我们看一下,要完成这件事,其实就是使用Excel中的数据生成一个静态页面,我们引用《变形金刚》里堕落金刚的一句话:
</>复制代码
The Cube was merely a vessel.Its power, its knowledge, can never be destroyed.It can only transform.
魔方只不过是个载体,它的能量和知识永远不会毁灭,只是变换了形态。
数据无处不在,区别仅在于存储形式,我们可以从文本、数据库、远程等等方式获取数据,只要有了数据,便可以做任何可以做的事情了。
下面介绍一下实现过程,我们以nodejs语言为例说明(其他语言类似)。
第一步就是把Excel中的数据提取出来,我们使用node-xlsx
</>复制代码
var xlsx = require("node-xlsx");
var xlsxData = xlsx.parse(path.join(__dirname, "file.xlsx"));
Excel形式为
得到的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地址),然后就是地址数据了。
我们首先剔除不需要的数据
</>复制代码
// 此处仅仅是以我的项目为例,应对应具体情况修改
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等等都可以)
模板的大致形式如下:
</>复制代码
生成页面
</>复制代码
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的编辑即可,可以节省大量的交流成本。这种形式适合于短期的,需要经常修改的,而又没必要做一个完整后台的页面。
一般来说,一个健全的部门或者公司应该都有一个专门的专题制作、发布系统。这种方法相对来说还是较为原始的。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49514.html
摘要:学习笔记七数学形态学关注的是图像中的形状,它提供了一些方法用于检测形状和改变形状。学习笔记十一尺度不变特征变换,简称是图像局部特征提取的现代方法基于区域图像块的分析。本文的目的是简明扼要地说明的编码机制,并给出一些建议。 showImg(https://segmentfault.com/img/bVRJbz?w=900&h=385); 前言 开始之前,我们先来看这样一个提问: pyth...
摘要:知识在于分享,也是希望和大家交流下,如何把后台管理系统写得能更具工程化,模块化,更有效率。后台管理系统多为端,所以和的技术运用不多,会根据产品需求进行优雅降级和渐进增强。 前两天看segmentfault的时候,突然间,想写篇文章总结一下那些年自己写过的后台管理系统。作为我前端的入门项目,我对后台管理系统的感情还是挺深的。本着以下几点原因,写了此文。 对后台管理系统做一个综合全面的总...
摘要:知识在于分享,也是希望和大家交流下,如何把后台管理系统写得能更具工程化,模块化,更有效率。后台管理系统多为端,所以和的技术运用不多,会根据产品需求进行优雅降级和渐进增强。 前两天看segmentfault的时候,突然间,想写篇文章总结一下那些年自己写过的后台管理系统。作为我前端的入门项目,我对后台管理系统的感情还是挺深的。本着以下几点原因,写了此文。 对后台管理系统做一个综合全面的总...
摘要:总结整个过程的难点在于获取文件对象,从数据中取值然后在按取出,这样我们就可以从后台上传文件,然后进行批量导入数据库,其他数据格式只需要改和中的数据字段就可以 第一篇(从django后台解析excel数据批量导入数据库) 文章会在github中持续更新 作者: knthony github 联系我 1.django 如何从后台上传excel中批量解析数据 要从django后台导入...
阅读 1925·2021-10-27 14:15
阅读 4188·2021-10-08 10:12
阅读 1340·2021-09-22 15:55
阅读 3367·2021-09-22 15:17
阅读 1000·2021-09-02 15:40
阅读 1886·2019-08-29 18:33
阅读 1217·2019-08-29 15:22
阅读 2479·2019-08-29 11:08
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要