springboot+vueコンポーネント開発におけるインターフェースアサーション機能の実装方法

springboot vueをベースにしたテストプラットフォームの開発

(実践プロジェクト)は更新され続けています。

次に、リクエスト アサーション関数の開発の準備をします。この機能を実装する必要がある要件とそれがどのようなものであるかについては、apifox、metersphere などの他の優れた業界ツールを参照しました。

そこで、最も一般的に使用されるものを最初に開発することにしました: JSONPath、Response time、Text、そしてその中で JSONPath が優先されます。

古いルールですが、最初にこのフロントエンド コンポーネントの効果を見てみましょう。

1. コンポーネント間の関係

上記の機能効果は、実際には 3 つのコンポーネントの組み合わせによって完成されます。プロジェクトコード内の

# の位置は図のとおりです。

• ApiAssertions: 最も外側のコンポーネント。主にアサーションを追加する入り口であり、さまざまな種類のアサーション サブコンポーネントを統合する場所です。

• ApiAssertionsEdit: さまざまなアサーション コンポーネントは編集機能を提供する必要があります。これは、さまざまな種類のアサーション編集サブコンポーネントを統合する場所でもあります。

• ApiAssertionJsonPath: このコンポーネントは、JSONPath タイプのアサーションの最下位コンポーネントです。

これら 3 つのコンポーネントの包含関係は、ApiAssertions ->ApiAssertionsEdit ->ApiAssertionJsonPath です。

elementUI には既製のソリューションがないため、ビルディング ブロックのように、散在する elementUI コンポーネントを使用してそれらを組み合わせる必要があります。

検討した結果、おそらく次の elementUI コンポーネントを使用しました。興味のある方は、公式 Web サイトにアクセスして詳細をご覧ください:

• ##el-select セレクター

• ##el-row

  、el-col、これはレイアウト

#です#el-input
• 、入力ボックス

el-tooltip
• 、ヒント

##el- button
• , button
  残りは、これまでの記事で簡単に整理したコンポーネント開発に関する知識です。

2. コンポーネント開発

このパートでは、各コンポーネントの内容と機能を簡単に紹介します。

1. ApiAssertions

ここでの関数は、アサーションを追加するためのエントリ ポイントを提供することです。現在、JSONPath のみが true で、他の 2 つは false です。

#次に、ボタンを追加してコントロールを作成します。つまり、タイプが選択されていない場合は無効になり、クリックできません。

これにはサブコンポーネント ApiAssertionJsonPath

が含まれます。ここでは、型を決定するために

v-if が使用されます。値は # です。このコンポーネントは、##JSON_PATH が表示されている場合にのみ表示されます。

コンポーネント タイプに関しては、これらは常にオンになっているため、より標準化するために、これらの値を抽出して別の

ApiTestModel に置きました。 .jsファイル内:

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

次に、編集コンポーネント ApiAssertionsEdit があります。これはそのサブコンポーネントでもあります。これは、[追加] をクリックすると、対応する JSONPath のリストが表示されるためです。編集を続けることができます。

上記の 2 つのサブコンポーネントはカスタム属性

assertions にバインドされていることに注意してください。この属性は外部パラメーターを受け取るために使用されるため、次のようにする必要があります。

props

で最初に定義: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> props: { assertions: { type: Object, default: () =&gt; { return {} } } },</pre><div class="contentsignin">ログイン後にコピー</div></div>2. ApiAssertionsEditこのコンポーネントは、追加された JSONPath の編集機能を提供するために使用され、アサーション リストの表示効果を提供できます。また、アサーションの削除や無効化などの機能もあります。

リスト表示は、変数アサーション内のJSONPathリストである

v-forを利用し、中のデータを取り出して表示します。

これは

:edit="true" この属性は

ApiAssertionJsonPath

コンポーネントで必要です。その機能については以下で説明します。 3. ApiAssertionJsonPathこれは一番下のコンポーネントであり、ほとんどのコンテンツがここにあります。

代码里用不同的elementUI组件把每列的内容定义好即可。

注意在上层组件传来的edit，在这里是用来判断当前是否为编辑状态的，是的话就显示删除和禁用的组件。

其他的代码就不具体截图了，有需要的童鞋可以获取源码对着看。

接下来就要开发对应的后端功能，就是如何把断言数据落到数据库里，也就是jsonpath这个对象里的这些字段。

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

以上がspringboot+vueコンポーネント開発におけるインターフェースアサーション機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。