実際のメニュー機能を実現するには、Vue+Vue-router+el-menu を使用します。

序文

前のセクションの復習

前のセクションでは、 H5+CSS3を使用して管理プラットフォームのアーキテクチャレイアウトを実現し、Vuexを使用して、フロントエンドデータのローカライズされたストレージのユーザー名を取得し、それを右上隅にバインドしました。グローバル表示。コンテキストを知らない学生は、 Vue+Vuex+CSS3 を使用して管理側のレスポンシブアーキテクチャテンプレートを完成させる実際の戦闘を確認できます。

このセクションでは、

この節はすでにコラムの 10 番目のブログです. Vue-router のルーティングデータを引き続き維持および追加します. これらのルートは、その後の実際のビジネスの実際のルートです. いくつかのルートを追加しながら、ElementUI のel-The munuを使用しますコンポーネントは、左メニュー機能の実戦を実現するために使用されます。実際、el-menu を使用することは重要なポイントではありません。基本的な使い方をするだけです。重要なポイントは、独自のtg-menu コンポーネントを実装してel-menu コンポーネントを置き換えることです。一緒に見ていきましょう。

2. ルーティングデータのインポートとメニューコンポーネントデータの維持

3. サブレベルのないメニューとサブレベルのあるメニューを区別する

4. 現在のメニューのハイライト表示

5. tg-munu コンポーネントの完全なコード

6. tg-memu メニューコンポーネントに含まれる関数

3. コラム進捗報告

1. 現在のコラムのブログ進行状況

2. フロントエンド部分のコンテンツアーキテクチャの進展

3.コードディレクトリのフロントエンド部分の進捗

4. このセクションを読んだ後に考えるいくつかの質問

1.ルーティングデータを追加する

最初に実際のビジネスデータをいくつか追加して、その後のビジネス開発に備えます。書籍管理、書評管理、新刊推薦、学生情報管理、学生申請管理のメニューを追加。

前回のブログで紹介したように、私たちの「Vue + SpringBoot フロントエンドとバックエンドの分離プロジェクトの戦闘」は、キャンパスの本を借りて導入することを前提としていますが、実際には多くの卒業設計要件の統合と配置について言及しており、学生は、このプロジェクトの実践的な知識とシナリオを学ぶだけでなく、知識を統合した後、将来どのようなプロジェクトを行うか、または卒業デザインの主題に変更を加えることができることを願っています。それらのほとんどはフィールド名やインターフェースなどです. 実際, あなたのニーズが何であれ, 私たちのコラムはすでにそれらを含んでいます. これはこのコラムの利点の一つです.

{
    path: '/layout',
    component: () => import("@/views/Layout"),
    children: [
      {
        path: '/index',                     
        component: () => import("@/views/index/Index"),
        meta: {
          title: '首页'
        },
        fatherTitle: '首页',
        fatherTitleCode: 0,
      },
      {
        path: '/book-manager',                     
        component: () => import("@/views/index/Index"),
        meta: {
          title: '图书管理'
        },
        fatherTitle: '图书管理',
        fatherTitleCode: 1,
      },
      {
        path: '/bookAppraise-manager',                     
        component: () => import("@/views/index/Index"),
        meta: {
          title: '书评管理'
        },
        fatherTitle: '图书管理',
        fatherTitleCode: 1,
      },
      {
        path: '/goodBook-manager',                     
        component: () => import("@/views/index/Index"),
        meta: {
          title: '新书推荐'
        },
        fatherTitle: '图书管理',
        fatherTitleCode: 1,
      },
      {
        path: '/studentInfo-manager',                     
        component: () => import("@/views/index/Index"),
        meta: {
          title: '学生信息管理'
        },
        fatherTitle: '学生管理',
        fatherTitleCode: 2,
      },
      {
        path: '/studentApply-manager',                     
        component: () => import("@/views/index/Index"),
        meta: {
          title: '学生申请管理'
        },
        fatherTitle: '学生管理',
        fatherTitleCode: 2,
      },
    ],
  }

2. ルーティング属性の概要

