一般的なバックグラウンド管理システムのフロントエンド インターフェイス Ⅶ — 共通コンポーネント (ヘッダー + フッター + メニュー)

プログラミング 2023-04-09 21:22:34 訪問数: null

 コンポーネントの下に共通の新しいフォルダーを作成し、3 つの新しいコンポーネントを作成します。 Header.vue Footer.vue Menu.vue

  element-ui の公式サイトから目的のコンポーネントを見つけて、ざっくり書いた後、ホームページ Home.vue にマウントします。

Header.vue：

<template>
    <div class="header">
        <el-header>
            <div class="title">疫起健康后台管理系统</div>
            <div>{
    
    {name}}</div>
        </el-header>
    </div>
</template>
<script>
import { getToken } from '@/utils/setToken.js'
export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
        this.name = getToken('username')
    }
}
</script>
<style lang="scss" scoped>
.header {
    .el-header {
        background: rgb(138, 173, 243);
        color: #fff;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        .title {
            width: 200px;
            font-size: 18px;
        }
    }
}
</style>

 Menu.vue

<template>
    <div class="menu">
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {};
    },
    methods: {
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
      },
    },
  };
  </script>
  <style lang="scss">
  .menu {
      .el-aside {
          height: 100%;
          .el-menu {
              height: 100%;
          }
          .el-submenu .el-menu-item {
              min-width: 0;
          }
      }
  }
  </style>

footer.view

<template>
    <div class="footer">
        <el-card>
            Frontend 2022 Casey
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    }
}
</script>

効果：

 

スタイルの問題と調整:

        1. home.vue のコンテナ レイアウト コンテナを使用し、ラッピング用のカードを追加します。

        2.メニューの高さを画面全体に表示し、スクロール バーを非表示にします。

        3.メニューの幅を調整し、少し縮小します。

        4.テーマカラーの調整：グラデーションカラー効果


調整コード

header.vue

<template>
  <div class="header">
    <el-header>
      <div class="title">疫起健康后台管理系统</div>
      <div>{
   
   { name }}</div>
    </el-header>
  </div>
</template>
<script>
import { getToken } from "@/utils/setToken.js";
export default {
  data() {
    return {
      name: "",
    };
  },
  created() {
    this.name = getToken("username");
  },
};
</script>
<style lang="scss" scoped>
.header {
  .el-header {
    background: #6190e8; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #a7bfe8,
      #6190e8
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #a7bfe8,
      #6190e8
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    color: #fff;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    .title {
      width: 200px;
      font-size: 18px;
    }
  }
}
</style>

menu.vue

<template>
  <div class="menu">
    <el-aside width="200px">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        active-text-color="#C0FAFF"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menus: []
    };
  },
  created(){
    console.log(this.$router.options.routes)
  },
  methods: {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    },
  },
};
</script>
<style lang="scss">
.menu {
  .el-aside {
    height: 100%;
    .el-menu {
      height: 100%;
      color: "#fff";
      background: #6190e8; /* fallback for old browsers */
      background: -webkit-linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    .el-submenu .el-menu-item {
      min-width: 0;
    }
  }
}
</style>

footer.view

<template>
    <div class="footer">
        <el-card>
            ANTI-COVID 2022 BE-HEALTHY
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    }
}
</script>

 home.vue

<template>
  <div class="home">
    <Header />
    <el-container class="content">
      <Menu />
      <el-container>
        <el-main>
          <Bread />
          <div class="cont">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "./common/Header.vue";
