自動化運維平臺（前端vue）

時間 2019-12-20

原文原文鏈接

前端的大致流程：css

首先是Login登陸組件，當輸入用戶名和密碼以後，發送post請求到後端，而後根據返回的數據的是否正常，若是正常，將返回的token以及用戶名保存到sessionStorage中，並使用導航守衛進行跳轉到主頁面。主頁面中有默認頁面，目前沒有作，本打算默認頁面是顯示全部服務的服務狀態以及能夠重啓按鈕等操做的，除了默認按鈕以外就是就是應用名（*寶和*神）。而後當點擊這兩個應用名以後，會顯示相對應的服務名，服務名下面是一個表格，這個表格是公共組件的，裏面的數據是從Vuex這個公共組件裏面獲取的，也就是當你點擊服務名的時候會將相應的服務名添加到vuex中，這樣作的好處是當你點擊*神的時候，下面的公共組件也會顯示*寶的服務名，當點擊*寶的時候也會顯示*神的服務名。前端

疑問：對於前端的頁面認證，我使用的是給路由中添加元數據，而後再主入口組件中使用全局守衛進行判斷這個元數據，若是知足判斷是否已經登陸（去seessionStorage中取值），若是沒有登陸，使用導航守衛跳轉到登陸頁面。vue

問題：前端已經作了登陸頁面驗證，後端是否還須要使用DRF中的登陸認證組件進行登陸頁面驗證？python

以下，定義在入口組件中的全局守衛，至關於一個看門狗，每一個請求都會通過這個全局守衛，對元數據是auth:true進行驗證。ios

下來根據主頁面來講說主體思路：vue-router

先看主入口文件部份內容，導入了不少東西，能夠進行全局引用：
vuex

import Vue from 'vue'
import App from './App'

import router from './router'                        #這是路由組件



// elementUI 導入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 調用插件
Vue.use(ElementUI);

//引入全局的組件
import Public from './components/Public/Public'        #這是上圖中所說的公共組件

Vue.component(Public.name,Public);

//引入Vuex,進行狀態管理                                #這是Vuex，進行狀態管理
import store from './store'

//導入axios                                            #這是axios，之後再其餘地方使用this.$http. 的方式引用
import * as api from './restful/api'
console.log(api)
Vue.prototype.$http=api;

//導入全局樣式
import '../static/global/global.css'

下來是路由組件：路由組件中children，字體意思是這個組件有孩子組件，這個children是前端同事幫我加的。和本身以前寫的有點差異，不過以爲這個更規範。
shell

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)

import HelloWorld from '@/components/AppName/HelloWorld'
import CaiBao from '@/components/CaiBao/CaiBao'
import HeShen from '@/components/HeShen/HeShen'
import Login from '@/components/Login/Login'
import ServiceStatus  from '@/components/ServiceStatus/ServiceStatus'

export default new Router({
  linkActiveClass: "is-active",
  mode: 'history',

  routes:[


    {
      path:'/',                                             #首先是去找Login組件
      name:'login',
      component:Login
    },

    {
      path:'/heyan/detailpage',                    #登陸成功後，登陸組件中會使用導航守衛跳轉到這個
      name:'HelloWorld',
      component:HelloWorld,
        children:[
          {
            path: '/',                             #這個是我在開始時說的那個默認顯示頁面，想用python-ansible-api顯示組件相關信息，還沒作                                  
            name: 'ServiceStatus',
            component:ServiceStatus,
          },
            {
              path:'/caibao/:userId',               #當在HelloWorld組件中點擊router-link時跳轉到這裏
              name:'caibao',
              component:CaiBao,
              meta:{
                  //若是是true，表示訪問該組件時須要登陸        #前面說的元數據
                  auth:true
              }
            },
            {
              path:'/heshen/:userId',            #和上面的同樣
              name:'heshen',
              component:HeShen,
              meta:{
                  //若是是true，表示訪問該組件時須要登陸
                  auth:true
                }
            },
        ]
    },



  ]


})

App組件中只有一行router-view，和Login組件對應，提供出口。數據庫

Login組件： loginHandler方法是點擊登陸按鈕觸發的，this.$http.userLogin(params)這個是發送axios請求，並攜帶參數，這種發送axios請求的方式以前說到的。而後根據返回的值判斷是否要健token和用戶名存放到sessionStroage，還有就是跳轉到HelloWorld組件中。element-ui

methods:{

  loginHandler(){

      let params = {
          username:this.username,
          pwd:md5(this.password),

      };
      console.log(params);
      this.$http.userLogin(params)
      .then(res=>{
          console.log(res);
          if (!res.data =="") {
              sessionStorage.setItem('access_token',res.data);
              sessionStorage.setItem('username',res.username);
              this.$router.push('/heyan/detailpage');


         }
      })
      .catch(err=>{

          console.log(err);

      })
  },

}

