Html5 How Does Single page application Reasonably Arrange Background Management Data

  node.js, question

I problem description:I want to make a good-looking product display page, and find some good-looking flat html style templates on the Internet (such as this: down …), the contents of which can be directly changed by modifying the html source code, but I want to be a backstage management page to facilitate people who do not understand html to replace the contents. How should I reasonably and gracefully arrange backstage management?

Second, think of ideas:
1. Backstage for each content blockCreate form, each content area is stored in the database in the form of a field (but this method feels heavy, I have to write many form items to store values, and then I have to build several data tables for data storage);
2. Through implementation at the front deskOnline template editorThroughajaxSave the content and store it in the database (I don’t know how to implement it, I saw this plug-in in wordpress background);

I don’t know how to handle this kind of business gracefully and correctly because of my limited experience in personal projects. I hope you can give me some good advice.

In fact, this is very similar to cms, but because the situation is very single, it is much simpler to handle.

For example, I have a user page for users to sign up for an activity. The templates are all the same, and you may want the operators to change some content and reuse other content. In this page, leave all the places that need to be modified empty, and then get the corresponding data from the database inside through ajax and fill in the corresponding positions.
Correspondingly, a management page should also be made for operators to modify the content simply. Generally, multiple forms are used to submit the content. Of course, it is not necessary to submit the content by using the original form. It is only necessary to construct a standard format for the content in the form and store it in the database.

The actual situation is probably like this
User page (initial state)
Activity name:
Activity date:
Place of activity:

Then use js to get the corresponding data through ajax. Generally speaking, it is better to take an object, which is consistent in the user page, management page and database.
After rendering the content, this is probably the case.
User Page (Rendered)
Activity name: obj.title
Date of activity:
Location: obj.location
Note: obj.note

The structure of this object is like this

obj = {
 Title:' activity name',
 date: '2016-04-15',
 Location:' venue of activity',
 Note:' here is the note',
 //Some users cannot see it, but the data needed by the user page can also be transferred and modified in this way, such as wechatShare.
 wechatShare: {
 Title:' WeChat Share Custom Title',
 Img:' WeChat Share Custom Picture url'

The management page is probably an input and a button responsible for a key value, and obj will be updated upon submission after modification.