摘要：背景前段時(shí)間大部門下新成立了一個(gè)推廣百度文字識(shí)別圖像識(shí)別等科技能力在金融領(lǐng)域應(yīng)用的子部門。而且在百度內(nèi)部提倡的也是使用和。百度內(nèi)部有現(xiàn)成的服務(wù)接入文檔。

前段時(shí)間大部門下新成立了一個(gè)推廣百度OCR、文字識(shí)別、圖像識(shí)別等科技能力在金融領(lǐng)域應(yīng)用的子部門。因?yàn)椴块T剛成立，基礎(chǔ)設(shè)施和人力都是欠缺的。當(dāng)時(shí)分到我們部門的任務(wù)是抽調(diào)一個(gè)人做新部門主站前端開發(fā)工作。本來說的是只負(fù)責(zé)頁面的開發(fā)工作。當(dāng)我參加過需求品審會(huì)后，了解到新部門人力不足，而我今年主要任務(wù)又是在我們部門做基于Nodejs的前端后端分離的架構(gòu)升級(jí)工作。

在這之前就是用Nodejs寫了兩個(gè)內(nèi)部系統(tǒng)，并沒有大型的線上Web開發(fā)經(jīng)驗(yàn)，也想趁著這個(gè)機(jī)會(huì)鍛煉下。然后就主動(dòng)的跟老板商量了這件事，老板非常支持。之后又跟新部門的產(chǎn)品商量，本來就缺人手的他們也非常樂意我這邊承擔(dān)更多的開發(fā)任務(wù)。

這篇文章和自己之前的文章的風(fēng)格會(huì)有很大的區(qū)別，不會(huì)再去寫一些具體技術(shù)點(diǎn)和遇到問題的具體解決辦法，主要談的是我整個(gè)開發(fā)過程中遇到的一些問題和思考解決他們的方法。

技術(shù)選型的思考

相關(guān)服務(wù)申請(qǐng)

前端工程

技術(shù)目標(biāo)

Web安全

內(nèi)網(wǎng)機(jī)器訪問外網(wǎng)

發(fā)送郵件

網(wǎng)絡(luò)優(yōu)化

收獲

在文章的最開頭背景介紹中大概說了網(wǎng)站后端采用Nodejs的開發(fā)。為了突出科技能力，網(wǎng)站要求了一些特效。因?yàn)槲乙肅SS3來寫這些特效，跟產(chǎn)品PK后結(jié)果是瀏覽器兼容性是IE8.0以上，特效滿足大多數(shù)主流瀏覽器即可。那么基于Nodejs的其它技術(shù)選型如下：

以下選擇這些技術(shù)的原因：

yog2（點(diǎn)擊到達(dá)主頁））是百度公司內(nèi)部基于Express開發(fā)的比較成熟的Nodejs Web框架。提供的能力都是跟公司內(nèi)部的基礎(chǔ)服務(wù)（同機(jī)房訪問、運(yùn)維、日志等）接軌的，而且有一些部門已經(jīng)在線上大規(guī)模使用，如果遇到問題可以有很多經(jīng)驗(yàn)可以借鑒。

swig是yog2默認(rèn)支持的模板引擎。

因?yàn)镹odejs的語法是遵循CMD規(guī)范的。而且在百度內(nèi)部提倡的也是使用FIS3和Mod.js。所以就選擇了公司內(nèi)部的FIS3（點(diǎn)擊到達(dá)主頁）和Mod.js（點(diǎn)擊到達(dá)主頁）。FIS3不僅有百度自己內(nèi)部在用，也有很多的外部公司在用，比如滴滴等。

因?yàn)榻换ヒ蠹嫒菀恍┑桶姹緸g覽器和一些奇葩的國(guó)產(chǎn)瀏覽器。為了保證開發(fā)時(shí)間的可控就選擇了自己熟悉的jQuery；

確定了技術(shù)選型之后就是開始申請(qǐng)服務(wù)，主要包括以下相關(guān)內(nèi)容：

域名申請(qǐng)

服務(wù)器申請(qǐng)

Mysql數(shù)據(jù)庫申請(qǐng)

bos存儲(chǔ)服務(wù)（使用的是百度云的bos存儲(chǔ)）

