手把手教你基於 JMeter 開發一個自動化測試平臺 (2)

大家好，我們繼續來進行基於 JMeter 的自動化測試平臺的開發實戰。
上次的教程中，我們已經完成了工程開發環境的搭建，那麼現在我們可以進入到程式碼，今天先以一個簡單的例子，來帶著大家熟悉一下。

歷史文章

手把手教你基於 JMeter 開發一個自動化測試平臺 (1)

今天的目標

我們先來明確一下今天的目標，我們要選擇一個相對簡單的目標來作為入門，透過這個過程來熟悉技術棧、專案和開發流程。
經過一番斟酌，我選擇的目標是開發一個新的使用者資訊頁面，因為一來 MeterSphere 這個工程中原來的使用者資訊頁面不是太好看，二來這個功能相對簡單，不涉及太多的業務內容，比較適合上手。

原型設計

現在系統裡面個人資訊的頁面是長這個樣子的，我們就來改造一下這個頁面，來一邊學習一邊熟悉專案。

今天我們的內容主要針對前端部分。

這裡我們來做一下原型設計，大概做成下面這樣。

梳理任務

• 一個頂層標籤：飛致雲學堂，後續我們的內容會放到這裡。
• 一個左側選單，因為後續的演示內容會都放到這，所以我們要分開選單。
• 一個新的人資訊頁面：我們就按上面的原型來實現一個頁面。

準備好助手

再開始之前，我們要先準備幾個助手，也就是先開啟幾個相關的文件，可以隨時查閱。這次的內容主要關聯的都是前端部分，所以只准備前端的即可。

• https://cn.vuejs.org/v2/guide/ vue 的文件，可以隨時用上
• https://router.vuejs.org/zh/ vue-router 的文件
• https://element.eleme.cn/#/zh-CN/component/installation element-ui 的文件
• https://metersphere.io/docs/index.html MeterSphere 的文件

接下我們就開始吧

首先我們要做的第一件事是先分析一下程式碼，就像咱們開始的時候書的一樣，我們是在一個開源專案的基礎上來進行開發和學習，那麼我們要更多的利用專案已經是做的內容。

導航欄和基本頁面

第一步我們先來新增頂部的導航資訊。
這裡我們要找到頂部導航欄位置。他的具體檔案位置如下：

接下來，我們就在裡面加入我們的飛致雲學堂導航連結。 當中加入如下：

<el-menu-item index="/class" onselectstart="return false"> {{$t('commons.class')}} </el-menu-item>

我們會發現 $t('commons.class') 的程式碼，這是因為專案已經進行了多語言的處理，我們也遵循規則，使用多語言的方式，接下來我們就到 i18n 的檔案中新增對應的配置，檔案位置在：

metersphere/frontend/src/i18n/zh-CN.js

多語言的內容這裡我們演示一次，後續的內容中就不再重複介紹。

在上面新增頂部導航欄的時候，我們新增了一條路由 /class ，那麼我們接下來就來配置這條路由資訊。專案的前端路由資訊都在如下檔案中配置：

metersphere/frontend/src/business/components/common/router/router.js

我們給自己新增一塊路由資訊，後面我們其他示例的路由資訊也都放在 /class 下：

{
  path: "/class",
  components: {
    content: Class
  }
}

接下來，我們再來建立/ class 路由對應的頁面，我們也給自己建立一個專門的資料夾：

metersphere/frontend/src/business/components/class

之後我們透過 IDE 直接建立一個 VUE 檔案 ，Class.vue ，然後隨便寫點內容，像下面這樣：

<template>
    <div>
      <span>111111</span>
    </div>
</template>

<script>
    export default {
        name: "Class"
    }
</script>

<style scoped>

</style>

那麼新增好了資訊之後，我們來重新整理一下頁面，會發現頂部的導航已經出來了，點選一下，是一個只有 11111 的頁面。

新增左側選單

因為我們後續還會新增其他內容，所以這裡我給我們的頁面再加入一個左側選單。
這裡我們可以參考 MeterSphere 已經開發好的左側選單，多利用一下已經做好的元件。我們修改一下 Class.vue：

<template>
  <ms-container>

    <ms-aside-container>
      <ms-new-current-user/>
      <el-divider/>
      <h1>{{$t('commons.class')}}</h1>
      <class-menu/>
    </ms-aside-container>

  </ms-container>
</template>

<script>
  import MsAsideContainer from "../common/components/MsAsideContainer";
  import MsContainer from "../common/components/MsContainer";
  import MsMainContainer from "../common/components/MsMainContainer";
  import MsCurrentUser from "../settings/CurrentUser";
  import ClassMenu from "./ClassMenu";
  export default {
    name: "Class1",
    components: {MsContainer, MsAsideContainer, MsCurrentUser, ClassMenu},
  }
</script>

<style scoped>
</style>

