2、svg文件使用

配置腳本的資源配置type為svg，運行腳本獲取svg文件到指定目錄

經(jīng)過二次處理或直接使用、比如base64或其他方式

3、svg sprite使用方式

配置腳本的資源配置type為svgSprite，運行腳本獲取svgSprite 內(nèi)聯(lián)到html文件中

挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面

這樣使用的方式稍微麻煩，建議封裝成組件傳id就好，比如

Nicon平臺是一個前后端完全分離的項目，前后端都可以多帶帶啟動進(jìn)行開發(fā)聯(lián)調(diào)。前端采用Vue生態(tài)相關(guān)技術(shù)，后端使用koa框架，結(jié)構(gòu)及流程都比較簡單。根據(jù)需求及自己開發(fā)習(xí)慣進(jìn)行架構(gòu)設(shè)計，有興趣的可以看看。Nicon 平臺全部的代碼都已經(jīng)開源，并且個人會長期維護(hù)，有興趣的歡迎加入一起維護(hù)。

系統(tǒng)要求

linux/unix/windows

環(huán)境要求

nodejs 7.0+

npm 3.10.8+

mogondb 3.2+

redis 3.2+

在啟動工程之前，必須確保數(shù)據(jù)庫已經(jīng)啟動，且已經(jīng)把相應(yīng)的數(shù)據(jù)庫創(chuàng)建好。

1、 克隆項目到本地|服務(wù)器

git clone git@github.com:bolin-L/nicon.git

2、 進(jìn)入到項目工程nicon安裝依賴

cd nicon && npm install

3、配置數(shù)據(jù)庫信息與其他環(huán)境變量

在nicon同級文件夾(or 任何地方，但是如果放在nicon文件夾中，名稱必須為start.sh 或 start.bat, 會被ignore掉，更新不會被覆蓋)創(chuàng)建一個啟動腳本start.sh, 用于配置數(shù)據(jù)庫及其他的環(huán)境變量配置，可參考examle

4、進(jìn)入到nicon文件夾，執(zhí)行啟動腳本命令

sh yourStartConfigPath/start.sh

如果不出什么意外，這個時候應(yīng)該已經(jīng)啟動好了。服務(wù)監(jiān)聽的端口是4843, 當(dāng)然這只是個純服務(wù)，具體的頁面還需要部署前端工程nicon-front。

圖標(biāo)管理平臺采用的是前后端完全分離的開發(fā)方式，前端代碼放在獨立的icon-front。前端只需要提供完整的靜態(tài)html頁面與其他靜態(tài)資源即可。靜態(tài)資源的訪問通過配置nginx代理實現(xiàn)頁面的訪問，跟服務(wù)端工程毫無關(guān)系，服務(wù)端只負(fù)責(zé)提供異步接口。

1、克隆前端項目到本地, 與nicon文件夾同級

git clone git@github.com:bolin-L/nicon-front.git

2、進(jìn)入到nicon-front工程，安裝依賴

cd nicon-front && npm install 

3、運行打包命令、打包輸出到nicon-front/dist文件夾下

npm run build

現(xiàn)在服務(wù)已經(jīng)啟動，靜態(tài)資源已經(jīng)輸出，接下來需要配置nginx讓請求可以訪問到靜態(tài)資源，異步接口可以訪問到服務(wù)。

為了在瀏覽器中訪問到頁面，需要配置Nginx代理，把對應(yīng)的請求轉(zhuǎn)發(fā)到對應(yīng)的服務(wù)。該平臺的請求分兩種，一種是訪問前端靜態(tài)頁面與資源，另一種是訪問后端服務(wù)的異步接口
，請求都有一定的規(guī)則，大概配置如下：

    # 靜態(tài)資源請求
    location / {
        root /home/liaobolin/app/nicon-front/dist;
        index index.html index.htm;
    }
    
    location ^~ /static {
        root /home/liaobolin/app/nicon-front/dist;
    }
    # 配置異步接口請求到服務(wù)器
    location /api {
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   Host      $http_host;
        proxy_pass http://127.0.0.1:4843;
    }