以上都是走的公司的內(nèi)部流程，具體的就不介紹了。主要介紹下一些服務(wù)的作用。一個(gè)在網(wǎng)絡(luò)上運(yùn)行的網(wǎng)站肯定是需要一個(gè)域名的，能讓網(wǎng)站跑起來很定是需要線上服務(wù)器的。存儲(chǔ)用戶的注冊(cè)數(shù)據(jù)需要數(shù)據(jù)庫。因?yàn)槭褂?strong>OCR進(jìn)行人臉識(shí)別，要滿足識(shí)別一張圖片上的多張臉。是需要對(duì)用戶的圖片裁切。因?yàn)榫W(wǎng)站是部署在多臺(tái)機(jī)器上，肯定不能存儲(chǔ)在網(wǎng)站運(yùn)行的服務(wù)器上需要將裁切好的圖片存儲(chǔ)在專門的存儲(chǔ)服務(wù)器上，并且返回給網(wǎng)站圖片鏈接，

使用Nodejs開發(fā)的話，前端的工程的概念可能還要廣一些會(huì)涉及到Nodejs相關(guān)的工程化。這部分分兩部分介紹：

目標(biāo)：

將不同頁面的公共模塊開發(fā)成組件，以方便在不同頁面間進(jìn)行引用；

使用 SASS 來做css的模塊化管理，并且實(shí)時(shí)編譯成css，生成map文件便于本地調(diào)試；

將使用 CMD 規(guī)范編寫的組件和模塊化的代碼打包編程供頁面的業(yè)務(wù)代碼引用；

給需要加廠商前綴的css屬性自動(dòng)加廠商前綴；

能夠?qū)崟r(shí)的將代碼部署到測(cè)試環(huán)境，以方便QA測(cè)試；

以上的這些目標(biāo)都可以使用 FIS3和相關(guān)插件來實(shí)現(xiàn)。

拆分公共模塊為組件

當(dāng)我們觀察一個(gè)頁面的時(shí)候可以發(fā)現(xiàn)一個(gè)頁面的這幾塊是不同頁面間可以公用的。我把這些頁面的js、css（scss）、html（tpl）寫在一個(gè)目錄以方便管理他們。就是我沒一次一次就可以在所有頁面應(yīng)用自己的修改。

組織組件的目錄：

當(dāng)我在不同頁面間使用相同的nav 和footer的時(shí)候，只需要include一次就可以了。

因?yàn)槲覀兙€上大規(guī)模使用的Nodejs版本是6.x版本。但是開發(fā)過程中處理異步又是使用async和await。所以需要借助編譯引擎將這些es7的語法編譯成6.x支持的語法。

另外就是借助process.env.NODE_ENV可以讀取環(huán)境變量的特性，來區(qū)分配置一些線上和線下的配置，比如：

const YOG_DEBUG = process.env.YOG_DEBUG;
const PANSHI_DEBUG = process.env.PANSHI_DEBUG;

let mysqlConf;

if (PANSHI_DEBUG === "true") {
    mysqlConf = {
        host: "10.00.00.00",
        user: "ppui",
        password: "ppui",
        database: "excel",
        port: "5003"
    };
} else if (YOG_DEBUG === "true") {
    mysqlConf = {
        host: "127.0.0.1",
        user: "root",
        password: "",
        database: "pass_panshi",
        port: "3306"
    };
}

這里主要談一些前端的技術(shù)目標(biāo)

之前開發(fā)過程中經(jīng)常遇到的情況是我需要該一個(gè)html節(jié)點(diǎn)的樣式，不小心改了class類名。而js又恰恰使用了這個(gè)class操作了dom。這個(gè)時(shí)候頁面運(yùn)行的時(shí)候肯定會(huì)報(bào)錯(cuò)的，增加了項(xiàng)目的維護(hù)成本。

有兩種方案可以有效的解決這種問題，第一就是添加自定義屬性，比如

這兩種方式，如果是在開發(fā)多人維護(hù)的項(xiàng)目是都是需要提前預(yù)定規(guī)范，我在項(xiàng)目中是使用的前者。

在前面已經(jīng)介紹過就是使用cmd規(guī)范來組織前端代碼。比如為了能夠滿足我使用屬性選擇器來作為操作dom的需求。我特地自己封裝了一些代碼段，比如在base.js文件中有一段這樣的代碼：

/**
 * 根據(jù)node-type獲取節(jié)點(diǎn)信息
 *
 * @param {any} params 獲取節(jié)點(diǎn)元素
 * @param {any} context 上下文環(huán)境
 * @returns
 */