import Footer from "./common/Footer.vue";
import Menu from "./common/Menu.vue";
export default {
  name: "home",
  components: {
    Header,
    Footer,
    Menu,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss">
.home {
  // background-color: aquamarine;
  width: 100%;
  height: 100%;
  .content {
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
    .cont {
      margin: 3px 0px;
    }
  }
}
</style>

現在のコード効果:

プロジェクトの機能ポイントとモジュールを改善する 

 次のように、コンポーネント ファイルの下に新しいものを作成します。

データの視覚化: ユーザー管理: ユーザー センター:

データ ビュー リストを退出、管理を退出 My

データマップ利用者情報、情報管理

スコアマップ情報一覧

観光マップ 予防接種一覧・予防接種管理

 

 ルーティングを構成する

import Vue from 'vue'
import Router from 'vue-router'
//import Home from '../components/Home.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            // component: Home
            redirect:'/login',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/login',
            name:'Login',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/home',
            name: '用户管理',
            iconClass: 'fa fa-users',
            redirect: '/home/user',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/user',
                    name: '用户列表',
                    iconClass: 'fa fa-list',
                    component: () => import('@/components/users/UserList')
                },
                {
                    path: '/home/info',
                    name: '信息列表',
                    iconClass: 'fa fa-alt',
                    component: () => import('@/components/users/InfoList')
                },
                {
                    path: '/home/infos',
                    name: '信息管理',
                    iconClass: 'fa fa-alt',
                    component: () => import('@/components/users/InfoLists')
                },
                {
                    path: '/home/AbsenceList',
                    name: '请假列表',
                    iconClass: 'fa fa-list-ul',
                    component: () => import('@/components/users/AbsenceList')
                },
                {
                    path: '/home/AbsenceListsManage',
                    name: '请假管理',
                    iconClass: 'fa fa-th-list',
                    component: () => import('@/components/users/AbsenceListsManage')
                }
            ]
        },
        {
            path: '/home',
            name: '数据可视化',
            iconClass: 'fa fa-bar-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/dataview',
                    name: '数据概览',
                    iconClass: 'fa fa-fa-chart',
                    component: () => import('@/components/dataAnalysis/DataView')
                },
                {
                    path: '/home/mapView',
                    name: '地图概览',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/MapView')
                },
                {
                    path: '/home/travelMap',
                    name: '旅游地图',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/TravelMap')
                },
                {
                    path: '/home/scoreMap',
                    name: '分数图',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/ScoreMap')
                }
            ]
        },
        {
            path: '/home',
            name: '用户中心',
            iconClass: 'fa fa-bar-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/Mine',
                    name: '我的',
                    iconClass: 'fa fa-fa-chart',
                    component: () => import('@/components/mine/Mine')
                }
            ]
        },
        {
            path: '*',
            component: () => import('@/components/NotFound') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        }
    ],
    mode: 'history'
})

ルートを定義してメニューをレンダリングするファイル

ただし、ログイン、404 ページ、ホームページなど、レンダリングする必要のないものもあります。

        1.ルーティング権限制御

        2. フロントエンド v-if (現在使用中)

​​​​​​​

 メニューアイコンのスタイルを調整し、距離を設定しますが、ディレクトリに階層順序がないことがわかります。つまり、ページが開かれておらず、ルートがバインドされているため、ルートは変更されますが、コンテンツ右側は変更されていません === "ルートの出口を設定します

Menu.vue 

