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

測試工具 · 發表 2018-12-04 22:22:14

摘要：有了順手的開發環境, 就完成了萬里長城第一步. 接下來, 我們就用僅前段的方式實現測試 api 呼叫, 把介面返回的結果展示到我們的頁面上. ready Go ^_^ 引入 element-ui 登入 element官網檢視安裝文件按照文件的意思, 首...

有了順手的開發環境, 就完成了萬里長城第一步. 接下來, 我們就用僅前段的方式實現測試 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';
複製程式碼

很簡單是不是, 其實開發就是這麼簡單有趣 :smile:. 其中, 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: '介面請求異常, 請聯絡 :o:️️️:o:️️️',
type: 'error',
});
}
},
}
複製程式碼

PS: 放上一系列處理以後的程式碼的 ofollow,noindex">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

最後, 把剛剛獲取到的介面地址拿到我們的工具裡試一把 :smile:

哎呀我滴媽, 報錯了 :sweat:

下面貼出完整的報錯資訊, 供參考

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 介面的時候沒有任何問題, 但是當我們嘗試訪問百度介面的時候, 出現了報錯. 這是為什麼呢? 錯誤資訊如上, 大家可以百度一下試試唄

下集預告: 由於訪問百度介面報錯, 僅僅通過前端技術就要實現一個介面測試工具的方案是行不通的. 所以我們要考慮解決當前出現的問題. 處理跨域問題, 我們下集再見.

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

引入 element-ui

照著自己喜歡的樣子搞一套ui

引入 axios, 完善程式碼結構

最後, 驗證

您可能也會喜歡…