exports.nodeTypeDom = function (params, context) {
    if (context && context !== "") {
        return $("[node-type="" + params + ""]", $("[node-type="" + context + ""]"));
    } else {
        return $("[node-type="" + params + ""]");
    }
};

我在其他文件中需要使用這個(gè)代碼段的時(shí)候，只需要像下面這樣就可以了。

var baseJs = require("../libjs/base");
var node = baseJs.nodeTypeDom;

// 需要選擇 dom 的地方，直接傳入自定義屬性的值

node("pagesecond").xxxx

除了一些常用的代碼段這樣封裝，一些組件也按照這樣的方式封裝。比如：輪播圖組件、文件上傳組件、表單校驗(yàn)組件、tab滾動(dòng)組件。

以上兩種方式的好處都能夠極大的提高代碼的可維護(hù)性、閱讀性。

我在開發(fā)過程中關(guān)注的Web安全主要是

sql注入

接口攻擊

sql注入簡(jiǎn)單些說就是指一些違法用戶拼接一個(gè)特殊的用戶名或者是密碼，因?yàn)槲覀円延脩裘兔艽a插入數(shù)據(jù)庫，肯定會(huì)根據(jù)這個(gè)用戶名和密碼拼接一個(gè)sql語句。而違法用戶的這個(gè)特殊用戶名語句有可能刪掉我們數(shù)據(jù)庫的所有數(shù)據(jù)。

因?yàn)槭褂玫氖?b>mysql數(shù)據(jù)庫。Nodejs模塊使用的也是npm上使用最多的Mysql模塊。本身這個(gè)模塊已經(jīng)提供了訪問mysql集群的能力和防注入的能力。

具體方法可以參考官方文檔點(diǎn)擊這里直達(dá)

這里要做的就是有些違法用戶拿到我們接口的時(shí)候，寫一個(gè)循環(huán)頻繁的訪問我們的接口。為了防止有些違法用戶就是給請(qǐng)求加token。就是在向服務(wù)端發(fā)起請(qǐng)求的時(shí)候返回給前端的一個(gè)token，前端請(qǐng)求后端的時(shí)候帶上這個(gè)token。如果token在后端校驗(yàn)通過就銷毀這個(gè)token 。還有比如驗(yàn)證請(qǐng)求的源IP，這里注意的是我們驗(yàn)證IP的時(shí)候應(yīng)該獲取的是HTTP協(xié)議header字段中的x-forwarded-for屬性的值。（這兩種方法可以一起使用）

不過后來從后端RD那邊了解到公司有專門的服務(wù)可以用來做反作弊，而且策略更全面些。目前在研究準(zhǔn)備接入。

關(guān)于跨機(jī)房訪問、同機(jī)房訪問和內(nèi)網(wǎng)訪問外網(wǎng)，這些基本上都會(huì)涉及到運(yùn)維的話題。百度內(nèi)部有現(xiàn)成的服務(wù)接入文檔。各個(gè)公司可能提供能力的方式不一樣。這里不多介紹。

這里談一些小的細(xì)節(jié)點(diǎn)。先看下面的一張圖：

一句話總結(jié)：當(dāng)一條請(qǐng)求到達(dá)接入層之前是不知道要訪問內(nèi)網(wǎng)環(huán)境下那個(gè)機(jī)房的服務(wù)器的。相反的內(nèi)網(wǎng)的機(jī)器上如果有一條請(qǐng)求外網(wǎng)的鏈接，比如：http://weibo.com 。需要通過一個(gè)proxy訪問外網(wǎng)服務(wù)器。

訪問接口我使用request模塊。配合promise npm上有request-promise由名字我們就知道他的每個(gè)方法或者是調(diào)用結(jié)果返回的是什么了。這個(gè)模塊默認(rèn)已經(jīng)提供了代理參數(shù)的相關(guān)配置。具體的可以參考文檔點(diǎn)擊直達(dá)

這里涉及的知識(shí)比較多，比如代理隧道、https請(qǐng)求的代理。在閱讀官方配置文檔的時(shí)候搜索一些關(guān)鍵字了解一些其它相關(guān)知識(shí)即可。

如果有相關(guān)的需求，可以參考我的配置，如果我的配置不能解決你的問題，請(qǐng)仔細(xì)閱讀官方文檔哈。、

