How is a background management system like this implemented?

in a background management system like this, we can switch the content on the right by clicking on the menu on the left, so how can we load the different content on the right without using the frame? Was it written dead in the first place?


  1. iframe introduces
  2. ajax introduces html and then writes to the page
  3. the major single-page application framework vue react angular. Then there are some frameworks for introducing resources

can be implemented in a variety of ways
you can think of each page as a new page
or the left as an independent page, then the right as a new page, loaded through iframe; Or through the ajax to request to dynamically replace


first single-page application or the recommended use of the framework, if you are sure not to use the frame, then the right side to load through iframe is also one of the methods, it is not possible to use div or ul li simulation, but in this case, you need to make each column into a li and need to write css and html in advance, click on the left side to request data to fill in the li.


I'm telling you, I've seen a lot of this system source code. It is neither a single-page application nor an iframe. Each page is complete (including the left menu navigation. )


take a look at my little chestnut without the implementation of the framework. Link: https://pan.baidu.com/s/1ptv6. password: 4ben


use ajax local refresh.


template engine or iframe


iview-admin, you can understand that it is the front-end framework project of vue. iView releases background management system iview-admin


front-end, you can use react implementation, combined with Ant Financial Services Group's antd UI framework and various icons on D3.


divide the page into three pieces through iframe. Clicking on the left side and switching to the right side is actually a hyperlink


doesn't it mean that iframe is not good? why is everyone still using it (confused)


this is a typical single-page application, why not use a frame? Why?


if you don't use a frame, the easiest thing for ajax is to introduce html


without using a frame, that is, iframe
< iframe scrolling= "yes" frameborder= "0": src= "main" > < / iframe >
this is how one of my previous projects used Vue for two-way data binding.
Click on the left to trigger updated to change the main (Vue1.0 was used at that time)


I have been developing the background management system of the company's products recently, using vue-router


the navigation on the right is actually a page, and the content on the left is constantly changing. You can use iframe or use pjax


Click the button on the left, ajax to obtain the data returned by the background, and then render it in real time. Very basic


separation of the front and back ends, then get the data returned by the background through ajax, not the separation of the front and rear, that is, each page is a complete page, by marking the bit to make the current form highlight


this background requires server-side cooperation to obtain relevant data, UI part has a lot of patterns, the old is the framework structure, the new is a single page, and then combined with some graphics display library development.


has just finished a background management that is very similar to this. It is built with react framework and Ali's antd dva. These data visualization can use echarts and hcharts or Baidu plug-in library is very easy to use. It is very fast and convenient to set up, and the result is absolutely satisfactory. It is suggested that the landlord should take a look at this pro, and write a demo, manually. It is basically possible to start

Pjax push status to learn about


. Generally speaking, hash is used to route and cooperate with ajax to get the page html,. Now h5 generally uses history API's pushstate or replacestate with popstate events to do


if you don't use a frame, you can define a main method on your current page. Every time you click on the left menu, go to the background to get the corresponding template page through ajax or other asynchronous methods, and then render it in the right area. Another way is not to use this asynchronous loading, through the menu address on the left to directly go to the background to get the corresponding template data to render, many rich clients also use asynchronous loading this way, the experience will be relatively better.


php is the best language in the world. It comes with template syntax


as simple as asking


. This is the same problem as tab switching.


upstairs, there are so many why! What the subject asks is how to achieve it in the background, and you let the subject learn another front-end framework?
and downstairs, you know everything
from the beginning? It's still that simple.

Menu