一、实验概述

在传统运维场景中，有很多常规操作，需要我们登录到服务器手动执行命令或者脚本来实现，本次腾讯云TechWork，我们将带大家快速实战一个运维操作工具箱，展示通过蓝鲸平台提供的能力，在页面上点点鼠标，轻松实现这些常规的运维操作，提升运维效率，解放运维同学们的双手。

二、准备工作

1. 蓝鲸社区版环境及账号（培训方提供，不需要自己搭建）
2. 蓝鲸应用开发环境（安装指南见蓝鲸开发者中心）
3. 自己用起来顺手的IDE，推荐PyCharm或Sublime
4. Git仓库管理工具，命令行即可

三、实验架构

四、任务一：创建一个蓝鲸应用

任务目标: 在蓝鲸PaaS开发者中心中，创建一个蓝鲸应用，然后迁出项目初始化代码。

1.创建蓝鲸应用

• 创建一个代码仓库

• 打开蓝鲸开发者中心，创建一个蓝鲸应用

• 根据要求填写应用信息

• 确认创建

2.下载蓝鲸应用开发框架

• 下载开发框架

• 更新开发框架APP_ID, APP_TOKEN, BK_PAAS_HOST

• 解压framework并执行如下命令：

cd framework
git init
git remote add origin http://can.o.qcloud.com/yourname/public-demo.git
git add .
git commit -m "Initial commit"
git push -u origin master

3.安装Python依赖包

pip install -r requirements.txt

4.本地配置host并访问demo页面

在 C:\Windows\System32\drivers\etc文件中添加如下一行：

127.0.0.1 dev.paasce-poc.o.qcloud.com

• 更改本地开发数据库

• 生成初始化数据表：

python manage.py migrate

• 启动工程：

python manage.py runserver 8080

• 用浏览器打开：http://dev.paasce-a.o.qcloud.com:8080

五、任务二：前端页面开发

任务目标: 学习使用蓝鲸MagicBox的拖拽工程，快速拖拽出应用的前端页面，并加入到前面的开发框架中，并渲染出第一个页面。

1.利用蓝鲸MagicBox拖拽前端页面模板

2.后端渲染前端页面

• 修改home_application/views.py:

• 修改home_application/urls.py

• 修改页面导航：
• execute.html:

• history.html:

4.更换 执行任务 > 选择机器 表格为可操作表格：

• 在magicBox中找到可操作表格：

• 删除多余tr并复制代码：

• 删掉execute.html中的表格并将magicBox代码粘贴到此位置：

• 删掉多余代码：

六、任务三：实现首页功能

任务目标: 练习蓝鲸ESB组件调用，从配置平台查询业务列表和主机信息。

1.调用cmdb的业务查询接口，获取并展示业务列表

• 将functions/1_views_get_biz_list.py 拷到 home_application/views.py 并：

• 在home_application.views.home中：

• 在home_application/execute.html中渲染：

• 刷新页面，可以看到业务数据：

2.建立script表，查询并展示脚本列表

• 将functions/2_models_script.py拷到home_application/models.py

并：

• 在home_application/admin.py中：

• 执行命令：

python manage.py makemigrations
python manage.py makemigrations home_application
python manage.py migrate

• 访问admin界面：http://dev.paasce-poc.o.qcloud.com:8080/admin/ 可以看到Script表：

点击进去，添加几条脚本记录:

此处有一个需要注意的地方：

为了不让空格等符号被转义，需要将conf/default.py的MIDDLEWARE_CLASSES中的CheckXssMiddleware注释掉：

• 在home_application.views.home中：

• 在home_application/execute.html中渲染：

• 刷新页面，可以看到script数据：

3.添加脚本参数输入框id:

4.查询主机：

• 在execute.html中修改table

• 添加3_execute_tbody.html到templates/home_application/下，命令为：execute_tbody.html
• 将functions/4_views_get_hosts.py 拷到home_application.views中

并：

• 在home_application/urls.py中添加路由：

• 在浏览器中查看接口返回：

• 在execute.html中：

在最底的<script>标签中，删掉不用的两个js函数：

并将functions/4_execute_html_get_hosts.js拷入：

• 在浏览器控制台调用get_host()看效果：

• 在execute.html的<script>中添加如下代码：

• 于是页面会在初始化和业务发生变化时进行主机查询，并渲染表格。

5.执行脚本：

• 建立脚本执行表：

将6_models_operaton.py拷到home_application.models下。

• 添加admin, 并migrate生成表

• 将7_models_execute_n_run_script_n_poll_job_task.py中的三个函数拷到home_application.views中。

并：

• 在home_application.urls中添加路由：

• 在execute.html中删除掉<table>中的<tfoot>:

• 在execute.html中：

并删掉此<script>标签

• 在execute.html中，为执行按钮加上id：

• 将8.js中的submitSuccess()函数拷到execute.html底部的<script>标签中。
• 并将8.js中的标签和<script>标签拷到execute.html的head中。
• 可以在浏览器的控制台中调用submitSuccess()函数看效果：

• 将9.js拷到execute.html底部<script>标签的$(function()){ … }中，此时在页面上点击执行会报403错误：

需要从templates/home_application/base.html中拷两个标签到execute.html中：

• 此时再点击执行即可跳出任务提交成功的操作提示。并且可以在数据库中看到提交任务的记录：

• 在conf.default.py中添加celery\_imports。(并注释掉示例任务)：

• 执行如下命令启动celery worker进程：

python manage.py celery worker -settings=settings -l info

• 再次提交任务，即可看到任务可以正常执行：

七、任务四：实现历史操作查询功能

任务目标: 实现操作历史记录查询功能，可以查询作业的日志详情。

1.查询条件选项显示：

• 在home\_application.views.show\_history添加数据获取函数：

• 在history.html中渲染业务数据：

• 刷新页面可以看到业务数据：

• 在history.html中渲染用户数据：

• 刷新页面可以看到用户数据：

• 在history中渲染任务数据：

• 刷新页面可以看到任务数据：

2.添加日期选择插件：

• 在magicBox中选择日期插件：

• 拷代码到history.html相应位置：

• 修改：

3.更换显示table:

• 删掉原<table>和相关标签

• 将10.html中的<table>标签拷到刚才删掉的位置
• 将10.html中的<link>标签和<script>标签拷到头部

4.查询操作记录功能：

• 将11\_views\_get\_operations.py中的函数拷到home\_application.views
• 在home\_application.urls中添加路由：

• 在页面访问该路由：

• 将12\_history\_html\_table.js 拷到history.html底部<script>标签之中：

• 刷新任务记录页面：

• 更改查询条件，在控制台执行如下函数：

• 给查询按钮添加id:

• 在页面上体验查询条件
• 在将13.py中的函数拷到home\_application.views中
• 在home\_application.urls中添加路由：

• 在浏览器测试路由：

• 将14.js中的两个函数拷到history.html底部的<script>标签之内，

并：

将其中的两个标签拷到顶部

• 在页面上点击“详情”查看弹出效果
• 将15.html中的<style>标签拷到history.html的顶部
• 在页面上点击“详情”查看样式效果

八、扩展练习

1.如何将任务记录中的业务显示由id变为业务名称？

2.如何用报表显示脚本使用情况信息？

九、实验总结

本次实验主要带大家体验了在蓝鲸PaaS中快速开发一个运维类应用，希望通过本次课程，可以加深大家对蓝鲸平台及蓝鲸应用开发的理解，更多内容请查询蓝鲸官网，或腾讯云学院专业课。