一、实验概述

蓝鲸配置平台实现了内置模型属性的拓展，同时也能够根据不同的企业需求随时新增模型和关联关系，把网络、中间件、虚拟资源等纳入到CMDB的管理中。除此之外还增加了更多符合场景需要的新功能：机器数据快照、数据自动发现、变更事件主动推送、更加精细的权限管理、可拓展的业务拓扑等功能。不同企业之间可能会有自己需要定制的场景，因此本次实验通过快速创建自定义导航及页面的角度切入，使开发者掌握对蓝鲸配置平台的基本二次开发能力。

二、准备工作

1.git 仓库管理工具，命令行即可

2.安装node.js（>=6.0.0）

3.安装chrome，并添加vue-devtools扩展

4.编辑器，推荐vscode（vetur插件），sublime（安装vue syntax highlight插件）

5.从github.com/Tencent/bk-cmdb克隆源码

三、任务准备：启动调试模式

任务目标：在配置平台中新增加一项菜单，并开发一个界面以表格形式展示系统中所有的模型。

1.克隆源码

a)获取克隆地址

b)使用git克隆源码

git clone github.com/Tencent/bk-cmdb.git

注：如仅需要获取最新源码，可添加 --depth 1加快克隆速度

2.安装前端依赖

克隆完成后进入ui目录执行如下命令：

npm install 

3.调试模式配置(ui/config/index.js)

a)基础配置

API_URL: {dev.host}:{dev.port}/proxy/
host: 本地开发的域名
port: 本地开发的端口号

b)本地配置 host

windows: 在 C:\Windows\System32\drivers\etc\host 文件中添加“127.0.0.1 localhost”。

mac: 执行 “sudo vim /etc/hosts”，添加“127.0.0.1 localhost”。

c)配置API请求代理

proxyTable中将target配置为监听的webserver地址

d)启动调试模式

进入ui目录，执行命令：

npm run dev

待启动成功后可见如下界面

e)访问配置平台

在浏览器中输入localhost:9090即可进入调试模式的配置平台

四、实验任务：开发一个页面用表格展示系统所有模型

1.创建页面视图文件

在ui/src/views下创建custom目录，然后在

custom目录下创建index.vue页面视图文件

2.创建页面路由

打开ui/router/index.js，import视图文件，并添加配置项

3.创建静态菜单

打开bk-cmdb/src/ui/src/assets/json/static-navigation.json并创建自定义菜单

注：path字段需保持与路由配置中的path一致

4.将页面切换至配置好的导航

此时可见页面是空白，切控制台有报错，这是因为我们的视图文件还没

有内容。接下来就进行正式的页面开发

5.添加页面基础布局

在页面中添加一个基础表格，并设置表头属性

1. 在store中添加获取表格数据的基础API

在ui/src/store/modules/api目录下新建custom.js

在store入口中引入该模块

六、实验总结

本次实验主要带大家体验了在配置平台中如何启动前端的调试模式，配置自定义导航，开发自定义页面，希望通过本次课程，可以帮助大家在配置平台中进行二次开发，定制企业个性化页面。