With a smooth development environment, the Great Wall is completed the first step. Next, we implement the test API call just in the front section and display the results returned by the interface on our page. Ready Go ^_^

Introducing the element – the UI

  • Go to Element’s website
  • Viewing installation Documents
  • Execute first, as the documentation saysnpm i element-ui -S
  • Follow the instructions in the documentationmain.jsTo introduce the Element codebase and use. The modifiedmain.jsThe code is shown below
  • As soon as the introduction is completeApp.vueTo test onebuttonComponent test. Paste the following code to replace the code in the App file.
<template> <div id="app"> <el-button> </el-button> </div> <script> export default {name: 'App', }; </script> <style> </style>Copy the code

At this point, access the browser’s address, remembering NPM run dev. If a nice button appears on your page, you are successful.

Make a UI that looks like it to you

<template> <div class="main-wrap"> <el-form ref="form" label-width="80px"> <el-form-item label=" interface address "> <el-input <el-button slot="append" icon="el-icon-arrow-right"></el-button> </el-input> </el-form-item> <el-form-item label=" placeholder "> < EL-select V-model ="method" placeholder=" placeholder "> <el-option label="GET" value="GET"></el-option> <el-option label="POST" value="POST"></el-option> </el-select> </el-form-item> < H3 > <el-form-item label=" request header" > < EL-input type="textarea" V-model ="header" placeholder="key1: value1 key2: Value2 "></ el-form-item> <el-form-item label=" Request parameter ">< el-input type="textarea" V-model ="params" placeholder="key1: value1 key2: Value2 "></el-input> </el-form-item> < H3 > Response information (drag the triangle in the lower right corner to control the size of the display box)</h3> <el-form-item label=" response header ">< EL-input type="textarea" v-model="resHeaders" placeholder="key1: value1 key2: Value2 "></ el-form-item> </el-form-item label=" response data ">< 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 {/ / interface address url: 'https://api.github.com/orgs/learn-cli-organization/repos', / / request method: 'GET', / / request header header: "', / / request parameter params:" ', / / response headers resHeaders: "', / / response field resData: ' '}; }, methods: { }, }; </script> <style lang="less" scoped> .main-wrap { width: 100%; height: 100%; overflow: auto; } </style>Copy the code

The code above is my favorite sample paper. This is really hard to explain, if you don’t understand. Again, see ^_^ in the comments section

Of course, good good study, day day up or little Element’s official website.

Introduce AXIOS to improve the code structure

The Axios website is an AJAX request tool that is compatible with the front and back ends. It’s also recommended by my programmer idol, You Yuxi. No nonsense.

  • First, executionnpm i axios -SInstall axios
  • Create it in the root directoryutilsFolder and create it under that folderindex.js request.jsThe contents of the two files are as follows.

request.js

import axios from 'axios';
export const request = axios;
Copy the code

index.js

export { request } from './request';
Copy the code

Request.js is wrapped as a request layer, which seems useless now, but can be used as a common configuration if the project is complex. Index.js is used as a unified outlet for utils(toolkit for external export tool methods).

  • Second, adjust the code in the Components directory. The code structure is as follows:

    Relatively clear, the three files under Components correspond to the three parts of a single page application. I’ll also highlight the code here, just to reassure you.

header.vue

<template> <div class="header-wrap"> online HTTP interface test tool < 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>Copy the code

footer.vue

<template> <div class="footer-wrap"> </div> <script> export default {name: 'Footer', }; </script> <style> .footer-wrap { width: 100%; height: 50px; line-height: 50px; text-align: center; color: #333; } </style>Copy the code

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>
Copy the code

Why not main.vue? Because that’s what we’re trying to do with the UI, and I’m not going to tell you to paste it in, change a CSS and it’ll run

  • Finally, we introduce wrapped AXIos into the main fileimport { request } from '@/utils';
  • Add onSubmit to Methods:
methods: {
    async onSubmit() {
      const headers = {};
      const params = {};
      // Parse the request header
      this.header
        .split('\n')
        .map(header= > header.split(':').map(item= > item.trim()))
        .forEach((header) = > {
          if ([header[0]] && header[1]) headers[header[0]] = header[1];
        });
      // Parse the request parameters
      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 {
        // Make requests directly to the test API using our wrapped Ajax request tool.
        const { headers: resHeaders, data } = await request(
          Object.assign({}, {
            url: this.url,
            method: this.method,
            headers,
          }, this.method === 'GET' ? { params } : { data: params }));
        // Write the response header of the response to the response header display box
        this.resHeaders = Object.keys(resHeaders).map(key= > `${key}: ${resHeaders[key]}\n`).join(' ');
        // Write the result data of the response to the result display box
          // json.stringify (data, null, 2
        this.resData = JSON.stringify(data, null.2);
      } catch (e) {
        console.log(e);
        this.$message({
          message: 'The interface request is abnormal. Please contact ⭕️️️ port ⭕ ⭕.type: 'error'}); }}},Copy the code

PS: Put a series of processed code github addresses

Finally, verify

First, we validated an interface mentioned in this article (to get a list of the organization’s Github projects) that looked like this.

Should we test another one while we’re still in the mood? Let’s try baidu’s interface.

As shown in the figure above, we grab the recommended search interface from baidu home page, and the interface URL is as follows. The request type is 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=2b97p 3R1eUvOQAKm0wyNxRv9QYRSkcIvfh0h4EeDGfbqTK%2BSSH6%2BG63KrsE&rqlang=cn&rsv_enter=1&rsv_sug3=34&rsv_sug1=33&rsv_sug7=100&rs v_sid=27938_1456_21125_20719&_ss=1&clist=&hsug=&csor=11&pstg=5&_cr1=29797

Finally, take the interface address you just obtained into our tool and try 😄

A complete error message is posted below for your reference

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%B B%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=2b97 p3R1eUvOQAKm0wyNxRv9QYRSkcIvfh0h4EeDGfbqTK%2BSSH6%2BG63KrsE&rqlang=cn&rsv_enter=1&rsv_sug3=34&rsv_sug1=33&rsv_sug7=100&r sv_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.Copy the code

To sum up, there was no problem when we tried to access github interface, but when we tried to access Baidu interface, there was an error. Why is that? Error message above, we can baidu to try

The next set: due to access to Baidu interface error, only through the front-end technology to achieve an interface testing tool is not feasible. So we have to think about solving the problems that have arisen. I’ll see you in the next video.