laravel写后台

因为之前用element-admin感觉完全前后端分离在目前项目上并不是太适用所以想用laravel和vue写一个后台

开始想利用laravel原生的vue，折腾了半天感觉不是很理想

一是app.js太大，用网上的方法确实减小了很多不过感觉后面用vue和blade混写不是太方便，主要还是有点无从下手

其实后台如果纯用blade的话倒也没啥，就是section套进来呗，主要还是想用到vue

后台主要有以下几块

1.顶部（logo，顶部导航nav，顶部user下拉）

2.侧边栏（sidebar）

3.内容(content)

先纸上谈兵走一下吧

1.在layout文件引入公共的css和js

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="

//这里的js是后面sideber要用到的
<script>
    var sidebar = new Vue({
        el: '#sidebar',
        data: {
            menus: [],
            active: ''
        },
        methods: {
            toggleMenu: function(id){
                this.active = this.active == id ? '' : id;
            },
            setMenus: function(menus){
                this.menus = menus;
            },
            isCurrentUrl: function(url, key){
                var parser = document.createElement('a');
                parser.href = url;

                if(parser.pathname === window.location.pathname){
                    this.active = key ? key : this.active;
                    return true;
                }

                return false;
            }
        },
        created: function(){
            this.setMenus(JSON.parse('{!! Speedy::getMenus(true) !!}'));
        }
    });
</script>

2.相关位置引入sidebar和nav

@include('xxxxxx.sidebar')
@include('xxxxxx.nav')

sidebar代码

<div id="sidebar" class="sidebar">
    <div class="sidebar-brand">
        <a href="{{ url('admin') }}">{{ config('app.name') }}</a>
    </div>
    <div class="sidebar-body">
        <ul>
            <template v-for="(menu, key) in menus">
                <li class="first-menu-li">
                    <a v-bind:class="[isCurrentUrl(menu.url) ? 'active' : '', 'first-menu']" v-on:click="toggleMenu(key)" v-bind:id="'menu-' + key" v-bind:href="menu.url ? menu.url : 'javascript:;'">@{{ menu.display }}
                        <span v-if="menu.sub" class="glyphicon glyphicon-chevron-down" v-bind:class="{ 'menu-expand-indicator' : active == key }"></span>
                    </a>
                    <ul v-if="menu.sub" v-bind:id="'sub-menu-' + key" class="sub-menu" v-bind:style="{display: active == key ? 'block' : 'none'}">
                        <template v-for="sub in menu.sub">
                            <li class="second-menu-li"><a v-bind:class="[isCurrentUrl(sub.url, key) ? 'active' : '', 'first-menu']" v-bind:href="sub.url" v-bind:target="sub.target ? sub.target : ''">@{{ sub.display }}</a></li>
                        </template>
                    </ul>
                </li>
            </template>
        </ul>
    </div>
</div>

可以看到是通过layout在这里获取到的menus然后再sidevar里使用

其实我的理想后台是在顶部和侧部都会有导航，顶部的导航展示的是不同的模块，左侧是模块的内部导航，类似微擎的后台

那就用一个多层的menus先把顶部的检查is current然后再把下面2层对应的菜单从左侧循环出来就可以了，后面我会实践一下然后再更。