ホームページ > 記事 > ウェブフロントエンド > vue-manage-system バックグラウンド管理システム開発プロセス (コード)

vue-manage-system バックグラウンド管理システム開発プロセス (コード)

不言オリジナル: 2018-09-13 16:16:152912ブラウズ

この記事の内容は、vue-manage-system バックグラウンド管理システムの開発プロセス (コード) に関するものです。必要な方は参考にしていただければ幸いです。

はじめに

vue-manage-system は、Vue.js と element-ui に基づくバックエンド管理システムテンプレートです。2016 年末の最初のコミットからほぼ 2 年が経過しました。GitHub では 5,000 個のスターも付いています。更新を続けるモチベーションにもなりましたし、落とし穴もたくさん踏んだので、ここでまとめておきます。

github アドレス: vue-manage-system

カスタムアイコン

element-ui には比較的少数のフォントアイコンが付属しており、より一般的なアイコンの多くは利用できないため、必要なフォントアイコンを導入する必要があります。最も人気のあるアイコンライブラリである Font Awesome には 675 個のアイコンがすべて含まれていますが、これによりフォントファイルが比較的大きくなるため、プロジェクト内でそれほど多くのアイコンを使用する必要はありません。現時点では、Alibaba Icon Library は非常に良い選択です。

まず、Ali アイコンでプロジェクトを作成し、el-icon-lx などのアイコンのプレフィックスを設定し、lx-iconfont などのフォントファミリーを設定し、使用する必要があるアイコンをプロジェクトに追加します。ここでフォントクラスを選択します。オンラインリンクを生成します。すべてのページでアイコンを使用する必要があるため、index.html に CSS リンクを直接導入するだけです

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue-manage-system</title>
    <!-- 这里引入阿里图标样式 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css">
</head>
<body>
<p id="app"></p>
</body>
</html>

次に、lx-iconfont フォントを使用するために、接頭辞 el-icon-lx を使用してアイコンクラス名を設定する必要があります。

rreee

でも、このスタイルをどこに配置すればいいでしょうか?これは気軽に入れられるものではありません。 main.js では、element-ui スタイルが導入されており、そのスタイルには次のような CSS 部分があります:

[class*="el-icon-lx"], [class^=el-icon-lx] {
    font-family: lx-iconfont!important;
}

明らかに、この CSS 部分がカスタムスタイルの後に実行されると、カスタマイズされたスタイルが上書きされます。アイコンは表示されません。プロジェクトをビルドすると、APP.vue のスタイルが app.css にパッケージ化され、main.js で参照されるスタイルが後ろに追加されます。次に、カスタムスタイルを CSS ファイルに配置し、要素 UI CSS が main.js に導入された後に導入できます。その後、デフォルトのフォントが上書きされ、<i class="el-icon-lx-people"></i> を介してプロジェクトでアイコンを使用できるようになります。

賢い人は、カスタムアイコンの接頭辞に el-icon- が含まれていない場合、そのような問題は発生しないことを発見しました。はい、元のフォントと同じスタイルを維持するには、その css 全体をコピーする必要があります