現在我們的程式碼長這個樣子了，這裡我們用到了專案中已經開發好的幾個元件，MsContainer, MsAsideContainer, MsNewCurrentUser，主要要在 script 部分引入和宣告各個元件。
然後我們自己再寫一個自己的選單內容元件 ClassMenu。

<template>
  <el-menu menu-trigger="click" :default-active="$route.path" router>
      <el-menu-item index="/class/userMsg">{{$t('commons.personal_info')}}</el-menu-item>
  </el-menu>
</template>

<script>
  import {checkoutCurrentOrganization, checkoutCurrentWorkspace} from "../../../common/js/utils";
  export default {
    name: "ClassMenu",
    data() {
      return {
        isCurrentOrganizationAdmin: false,
        isCurrentWorkspaceUser: false,
      }
    },
    mounted() {
      this.isCurrentOrganizationAdmin = checkoutCurrentOrganization();
      this.isCurrentWorkspaceUser = checkoutCurrentWorkspace();
    },
  }
</script>

<style scoped>
  .el-menu {
    border-right: 0;
  }
  .el-menu-item {
    height: 40px;
    line-height: 40px;
  }
  .icon {
    width: 24px;
    margin-right: 10px;
  }
  .account {
    color: #5a78f0;
  }
  .organization {
    color: #b33a5b;
  }
  .workspace {
    color: #44b349;
  }
</style>

這裡我們借用了專案中已經有的元件，來處理系統中切換組織和工作空間的邏輯。
接下來，我們在看重新整理一下頁面，可以看到變成了這個樣子

個人資訊頁面

在有了左側選單之後，我們就來完成選單跳轉的個人資訊頁面。
我們先在 class 資料夾下建立 UserMsg.vue

metersphere/frontend/src/business/components/class

我們先把程式碼貼出來：

<template>
  <div v-loading="result.loading">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>個人資訊</span>
        <el-button style="float: right; padding: 3px 0" type="text">編輯</el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple" align="center">
          <div class="block">
            <el-image
              style="width: 100px; height: 100px"
              :src="userData.img"
              fit="contain"></el-image>
          </div>
        </div></el-col>
        <el-col :span="18"><div class="grid-content bg-purple">
          <el-form ref="form" :model="form" label-width="">
            <el-form-item label="ID">
              <span>{{userData.id}}</span>
            </el-form-item>
            <el-form-item :label="$t('commons.username')">
              <span>{{userData.name}}</span>
            </el-form-item>
            <el-form-item :label="$t('commons.email')">

              <span>{{userData.email}}</span>
            </el-form-item>
            <el-form-item :label="$t('commons.phone')">
              <span>{{userData.phone}}</span>
            </el-form-item>
              <el-form-item :label="$t('commons.create_time')">
              <span>{{userData.createTime}}</span>
            </el-form-item>
                <el-form-item :label="$t('commons.operating')">
              <template>
                <ms-table-operator-button type="primary" circle :tip="$t('member.edit_information')" icon="el-icon-edit"
                           @user1="edit(userData)" />
              </template>
            </el-form-item>
          </el-form>
        </div></el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
    import {getCurrentUser} from "../../../common/js/utils";
    import MsTableOperatorButton from "../common/components/MsTableOperatorButton";

    export default {
      name: "UserMsg",
      components:{MsTableOperatorButton},
      data(){
          return {
            result: {},
            userData:{},
            updateVisible : false,
            editPasswordVisible : false,
            isLdapUser:false,

            form:{}
          };
      },
      methods:{
        currentUser: () => {
          return getCurrentUser();
        },
        initMsg(){
          this.result = this.$get("/user/info/" + this.currentUser().id, response => {
            let data = response.data;

            this.isLdapUser = response.data.source === 'LDAP' ? true : false;
            this.userData = data;
          })
          this.result.loading = true;
        },edit(userdata) {

        },handleClose: () => {

        },updateUser(updateUserForm) {

        },
      },
      activated() {
          this.initMsg();
      }
    }
</script>
<style scoped>
</style>

我們分頁面模板和 JS 來看一下。

• template：我們按照文章最前面設計的原型，來實現以下頁面，同時，我們也利用了專案中包裝好的一個按鈕，這個按鈕也是在 ElementUI 的按鈕基礎上進行包裝。其他的部分，大家如果有問題可以自己查一下 ElementUI。
• JS：我們目前先把查的功能實現，所以很多方法，只是先留出一個空方法。

接下來我們再新增一下路由資訊，現在是這個樣子：

{
      path: "/class",
      components: {
        content: Class
      },
      children: [
        {
          path: 'userMsg',
          component: UserMsg,
        }
        ]
    },

注意在上面要 import 一下 userMsg

import Class from "../../class/Class";
import UserMsg from "../../class/UserMsg";

我們再來重新整理一下頁面，現在點選左側的選單，可以看到我們的頁面了。

到這裡，我們已經有了一個新的頁面的雛形，因為篇幅所限，今天我們的分享就先到這裡，下次我們繼續來完善修改資訊，上傳，後端等部分的內容。