<template>
  <div class="menu">
    <el-aside width="200px">
      <el-menu
        router
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        active-text-color="#C2FB91"
      >
        <template v-for="(item, index) in menus">
          <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i :class="item.iconClass"></i>
              <span>{
   
   { item.name }}</span>
            </template>
            <el-menu-item-group v-for="(child, index) in item.children" :key="index">
              <el-menu-item :index="child.path">
                <i :class="child.iconClass"></i>
                {
   
   {child.name}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menus: [],
    };
  },
  created() {
    console.log(this.$router.options.routes);
    this.menus = [...this.$router.options.routes];
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="scss">
.menu {
  .el-aside {
    height: 100%;
    .el-menu {
      height: 100%;
      .fa {
        margin: 10px;
      }
      color: "#fff";
      background: #6190e8; /* fallback for old browsers */
      background: -webkit-linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    .el-submenu .el-menu-item {
      min-width: 0;
    }
  }
}
</style>

 ルーターの下のindex.js

import Vue from 'vue'
import Router from 'vue-router'
//import Home from '../components/Home.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            // component: Home
            redirect:'/login',
            hidden: 'true',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/login',
            name:'Login',
            hidden: 'true',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/home',
            name: '用户管理',
            iconClass: 'fa fa-users',
            redirect: '/home/user',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/user',
                    name: '用户列表',
                    iconClass: 'fa fa-list',
                    component: () => import('@/components/users/UserList')
                },
                {
                    path: '/home/info',
                    name: '信息列表',
                    iconClass: 'fa fa-list-alt',
                    component: () => import('@/components/users/InfoList')
                },
                {
                    path: '/home/infos',
                    name: '信息管理',
                    iconClass: 'fa fa-list-alt',
                    component: () => import('@/components/users/InfoLists')
                },
                {
                    path: '/home/AbsenceList',
                    name: '请假列表',
                    iconClass: 'fa fa-list-ul',
                    component: () => import('@/components/users/AbsenceList')
                },
                {
                    path: '/home/AbsenceListsManage',
                    name: '请假管理',
                    iconClass: 'fa fa-th-list',
                    component: () => import('@/components/users/AbsenceListsManage')
                }
            ]
        },
        {
            path: '/home',
            name: '数据可视化',
            iconClass: 'fa fa-line-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/dataview',
                    name: '数据概览',
                    iconClass: 'fa fa-bar-chart',
                    component: () => import('@/components/dataAnalysis/DataView')
                },
                {
                    path: '/home/mapView',
                    name: '地图概览',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/MapView')
                },
                {
                    path: '/home/travelMap',
                    name: '旅游地图',
                    iconClass: 'fa fa-area-chart',
                    component: () => import('@/components/dataAnalysis/TravelMap')
                },
                {
                    path: '/home/scoreMap',
                    name: '分数图',
                    iconClass: 'fa fa-pie-chart',
                    component: () => import('@/components/dataAnalysis/ScoreMap')
                }
            ]
        },
        {
            path: '/home',
            name: '用户中心',
            iconClass: 'fa fa-bar-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/Mine',
                    name: '我的',
                    iconClass: 'fa fa-fa-chart',
                    component: () => import('@/components/mine/Mine')
                }
            ]
        },
        {
            path: '*',
            name: 'NotFound',
            hidden: 'true',
            component: () => import('@/components/NotFound') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        }
    ],
    mode: 'history'
})

Home.vue

<template>
  <div class="home">
    <Header />
    <el-container class="content">
      <Menu />
      <el-container>
        <el-main>
          <Bread />
          <div class="cont">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "./common/Header.vue";
import Footer from "./common/Footer.vue";
import Menu from "./common/Menu.vue";
export default {
  name: "home",
  components: {
    Header,
    Footer,
    Menu,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss">
.home {
  // background-color: aquamarine;
  width: 100%;
  height: 100%;
  .content {
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
    .cont {
      margin: 3px 0px;
    }
  }
}
</style>

Header.vue

<template>
    <div class="header">
        <el-header>
            <div class="title">疫起健康后台管理系统</div>
            <div>{
   
   {name}}</div>
        </el-header>
    </div>
</template>
<script>
import { getToken } from '@/utils/setToken.js'
export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
        this.name = getToken('username')
    }
}
</script>
<style lang="scss" scoped>
.header {
    .el-header {
        background: rgb(138, 173, 243);
        color: #fff;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        .title {
            width: 200px;
            font-size: 18px;
        }
    }
}
</style>

おすすめ

転載: blog.csdn.net/qq_45947664/article/details/127931360
おすすめ
ランキング
OpenCV.Scharr梯度
Baiduのウェブサイトの共有プラグインを追加します。
マスターキーの顧客の過去の使用状況を確認
Python データ分析 - pandas ライブラリを使ってみる
需求分析 序章
Linuxの一般的なコマンドのレコード番号
VARの違い、3つのconstをしましょう
ワイドアイスIオフ
ゼロ計数期間にXOR（クロス）
matlab/python を使用して二重閾値法のエンドポイント検出を実行する
アーカイブ
もっと
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)

コードワールド

© 2018 codetd.com