レイアウトテンプレートのルーティングコンポーネントの下にルーティングが含まれていることがわかりますが、前のセクションで説明したように、その後のほとんどすべてのビジネスはコンテンツテンプレートの下で開発されます。ルーティング属性には次のものがあります。

path : ルートの URL。

component : ルーティングに対応するコンポーネント. これらの特定のサービスはまだ言及されていないため、それらはすべて最初にホームページに対応し、後で繰り返し変更されます;

meta : メニュー内のこのルートの特定の表示

FatherTitle : 第 1 レベルのメニューの表示 (meta と FatherTitle を合わせて、ビジネスコンポーネントのブレッドクラムを完成させます)

FatherTitleCode : 属する第 1 レベルのメニューのコード値

el-menu は ElementUI の組み込みコンポーネントなので、別途導入する必要はなく、そのまま使うだけです ElementUI コンポーネントについては、前回のブログで紹介しました。現在の第 1 レベルのメニューは、ホームページ、ライブラリ管理、および学生管理であることがわかりますが、ホームページはサブメニューのない第 1 レベルのメニューであり、他の 2 つはサブレベルの第 2 レベルのメニューが含まれているため、/ src/views/layout.vue ファイル補足コードは次のとおりです。

<aside class="aside-menu">
        <el-menu
          default-active="1">
          <el-menu-item index="1">
            <span slot="title">
              <router-link to="/index">首页</router-link>
            </span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <span>图书管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/book-manager">图书管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/bookAppraise-manager">书评管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <router-link to="/goodBook-manager">新书推荐</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <span>学生管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">
                <router-link to="/studentInfo-manager">学生信息管理</router-link>
              </el-menu-item>
              <el-menu-item index="2-2">
                <router-link to="/studentApply-manager">学生申请管理</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </aside>

前に言ったように、サードパーティのコンポーネントに遭遇すると、自分たちでそれらを実装するために最善を尽くします. 自分たちでセットを実装すると、多くの利点があります. 私自身の実装では、問題を解決するための追加の考え方があり、この時点でサードパーティ製コンポーネントのソースコードを読むと、それまでの認識とは異なるはずです。

テンプレートテンプレートでのレイアウトコンポーネント、TgMenu の導入、およびコンポーネントの定義の 3 つのステップがまだあります。

<tg-menu></tg-menu>

<script>
import { mapGetters } from "vuex";
import TgMenu from '@/components/tg-menu.vue';
import { userLogout } from '@/api/login.js';

