如何使用Excel來作網站後臺

專題頁面一般是一些爲了當時的活動而作的一些短時間的頁面，有的專題，僅僅是一些說明信息，沒有過多的連接，此時直接切大圖就能夠完成。而有一些專題是爲了推廣自家或者其餘方的產品，經常會有不少連接在頁面中，而一般狀況下，產品提供給開發人員的是一個包含不少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等等均可以）

模板的大體形式以下：

{% 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的編輯便可，能夠節省大量的交流成本。這種形式適合於短時間的，須要常常修改的，而又不必作一個完整後臺的頁面。

通常來講，一個健全的部門或者公司應該都有一個專門的專題製做、發佈系統。這種方法相對來講仍是較爲原始的。