合作开发-实现后台管理框架

图中所示框架是一个B/S最基本的结构,共有4部分组成:上下分别为Header、Footer;左右分别为Menu、Content。Header 和footer 部分用来显示网站的基本信息,Menu用来划分管理划分后台的业务模块,content来展示每个业务所对应的处理界面。

因为每个模块对应一个网页,而且要保证所有网页的统一性,所以在刚开始布局的时候,想到将该框架构造一个母版页,运用该母版页新建网页,然后通过菜单中的超级链接串起来的。这样做,看起来是很好的运用了母版页的功能,实现了固定部分的复用(通常情况下,固定部分页面设计复杂,变化部分设计简单),但是还存在很多的不便。最明显的,页面间在跳转时整个页面会有一闪一闪的效果,因为每次跳转,整个页面都需要重新加载一次,如果母版页的内容很多,加载就会时间长,会影响网站的流畅性。

标签Target属性的掌握,使我们解决了这个难题。

先简单介绍一下该属性:如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。我们知道Iframe可作为容器,它可以盛放web窗体所以,我们在原先的设计界面的Content部分,添加一个Iframe 控件,将菜单带有超级链接标签中的target属性设置为Target=“iframe.name”
,这样所有的业务页面就会会自动载入到Iframe中了。

这样一来,每个页面在布局时,只要考虑满足自己的业务就可以了;而且在页面加载的时候,只加载变化的部分到Iframe中显示,降低了载入页面的数据量,节约了加载时间,保证了运行的流畅。同时还有一个意想不到的好处:大家知道页面传值中Querystriing 方法有一个缺陷,被传得值会被显示在地址栏的URL中,当用这种方法实现时,地址栏里显示的一直是本框架的页面地址,这样一来就将这种弊端给屏蔽掉了

总结:该管理导航页面,主要依赖Iframe控件+Html标签的target属性实现,不但让页面的跳转加载时更简单,而且有效隐藏了页面间的传值信息。

时间: 2024-10-13 22:13:34

合作开发-实现后台管理框架的相关文章

一步步带你做vue后台管理框架(三)——登录功能

系列教程<一步步带你做vue后台管理框架>第三课 github地址:vue-framework-wz 线上体验地址:立即体验 <一步步带你做vue后台管理框架>第一课:介绍框架 <一步步带你做vue后台管理框架>第二课:上手使用 认证又称"验证"."鉴权",是指通过一定的手段,完成对用户身份的确认.身份验证的方法有很多,基本上可分为:基于共享密钥的身份验证.基于生物学特征的身份验证和基于公开密钥加密算法的身份验证. 登录鉴权功能是

一步步带你做vue后台管理框架(二)——上手使用

系列教程<一步步带你做vue后台管理框架>第二课 github地址:vue-framework-wz 线上体验地址:立即体验 闲扯再多不会用也没白搭,这节课我来带大家直接上手框架,体验到简单方便之后你就会爱上这个框架欲罢不能的. 首先跟所有的vue项目一样,两种方式,一种去项目github地址:vue-framework-wz上下载代码包到本地,或者使用 git clone https://github.com/herozhou/vue-framework-wz.git 无论哪种方式,只要我们

Rubix - ReactJS Powered Admin Template 后台管理框架

Rubix - ReactJS Powered Admin Template  后台管理框架,使用 ReactJS. http://rubix400.sketchpixy.com/ltr/charts/rubix/piedonut# https://wrapbootstrap.com/theme/rubix-reactjs-powered-admin-template-WB09498FH

一步步带你做vue后台管理框架(一)——介绍框架

系列教程<一步步带你做vue后台管理框架>第一课 github地址:vue-framework-wz 线上体验地址:立即体验 在如今的科技公司中有很多前端的需求都是要写一个类似于后台管理框架,日常的工作中会有太多重复的内容加重我们程序员的工作,浪费我们的时间,导致不能早点下班回家吃饭. 普通程序员拿到一个项目总是会重新写,写路由花了两小时,写vuex花了两小时,写个Header组件花了1小时,侧边栏又要1小时,这样下来项目拿到手一天的时间都没真正去做项目的需求,再加上改bug,写css,准备工

仿wordpress管理后台设计的后台管理框架

仿wordpress管理后台设计的后台管理框架 本Markdown编辑器使用[StackEdit][6]修改而来,用它写博客,将会带来全新的体验哦: html的padding-top来实现整体下移,然后top使用position:fixed定位到顶部. leftbg的position:absolute来实现左侧背景定位. 左右分栏是利用float特性,让右侧可以自动适应. <!DOCTYPE html> <html> <head> <meta charset=&q

Springboot 后台管理框架halo.kotlin

https://gitee.com/backControl/halo-kotlin 现在开了两个分支,一个分支在做数据分析,一个分支是集成spring oauth2.0技术 之后会接入最新的技术和实现 这是一个后台管理系统 采用spring boot,集成freemarker,shiro,spring cache,spring data jpa 前端采用bootstrap,dataTables 等等一些跟bootstrap集成的插件 记住要编译过之后在执行下面的操作 访问地址:http://12

MVC 后台管理框架 FineUIMvc 在线示例

 FineUIMvc 在线示例 基础版下载

ACE admin 后台管理框架

一.样式 1.常见按钮 .btn-app .btn-group .btn-corner .btn-xs .btn-sm .btn-mini  .btn-minier .btn-defalut .btn-danger .btn-info  .btn-primary .btn-success .btn-warning .btn-grey .btn-pink .btn-purple .btn-link .btn-inverse

简洁的ExtJs5.0后台管理框架

Ext.onReady(function() { Ext.create('Ext.container.Viewport', { layout : 'border', defaults : { autoScroll : true }, items : [ { region : 'north', html : ' <div text-align:center; region="north" split="true" border="false"