概要私が開発した多くのシステム(Winform ハイブリッド フレームワーク、Bootstrap 開発フレームワーク、その他の一連の製品を含む)では、メニューを動的に構成し、対応するロールのメニュー権限とページ権限を管理して、システムによるユーザー権限の制御を実現する傾向があります。メニューには通常、名前、アイコン、順序、URL 接続、その他の関連情報が含まれます。VUE + Element フロントエンド アプリケーションの場合も、原則は同様です。このエッセイでは、サーバー上の動的メニュー構成とローカル ルーティングの関連処理を組み合わせて、動的なメニューのメンテナンスと表示処理を実現する方法を紹介します。 1. メニューとルーティング処理Vue フロントエンドにもルーティングの概念を導入する必要があるため、ルーティングはフロントエンドがアクセスできる対応するパス コレクションです。ルーティングは、通常のメニューにはない多くの複雑な情報を定義しますが、これらを自由に変更できないことが多いため、ローカルに構成されたルート リストに基づくアプローチを採用し、メニューにはバックエンド構成方法を使用します。フロントエンドは、インターフェイスを通じてメニュー リストを動的に取得します。メニュー名とルート名の対応を通じて、メニュー コレクションを参照として使用し、すべてのローカル静的ルートのリストをフィルター処理してから、ユーザーがアクセスできるルート リストを取得し、動的ルートをフロントエンドに設定することで、ユーザーの役割/権限に応じてインターフェイスを実現し、ユーザーのメニュー インターフェイスとアクセス可能なルート コレクションを変更します。 メニュールーティングのおおよその操作手順は以下のとおりです。 フロントエンド インターフェイスの動的メニュー、ローカル ルート、メニュー ナビゲーション、アクセス可能なルートのいくつかの概念を以下に示します。 フロントエンドインターフェース処理では、Elementインターフェースコンポーネントを通じて動的なメニュー情報を表示し、メニューとルーティングの関係を組み合わせて、対応するビューへのメニュージャンプのプロセスを実現します。 2. メニューとルートリスト前回の紹介に従って、サーバーから返される動的なメニュー情報をいくつか定義しました。このメニュー情報は、次のインターフェイスに示すように、JSON オブジェクトのコレクションです。 [ { id: '1', pid: '-1', テキスト: 'ホームページ'、 アイコン: 'ダッシュボード'、 名前: 'ダッシュボード' }, { id: '2', pid: '-1', テキスト: '製品リスト'、 アイコン: 'テーブル', 名前: '製品' }, { id: '3', pid: '-1', テキスト: '第 1 レベル メニュー'、 アイコン: '例', 子供たち: [ { id: '3-1', pid: '3'、 テキスト: 'セカンダリメニュー1'、 名前: 'アイコン', アイコン: '例' }, { id: '3-2', pid: '3'、 テキスト: 'セカンダリメニュー2'、 アイコン: '木'、 子供たち: [ { id: '3-2-1', pid: '3-2'、 テキスト: 'レベル 3 メニュー 1'、 名前: 'フォーム', アイコン: 'フォーム' }, { id: '3-2-2', pid: '3-2'、 テキスト: 'レベル 3 メニュー 2'、 名前: 'menu1-1', アイコン: 'フォーム' }, { id: '3-2-3', pid: '3-2'、 テキスト: 'レベル 3 メニュー 3'、 名前: 'メニュー1-2', アイコン: 'フォーム' }, { id: '3-2-4', pid: '3-2'、 テキスト: 'レベル 3 メニュー 4'、 名前: 'メニュー1-3', アイコン: 'フォーム' } ] } ] }, { id: '99', pid: '-1', テキスト: '会社のウェブサイト'、 アイコン: 'テーブル', 名前: '外部リンク' } ] メニューの JSON は、ロールに基づいて動的に取得されます。異なるロールは異なるメニュー セットに対応します。メニューは、無限の数の表示レベルを定義できるマルチレベル ツリー リストです。JSON 形式のビューを以下に示します。 Vue フロントエンドでは、ルーティング ページのレイアウトなどの情報を含む、フロントエンド ページのすべてのルートを初期化して定義する必要があります。 フロントエンドに対応するすべてのルーティング情報を、以下に示すようにJSファイルで定義できます。 // このシステムのすべてのルートを定義します。特定のルートはメニューデータによってフィルタリングされます。export const asyncRoutes = { 'ダッシュボード': { パス: '/dashboard', コンポーネント: レイアウト、 子供たち: [{ パス: 'ダッシュボード', 名前: 'ダッシュボード'、 コンポーネント: () => import('@/views/dashboard/index') }] }, '製品': { パス: '/product', コンポーネント: レイアウト、 子供たち: [{ パス: '/product', 名前: '製品', コンポーネント: () => import('@/views/Product/index') }] }, .............................. // 'icon' 部分を省略: { パス: '/icon', コンポーネント: レイアウト、 子供たち: [{ パス: '/icon', 名前: 'アイコン', コンポーネント: () => import('@/views/icons/index') }] }, '外部リンク': { パス: 'http://www.iqidi.com', 名前: '外部リンク' } } メニュー表示にはネストされた関係を定義する必要があるため、ここでのルートはネストする必要はありません。 さらに、バックエンドの動的メニューを要求するためにログインする前にシステムを正常に実行する必要があるため、ログイン インターフェイス、リダイレクト ページ、ホームページ リンクなどの基本的なルーティング情報を事前に設定する必要があります。したがって、この情報を個別に管理するために 2 つのルーティング オブジェクトを分離できます。 ルートの管理には、デフォルトでルートを作成し、ルートをリセットし、新しいルートを動的に設定する必要があります。これらの操作を処理するために、いくつかの関数をカプセル化します。 const createRouter = () => 新しいルーター({ // モード: 'history'、// サービスサポートが必要 スクロール動作: () => ({ y: 0 }), ルート: 定数ルート }) 定数ルーター = createRouter() // ルートエクスポート関数をリセットする resetRouter() { 定数 newRouter = createRouter() router.matcher = newRouter.matcher // ルーターをリセットする } ユーザーがログイン インターフェイスを介して処理された後、対応するアクションを通じて動的ルーティング情報が取得されます (ここでは、最初に動的メニューが取得され、次に動的ルーティング情報であるローカル ルーティングがフィルタリングされることに注意してください)。動的ルーティングを取得した後、次のコードに示すように、フロント エンドからアクセスできるルーティング コレクションを設定できます。 これらの新しいルートにより、フロントエンド システムのメニューは正常に機能します。そうでない場合、インターフェイスにメニューが表示されても、ルートが利用できないため、特定のビュー ページにアクセスできず、404 ページにジャンプします。 3. ログインプロセスの処理前のセクションでは、ルーティング プロセスについて簡単に説明しました。実際には、ログイン インターフェイスからのルーティング情報について説明する必要があります。 ログインインターフェースを例にとると、ユーザーがログインした後、まずユーザーのアカウントとパスワードを検証する必要があります。成功した場合は、ユーザーに対応する動的メニューセットを要求し続け、ルーティングを通じて対応するページまたはホームページに切り替えます。 Store/Modules/user.jsモジュールでは、対応するログイン処理アクションは次のように定義されています。 ここでは、ユーザー ログインの検証とトークンの処理のプロセスは無視し、動的メニュー要求とルートの設定のプロセスに焦点を当てます。 ルート到着を傍受する必要がある前のプロセスでは、以下に示すように、対応するルート情報要求ロジックを定義します。 router.beforeEach(async(to, from, next) => { メニュー ルーティングを処理する対応するモジュールでは、次の State の定義に示すように、これらの重要な情報を伝達する状態を定義します。 定数状態 = { メニュー項目: [], ルート: [], ルートを追加: [], 非同期ルート: 非同期ルート } // ルートとメニューの変更を定義します const 変異 = { SET_ROUTES: (状態、ルート) => { // var list = convertRoute(routes) routes.push({ path: '*', redirect: '/404', hidden: true }) // これはデフォルトのエラールートです state.addRoutes =routes state.routes = [].concat(routes) // 定数Routes.concat(routes) }, SET_MENUS: (状態、メニュー) => { state.menuItems = メニュー } } // 動的ルートを生成するためのアクション処理を定義します const actions = { ルートを生成する({コミット}, ロール) { 新しいPromiseを返します(resolve => { getMenus().then(res => { const menus = res.data || [] // インターフェースを通じてメニュー情報を一様に取得する constroutes = [] menus.forEach(item => { filterRoutes(ルート、項目) }) console.log(routes) // ルートを印刷 commit('SET_ROUTES',routes) commit('SET_MENUS', メニュー) 解決(ルート) }); }) } } 最後に、対応する JS 定義モジュール クラス情報を返します。 エクスポートデフォルト{ 名前空間: true、 州、 突然変異、 アクション } フロントエンドインターフェース処理では、Elementインターフェースコンポーネントを通じて動的なメニュー情報を表示し、メニューとルーティングの関係を組み合わせて、対応するビューへのメニュージャンプのプロセスを実現します。 インターフェースによって生成される動的なメニュー効果を見てみましょう。 メニューの動的表示と動的ルーティングが連携して動作するため、フロントエンドに動的メニューを表示し、メニューセットに応じてアクセス可能なルートを更新することができます。この 2 つを組み合わせることで、対応するビュー ページをスムーズに開くことができます。 もう一度確認してみましょう。メニュールーティングのおおよその操作手順は次のとおりです。 以上が、Vue Element フロントエンドアプリケーション開発における動的メニューとルーティングの関連付け処理の詳細な内容です。Vue Element の動的メニューとルーティングの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
vertical-align属性は、主にインライン要素の配置を変更するために使用されます。インライン...
プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...
1. イメージをプルするdocker pull レジストリ.cn-hangzhou.aliyuncs...
必要:バックエンドは配列オブジェクトを返し、それがフロントエンドで配列に結合されます。配列は名前に従...
この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...
Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...
環境: init_worker_by_lua、set_by_lua、rewrite_by_lua、a...
目次序文最適化派生的な質問: beforeDestroy はトリガーされませんか?序文タイマーをクリ...
1. フローティング方式を使用する効果画像: コードは次のとおりです: (.content の高さは...
1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...
1. div css マウスの手の形は cursor:pointer; です。 2. HTML の相...
テーブルを美しくするために、テーブルにさまざまな境界線の色を設定できます。基本的な構文<テーブ...
nginx をリバース プロキシ tomcat として使用する場合、セッション損失が発生する可能性が...
ダウンロード: http://dev.mysql.com/downloads/mysql/ Cドライ...
しばらく前にシステムを再インストールしましたが、バックアップを取っていなかったので、コンピューター上...