New wine in old bottles: Use VUE for functionality in old pages

The cause of

The company has some old projects that need to be maintained. How old are these projects? There is no separation between the front and the back. I recently received a requirement for an old system, and one of the requirements was to modify the manual distribution function to make it more usable. Let’s take a look at what the original interface looked like:

Let’s look at the interface for the new requirement:It’s not really that much, is it? That’s what I thought when I got the request, until I started looking through the system code. Let’s start by looking at the most troublesome aspect of this interface, which is the left and right selection table that resembles the shuttle box. Let’s take a look at the original code implementation of the system: by checking the code, we found that the UI used by the whole system is jquery-UII went to the jquery-UI website and didn’t see the shuttle box widget library, okay. It’s actually fine. Until I looked up the source code for how to implement the modal box, the whole person was not good, the specific core of the interface display:The entire modal box is generated from the string splicing template!! Jquery-ui does not have a shuttle box component library. To implement such a complex function, you must write a shuttle box by hand and then implement it by concatenating strings. I am in deep tragedy. I was thinking that the company’s common Element library has a shuttle box component that, with a bit of tweaking, can do what it wants. Can I use vUE to implement this modal box in the old page? In theory this is possible because VUE just generates the corresponding code by inserting it into the ID. I only call the modal box separately and do not interact with the existing module functions. If it does, it is mostly controlled by the ID and should be able to achieve this function.

So, to start with the most rudimentary attempt, write a sample code to prove that it can be implemented in this page: Write this ID anywhere on the old pageIntroducing compiled JS addresses, CSS files,Open the old page in the system to see if the code generated by vUE has been inserted into the page. I tested it and it worked. This is easy to do, the next is to realize the function of the modal box through VUE, click to open the modal box, and the data interaction with the original page through ID to realize and read it.

The final result is as follows:In the old page using VUE implementation function, as long as you think through the joint, is not very complicated, I just tell you a way to achieve it.