Today, I would like to share with you an open source project — AMS, an open source management back-end front-end solution based on jSON-like configuration developed by VipSHOP.

background

Let’s review the way the management background is set up.

  1. In the most primitive way, the front and back end is not separated, the front and back end code is fused together, often the back end is responsible for the whole management background
  2. With the development of the separation of front and back ends and the rise of JQ, the front end can be implemented completely by hand, or can be built quickly using frameworks like Bootstrap
  3. With the rise of MVVM frameworks like React/Vue, there are also many corresponding supports, such as Element-UI and Ant Design

Due to the background management UI requirements is not high and the general function, the use of the UI framework to front-end bring great convenience, front end can not need to care about the implementation of UI components, only need the UI framework provides components like building blocks, and then to write data interactive logic, can be faster implementation of a management background.

This seems perfect, especially with a high quality UI framework

But! After a while, you’ll still have to write a lot of code:

  • UI component code. For example, if you write a list, take element-UI as an example, you might need to use itel-table,el-table-column“And then another pageel-pagination. Maybe 90% of the scenes are like that, but you have to write it every time, and if you copy it, maybe fine-tune it
  • After you build the UI, you write the data logic interactions, such as requesting a list interface, combing through the interface fields, stuffing data into a table, and then handling the data interaction logic when paging. The same goes for each item and each list.

The example above is just a list scenario, there are many other background functions such as background Router, forms, charts, search, filter, search, add, delete, change, and so on, which are very common.

Is there an easier building block? Finally, this building block has some common data interaction logic!

Or you can try AMS!!

AMS

AMS is the acronym of Admin Materiel System, which means management background material System. It is a complete solution to quickly build management background in the form of JSON configuration.

Features:

  • The underlying layer is based on Vue + Element-UI (AMS is not trying to create a new UI framework)
  • Through the FORM of JSON configuration to quickly build management
  • Built-in common data interaction logic, such as search, add, delete, change

Let’s look at a simple Demo: the official starter Demo on JSRUN

You can also try the AMS Starter Demo on Scrimba.

Project information

Open source project address: github.com/vipshop/ams

Open Source project author: ViPSHOP team

Official document address: vipshop.github. IO /ams/