对后台系统框架开发的理解之banner-nav篇

每个公司都会有一些对内的后台系统,比如:mis后台啊,CMS系统啊,权限管理系统啊。。。。等等等等,每个后台系统都需要有前端支持,有部分前端看不起后端系统,觉得不是面向外部用户的。没有技术含量,提高不了自己的技术水平,我做前端有5年了,最近几年大部分时候都在做后台系统,对后台系统的开发也有一些自己的看法。

后台系统的梦想:开发一套框架,让后端RD自己去搭建界面,写少量的js就能完成大部分的后台系统工作,前端只做有限的技术支持,达到节省人力的目的

实际情况:后端开发的框架不够友好,学习成本太高,RD无法独自完成页面搭建。。。经常来骚扰前端

后端搭建界面遇到的主要问题:

1.html标签嵌套错误

2.样式引入错误,class少写了或者class之间没有空格

3.js引入错误,少引入了js,或者js先后顺序写错了

...其他情况js语法错误,object和array不区分等。。。

基于上面出现的情况,我觉得一个框架暴露给rd的api要尽可能的少,标签嵌套层次要尽可能的浅,css最好一个搞定

下面大概写一下我基于vue.js来做的一套后端框架

首先我们看一下一般的后台系统的一个整体结构,如图:以阿里云为例:

对后台系统框架开发的理解之banner-nav篇 第1张

  1. 首先我们把一个系统分割为三部分,顶通banner,侧边栏Nav,主题内容body

  2. 他们之间的关系是这样的:banner是根据这个人得权限得来的,权限不同的人banner展示的不一样的当然你也可以全部都展示,然后在nav里做入口限制,一般来说:当前所处的banner节点会有个状态的颜色区分未选中的banner,

  3. 侧边栏Nav是根据所选的banner的子节点来展示对应权限的节点内容的

  4. 主体body 。。这个没啥好说的咯。。。

  5. 当然还有飘到右边的用户名啊以及退出啊什么乱七八糟的。这个用户名一般都是后端直接从session里吐出来的

下面主要说说banner和Nav如何开发划分模块


我的推荐是:应该把banner和nav放在一个通用的header里面,让后端直接写个底层的方法,每个view都会自动load这个header,banner和nav都是后端直接在页面上吐出这堆节点数据,然后前端来根据这堆数据自己来拼接banner和nav,后端吐出节点数据的时候不需要按照树形结构,直接是扁平结构的数据,数据节点里有父节点的标识就好(其实就是后端数据库里存的父节点id),这样前端就可以做一个数据拼接,渲染banner和nav;具体步骤如下:

banner模块开发如下

  1. 我们用vue.js的自定义组件定义一个banner

    <ul class="banner-box" id="bannerBox">
    	<my-banner></my-banner>
    </ul>
  2.  var list=[
    		{name:"banner1",id:1,className:"active"},
    		{name:"banner2",id:2},
    		{name:"banner3",id:3},
    		{name:"banner4",id:4},
    		{name:"banner5",id:5},
    		];
    
    vue.component('my-banner', {
     	data:function () {
        return { list: list}
      },
      	template: '<li v-for="li in list" data-id="{{li.id}}" class="{{li.className}}">{{li.name}}</li>'
    })
    var banner = new Vue({
    	el:"#bannerBox",
    	data:{
    		//list:list
    	}
    })
  3. 这样我们就只需要引入一个ul标签,再直接在html里写这个script代码其实就可以创建banner了,demo点击这里,一般我们每次点击banner都是跳转新页面,所以这里的逻辑不是很多

下面我们说一下nav的开发


nav的交互最常见的是类似于阿里云这样的

对后台系统框架开发的理解之banner-nav篇 第2张对后台系统框架开发的理解之banner-nav篇 第3张

同样的我们只需要自定义一个nav组件然后把组件内部的交互写好,剩下的就是关注数据的变化,来动态改变节点的展示,其实阿里云的这个交互是有问题的。。。。我点击左侧的导航他就默认跳转到了这个导航下的第一个节点的url对应的页面,其实用户不一定是要看第一个节点的url对应的页面,无谓的流量就这样产生了,我们完全可以拿到整个网站nav节点的数据,如用户点击了左侧导航,我们只在右侧展示这个导航对应的url,而不跳转,点击了真实的url之后再跳转

大致流程如下:

  1. <div class="nav-tree" id="navTree">
    </div>

    //这次我们不要自定义标签了,直接在new的生活添加template

  2. 我们需要nav对应的节点数据,ex格式如下:

    		var list={
     	tree1:[{
    				url:"#",
    				name:"nav1-leaf1",
    				id:"leaf1"
    			},
    			{
    				url:"#",
    				name:"nav1-leaf2",
    				id:"leaf2"
    			},{
    				url:"#",
    				name:"nav1-leaf3",
    				id:"leaf3"
    			},
    
    		],
    	tree2:[{
    				url:"#",
    				name:"nav2-叶子1",
    				id:"leaf1"
    			},
    			{
    				url:"#",
    				name:"nav2-叶子2",
    				id:"leaf2"
    			},{
    				url:"#",
    				name:"nav2-叶子3",
    				id:"leaf3"
    			},
    
    		],
    	tree3:[{
    					url:"#",
    					name:"nav3-子节点1",
    					id:"leaf1"
    				},
    				{
    					url:"#",
    					name:"nav3-子节点2",
    					id:"leaf2"
    				},{
    					url:"#",
    					name:"nav3-子节点3",
    					id:"leaf3"
    				},
    				{
    					url:"#",
    					name:"nav3-子节点4",
    					id:"leaf3"
    				},
    
    			]
     }


  3.             new 一个vue对象

    		var banner = new Vue({
    	el:"#navTree",
    	data:{
    		treeData:[
    		{
    			id:"tree1",
    			name:"nav1"
    		},
    		{
    			id:"tree2",
    			name:"nav2"
    		},
    		{
    			id:"tree3",
    			name:"nav3"
    		}
    		],
    		leafData:[{
    				url:"#",
    				name:"nav1-leaf1",
    				id:"leaf1"
    			},
    			{
    				url:"#",
    				name:"nav1-leaf2",
    				id:"leaf2"
    			},{
    				url:"#",
    				name:"nav1-leaf3",
    				id:"leaf3"
    			},
    
    		]
    	},
    	replace: false,
      	template: ' <ul class="nav-tree-box"  ><li  v-for="li in treeData" data-id="{{li.id}}" v-on:click="treeClick(li,$event)">{{li.name}}</li></ul><ul class="nav-leaf-box" id="navLeafBox"><li   v-for="li in leafData" data-id="{{li.id}}"><a href="{{li.url}}">{{li.name}}</a></li></ul>',
    	methods:{
    		treeClick:function(vm,event){
    			 this.leafData=list[vm.id];
    		}
    	}
    });
  4. over

                我们给navTree的节点绑定了点击事件根据点击的节点id来改变data里的leafData的值demo点击这里


大致的baner开发就讲完了,其实vue只是给了我们一个工具,让我们实现数据绑定更容易。重要的是思路,后续我们可以讲讲开发搜索表单的组件开发,组件开发。。高内聚,低耦合

本文标题:对后台系统框架开发的理解之banner-nav篇
本文链接:https://56way.com/p/76.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。