javascript - html5 单页面应用如何合理的安排后台管理数据

一、问题描述：我想做一个比较好看的产品展示页面，在网上找到了一些比较好看的扁平化html风格的模板（比如这种：http://sc.chinaz.com/mobandemo.aspx?down...），里面的内容，可以直接通过修改html源码进行更改，但是我想做一个后台管理的页面，方便不懂html的人进行内容上的替换，我应该要怎样合理且优雅的安排后台管理？

二、想到的思路：
1、为每一个内容块在后台设立表单，将每一个内容区以字段的形式存储到数据库，（但这种方法感觉很笨重，我要写很多个表单项来储存值，然后还要建立好几个数据表进行数据存储）；
2、通过在前台实现在线的模板编辑器，通过ajax将内容保存下来存放到数据库（不知道怎么实现，我在wordpress后台看到过这种插件）；

因为个人项目经历有限，不知道如何优雅且正确的处理这类业务，希望各位朋友给点良策。

回复内容：

一、问题描述：我想做一个比较好看的产品展示页面，在网上找到了一些比较好看的扁平化html风格的模板（比如这种：http://sc.chinaz.com/mobandemo.aspx?down...），里面的内容，可以直接通过修改html源码进行更改，但是我想做一个后台管理的页面，方便不懂html的人进行内容上的替换，我应该要怎样合理且优雅的安排后台管理？

二、想到的思路：
1、为每一个内容块在后台设立表单，将每一个内容区以字段的形式存储到数据库，（但这种方法感觉很笨重，我要写很多个表单项来储存值，然后还要建立好几个数据表进行数据存储）；
2、通过在前台实现在线的模板编辑器，通过ajax将内容保存下来存放到数据库（不知道怎么实现，我在wordpress后台看到过这种插件）；

因为个人项目经历有限，不知道如何优雅且正确的处理这类业务，希望各位朋友给点良策。

其实这个和cms是很类似的，只是由于情况很单一，所以处理起来简单不少。

举个例子，比如我有一个用户页面，用于用户报名参加某项活动。模板都是一样的，可能想运营人员改一些内容，可以给别的内容复用，那么就在这个页面中，把所有需要修改的地方空着，然后通过ajax从数据库里取对应的数据，填入对应的位置即可。
相应的，也要做一个管理页面，给运营人员简单修改内容用，一般就是多个表单用于提交内容，当然一般不需要用原生的表单提交，只要把表单中的内容构造出一个标准格式，存入数据库即可。

实际情况大概是这样
用户页面(初始状态)
活动名称：
活动日期：
活动地点：
备注：

然后用js通过ajax获取对应的数据，一般来说取一个对象比较好，这个对象在用户页面、管理页面和数据库中都是一致的。
内容渲染完毕，大概是这样
用户页面（渲染完毕）
活动名称：obj.title
活动日期：obj.date
活动地点：obj.location
备注：obj.note

这个对象的结构大概是这样

<code>obj = {
    title: '活动名称',
    date: '2016-04-15',
    location: '活动地点',
    note: '这里是备注',
    //一些用户看不到，但是用户页面需要用到的数据，也可以通过这种方式传递和修改，例如wechatShare
    wechatShare: {
        title: '微信分享自定义标题',
        img: '微信分享自定义图片url'
    }
}</code>

管理页面大概就是一个input一个button负责一个键值，修改完毕后提交就把obj更新。

那这个貌似没有你想象的那么难，你要知道，程序大多数都是给不懂编程的人用的。淘宝用户上亿，这里可能只有不到百分之一的人懂编程，但是淘宝还是在正藏运行，所以你想的问题是多余的。
你要做的是在后台，也就是服务器端实现RESTapi接口给前端调用就行了。所有程序的本质都是数据的增删改查，最后保存到存储模块（比如数据库，现在存储的东西太多了）。后端的接口包含了数据操作的所有逻辑，所以定义接口之前逻辑是否全面，清晰很重要。至于那种语言实现就无所谓了，Java，c#，PHP等都OK。
后端OK之后前端就简单很多了，因为不需要考虑数据操作的逻辑了。前端需要让美工根据功能（后端的接口）做出对应的界面，然后让前端程序员调用页面加上逻辑，事件等。调用后端接口，将数据操作保存到后端服务器，流程就是这样。
举个例子，用你的话说，一个完全不懂html的用户打开了你的网页，页面需要呈现一个商品列表。用户有点开了其中一个商品，页面要呈现出该商品的详细信息。这个过程基本需要以下几个操作：

1. 后端定义两个接口，一个是商品列表接口，另一个是商品详细信息接口，用于返回对应信息。

2. 美工设计两个静态页面，商品列表页面和商品详细信息页面。

3. 前端程序员首先要去请求RESTapi得到商品列表的数据，然后把数据绑定到列表页面，这样页面就是活的了，可以随着数据变化而变化。

4. 前端程序员给列表中的每个商品加点击事件，当用户点击对应商品时，请求商品详细信息，并加载详细信息页面，把数据绑定到页面上。这个地方简单说，也可以在加列表的时候把详细信息也加载过来，这样请求详细信息的方式就变了，速度会很快，不详细说了。

这些所有过程，不需要用户懂一点编程知识，但是用起来也会很顺手。

用不到数据库，反正是单页直接把每项内容serialize进文本存储就行。
我就举个简单的例子：（格式不规范，没有样式也没有安全过滤）
假定展示页show.php：

<code><?php $arr=unserialize(file_get_contents('config.txt'));
?>
网站名称：<?php echo $arr['title']; ?>
网站内容：<?php echo $arr['content']; ?></code>

假定设置页setup.php：

<code><form method="post">
网站名称设定：<input name="title">
网站内容设定：<input name="content">
</form>
<?php $arr=array(
'title'=>$_POST['title'],
'content'=>$_POST['content'],
);
file_put_contents('config.txt',serialize($arr));</code>