类似像这样的后台管理系统是如何实现的呢？

Question

类似这样的后台管理系统，我们通过点击左侧的菜单来实现右边内容的切换，那么在不使用框架的前提下这是如何实现将右侧的不同内容载入进来哦呢？是一开始就写死的吗？

Answer 1

1. iframe引入
2. ajax引入html再写到页面上
3. 各大单页应用框架 vue react angular。然后还有一些引入资源的框架呀啥的

Answer 2

实现方式多种多样
你可以把每个页面都看作是一个新页面
也可以把左边看成是独立的，那么右边看成新页面，通过iframe来加载；或者通过ajax去请求来动态的进行替换

Answer 3

首先单页应用还是的推荐使用框架，如果确定不使用框架的话 右侧通过iframe来加载 也是方法之一， 实在不行就用div 或者ul li 模拟，不过这样的话，需要把每一栏 做成一个li 并且事先需要把css 和html 写好，点击左侧的时候去请求数据填充进li。

Answer 4

楼主我告诉你，看了好多这种系统源码。既不是单页面应用、也不是iframe 。每个页面都是一个完整的（包括左侧菜单导航。。）

Answer 5

不用框架的实现可以研究一下我的这个小栗子。链接：https://pan.baidu.com/s/1ptv6... 密码：4ben

Answer 6

利用ajax局部刷新。

Answer 7

模板引擎或者iframe

Answer 8

iview-admin,你可以了解一下是vue的前端框架项目，iView 发布后台管理系统 iview-admin

Answer 9

前端的话，可以使用react实现，结合蚂蚁金服的antd UI框架和d3的各种图标结合。

Answer 10

通过iframe 将网页分为三块 左侧点击切换右侧其实就是超链接

Answer 11

不是说iframe什么的不好吗 大家怎么还都在用 （迷茫不懂）

Answer 12

这个是典型的单页面应用啊,为什么不用框架??为什么?

Answer 13

如果不用框架，最简单的就是ajax引入html

Answer 14

在不使用框架的前提下就是iframe
<iframe scrolling="yes" frameborder="0" :src="main"></iframe>
我以前的一个项目就是这么弄的，用了Vue做双向数据绑定，
点击左侧触发updated就改变main(当时用的是Vue1.0)

Answer 15

我最近就一直在开发公司产品的后台管理系统，用的是vue-router

Answer 16

右侧导航其实是一个页面，左边内容不断变化的，可以使用iframe 或者使用pjax

Answer 17

点击左边的按钮，ajax获取后台返回的数据，再实时渲染，很基础

Answer 18

前后端分离的话，通过ajax获取后台返回的数据，非前后端分离，即每个页面都是完全的一个页面，通过标示位令到当前表单高亮

Answer 19

这个后台需要服务器端配合获取相关数据，UI部分有很多模式，老的是框架结构，新的是单页，再结合一些图形显示库开发。

Answer 20

刚做完一个和这非常类似的后台管理。用的是react 框架 和 阿里的 antd dva 搭建的。这些数据可视化 可以使用echarts 和 hcharts 或者百度的 插件库 都是很好用的。搭建起来很快，很方便，做出来的效果绝对令人满意 建议楼主看一下这个pro， 手动去写一个demo，基本上就可以上手了https://pro.ant.design/

Answer 21

Pjax的push status了解一下

Answer 22

一般的话都是利用hash 做路由，配合ajax获取页面html，现在h5一般都是用history API的pushstate或是replacestate配合popstate事件做

Answer 23

如果在不用框架的基础上，你可以这样操作，在你现在的这个页面上面定义一个主方法，在你每一次点击左侧菜单的时候，通过ajax或者其他的异步方式，去后台拿对应的模板页面，然后渲染在右侧区域，还有另一种方式就是不用这种异步加载，通过左侧的菜单地址直接去后台拿对应的模板数据来渲染，很多富客户端也都是用异步加载这种方式，体验相对会比较好一点。

Answer 24

php是世界上最好的语言，自带模版语法

Answer 25

这么简单还用问啊

Answer 26

简单来说。这就是个tab切换一样的问题。

Answer 27

楼上的，哪有那么多为什么！题主问的是后台如何实现，你再让题主再学一个前端框架？
还有楼下的，你从开始就什么都知道？还这么简单。