Python自动化运维之前端部署Mysql架构(三)
Hello，大家好！我是小安Sir，上一期主要讲到数据模型和表单，那么这期讲下前端的一些功能怎么实现。
本文会针对每一个按钮的预览、删除、执行进行讲解，涉及的语言有点点多，但是我们要做的是取重点部分拿来学习以达到举一反三。
Python自动化运维
前端部署Mysql架构三
本文大纲
Attention
1. 预览任务
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的部署代码转成自动化安装的代码，再将这部分代码嵌入该系统中。
感谢阅读！！！
——————我是安老师下期预告的分割线——————
> 该板块暂告一段落，后续再更新。归来之时，便是系统完成之日。
> 接下来，请欣赏数据库相关文章。
注意：仅供学习参考，切勿用于商业用途，
如有需要，请购买正版！
往期回顾
Python自动化实战一 | 网页模板改造
Python切割文件教程一 | 我的“大马士革命刀"
Python切割文件教程二 | 我的“大马士革命刀"不Like补刀
Django博客教程一 | Django架构介绍
Django博客教程二 | Django入门版博客
Django博客教程三 | Django进阶版博客数据篇
Django博客教程四 | Django进阶版博客网页篇
Python
自动化运维
长按识别上面二维码，
关注Python自动化运维喔~