springboot vue インターフェイスを使用してフロントエンド モジュール ツリーとインターフェイス リストをテストする方法

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

1. 機能紹介

今日の目標は、インターフェース管理リストのフロントエンドページを描画することです。一度、簡単なプロトタイプを作ろうと思ったのですが、Webツールを試してみても使いこなせず、結局断念してしまいました。

最終的に、elementUI コンポーネントを使用して結合することにしました。完了するまでに半日以上かかりましたが、このページが私にとってまだ少し複雑であることは明らかでした。

プロジェクト管理の表ページと比較して、ここにはより多くのコンテンツがあります。当然、これまであまり知らなかったフロントエンドの知識もたくさん出てきて、elementUIの公式ドキュメントや検索エンジンなどを確認し、一つ一つ解決していくことで得るものがありました。

まず、最初のバージョンの完成したページを公開し、ページの機能を簡単に説明します。

ページ全体は 2 つの領域に分かれています。

左側の領域

# はモジュール ツリーです。

• 1 つのプロジェクトには複数のモジュールがあります

• 1 つのモジュールには複数のサブモジュールがあります

• 1 つのプロジェクトには複数のモジュールがありますモジュールには複数の API があり、CASE

• 1 つの API に複数の CASE

があるほか、モジュール ノードや検索ボックスをすばやく検索することもできます右側にインターフェイスを作成するためのボタン まだ新しいページを描いていませんが、それについては後で説明します。

右側エリア

主にリストの表示です。

[プロジェクト管理]リスト内のプロジェクトを直接クリックすると、そこにジャンプできます。インターフェース一覧ページに直接アクセスすると、デフォルトのプロジェクトが自動的に選択されます。右上隅には、複数の条件を含むクエリをサポートするクエリ ボックスもあります。

APIとCASEの2つのボタンについては、クリック後に対応する一覧を表示するように切り替えたいのですが、対応するモジュールツリーは同じなので、新たに作成する必要はないと思いますページ。

最後に、操作バーはリスト レコードの右端に固定されており、その中には 5 つのボタンがあり、それぞれが異なる機能に対応しています。 [実行]: postman の使用と同様に、インターフェイスのデバッグに使用できます。

• [編集]: インターフェースの内容を変更できます。

• [ユースケース]: クリックすると、このインターフェースの CASE リストページにジャンプします。

• [削除]: インターフェイスを削除し、このインターフェイスの下にある CASE も削除するために使用されます。バックエンドが論理的な削除を実行すると推定されます。

• [コピー]: 現在記録されているインターフェイスのコンテンツをコピーして、簡単に作成できるようにします。

• ここでのすべての機能は単純ではなく、フォローアップは課題に満ちており、それに対応する報酬は間違いなく充実しています。

2. ページ アセンブリのアイデア

主なアイデアは、elementUI でコンポーネントを見つけて、コードを変更することです。ただし、この期間中に発生した注意点は、参考として記録する価値があります。

1. レイアウト コンテナ

最初は左右のレイアウトの実装方法ですが、コンポーネント URL の先頭にある 2 番目がコンテナ レイアウト コンテナです。

しかし、下にスクロールし続けると、左右のレイアウトのニーズをちょうど満たすコード例が 1 ページだけあります。まずそれをコピーしてください。

追跡はしません。ご質問があり、連絡が必要な場合は、プライベート メッセージをお送りください。各コンポーネントを使用する際に注意すべき知識を以下に示します。

2. ツリー ツリー コントロール

右側のコントロールを使用するので、対応するコントロールをコピーするように注意してください。

show-checkbox 属性はノードの前にあるチェックボックスです。不要な場合は削除してください。

、デフォルトですべて展開します:expand-on-click-node="false"、デフォルトは true です。新しいノードが追加されたときに自動的に展開されません。追加した。自動的に展開する必要があるので、 false に変更します。 さらに、ボタンをアイコンに置き換えました。使用法は非常に簡単です:

水平スクロールバー

ノード名が長すぎてサイドエリアの幅を超える場合は、横スクロールが可能になりました。以前にオンラインで多くの方法を検索しましたが、どれもうまくいきませんでした。

<style>
  .el-aside {
    color: #333;
    border-right-style: solid;
    border-color: #f4f4f5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
</style>

以上がspringboot vue インターフェイスを使用してフロントエンド モジュール ツリーとインターフェイス リストをテストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。