The development of the test platform based on springboot vue

(practice project) continues to be updated.

Next, prepare to develop the request assertion function. Regarding what requirements this function needs to be implemented and what it looks like, I referred to other excellent industry tools, such as apifox, metersphere, etc.

So I decided to develop the most commonly used ones first: JSONPath, Response time, Text, and among these, JSONPath takes precedence.

Old rule, let’s take a look at the effect of this front-end component first.

1. Relationship between components

The above functional effects are actually completed by 3 components together. The position of

in the project code is as shown in the figure.

• ApiAssertions: The outermost component, mainly the entrance to add assertions, and the place to integrate different types of assertion subcomponents.

• ApiAssertionsEdit: Different assertion components need to provide editing functions. This is also the place to integrate different types of assertion editing sub-components.

• ApiAssertionJsonPath: This component is the lowest-level component for assertions of the JSONPath type.

The inclusion relationship of these three components is: ApiAssertions -> ApiAssertionsEdit -> ApiAssertionJsonPath.

Since there is no ready-made solution in elementUI, it is still necessary to use scattered elementUI components to combine them, just like building blocks.

After taking stock, I probably used the following elementUI components. Interested children can go to the official website to learn more:

• ##el-select Selector

• ##el-row

  , el-col, this is the Layout

• el-input

  , input box

• el-tooltip

  , tips

• el-button

  , button

The rest is the knowledge related to component development, which I have briefly organized in previous articles.

2. Component development

This part briefly introduces the content and functions of each component.

1. ApiAssertions

The function here is to provide an entry point for adding assertions. Currently, only JSONPath is true, and the other two are false.

#Then add a button and make a control, that is, it is disabled and cannot be clicked when the type is not selected.

Then this contains the sub-component

ApiAssertionJsonPath

, here v-if is used to determine the type, when the type value is # This component is only displayed when ##JSON_PATH is displayed.

Regarding component types, these are always on, so in order to be more standardized, I extracted these values ????and put them into a separate ApiTestModel.js

In the file:

export const ASSERTION_TYPE = {
  TEXT: 'Text',
  JSON_PATH: 'JSONPath',
  DURATION: 'Duration'
}

Next, there is an editing component ApiAssertionsEdit

which is also its subcomponent, because after clicking Add, the list of corresponding JSONPath will be displayed, and it can continue to be edited. .

Notice that the above two sub-components are bound to custom attributes assertions

. This attribute is used to receive external parameters. , so it must be defined first in

props:

  props: {
    assertions: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

2. ApiAssertionsEdit

This component is used to provide the editing function of the added JSONPath, and can provide assertions list display effect. In addition, there are functions such as deletion and disabling of assertions.

List display uses v-for

, the JSONPath list in the variable assertion, and then takes out the data inside and displays it.

Here is a :edit="true"

This attribute is required by the

ApiAssertionJsonPath component, its function is described below. 3. ApiAssertionJsonPath

This is the bottom component, and most of the content is here.

代碼里用不同的elementUI組件把每列的內(nèi)容定義好即可。

注意在上層組件傳來的edit，在這里是用來判斷當(dāng)前是否為編輯狀態(tài)的，是的話就顯示刪除和禁用的組件。

其他的代碼就不具體截圖了，有需要的童鞋可以獲取源碼對著看。

接下來就要開發(fā)對應(yīng)的后端功能，就是如何把斷言數(shù)據(jù)落到數(shù)據(jù)庫里，也就是jsonpath這個對象里的這些字段。

    jsonPath: {
      type: Object,
      default: () => {
        return {
          type: ASSERTION_TYPE.JSON_PATH,
          expression: undefined,
          option: undefined,
          expect: undefined,
          description: undefined,
          enable: true
        }
      }
    },

The above is the detailed content of How to implement interface assertion function in springboot+vue component development. For more information, please follow other related articles on the PHP Chinese website!