[原创]自动化运维工具前端实现要点

Posted 2021-04-26 运维部落

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[原创]自动化运维工具前端实现要点相关的知识，希望对你有一定的参考价值。

此篇文章是我们公众号推出的Ansible Web自动化的旅程系列文章，文章有《[原创]Ansible Web自动化的旅程》、《[原创]编写Ansible的web接口及面临的难点》、《[原创]为何不使用Ansible的api调用命令阐述》，各位读者可查阅我们的公众号。

前端的基础知识介绍

　　大家在阅读下一节内容之前，有空去了解下html，CSS，javascript这3部分的内容，不需要深入了解，只要知道他们3者是怎么结合的，其中HTML，CSS读者们可以稍作了解即可，我们将会使用Bootstrap3替换大部分HTML，CSS的部分，借此来简化我们静态页面的编写，而对于JavaScript，可能读者要多花点心思了，至少知道原生JavaScript的一些基础语法规则即可，之后我们会使用Angularjs来简化我们对JavaScript的编写。

一、前端HTML、CSS简单介绍

　　对于Bootstrap3，大家可以通过google或者baidu搜索Bootstrap中文教程即可，里面有详细的介绍，资料比较详尽，笔者就不多作介绍，但考虑到后面章节的介绍，还是会简单介绍我们后面会用到的部分。

首先我们介绍下html文件的基础结构如下：

<html lang="zh-CN">
    <head> 
        <meta charset="utf-8">
        <title>Bootstrap3</title> 
        <link href="css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body>
        web内容
        <script ></script> 
    </body> 
</html>

　　我们首先要关心的是那些静态文件CSS，JavaScript的引用问题，原则是尽量把CSS文件的调用放到head这个标签里面，而为了加快JavaScript文件的读取速度，我们推荐把所有的JavaScript文件放在最后即body标签的末尾。

Bootstrap3的基础知识：

　　Bootstrap3使用的栅格类布局，它把页面的每一行分为12个栅格，当你用到其中一个栅格编写内容是只需要在对应HTML标签中使用col-md-1就可以了。例如：

<div class="col-md-1">.col-md-1</div>

　　我们后面使用的Bootstrap3内容不会很多，主要以教学和介绍为主，我们列举下我们稍后会用到的一些class类，请大家对这些稍作了解：

col-md-* ：基础栅格类
col-md-offset-*：栅格后退类
form-control ：输入美化类，主要用于标签input
control-label ：标签美化类，主要用于标签label
btn-primary ：按钮美化类，主要用于标签button

二、前端JavaScript简单介绍

　接下来，我们来介绍下JavaScript中最流行的框架Angularjs，它以简单易用著称，它最主要的特性还是双向数据绑定，能帮助我们很简单的把HTML和JavaScript里的内容关联起来，在使用之前，我们需要对Angularjs做一些调整：

1）定义我们Angular的模块的名字，在这里我们定义为myApp
2）由于如果要在Django中使用Angularjs的话，我们要把HTML数据绑定部分的标记符从{{}}改为其他的标记符（我们在这里改为（（））），来避免与原来Django模板标签的冲突，因为Django模板也是使用{{}}。
3）最后我们在Django请求上默认加上csrftoken的认证，这样可以避免很多问题，这也是让使用Django的新手经常碰到，且很头痛的问题。

var app = angular.module('myApp', []);
    app.config(function($interpolateProvider) {
      $interpolateProvider.startSymbol('((');
      $interpolateProvider.endSymbol('))');
    });
app.run(
  function($http) {
        $http.defaults.xsrfCookieName = 'csrftoken';
        $http.defaults.xsrfHeaderName = 'X-CSRFToken';
    });

　我们之后会使用它的一些关键组件，最好请大家做好了解，不过我们也将在后面的一节，结合例子来给大家作介绍：