【手把手帶你擼一個接口測試工具】第二步, 基於ElementUI實現前端佈局

有了順手的開發環境, 就完成了萬里長城第一步. 接下來, 咱們就用僅前段的方式實現測試 api 調用, 把接口返回的結果展現到咱們的頁面上. ready Go ^_^

引入 element-ui

• 登陸 element 官網
• 查看安裝文檔
• 按照文檔的意思, 首先執行 npm i element-ui -S
• 按照文檔提示, 在 main.js 中引入 element 代碼庫, 並使用. 修改後 main.js 代碼以下圖所示

  

• 引入完成後就能夠去 App.vue 裏測試一個 button 組件小試牛刀啦. 粘貼如下代碼替換 App 文件中的代碼便可.

<template>
  <div id="app">
     <el-button>按鈕組件, 小試牛刀</el-button>
  </div>
</template>

<script>

export default {
  name: 'App',
};
</script>

<style>
</style>
複製代碼

此時, 訪問瀏覽器的 這個地址, 記得 npm run dev 昂. 若是你的頁面中出現一個漂亮的 button, 說明你就成功辣 ^_^.

照着本身喜歡的樣子搞一套ui

<template>
  <div class="main-wrap">
    <el-form ref="form" label-width="80px">
      <el-form-item label="接口地址">
        <el-input v-model="url" placeholder="要包含 http OR https 喲">
          <el-button slot="append" icon="el-icon-arrow-right"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="請方式">
        <el-select v-model="method" placeholder="請選擇接口請求的方式">
          <el-option label="GET" value="GET"></el-option>
          <el-option label="POST" value="POST"></el-option>
        </el-select>
      </el-form-item>
      <h3>請求信息</h3>
      <el-form-item label="請求頭">
        <el-input type="textarea" v-model="header" placeholder="key1: value1
key2: value2"></el-input>
      </el-form-item>
      <el-form-item label="請求參數">
        <el-input type="textarea" v-model="params" placeholder="key1: value1
key2: value2"></el-input>
      </el-form-item>
      <h3>響應信息(拖動右下角的三角能夠控制展現框的大小)</h3>
      <el-form-item label="響應頭">
        <el-input type="textarea" v-model="resHeaders" placeholder="key1: value1
key2: value2"></el-input>
      </el-form-item>
      <el-form-item label="響應數據">
        <el-input type="textarea" v-model="resData" placeholder="key1: value1
