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.组件化开发
先简单的介绍，什么是组件化开发，一图以蔽之：
具体到本次项目开发，我将头部导航栏 `topBar` 和侧边栏 `sidebar` 分成了两个单独的组件。当然每个页面也被分解成了一个个的组件，如：
+ 搜索部分的 `search` 组件；
+ 数据展示区的 `list` 组件；
+ 用于编辑/修改的 `update` 组件；
+ 还有展示详细信息的 `detail` 组件等等
+ ...
#5.组件之间的数据管理
利用 `vuejs` 的组件化开发方式来开发一个大型项目，就需要用vuex来管理组件的数据和状态，将组件需要共享的数据放到vuex中以特定的规则进行管理和使用。比如，`search` 和 `list` 组件都需要用到后台返回的列表数据 `tableList`， 这样我们就可以将列表数据 `tableList` 放到 `vuex` 中进行维护，`search` 组件负责对 `tableList` 进行更新，而 `list` 组件则负责将 `tableList` 展示到页面上。
#6.排期规划
项目可以在下礼拜四开始开发，