摘要：背景前段時間大部門下新成立了一個推廣百度文字識別圖像識別等科技能力在金融領域應用的子部門。而且在百度內部提倡的也是使用和。百度內部有現成的服務接入文檔。

前段時間大部門下新成立了一個推廣百度OCR、文字識別、圖像識別等科技能力在金融領域應用的子部門。因為部門剛成立，基礎設施和人力都是欠缺的。當時分到我們部門的任務是抽調一個人做新部門主站前端開發工作。本來說的是只負責頁面的開發工作。當我參加過需求品審會后，了解到新部門人力不足，而我今年主要任務又是在我們部門做基于Nodejs的前端后端分離的架構升級工作。

在這之前就是用Nodejs寫了兩個內部系統，并沒有大型的線上Web開發經驗，也想趁著這個機會鍛煉下。然后就主動的跟老板商量了這件事，老板非常支持。之后又跟新部門的產品商量，本來就缺人手的他們也非常樂意我這邊承擔更多的開發任務。

這篇文章和自己之前的文章的風格會有很大的區別，不會再去寫一些具體技術點和遇到問題的具體解決辦法，主要談的是我整個開發過程中遇到的一些問題和思考解決他們的方法。

技術選型的思考

相關服務申請

前端工程

技術目標

Web安全

內網機器訪問外網

發送郵件

網絡優化

收獲

在文章的最開頭背景介紹中大概說了網站后端采用Nodejs的開發。為了突出科技能力，網站要求了一些特效。因為我要用CSS3來寫這些特效，跟產品PK后結果是瀏覽器兼容性是IE8.0以上，特效滿足大多數主流瀏覽器即可。那么基于Nodejs的其它技術選型如下：

以下選擇這些技術的原因：

yog2（點擊到達主頁））是百度公司內部基于Express開發的比較成熟的Nodejs Web框架。提供的能力都是跟公司內部的基礎服務（同機房訪問、運維、日志等）接軌的，而且有一些部門已經在線上大規模使用，如果遇到問題可以有很多經驗可以借鑒。

swig是yog2默認支持的模板引擎。

因為Nodejs的語法是遵循CMD規范的。而且在百度內部提倡的也是使用FIS3和Mod.js。所以就選擇了公司內部的FIS3（點擊到達主頁）和Mod.js（點擊到達主頁）。FIS3不僅有百度自己內部在用，也有很多的外部公司在用，比如滴滴等。

因為交互要求兼容一些低版本瀏覽器和一些奇葩的國產瀏覽器。為了保證開發時間的可控就選擇了自己熟悉的jQuery；

確定了技術選型之后就是開始申請服務，主要包括以下相關內容：

域名申請

服務器申請

Mysql數據庫申請

bos存儲服務（使用的是百度云的bos存儲）

以上都是走的公司的內部流程，具體的就不介紹了。主要介紹下一些服務的作用。一個在網絡上運行的網站肯定是需要一個域名的，能讓網站跑起來很定是需要線上服務器的。存儲用戶的注冊數據需要數據庫。因為使用OCR進行人臉識別，要滿足識別一張圖片上的多張臉。是需要對用戶的圖片裁切。因為網站是部署在多臺機器上，肯定不能存儲在網站運行的服務器上需要將裁切好的圖片存儲在專門的存儲服務器上，并且返回給網站圖片鏈接，

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

目標：

將不同頁面的公共模塊開發成組件，以方便在不同頁面間進行引用；

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

將使用 CMD 規范編寫的組件和模塊化的代碼打包編程供頁面的業務代碼引用；

給需要加廠商前綴的css屬性自動加廠商前綴；

能夠實時的將代碼部署到測試環境，以方便QA測試；

以上的這些目標都可以使用 FIS3和相關插件來實現。

拆分公共模塊為組件

當我們觀察一個頁面的時候可以發現一個頁面的這幾塊是不同頁面間可以公用的。我把這些頁面的js、css（scss）、html（tpl）寫在一個目錄以方便管理他們。就是我沒一次一次就可以在所有頁面應用自己的修改。

組織組件的目錄：

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