HelloWorld組件：根據鉤子函數，當這個組件建立的時候會發送一個get請求從而從數據庫中獲取到相應的應用名，而後根據for循環顯示到頁面中，最後使用router-link進行跳轉到路由中的children部分。須要傳遞路由參數params。

<script>
export default {

  name: 'LuffyHeader',
  data(){
    return{
      AppnameList:[],
    
    }
  },

  created() {

    this.getAppnameList();
    console.log(123)

  },

  methods:{
    getAppnameList(){
      this.$http.appnameList()
        .then(res=>{
            // console.log(res);
            this.AppnameList = res
        })
        .catch(err=>{
          console.log(err);
        });
    },

    }


};
</script>

helloworld組件中有兩個子組件裏面的代碼是大致相同的，只說一個CaiBao這個組件。

CaiBao組件：當進入這個組件以後首先使用鉤子函數created發送一個get請求，主要是獲取到根據應用的id獲取到相應的服務名。public是公共組件（也是表格），當點擊服務名的時候調用StorageServer方法，我將這個服務名保存到vuex中，起先我是直接保存爲數組，後來發現之後若是獲取到分支以後，分支如何和服務名創建關係，因此此處我使用let聲明瞭一個對象，對面裏面保存了服務名和分支名，起先默認是空的。除此以外爲了一個服務只保存一次，我將vuex裏面中指循環出來，並將服務名保存到一個新的數組中，而後判斷點擊的服務名是否在這個數組中，若是不在添加進去。

<template>
  <div>
    <div id="test">
      <el-row>
        <el-button class="button-style" type="primary" v-for='(server,index) in servicelist' :key="server.id" @click="StorageServer(server.title)">{{server.title}}</el-button>
      </el-row>
    </div>
    <public />
    </div>
</template>

<script>
    export default {
      name: "Caibao",
      data() {
        return {
          servicelist: [],
        }
      },
      created() {
        this.GetServiceList();
      },
      methods: {
        GetServiceList() {
          // console.log(this.$route)
          this.$http.ServiceList(this.$route.params.userId)
            .then(res => {

              this.servicelist = res;
              // console.log(this.servicelist)
            }).catch(err => {
            console.log(err)
          })

        },
        StorageServer(servername) {
              var  StoreService = [];
              let ServerNameAndBanrch = {'servername':"",'branch':null};

              this.$store.state.ServerNameAndBanrch.forEach(function (item,index) {    #這裏我使用for循環的方式將vuex值循環出來，而後將服務名追加到
                                                                                       #新的數組，若是新增的服務名不在這裏，使用dispatc提交到vuex中。
                StoreService.push(item.servername)
              });

              if(StoreService.indexOf(servername)> -1) return;
              ServerNameAndBanrch.servername = servername;
              this.$store.dispatch('addserver',ServerNameAndBanrch);
        }
    }
      }
</script>

下來時public組件，數據到放到了vuex，那應該到拿出來了吧。首先仍是使用create進行方法在組件建立的時候去vuex中拿一次數據，而後咱們應該實時的監聽vuex中的值，當新增了新的任務以後，咱們要實時的顯示到public組件中，因此我使用watch針對vuex中這個數據屬性進行了實時的監聽，而後把新到的數據顯示到頁面中。

<script>
    export default {
      name: "Public",
      data() {
        return {

          input10:'',
            tableData: [
              /*{
              servername: 'zyp',
              branch:"master",

            },*/

            ]
        }
      },
      created() {

          if(this.$store.state.ServerNameAndBanrch.length>0){
            this.$store.state.ServerNameAndBanrch.map(item =>{
              let obj={};
              obj.servername = item.servername;
              obj.branch = item.branch;

              this.tableData.push(obj)

            })
          }
      },


      watch:{
        '$store.state.ServerNameAndBanrch':{
          handler:function () {
            this.dataVuex()
          },
          deep: true
        }

      },
      methods:{
        dataVuex(){
          console.log(this.$store.state.ServerNameAndBanrch);
          this.tableData = [];


          if(this.$store.state.ServerNameAndBanrch.length>0){
            this.$store.state.ServerNameAndBanrch.map(item =>{
              let obj={};
              obj.servername = item.servername;
              obj.branch = item.branch;
              this.tableData.push(obj)


            });
             console.log(this.tableData)
          }

        },
        /*顯示分支:將服務名傳遞到後端執行shell並返回執行結果*/
        ObtainBranch(index,servername){
          console.log('test',servername.servername)

        },
        /*刪除選項*/
        serverDelete(index,servername){
          this.$store.state.ServerNameAndBanrch.splice(index,1)
        }

      }
    }

說了不少，其實真正的功能尚未說到，也就是上述截圖中的獲取分支，打包，還有重啓這幾個按鈕，這幾個按鈕的代碼沒有寫，可是使用的技術已經測試經過了，下面使用單獨的一篇來進行說明。

針對第一次下前端代碼的感悟：