总体设计

iconfont字体图标相比于图片图标具有：体积小，风格统一，易于组件化（颜色，size等）。之前项目中使用的iconfont.cn来管理字体图标，由于特殊原因图标库曾出现了一段时间无法上传新图标，作为免费的第三方服务，商业项目依赖它有可能导致外部的风险，因为考虑自己开发一个图标管理网站供开发及设计师使用，最基本的功能：包括用户管理（注册登录），图标管理（增删改查，上传等），图标库管理（增删改查，添加入库等）

数据存储

表设计

图标

{
  iconId: { type: Number, unique: true },
  iconName: String,
  iconContent: String,
  ownerId: number,
  createTime: Date,
  updateTime: Date
}

图标库图标

{
  iconId: {type: Number, unique: true},
  iconName: String,
  repos: [
    {
      repoId: Number,
      repoName: Stirng
    }
  ]
}

设计icon和iconBelongToRepo2个model，主要是为了icon能独立于图标库存在，能够复用于不同的图标库中。

图标库

{
  repoId: { type: Number, unique: true },
  repoUrl: String,
  repoName: String,
  repoDescription: String,
  iconPrefix: String,
  createTime: String,
  updateTime: String,
  cssUrl: Stirng,
  cssContent: Stirng
}

用户

{
  userId: { type: Number, unique: true },
  userName: { type: String, unique: true },
  password: String,
  repos: [
    {
      repoId: Number,
      repoName: String
    }
  ]
}

数据库

数据库使用mongodb来存储用户，图标等数据，redis来存储session。redis的好处实现了多服务器的Session共享，服务器重启session不丢失

代码设计

项目使用前后端分离方式开发分为2个项目

后端

后端使用nodejs, Koa框架运行服务器提供请求路由，静态文件服务以及业务相关逻辑。mongoose框架进行数据库操作。业务相关主要功能有：

1. 登录注册；注册及登录成功后保存用户id到redis，及sessionId到redis前端cookie
2. 图标库管理; 增删图标，修改图库信息，增删图标库用户
3. 图标管理；支持增删图标,上传svg图标使用gulp-iconfont来转换svg为tiff，woff等字体及css文件

代码结构

• config用来放项目配置如数据库端口，加密算法的salt等
• controller用来放抽象出来的数据库操作：如删除icon deleteIcon，获取当前用户的字体库列表getCurrentUserRepos等。根据业务范围划分为iconController, userController等。
• middleware用来放中间件，如登录验证等等
• router用来放请求路由
• service用来放专门的服务端复杂业务逻辑如上传svg字体
• tool用来放svg转换相关的方法
• util用来放常用的如加解密，字符串等等的工具方法

前端

前端项目为单页应用，使用vue + vue-router + vuex 开发，iview作为UI组件库，webpack进行项目开发和构建。

代码结构

• app.js 作为入口文件，初始化store，路由等
• base文件夹放置根组件app.vue，为topbar + 底部router-view结构，初始化用户信息等配置
• components放置通用组件，如empty，上传组件等等
• css用来放置全局的样式文件如commmon.less等
• router用来放置路由
• modules用来放置页面级的模块
• util用来放置工具方法

开发者：