因為我們線上大規模使用的Nodejs版本是6.x版本。但是開發過程中處理異步又是使用async和await。所以需要借助編譯引擎將這些es7的語法編譯成6.x支持的語法。

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

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"
    };
}

這里主要談一些前端的技術目標

之前開發過程中經常遇到的情況是我需要該一個html節點的樣式，不小心改了class類名。而js又恰恰使用了這個class操作了dom。這個時候頁面運行的時候肯定會報錯的，增加了項目的維護成本。

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

這兩種方式，如果是在開發多人維護的項目是都是需要提前預定規范，我在項目中是使用的前者。

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

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

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

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

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

node("pagesecond").xxxx

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

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

我在開發過程中關注的Web安全主要是

sql注入

接口攻擊

sql注入簡單些說就是指一些違法用戶拼接一個特殊的用戶名或者是密碼，因為我們要把用戶名和密碼插入數據庫，肯定會根據這個用戶名和密碼拼接一個sql語句。而違法用戶的這個特殊用戶名語句有可能刪掉我們數據庫的所有數據。

因為使用的是mysql數據庫。Nodejs模塊使用的也是npm上使用最多的Mysql模塊。本身這個模塊已經提供了訪問mysql集群的能力和防注入的能力。

具體方法可以參考官方文檔點擊這里直達

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

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

關于跨機房訪問、同機房訪問和內網訪問外網，這些基本上都會涉及到運維的話題。百度內部有現成的服務接入文檔。各個公司可能提供能力的方式不一樣。這里不多介紹。

這里談一些小的細節點。先看下面的一張圖：

一句話總結：當一條請求到達接入層之前是不知道要訪問內網環境下那個機房的服務器的。相反的內網的機器上如果有一條請求外網的鏈接，比如：http://weibo.com 。需要通過一個proxy訪問外網服務器。

訪問接口我使用request模塊。配合promise npm上有request-promise由名字我們就知道他的每個方法或者是調用結果返回的是什么了。這個模塊默認已經提供了代理參數的相關配置。具體的可以參考文檔點擊直達

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

如果有相關的需求，可以參考我的配置，如果我的配置不能解決你的問題，請仔細閱讀官方文檔哈。、

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

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

到這里關于開發相關介紹已經完畢。這里介紹的就是運營和產品需求的一些功能開發。每天將注冊的用戶發送給相應的責任人。

如果要滿足這個功能需要有郵件服務器。這個在公司內部有公用的可以很容易找到。其它就是配置服務的crontab定時執行腳本查詢數據庫發送郵件。

這里主要使用了nodejs模塊nodemailer。具體的相關配置和發送郵件的方法可以參考官方文檔配置點擊直達

靜態文件cdn部署；

合并靜態文件；

緩存靜態文件；

icon使用Base64

上面列舉的是比較典型的幾個點。比如像css放head標簽頭部，script標簽放到body標簽底部。這些應該屬于一個前端工程師的常識吧。

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

默認FIS3是有插件支持合并靜態文件的。因為我這次開發的頁面較多（總共11個主站頁面），且因為采用的分塊開發加載模塊和靜態文件。如果不做合并的話，一個頁面加載完需要有10-20條的靜態文件的請求。會影響頁面的加載速度。

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

先來看下一張圖

上圖中紅色框出來的都是跟靜態文件緩存有關的http協議的字段。如果對這些字段的概念比較模糊可以閱讀這篇文章加深下印象《HTTP緩存》點擊直達

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

const express = require("express")

// 配置與靜態文件相關的參數
express.static("xxxxx")

最后就是談談這次開發的收獲

這個項目開發上線以后，剛好到了大部門的年中總結會，因為自己獨立負責了前后端的開發工作，獲得了大部門的“閃耀之星”獎勵和一些物質獎勵（雖然還沒見到影??）。

對公司內部申請相關服務流程的熟悉和使用這些服務的方法，以及對整個公司后端服務體系的了解；

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

在這個過程經歷的好多事情，心態上也是考驗。既然下決心做一件事情了，自己不放棄自己，就沒有人能夠有放棄自己。