[class*=" el-icon-"], [class^=el-icon-]{
    font-family: element-icons!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ナビゲーションメニュー

element-ui ナビゲーションメニューのドキュメントも非常に詳細ですが、まだ問題を提起したり追加したりする人もいます。 QQ 質問私：3 段目のメニューの作り方など。さらに、特定のメニュー項目は、アクセス許可に基づいてサーバーから返される特定のデータ項目である場合があるため、テンプレートにハードコーディングすることはできません。

まず、サーバーから返された形式がこのようなものではない場合でも、フロントエンドはそれを次の形式に処理する必要があります:

/* 假设前缀为 el-lx */
[class*="el-lx-"], [class^=el-lx-]{
    font-family: lx-iconfont!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

アイコンはメニューアイコンであり、あなたは上でカスタマイズしたアイコンを使用できます。index はルーティングアドレスです。subs はサブメニューです。テンプレートは、メニューにサブが含まれているかどうかを判断して、第 2 レベルのメニューと第 3 レベルのメニューを表示します。

export default {
    data() {
        return {
            items: [{
                icon: 'el-icon-lx-home',
                index: 'dashboard',
                title: '系统首页'
            },{
                icon: 'el-icon-lx-calendar',
                index: '1',
                title: '表单相关',
                subs: [{
                    index: '1-1',
                    title: '三级菜单',
                    subs: [{
                        index: 'editor',
                        title: '富文本编辑器'
                    }]
                }]
            },{
                icon: 'el-icon-lx-warn',
                index: '2',
                title: '错误处理',
                subs: [{
                    index: '404',
                    title: '404页面'
                }]
            }]
        }
    }
}

これでダイナミックナビゲーションメニューが完成しました。

ヘッダーコンポーネントのボタンを介してサイドバーコンポーネントの展開または折りたたみをトリガーするには、コンポーネント間のデータの受け渡しが含まれます。ここで、コンポーネント間の通信は、Vue.js の別のイベントセンター (イベントバス) を通じて管理されます。

<el-menu :default-active="onRoutes" :collapse="collapse" router>
    <template v-for="item in items">
        <template v-if="item.subs">
            <el-submenu :index="item.index" :key="item.index">
                <template slot="title">
                    <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
                </template>
                <template v-for="subItem in item.subs">
                    <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                        <template slot="title">{{ subItem.title }}</template>
                        <!-- 三级菜单 -->
                        <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
                            {{ threeItem.title }}
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :index="subItem.index" :key="subItem.index">
                        {{ subItem.title }}
                    </el-menu-item>
                </template>
            </el-submenu>
        </template>
        <!-- 没有二级菜单 -->
        <template v-else>
            <el-menu-item :index="item.index" :key="item.index">
                <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
            </el-menu-item>
        </template>
    </template>
</el-menu>

Header コンポーネントでボタンがクリックされたときに折りたたみイベントをトリガーします:

const bus = new Vue();

Sidebar コンポーネントで折りたたみイベントをリッスンします:

bus.$emit('collapse', true);

Chartadaptive

vue-manage-system で使用されるチャートプラグインは次のとおりです。 vue-schart。キャンバスベースのチャートプラグイン schart.js がカプセル化されています。チャートをその幅に適応させ、ウィンドウまたは親要素のサイズの変更に応じて再レンダリングするには、この関数がチャートプラグインに実装されていない場合は、手動で実装する必要があります。

vue-schart は、チャートを再レンダリングするための renderChart() メソッドを提供します。Vue.js では、親コンポーネントが子コンポーネントメソッドを呼び出します。このメソッドは、$refs を通じて呼び出すことができます。

bus.$on('collapse', msg => {
    this.collapse = msg;
})

次に、ウィンドウのサイズ変更イベントをリッスンし、 renderChart() メソッドを呼び出してグラフを再レンダリングします。

<schart ref="bar" canvasId="bar" :data="data" type="bar" :options="options"></schart>

ただし、コンポーネントが破棄された場合は、リスナーを削除することを忘れないでください。リスニングウィンドウのサイズ変更は完了しましたが、親要素のサイズ変更はどうなるでしょうか？親要素の幅はパーセンテージに設定されているため、サイドバーが折りたたまれると親要素の幅が変化します。ただし、p にはサイズ変更イベントがなく、その幅の変化を監視できませんが、折りたたみがいつトリガーされるかはわかります。それでは、折りたたみの変更が聞こえたときにレンダリング関数を呼び出してチャートを再レンダリングすることは可能でしょうか?その場合は、イベントバスを通じてサイドバーの変更を監視し、300 ミリ秒後に再レンダリングする方が良いでしょう。これは、折りたたむときに 300 ミリ秒のアニメーションプロセスがあるためです

import Schart from 'vue-schart';
export default {
    components: {
        Schart
    },
    mounted(){
        window.addEventListener('resize', ()=>{
            this.$refs.bar.renderChart();
        })
    }
}

マルチタブページ

マルチタブページの機能でもあります最も多くの問題が提起されました。

当在 A 标签页输入一些内容之后，打开 B 标签再返回到 A，要保留离开前的状态，因此需要使用 keep-alive 进行缓存，而且关闭之后的标签页就不再缓存，避免关闭后再打开还是之前的状态。keep-alive 的属性 include 的作用就是只有匹配的组件会被缓存。include 匹配的不是路由名，而是组件名，那么每个组件都需要添加 name 属性。

在 Tags 组件中，监听路由变化，将打开的路由添加到标签页中：

export default {
    data() {
        return {
            tagsList: []
        }
    },
    methods: {
        setTags(route){
            const isExist = this.tagsList.some(item => {
                return item.path === route.fullPath;
            })
            if(!isExist){
                this.tagsList.push({
                    title: route.meta.title,
                    path: route.fullPath,
                    name: route.matched[1].components.default.name
                })
            }
        }
    },
    watch:{
        $route(newValue, oldValue){
            this.setTags(newValue);
        }
    }
}

在 setTags 方法中，将一个标签对象存到标签数组中，包括title（标签显示的title），path（标签的路由地址），name（组件名，用于include匹配的）。路由地址需要用 fullPath 字段，如果使用 path 字段，那如果地址后面带有参数，就都没保存起来了。

在 Home 组件中，监听到标签的变化，缓存需要的组件。

<keep-alive :include="tagsList">
    <router-view></router-view>
</keep-alive>

export default {
    data(){
        return {
            tagsList: []
        }
    },
    created(){
        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
        bus.$on('tags', msg => {
            let arr = [];
            for(let i = 0, len = msg.length; i < len; i ++){
                // 提取组件名存到tagsList中，通过include匹配
                msg[i].name && arr.push(msg[i].name);
            }
            this.tagsList = arr;
        })
    }
}

总结

由于该项目中不包含任何业务代码，所以还是相对比较简单的，不过从开发中还是积累了一些经验，在其它项目中可以更加熟练地开发。功能虽然不算多，但是也勉强够用，如果有什么好的建议，可以开 issue 一起讨论。

vue-manage-system バックグラウンド管理システム開発プロセス (コード)

はじめに

カスタム アイコン

ナビゲーション メニュー

Chartadaptive

マルチタブ ページ

总结

関連記事

カスタムアイコン

ナビゲーションメニュー

マルチタブページ