ホームページ > 記事 > ウェブフロントエンド > vue-manage-system バックグラウンド管理システム開発プロセス (コード)
vue-manage-system バックグラウンド管理システム開発プロセス (コード)
- 不言オリジナル
- 2018-09-13 16:16:152894ブラウズ
この記事の内容は、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 一起讨论。
相关推荐：
ASP.NET MVC5+EF6+EasyUI 后台管理系统微信公众平台开发
基于thinkphp的后台管理系统模板快速搭建，thinkphp后台模板
以上がvue-manage-system バックグラウンド管理システム開発プロセス (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。