CMDB 前端技术评审

1、技术选型
2、数据交互流图
3、代码架构设计说明
4、排期规划及阶段性产出时间点

1.技术选型

前端渲染

前端渲染选用的是简洁，轻量的vuejs：数据驱动，模块友好，支持组件化。

构建打包

webpack，其可以按需加载各种资源

依赖包管理

npm

2.数据流程

用户打开网站的时候，先读 config 文件，config，文件主要是为了使界面的导航栏可配置，这里的界面仅仅是静态的界面的展示，动态的数据的填充不在config中配置。

 //config.js
{
    navLinks: {
        home: {
            href: "http://admin.ct108.com",
            icon: "icon-home",
            show: !0,
            target: "_self",
            text: "畅唐运维后台"
        },
        logo: {
            href: "http://admin.ct108.com",
            icon: "icon-logo",
            show: !0,
            target: "_blank"
      },
        product: {
            recent: "基础资源管理",
            showAll: !0,
            show: !0,
            text: "产品与服务"
      },
        user: {
            href: "javascript:;",
            show: !0,
            icon: "icon-user"
      }
    },
    categories: [{
        id: "basicManage",
        name: "基础资源管理",
        products: ["preLib", "server"]
     },{
        id: "backStage",
        name: "后台管理",
        products: ["member", "role"]
     }],
     products: {
        preLib: {
            description: "test-test",
            icon: "icon-preLib",
            link: "https://www.ct108.com",
            name: "备库管理",
            openStatus: !0
        },
        server: {
            description: "test-test",
            icon: "icon-server",
            link: "https://www.ct108.com",
            name: "后台管理",
            openStatus: !0
        },
        member: {
            description: "test-test",
            icon: "icon-member",
            link: "https://www.ct108.com",
            name: "角色管理",
            openStatus: !0
        },
        role: {
            description: "test-test",
            icon: "icon-role",
            link: "https://www.ct108.com",
            name: "角色管理",
            openStatus: !0
        }
}

接下来就是请求人员权限的接口，根据获取到的权限数据，渲染界面，将没权限的菜单项置为不可用。
然后每个菜单的子页面通过iframe的形式嵌进来，每个子页面的开发就和以前的开发流程是一样的了，与外面的框架是独立的。

3.项目主要的目录设计

Project
      ...
      |-asset
      |-src
          |-css
          |-doc
          |-js
             |-app
             |-component
                   |-project1
                   |-project2
                   |-common
             |-module
                   |-common
                          |-interface.js
                          |-const.js
                          |-permission.js
             |-router
             |-store
          |-img
      |-view
      ...
    ```
#4.组件化开发
先简单的介绍，什么是组件化开发，一图以蔽之：

![components1.png](http://upload-images.jianshu.io/upload_images/5893727-40fae1956b146262.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
具体到本次项目开发，我将头部导航栏 `topBar` 和侧边栏 `sidebar` 分成了两个单独的组件。当然每个页面也被分解成了一个个的组件，如：
 + 搜索部分的 `search` 组件；
 + 数据展示区的 `list` 组件；
 + 用于编辑/修改的 `update` 组件；
 + 还有展示详细信息的 `detail` 组件等等
 + ...

#5.组件之间的数据管理
利用 `vuejs` 的组件化开发方式来开发一个大型项目，就需要用vuex来管理组件的数据和状态，将组件需要共享的数据放到vuex中以特定的规则进行管理和使用。比如，`search` 和 `list` 组件都需要用到后台返回的列表数据 `tableList`， 这样我们就可以将列表数据 `tableList` 放到 `vuex` 中进行维护，`search` 组件负责对 `tableList` 进行更新，而 `list` 组件则负责将 `tableList` 展示到页面上。
#6.排期规划
项目可以在下礼拜四开始开发，