Nicon 是一个集图标上传、展示、使用于一身的字体图标管理平台,流程简单,符合日常开发使用习惯,适合企业在内部部署使用。采用 Iconfont 字体图标替换项目中图片图标的使用,以达到缩减体积、风格统一、提高开发效率等目的。若配合设计师使用,设计师可在平台上管理图标,复用图标,减少设计图标耗费的时间,而开发只负责使用设计师维护好的图标库,减少了与设计师的交流成本。
与其他字体图标管理平台相比,它拥有以下优势:
- 使用流程简单,符合日常开发使用习惯,无需在审核管理流程中耗费时间
- 部署简单,平台自带注册、登录功能,还有静态资源路由,只需数据库配置就可部署使用
- 支持接入三方登录、资源上传到三方CDN服务器。使用更安全,资源更稳定
- 支持导出资源多样化,符合多种使用场合,更有配套的导出工具nicon-tookit, 方便快捷
使用流程图
开发使用流程图
设计师参与使用流程图
如果设计师与开发协同参与使用维护图标库,不仅使设计师可以有一个可视化管理字体图标的平台。还可以减少开发与设计的交流时间。
系统要求
- linux/unix/windows
环境要求
- nodejs 7.0+
- npm 3.10.8+
- mogondb 3.2+
- redis 3.2+
在启动工程之前,必须确保数据库已经启动,且已经把相应的数据库创建好。
1、 克隆项目到本地|服务器
git clone git@github.com:bolin-L/nicon.git
2、 进入到项目工程nicon安装依赖
cd nicon && npm install
3、配置数据库信息
在nicon同级文件夹(or 任何地方,但是如果放在nicon文件夹中,名称必须为start.sh
或 start.bat
, 会被ignore掉,更新不会被覆盖)创建一个启动脚本start.sh
, 用于配置数据库及其他的环境变量配置,可参考examle
#!/bin/bash
# DB config
# mongodb
export MONGODB_NAME=iconRepo;
export MONGODB_HOST=127.0.0.1;
export MONGODB_PORT=27017;
export MONGODB_USERNAME='';
export MONGODB_PASSWORD='';
# redis
export REDIS_FAMILY=4;
export REDIS_HOST=127.0.0.1;
export REDIS_PORT=6379;
export REDIS_PASSWORD='';
export REDIS_DB=0;
# config your website host
export productHost='icon.bolin.site';
# start server
npm run publish
4、进入到nicon文件夹,执行启动脚本命令
sh yourStartConfigPath/start.sh
如果不出什么意外,这个时候应该已经启动好了。服务监听的端口是4843, 当然这只是个纯服务,具体的页面还需要部署前端工程nicon-front。
图标管理平台采用的是前后端完全分离的开发方式,前端代码放在独立的icon-front。前端只需要提供完整的静态html页面与其他静态资源即可。静态资源的访问通过配置nginx代理实现页面的访问,跟服务端工程毫无关系,服务端只负责提供异步接口。
1、克隆前端项目到本地, 与nicon文件夹同级
git clone git@github.com:bolin-L/nicon-front.git
2、进入到nicon-front工程,安装依赖
cd nicon-front && npm install
3、运行打包命令、打包输出到nicon-front/dist文件夹下
npm run build
现在服务已经启动,静态资源已经输出,接下来需要配置nginx让请求可以访问到静态资源,异步接口可以访问到服务。
当前端静态资源与后端服务部署在同一台机器,并且使用本地管理图标库字体文件资源时的nginx配置如下
server {
listen 80;
listen [::]:80;
server_name icon.bolin.site;
access_log /var/log/nginx/bolin_sites_icon.access.log main;
error_log /var/log/nginx/bolin_sites_icon.error.log;
include common.conf;
# 静态资源请求
location / {
root /home/liaobolin/app/nicon-front/dist;
index index.html index.htm;
}
location ^~ /static {
root /home/liaobolin/app/nicon-front/dist;
}
# 配置异步接口请求到服务器
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:4843;
}
# 服务端的字体文件资源请求
location ^~ /resource {
root /home/liaobolin/app/nicon;
}
}
配置到此,平台基本就可以运行起来使用了,浏览器访问icon.bolin.site
就可以访问到首页
虽然该平台已经可以提供完成的登录、注册,图标库样式文件等静态资源的访问。但是对于企业来说,内部的工具平台最好只接受内部人或只能内网访问,对于静态资源最理想的就是放到自家的cdn服务器上,让平台操作更安全,访问所速度更快等等...
基于这样的需求,Nicon支持接入三方登录与字体文件资源上传到三方服务器,登录或上传需要的密钥等需要通过环境变量设置,比如放在start.sh
文件中,登录、上传等接入代码需要自己按照规范开发完成提PR,检查完毕后合并到工程master
分支中。目前代码中支持一下三方服务:
三方登录
- 网易openId登录
- github授权登录
三方上传
- 网易NOS服务
- 七牛云存储服务
三方服务接入文件夹结构如下
├── service
│ ├── login
│ │ ├── default
│ │ │ ├── config.js
│ │ │ └── index.js
│ │ ├── github
│ │ │ ├── config.js
│ │ │ └── index.js
│ │ ├── github_qiniu
│ │ │ ├── config.js
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── netease
│ │ ├── config.js
│ │ └── index.js
│ └── upload
│ ├── default
│ │ ├── config.js
│ │ └── index.js
│ ├── github_qiniu
│ │ ├── config.js
│ │ └── index.js
│ ├── index.js
│ ├── netease
│ │ ├── config.js
│ │ ├── index.js
│ │ ├── nosService.js
│ │ └── upload2NosService.js
│ └── qiniu
│ ├── config.js
│ └── index.js
1、在接入三方服务之前,必须先配置产品类型环境变量 productType
。加入到start.sh
文件中
export productType='github_qiniu';
比如我需要接入github三方登录与qiniu上传存储服务,那么我的productType
就设置为github_qiniu
。 那么在开发接入服务时文件夹名称必须为 github_qiniu
。
2、 在service/login/
文件夹下创建文件夹 github_qiniu
, 然后在该文件夹下创建config.js
, 与index.js
, 在index.js文件中必须暴露出async login
方法, 调用方法后需要返回指定格式的数据
// index.js
require('request');
let rp = require('request-promise');
let config = require('./config');
class GithubOpenIdLogin {
async login (ctx) {
return this.getUserBaseInfo(ctx);
}
async getUserBaseInfo (ctx) {
// your code
// login 方法返回的数据格式
return {
userName: tokenInfo.sub, // 必须且唯一
password: tokenInfo.sub,
email: openIdUserInfo.email,
nickName: openIdUserInfo.nickname,
fullName: openIdUserInfo.fullname
}
}
}
let loginIns = new GithubOpenIdLogin();
module.exports = loginIns.login.bind(loginIns);
3、在service/upload/
文件夹下创建文件夹 github_qiniu
, 然后在该文件夹下创建config.js
, 与index.js
, 在index.js文件中必须暴露出async upload
方法, 调用方法后需要返回指定格式的数据
// index.js
let config = require('./config');
let qiniu = require('qiniu');
class QiniuUpload {
async upload (dirPath) {
let fontMap = await this.uploadFonts(dirPath);
// 上传font完毕后替换css中的引用
let cssContent = await this.replaceFontsInCss(dirPath, fontMap);
let cssUrl = await this.uploadCss(dirPath, cssContent);
// 上传返回数据格式
return {
url: cssUrl, // 必须
cssContent: cssContent // 必须
};
}
}
let uploadIns = new QiniuUpload();
module.exports = uploadIns.upload.bind(uploadIns);
至此就已经配置完毕,启动工程就好了。
待补充....
MIT