key2: value2"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Main',
  data() {
    return {
      // 接口地址
      url: 'https://api.github.com/orgs/learn-cli-organization/repos',
      // 請求方法
      method: 'GET',
      // 請求頭
      header: '',
      // 請求參數
      params: '',
      // 響應頭
      resHeaders: '',
      // 響應字段
      resData: '',
    };
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
.main-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>
複製代碼

上邊的代碼, 是我比較喜歡的樣紙. 這個真的很差再解釋了, 若是有小夥伴看不懂. 仍是那句話. 評論區見 ^_^

固然啦 好好學習, 每天向上 仍是少不了的 Element官網.

引入 axios, 完善代碼結構

axios 官網 是一款 AJAX 請求工具, 兼容先後端. 同時也是個人程序員偶像 尤雨溪 推薦. 明人不說廢話.

• 首先, 執行 npm i axios -S 安裝 axios
• 根目錄下建立 utils 文件夾, 並在該文件夾下建立 index.js request.js 兩個文件內容以下.

request.js

import axios from 'axios';
export const request = axios;
複製代碼

index.js

export { request } from './request';
複製代碼

很簡單是否是, 其實開發就是這麼簡單有趣 😄. 其中, request.js 做爲請求層封裝, 如今看起來沒什麼用, 可是若是項目複雜的話能夠作公共配置. index.js 做爲 utils(工具箱的意思) 的統一出口想外部導出工具方法.

• 其次, 調整一下 components 目錄下的代碼. 此時代碼結構以下:

  

  相對比較清晰, components 下的三個文件分別對應了單頁面應用的三個部分. 這裏也亮一下代碼, 讓你們放心.

header.vue

<template>
  <div class="header-wrap">
    在線 http 接口測試工具 <i class="el-icon-success"></i>
  </div>
</template>

<script>
export default {
  name: 'Header',
};
</script>

<style>
.header-wrap {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #333;
}
</style>
複製代碼

footer.vue

<template>
  <div class="footer-wrap">
    項目純屬娛樂, 返回的結果不必定是對的, 請自行斟酌~~
  </div>
</template>

<script>
export default {
  name: 'Footer',
};
</script>

<style>

.footer-wrap {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #333;
}
</style>
複製代碼

App.vue

<template>
  <div id="app">
    <Header></Header>
    <Main></Main>
    <Footer></Footer>
  </div>
</template>

<script>

import Header from './components/header';
import Footer from './components/footer';
import Main from './components/main';

export default {
  name: 'App',
  components: {
    Header,
    Footer,
    Main,
  },
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
複製代碼

爲啥沒有 main.vue 呢? 由於就是咱們嘗試搞 UI 的那套, 我不會告訴你粘貼過來, 改一條 css 就能跑

• 最後, 咱們在主文件中引入封裝好的 axios import { request } from '@/utils';
• 爲第一個 input 右側的放大鏡 icon 添加點擊事件. <el-button slot="append" icon="el-icon-arrow-right" @click="onSubmit">
• 在 methods 裏添加 onSubmit 方法:

methods: {
    async onSubmit() {
      const headers = {};
      const params = {};
      // 解析請求頭
      this.header
        .split('\n')
        .map(header => header.split(':').map(item => item.trim()))
        .forEach((header) => {
          if ([header[0]] && header[1]) headers[header[0]] = header[1];
        });
      // 解析請求參數
      this.params
        .split('\n')
        .map(param => param.split(':').map(item => item.trim()))
        .forEach((param) => {
          if ([param[0]] && param[1]) params[param[0]] = param[1];
        });
      console.log('headers: ', headers, 'params: ', params);
      try {
        // 使用咱們封裝的 ajax 請求工具, 直接向測試 api 發起請求.
        const { headers: resHeaders, data } = await request(
          Object.assign({}, {
            url: this.url,
            method: this.method,
            headers,
          }, this.method === 'GET' ? { params } : { data: params }));
        // 將響應的響應頭寫到響應頭展現框
        this.resHeaders = Object.keys(resHeaders).map(key => `${key}: ${resHeaders[key]}\n`).join('');
        // 將響應的結果數據寫到結果展現框
          // JSON.stringify(data, null, 2) 這個方法能夠理解爲是作格式化, 讓數據更好看
        this.resData = JSON.stringify(data, null, 2);
      } catch (e) {
        console.log(e);
        this.$message({
          message: '接口請求異常, 請聯繫 ⭕️️️⭕️️️',
          type: 'error',
        });
      }
    },
  }
複製代碼

PS: 放上一系列處理之後的代碼的github地址

最後, 驗證

首先, 咱們驗證一個在這篇文章中提過的接口(獲取組織 github 項目列表), 效果是這樣子的.

啥都別說了, 這效果簡直 666.

趁着興頭, 咱們要再也不測試一個? 來個百度的接口試試.

如上圖, 咱們抓取到百度首頁獲取搜索推薦的接口, 接口 url 以下. 請求類型爲 GET https://www.baidu.com/s?ie=utf-8&mod=1&isid=3A58FCCEBA622663&ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=%E4%B8%BA%E4%BB%80%E4%B9%88%E5%8D%95%E8%BA%AB%E7%8B%97%E6%B2%A1%E6%9C%89%E5%A5%B3%E6%9C%8B%E5%8F%8B&rsv_pq=e4fac4eb00025263&rsv_t=2b97p3R1eUvOQAKm0wyNxRv9QYRSkcIvfh0h4EeDGfbqTK%2BSSH6%2BG63KrsE&rqlang=cn&rsv_enter=1&rsv_sug3=34&rsv_sug1=33&rsv_sug7=100&rsv_sid=27938_1456_21125_20719&_ss=1&clist=&hsug=&csor=11&pstg=5&_cr1=29797

最後, 把剛剛獲取到的接口地址拿到咱們的工具裏試一把 😄

哎呀我滴媽, 報錯了 😓

下面貼出完整的報錯信息, 供參考

Access to XMLHttpRequest at 'https://www.baidu.com/s?ie=utf-8&mod=1&isid=3A58FCCEBA622663&ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=%E4%B8%BA%E4%BB%80%E4%B9%88%E5%8D%95%E8%BA%AB%E7%8B%97%E6%B2%A1%E6%9C%89%E5%A5%B3%E6%9C%8B%E5%8F%8B&rsv_pq=e4fac4eb00025263&rsv_t=2b97p3R1eUvOQAKm0wyNxRv9QYRSkcIvfh0h4EeDGfbqTK%2BSSH6%2BG63KrsE&rqlang=cn&rsv_enter=1&rsv_sug3=34&rsv_sug1=33&rsv_sug7=100&rsv_sid=27938_1456_21125_20719&_ss=1&clist=&hsug=&csor=11&pstg=5&_cr1=29797' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
複製代碼

綜上, 測試訪問 github 接口的時候沒有任何問題, 可是當咱們嘗試訪問百度接口的時候, 出現了報錯. 這是爲何呢? 錯誤信息如上, 你們能夠百度一下試試唄

下集預告: 因爲訪問百度接口報錯, 僅僅經過前端技術就要實現一個接口測試工具的方案是行不通的. 因此咱們要考慮解決當前出現的問題. 處理跨域問題, 咱們下集再見.