export default {
  name: 'Layout',
  components: { TgMenu },

2. ルーティングデータのインポートとメニューコンポーネントデータの維持

最初に導入されたルーティングデータについては、レイアウトの下にあるものだけを取り出して左側のメニューとして表示します. メニューの第 1 レベル、第 2 レベル、さらには複数レベルの表示を容易にするために、上記のfatherTitleCode . 同じfatherTitleCodeは次のように表示されます: 同じモジュールの場合、最終的にデータを次のような構造に処理する必要があります:

3. サブレベルのないメニューとサブレベルのあるメニューを区別する

ホームページにはサブレベルのメニューがなく、ライブラリ管理などのモジュールには独自のメニューがあるため、区別する必要があります.前の手順のデータ形式、この 2 次元配列に基づいて、次のように配列を表示しますonly one sub- elementサブレベルメニューであり、サブレベルメニューには複数のサブ要素が含まれます。同時に、ジャンプする必要があるパスの値、最初のレベルのメニューのFatherTitle の値、および現在のメニューのメタの下のタイトルの値をバインドします。

4. 現在のメニューのハイライト表示

現在のメニューが選択された状態でなければならないことはわかっています.他の人のために cur-path-style クラススタイルクラスを追加し、現在のルートをリアルタイムで監視し、現在のルートを使用してこれらのルートデータを照合する必要があります。一致する場合は、現在のルートであり、Vue クラスの動的バインディングを行います。

5. tg-munu コンポーネントの完全なコード

/src/components/tg-menu.vueファイルを追加し、次のコードを追加します。

<template>
  <div class="tg-menu-box">
    <div v-for="(mitem, mindex) in menu" :key="mindex" class="menu-item-box">
      <template v-if="mitem.length === 1">
        <p :class="['first-title', currentPath===mitem[0]['path'] ? 'cur-path-style' : '']">
          <a :href="'/#' + mitem[0]['path']">
            {
   
   { mitem[0]['fatherTitle'] }}
          </a>
        </p>
      </template>
      <template v-if="mitem.length > 1">
        <p class="first-title" @click="handleMenuClick(mindex)">
          <span>{
   
   { mitem[0]['fatherTitle'] }}</span>
          <i class="el-icon-arrow-down"></i>
        </p>
        <ul v-if="menuBackObj[mindex]['showSon']">
          <li v-for="sitem in mitem" :key="sitem.path" 
            :class="['menu-item-li', currentPath===sitem['path'] ? 'cur-path-style' : '']">
            <a :href="'/#' + sitem['path']">{
   
   { sitem['meta']['title'] }}</a>
          </li>
        </ul>
      </template>
    </div>
  </div>
</template>

<script>
import { routerData } from "../router/routesData";

export default {
  name: 'TgMenu',
  props: {
     
  },
  watch: {
    $route: {
      handler: function (route) {
        this.currentPath = route.path;
      },
      immediate: true,
    },
  },
  data () {
    return {
      menu: [],
      menuBackObj: {},
      currentPath: '',
    }
  },
  created() {
    // 获取会展示在菜单的路由数据
    let menuListData = routerData.find((item) => {
      return item.path === '/layout';
    });
    this.makeData(menuListData.children);
  },
  methods: {
    handleMenuClick(index) {
      let oldMenuBackObj = this.menuBackObj;
      oldMenuBackObj[index]['showSon'] = !oldMenuBackObj[index]['showSon'];
      this.menuBackObj = JSON.parse(JSON.stringify(oldMenuBackObj));
    },
    makeData(menuList) {
      // 菜单数据结构整理
      let menuShowArr = [];
      menuList.forEach((item1) => {
        if (!menuShowArr[item1.fatherTitleCode] || menuShowArr[item1.fatherTitleCode].length === 0) {
          menuShowArr[item1.fatherTitleCode] = [];
          this.menuBackObj[item1.fatherTitleCode] = {}; // 为一级目录添加控制属性
        }
        menuShowArr[item1.fatherTitleCode].push(item1);
        this.menuBackObj[item1.fatherTitleCode] = {
          showSon: false,
        };
      })
      console.log(menuShowArr);
      this.menu = JSON.parse(JSON.stringify(menuShowArr));
    }
  }
}
</script>

<style scoped lang="less">
  .menu-item-box {
    border-bottom: 1px solid #CCC;
  }
  .first-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    cursor: pointer;
    &>a, &>span {
      margin-left: 30px;
      color: #000;
    }
    [class^=el-icon-] {
      margin-right: 20px;
    }
  }
  .menu-item-li {
    height: 40px;
    line-height: 40px;
    &>a {
      margin-left: 50px;
      color: #000;
    }
  }
  .cur-path-style {
    background: #EEEEFF;
    a {
      color: #409EFF;
    }
  }
</style>

6. tg-memu メニューコンポーネントに含まれる関数

ここまでで、tg-menu コンポーネントが実装され、基本的にメニュー機能が実装されました。では、tg-menu メニューコンポーネントにはどのような関数が含まれているのでしょうか?

3. コラム進捗報告

Tian Ge ( Tian Ge ホームページ) と私は空いた時間を使ってコラムを作成しています (同時に、これは実際の戦闘プロジェクトでもあります)。Blue Bridge Cupに参加した後、学校でさまざまな専門コースを継続的に学習し、知識ポイントを結び付けて、事前に独自の実践的なプロジェクトを作成できるように、初心者または卒業生が実践的なプロジェクトを実行できるように支援したいと考えています。そして、このコラムの記事を 1 つずつ読んでいくと、実際の作業では、ひっくり返ったり、ひっくり返ったり、ひっくり返ったり、ひっくり返ったり、プロダクトマネージャーがひねりを加えたりしているだけであることがわかります。違う方法。このコラムの進捗状況を報告させてください。