配置到此，平臺基本就可以運行起來使用了，瀏覽器通過域名就可以訪問到首頁

雖然該平臺已經(jīng)可以提供完成的登錄、注冊，圖標(biāo)庫樣式文件等靜態(tài)資源的訪問。但是對于企業(yè)來說，內(nèi)部的工具平臺最好只接受內(nèi)部人或只能內(nèi)網(wǎng)訪問，對于靜態(tài)資源最理想的就是放到自家的cdn服務(wù)器上，讓平臺操作更安全，訪問所速度更快等等...

基于這樣的需求，Nicon支持接入三方登錄與字體文件資源上傳到三方服務(wù)器，登錄或上傳需要的密鑰等需要通過環(huán)境變量設(shè)置，比如放在start.sh文件中，登錄、上傳等接入代碼需要自己按照規(guī)范開發(fā)完成提PR，檢查完畢后合并到工程master分支中。目前代碼中支持一下三方服務(wù)：

三方登錄

網(wǎng)易o(hù)penId登錄

github授權(quán)登錄

三方上傳

網(wǎng)易NOS服務(wù)

七牛云存儲服務(wù)

三方服務(wù)接入文件夾結(jié)構(gòu)如下

├── service
│?? ├── login
│?? │?? ├── github_qiniu
│?? │?? │?? ├── config.js
│?? │?? │?? └── index.js
|   |   |-- ....... 
│?? │?? ├── index.js   
│?? └── upload
│??     ├── github_qiniu
│??     │?? ├── config.js
│??     │?? └── index.js
|   |   |-- ....... 
│??     ├── index.js

三方登錄、上傳服務(wù)接入步驟

1、在接入三方服務(wù)之前，必須先配置產(chǎn)品類型環(huán)境變量 productType。加入到start.sh文件中

export productType="github_qiniu";

比如我需要接入github三方登錄與qiniu上傳存儲服務(wù)，那么我的productType就設(shè)置為github_qiniu。 那么在開發(fā)接入服務(wù)時文件夾名稱必須為 github_qiniu。

2、 在service/login/ 文件夾下創(chuàng)建文件夾 github_qiniu, 然后在該文件夾下創(chuàng)建config.js , 與index.js, 在index.js文件中必須暴露出async login方法, 調(diào)用方法后需要返回指定格式的數(shù)據(jù)

// index.js

class GithubOpenIdLogin {
    async login (ctx) {
        // your code
        return {
            userName: tokenInfo.userName // 必須且唯一
        }
    }
}

let loginIns = new GithubOpenIdLogin();
module.exports = loginIns.login.bind(loginIns);

3、在service/upload/ 文件夾下創(chuàng)建文件夾 github_qiniu, 然后在該文件夾下創(chuàng)建config.js , 與index.js, 在index.js文件中必須暴露出async upload方法, 調(diào)用方法后需要返回指定格式的數(shù)據(jù)

// index.js

class QiniuUpload {
    async upload (dirPath) {
        // your code
        // 上傳返回數(shù)據(jù)格式
        return {
            url: cssUrl, // 必須
            cssContent: cssContent // 必須
        };
    }
}

let uploadIns = new QiniuUpload();
module.exports = uploadIns.upload.bind(uploadIns);

至此就已經(jīng)配置完畢，啟動工程就好了。Nicon平臺的詳細(xì)部署流程已經(jīng)寫在nicon工程中，如果需要請前往了解更詳細(xì)的部署流程。

Nicon平臺是我自己在業(yè)余時間做的項目，能力有限，UI方面基本是參考iconfont，技術(shù)方面也是慢慢摸索，實屬不易，在使用過程中有任何建議或意見，歡迎指教。歡迎大家來一波star，github地址如下：

nicon 平臺nodejs后端服務(wù)

nicon-front 平臺前端工程

在開發(fā)過程中，我仿照NEJ的cache使用方式基于axios封裝了axios-cache 模塊，在axios的基礎(chǔ)上進(jìn)行一些增強(qiáng)，更適合日常的組織與使用方式，有興趣的話可以試試，當(dāng)然，也歡迎star。

axios-cache 集中管理異步接口配置的模塊