Python自动化运维以前端部署Mysql架构(三)
Hello，你们好！我是小安Sir，上一期主要讲到数据模型和表单，那么这期讲下前端的一些功能怎么实现。javascript
上一期连接：Python自动化运维以前端部署Mysql架构(二)html
本文会针对每个按钮的预览、删除、执行进行讲解，涉及的语言有点点多，可是咱们要作的是取重点部分拿来学习以达到触类旁通。前端
Python自动化运维java
前端部署Mysql架构三python
本文大纲mysql
Attention
ajax
1. 预览任务
sql
2. 删除任务数据库
3. 执行任务缓存
任务列表
01
1.1 任务列表界面
相信你们看这个任务列表已经看了不少次了，里面的玄机就请见下方代码。
1.2 任务列表代码
每个页面都离不开html和路由urls.py以及views.py函数。
本次任务列表是mys_tasktab.html，其部分代码见下方。
1.2.1python部分
1) urls.py
定义一个Dreaming/mys_tasktab的路由，如如下连接。
http://192.168.1.105:8000/Dreaming/mys_tasktab/
1 path('mys_tasktab/', views.mys_tasktab, name='mys_tasktab'),
2) views.py
打开此网页，会调用mys_tasktab函数
1### 展现全部mysql任务表单
2def mys_tasktab(request):
3 mys_tasklist = models.Mys_Install_Profile.objects.all()
4 return render(request, "Cloud/mys_tasktab.html", {"mys_tasklist": mys_tasklist})
1.2.2 html部分
mys_tasktab.html页面展现的核心代码
1<div class="box-body">
2 <table id="datatable2" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
3 <thead>
4 <tr>
5 <th class="center hidden-xs">序号</th>
6 <th class="center hidden-xs">时间</th>
7 <th class="center hidden-xs">IP</th>
8 <th class="center hidden-xs">端口</th>
9 <th class="center hidden-xs">应用</th>
10 <th class="center hidden-xs">任务类型</th>
11 <th class="center hidden-xs">数据库版本</th>
12 <th class="center hidden-xs">DB字符集</th>
13 <th class="center hidden-xs">DB缓存(MB)</th>
14 <th class="center hidden-xs">操做</th>
15 </tr>
16 </thead>
17 <tbody>
18 {% for task in mys_tasklist %}
19 <tr class="gradeA">
20 <td class="center hidden-xs">{{ forloop.counter }}</td>
21 <td class="center hidden-xs">{{ task.pub_date }}</td>
22 <td class="center hidden-xs">{{ task.db_ipaddr }}</td>
23 <td class="center hidden-xs">{{ task.db_port }}</td>
24 <td class="center hidden-xs">{{ task.app_name }}</td>
25 <td class="center hidden-xs">{{ task.zh_install_type }}</td>
26 <td class="center hidden-xs">{{ task.zh_db_type }}</td>
27 <td class="center hidden-xs">{{ task.db_charset }}</td>
28 <td class="center hidden-xs">{{ task.innodb_mem }}</td>
29 <td class="center hidden-xs">
30 <a name="read_task" href="javascript:"
31 onclick="read_task('{{ forloop.counter }}','{{ task.db_ipaddr }}','{{ task.db_port }}','{{ task.os_user }}'
32 ,'{{ task.app_name }}','{{ task.innodb_mem }}','{{ task.db_charset }}'
33 ,'{{ task.zh_install_type }}','{{ task.zh_db_type }}','{{ task.pub_date }}')">
34 <span>预览<span></a>
35 <a name="exec_task" href="javascript:" onclick="exec_task(this,{{ task.id }})">
36 <span style="margin-left:20px;">执行<span></a>
37 <a name="delete" href="javascript:" onclick="del_task(this,{{ task.id }})">
38 <span style="margin-left:20px;">删除<span></a>
39 </td>
40 </tr>
41 {% empty %}
42 <p>尚未任务，太懒了吧 ？</p>
43 {% endfor %}
44 </tbody>
45 <tfoot>
46 <tr>
47 <th class="center hidden-xs">序号</th>
48 <th class="center hidden-xs">时间</th>
49 <th class="center hidden-xs">IP</th>
50 <th class="center hidden-xs">端口</th>
51 <th class="center hidden-xs">应用</th>
52 <th class="center hidden-xs">任务类型</th>
53 <th class="center hidden-xs">数据库版本</th>
54 <th class="center hidden-xs">DB字符集</th>
55 <th class="center hidden-xs">DB缓存(MB)</th>
56 <th class="center hidden-xs">操做</th>
57 </tr>
58 </tfoot>
59 </table>
60 </div>
61 </div>
62 <!-- /BOX -->
63 </div>
64</div>
这一页代码就不详细讲了，很是简单。
预览任务
02
2.1 点击预览
预览任务的内容，目前仍是比较简单，等后续补充完成，就能够把脚本内容放在这个页面上。
2.2 预览界面代码
2.2.1 html部分
这个预览界面所须要用到的字段，只要点击"预览"，就会使用到里面字段的内容，不清楚的老铁，能够看看上一篇文章的数据模型。
1<a name="read_task" href="javascript:"
2 onclick="read_task('{{ forloop.counter }}','{{ task.db_ipaddr }}','{{ task.db_port }}','{{ task.os_user }}'
3 ,'{{ task.app_name }}','{{ task.innodb_mem }}','{{ task.db_charset }}'
4 ,'{{ task.zh_install_type }}','{{ task.zh_db_type }}','{{ task.pub_date }}')">
5 <span>预览<span></a>
2.2.2 python部分
1) Dreaming/urls.py 部分
同上，每一个小框框都要有属于本身的路由，只须要在urlpatterns添加多一行预览页面的路由就能够了。
2) Dreaming/views.py
新增如下内容，导入表单
1from .forms import MysInstallForm
1def read_mys_task(request):
2 try:
3 r_mys_task_detail = models.Mys_Install_Profile.objects.all()
4 return HttpResponse("1")
5 except:
6 return HttpResponse("2")
这个函数很是简单，就是每一个小小的页面都要有一个函数，能够把所有数据获取出来，再拿到前端筛选，这不是很建议，这里就图个方便。
2.2.3 JavaScript部分
在mys_tasktab.html页面在后面编写function，每当点击"预览"功能，就会获取如下字段信息，并结合适当的文字描述。这个往后能够完善为脚本预览，但这个功能我的感受对我的使用很是鸡肋，纯粹当练手。
1function read_task(id, db_ipaddr, db_port, os_user, app_name ,innodb_mem ,db_charset ,zh_install_type,zh_db_type,pub_date){
2 layer.open({
3 type: 1,
4 skin: "layui-layer-rim",
5 area: ['800px', '800px'], //宽高
6 title: app_name,
7 content: '<div class="text-center">' +
8 '<p> 任务序号 :'+id+'</p>' +
9 '<p> IP地址 :'+db_ipaddr+'</p>' +
10 '<p> 端口 :'+db_port+'</p>' +
11 '<p> 操做系统用户 :'+os_user+'</p>' +
12 '<p> 数据库版本 :'+zh_db_type+'</p>' +
13 '<p> 数据库字符集 :'+db_charset+'</p>' +
14 '<p> InnoDB 内存 :'+innodb_mem+'</p>' +
15 '<p> 任务类型 :'+zh_install_type+'</p>' +
16 '<p> 日期 :'+pub_date+'</p>' +
17 '</div>',
18 btn:['肯定', '取消'], yes: function(){
19 $.ajax({
20 url: '{% url "Dreaming:read_mys_task" %}',
21 type:"GET",
22 success: function(e){
23 if(e=="1"){
24 parent.location.reload();
25 layer.msg("关闭");
26 }else{
27 layer.msg("关闭失败");
28 }
29 },
30 })
31 },
32 });
33 }
JavaScript代码中，有部分是Ajax的写法(jQuery)
| 第1行 |
函数所须要的参数 |
| 第5行 |
框框页面的宽度和高度 |
| 第8-16行 | 适当的文字和获取的变量值 |
| 第18行 |
框框页面的"肯定"和"取消"按钮 |
| 第20行 |
声明提交的地址。 |
| 第21行 | 声明提交方式，有GET和POST两种，此处用GET。 |
| 第22行 | 提交成功后，根据反馈结果实现输出信息。 |
删除任务
03
3.1 点击删除
删除的时候，是会显示应用名称的。为了一个应用系统而删库，这也是让人很头疼的操做。哈哈！后续再完善就行了。
3.2 删除界面代码
3.2.1 html部分
1<a name="delete" href="javascript:" onclick="del_task(this,{{ task.id }})">
2 <span style="margin-left:20px;">删除<span></a>
3.2.2 python部分
1) Dreaming/urls.py 部分
2) Dreaming/views.py
新增如下内容，导入表单
1from .forms import MysInstallForm
get到对应的task_id，而且获取该行的信息，而后执行delete操做，就能够删除该行信息。
1@require_POST
2@csrf_exempt
3def del_task(requset):
4 task_id = requset.POST['task_id']
5 try:
6 task_row = models.Mys_Install_Profile.objects.get(id=task_id)
7 task_row.delete()
8 return HttpResponse("1")
9 except:
10 return HttpResponse("2")
JavaScript代码中，有部分是Ajax的写法(jQuery)
| 第2行 |
在视图函数前面添加装饰器的方式是为了解决提交表单中遇到的CSRF问题。 |
| 第6行 |
获取该行信息。 |
| 第7行 |
删除该行。 |
3.2.3 JavaScript部分
1function del_task(the, task_id){
2 var name = $(the).parents("tr").children("td").eq(4).text();
3 layer.open({
4 type: 1,
5 skin: "layui-layer-rim",
6 area: ["400px", "200px"],
7 title: "删除栏目",
8 content: '<div class="text-center" style="margin-top:20px"><p>是否删除[ '+name+' ]栏目</p> </div>',
9 btn:['肯定', '取消'], yes: function(){
10 $.ajax({
11 url: '{% url "Dreaming:del_task" %}',
12 type:"POST",
13 data: {"task_id":task_id},
14 success: function(e){
15 if(e=="1"){
16 parent.location.reload();
17 layer.msg("删除成功");
18 }else{
19 layer.msg("删除失败");
20 }
21 },
22 })
23 },
24 });
25 }
JavaScript代码中，有部分是Ajax的写法(jQuery)
| 第1行 |
函数所须要的参数task_id。 |
| 第2行 |
获取该task_id的应用名称，而且存于name变量值中。 |
执行任务
04
很高兴地告诉老铁们，执行任务的代码目前和删除任务的代码同样，接下来先讲解下Mysql的安装、MRP和MHA等部署。小安Sir到时会将Mysql的部署代码转成自动化安装的代码，再将这部分代码嵌入该系统中。
感谢阅读！！！
——————我是安老师下期预告的分割线——————
> 该板块暂告一段落，后续再更新。归来之时，即是系统完成之日。
> 接下来，请欣赏数据库相关文章。
注意：仅供学习参考，切勿用于商业用途，
若有须要，请购买正版！
- 1. 运维自动化部署
- 2. Linux自动化运维部署+运维
- 3. 前端自动化部署
- 4. 【运维】——Jenkins自动部署构建
- 5. 自动化运维——saltstack的部署
- 6. 运维自动化系统部署
- 7. 自动化运维之部署Puppet
- 8. Saltstack（自动化运维环境部署）
- 9. 运维自动化之系统部署
- 10. 运维自动化——系统部署
- 更多相关文章...
- • Maven 自动化部署 - Maven教程
- • Docker 架构 - Docker教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • SpringBoot中properties文件不能自动提示解决方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 运维自动化部署
- 2. Linux自动化运维部署+运维
- 3. 前端自动化部署
- 4. 【运维】——Jenkins自动部署构建
- 5. 自动化运维——saltstack的部署
- 6. 运维自动化系统部署
- 7. 自动化运维之部署Puppet
- 8. Saltstack（自动化运维环境部署）
- 9. 运维自动化之系统部署
- 10. 运维自动化——系统部署