2、svg文件使用

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

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

3、svg sprite使用方式

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

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

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

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

系統(tǒng)要求

linux/unix/windows

環(huán)境要求

nodejs 7.0+

npm 3.10.8+

mogondb 3.2+

redis 3.2+

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

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

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

2、 進(jìn)入到項(xiàng)目工程nicon安裝依賴(lài)

cd nicon && npm install

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

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

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

sh yourStartConfigPath/start.sh

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

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

1、克隆前端項(xiàng)目到本地, 與nicon文件夾同級(jí)

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

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

cd nicon-front && npm install 

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

npm run build

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

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

    # 靜態(tài)資源請(qǐng)求
    location / {
        root /home/liaobolin/app/nicon-front/dist;
        index index.html index.htm;
    }
    
    location ^~ /static {
        root /home/liaobolin/app/nicon-front/dist;
    }
    # 配置異步接口請(qǐng)求到服務(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;
    }

配置到此，平臺(tái)基本就可以運(yùn)行起來(lái)使用了，瀏覽器通過(guò)域名就可以訪(fǎng)問(wèn)到首頁(yè)

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

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

三方登錄

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

github授權(quán)登錄

三方上傳

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

七牛云存儲(chǔ)服務(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)品類(lèi)型環(huán)境變量 productType。加入到start.sh文件中

export productType="github_qiniu";

比如我需要接入github三方登錄與qiniu上傳存儲(chǔ)服務(wù)，那么我的productType就設(shè)置為github_qiniu。 那么在開(kāi)發(fā)接入服務(wù)時(shí)文件夾名稱(chēng)必須為 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
        // 上傳返回?cái)?shù)據(jù)格式
        return {
            url: cssUrl, // 必須
            cssContent: cssContent // 必須
        };
    }
}

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

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

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

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

nicon-front 平臺(tái)前端工程

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

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