基於 vue + zhengAdmin 的一套後臺模板

廢話很少說直接上圖

vue代碼：

var data = {
                system_skin: 'bloom-upms-server',
                //header
                system_title:'權限管理系統',
                system_list:[
                        {id:'1',skin:'bloom-upms-server',title:'權限管理系統',icon:'zmdi-shield-security'},
                        {id:'2',skin:'bloom-cms-admin',title:'內容管理系統',icon:'zmdi-wikipedia'},
                        {id:'3',skin:'bloom-pay-admin',title:'支付管理系統',icon:'zmdi-paypal-alt'},
                        {id:'4',skin:'bloom-ucenter-home',title:'用戶管理系統',icon:'zmdi-account'},
                        {id:'5',skin:'bloom-oss-web',title:'存儲管理系統',icon:'zmdi-cloud'},
                ],
                //main
                user_menus: [
                        {title:'我的資料',icon:'zmdi-account',url:'',isOpenTab:true},
                        {title:'隱私管理',icon:'zmdi-face',url:'',isOpenTab:true},
                        {title:'退出登陸',icon:'zmdi-run',url:'?logout',isOpenTab:false}
                ],
                user:{
                        avater:'app/img/avatar.jpg',
                        name:'bloom'
                },
                menus: [
                        {title:'首頁',icon:'zmdi-home',url:'home',isOpenTab:true},
                        {title:'系統組織管理',icon:'zmdi-accounts-list',childer:[
                            {title:'系統管理',icon:'zmdi-account',url:'crud.html',isOpenTab:true}
                        ]},
                        {title:'其餘數據管理',icon:'zmdi-more',childer:[
                            {title:'百度',icon:'zmdi-lock-outline',url:'https://www.baidu.com/',isOpenTab:true},
                        ]}
                ]
            }
        
        var vue = new Vue({
            el:'#app',
            data: data,
            crated:function(){
                this.system_skin = $.cookie('bloom-skin-name') || this.system_list[0].skin;
                this.system_title = $.cookie('bloom-system-title') || this.system_list[0].title;
                $('title').text(this.system_title);
            },
            methods:{
                sys_switch:function(sys){
                    $.cookie('bloom-skin-name', sys.skin);
                    $.cookie('bloom-system-title', sys.title);
                    this.system_skin = sys.skin;
                    this.system_title = sys.title;
                    $('title').text(this.system_title);
                },
                search:function(q){
                    console.log(q);
                },
                open_tab:function(title,url){
                    console.log(title,url)
                    Tab.addTab(title,url)
                }
            }
        })

代碼以上傳github

後期會盡快推出一個基於這套頁面+Spring Boot的基礎應用

學習資料：
zhengAdmin
vue