let options = {
        "url": params.url,
        "encoding": "binary",
        "rejectUnauthorized": false   // 取消https證書的校驗(yàn)
    };

    // 解決代理https請(qǐng)求的行為 測(cè)試機(jī)需要配置環(huán)境變量 PANSHI_HTTPS_PROXY
    if (process.env.PANSHI_DEBUG !== "true" || PANSHI_HTTPS_PROXY) {
        options.tunnel = false;
        options.proxy = "http://xxxx.proxy.com:8080";
    }

到這里關(guān)于開發(fā)相關(guān)介紹已經(jīng)完畢。這里介紹的就是運(yùn)營(yíng)和產(chǎn)品需求的一些功能開發(fā)。每天將注冊(cè)的用戶發(fā)送給相應(yīng)的責(zé)任人。

如果要滿足這個(gè)功能需要有郵件服務(wù)器。這個(gè)在公司內(nèi)部有公用的可以很容易找到。其它就是配置服務(wù)的crontab定時(shí)執(zhí)行腳本查詢數(shù)據(jù)庫發(fā)送郵件。

這里主要使用了nodejs模塊nodemailer。具體的相關(guān)配置和發(fā)送郵件的方法可以參考官方文檔配置點(diǎn)擊直達(dá)

靜態(tài)文件cdn部署；

合并靜態(tài)文件；

緩存靜態(tài)文件；

icon使用Base64

上面列舉的是比較典型的幾個(gè)點(diǎn)。比如像css放head標(biāo)簽頭部，script標(biāo)簽放到body標(biāo)簽底部。這些應(yīng)該屬于一個(gè)前端工程師的常識(shí)吧。

靜態(tài)文件部署CDN這個(gè)不多介紹，每個(gè)公司都會(huì)自己的一套方法。這里主要介紹下合并靜態(tài)文件和緩存靜態(tài)文件。

默認(rèn)FIS3是有插件支持合并靜態(tài)文件的。因?yàn)槲疫@次開發(fā)的頁面較多（總共11個(gè)主站頁面），且因?yàn)椴捎玫姆謮K開發(fā)加載模塊和靜態(tài)文件。如果不做合并的話，一個(gè)頁面加載完需要有10-20條的靜態(tài)文件的請(qǐng)求。會(huì)影響頁面的加載速度。

當(dāng)我準(zhǔn)備使用FIS3的插件來合并靜態(tài)文件的時(shí)候發(fā)現(xiàn)還是有些麻煩的需要一個(gè)頁面一個(gè)頁面去配置要打包合并的靜態(tài)文件。最后請(qǐng)教了下其它部門的同事使用我們接入層服務(wù)器提供的comb功能，由服務(wù)器幫我們合并靜態(tài)文件（其實(shí)就是Nginx 的concat模塊提供的功能）。這里也不做過多的介紹，自行搜索文章了解就可以了。

先來看下一張圖

上圖中紅色框出來的都是跟靜態(tài)文件緩存有關(guān)的http協(xié)議的字段。如果對(duì)這些字段的概念比較模糊可以閱讀這篇文章加深下印象《HTTP緩存》點(diǎn)擊直達(dá)

不管使用express還是koa（koa可以使用koa-static-cache中間件）都用相應(yīng)的靜態(tài)文件服務(wù)的中間件提供配置這幾個(gè)字段的能力。express可以通過一下方式配置（具體的可以閱讀express文檔）

const express = require("express")

// 配置與靜態(tài)文件相關(guān)的參數(shù)
express.static("xxxxx")

最后就是談?wù)勥@次開發(fā)的收獲

這個(gè)項(xiàng)目開發(fā)上線以后，剛好到了大部門的年中總結(jié)會(huì)，因?yàn)樽约邯?dú)立負(fù)責(zé)了前后端的開發(fā)工作，獲得了大部門的“閃耀之星”獎(jiǎng)勵(lì)和一些物質(zhì)獎(jiǎng)勵(lì)（雖然還沒見到影??）。

對(duì)公司內(nèi)部申請(qǐng)相關(guān)服務(wù)流程的熟悉和使用這些服務(wù)的方法，以及對(duì)整個(gè)公司后端服務(wù)體系的了解；

這次開發(fā)還是遇到很多坑的，也被別人說過代碼寫的“爛”，但我覺得最主要的原因就是不具有后端思維吧。想寫好Nodejs就是用后端思維去寫Nodejs，這個(gè)需要多寫，多踩坑。

在這個(gè)過程經(jīng)歷的好多事情，心態(tài)上也是考驗(yàn)。既然下決心做一件事情了，自己不放棄自己，就沒有人能夠有放棄自己。