前端框架越来越多，构建页面需要写的代码一天比一天少。绝大部分人都想过拖控件写前端、只写配置文件写前端、根据内容自动生成前端等。最近因为朋友的关注，无意中发现一个百度开源的通过json生成前端的框架，据说百度内部已经在生产环境中使用，是个功能很健全的框架，这里做个试用和记录。

基本用法

通过json构建前端，不难理解是怎么一回事，以一个简单的提交表单为例。

如果用json描述这个表单，是类似这样的东西：

1
2
3
4
5
6
7
8
9
10
{
    "type": "page",
    "body": {
        "api": "",
        "type": "form",
        "title": "联系我们",
        "controls": [{ "type": "text", "label": "姓名", "name": "name" }],
        "actions": [{ "label": "发送", "type": "submit", "primary": true }]
    }
}

如果去掉用于布局和美化的各种内容，就应该生成这样的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="title>
    <span>联系我们</span>
</div>
<div class="body">
    <form class="form">
        <div>
            <span>姓名</span>
            <input name="name" placeholder="" type="text">
        </div>
    </form>
</div>
<div class="footer">
    <button type="submit">
        <span>发送</span>
    </button>
</div>

这样的话，如果有足够的模板，构建前端的内容就会非常的方便，而amis就是这样的一个项目。

实际操作

amis可以实现我可以想象到的大部分页面，复杂的功能可以在有具体的需求的时候借助文档完成。

这里就把搭脚手架和怎么通过json增加一个最简单的页面做一个演示，复杂的页面实际上也就是个复杂的json而已。

我把添加简单页面的操作都放在一次提交中了，完整的内容可以看这里。

设置一个页面

这个项目页面都放在routes/admin中，所以我们新建routes/admin/demo/Third.tsx。

然后把用来构建页面的json放进这个页面里，所以文件会是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import schema2component from "../../../utils/schema2component";

const schema = {
    "type": "page",
    "body": {
        "api": "",
        "type": "form",
        "title": "联系我们",
        "controls": [{ "type": "text", "label": "姓名", "name": "name" }],
        "actions": [{ "label": "发送", "type": "submit", "primary": true }]
    }
};

export default schema2component(schema);

给页面添加入口

页面的主页是routes/admin/index.tsx，而侧边栏定义在navigations变量里，我们只需要加一些内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    label: '新增表单',
    icon: 'glyphicon glyphicon-ok',
    children: [
        {
            label: '二级表单',
            children: [
                {
                    label: '三级表单',
                    path: 'demo/third',
                    component: ThirdForm,
                },
            ]
        }
    ]
}

这里用到了ThirdForm，在文件头上加一个引用。

1
import ThirdForm from './demo/Third';

就这么简单就完成了。

成果展示

如果你想自己尝试，可以从我的github下载本项目，然后运行，账号密码都填1即可。

1
2
npm install
npm run start

如果你不愿意本地搭这个环境，在docker里运行或者直接看个图也行，最后的效果是这样的：

效果演示

结语

完成一件事情变得越来越容易，甚至普通人动动手就能完成，就会有担心大量程序员不再被需要。

今天看到阮一峰博客上的一段话。

30年前，开发图形界面 GUI 很困难，Visual Basic 改变了这一点。
20年前，制作一个 Web 应用很困难，PHP 改变了这一点。
10年前，写一个复杂的网页布局很困难，Bootstrap 改变了这一点。
历史上，每当一个领域出现大量需要编程解决的问题，就会诞生一个通用的解决方案，解决掉90%的场景。然后，这个领域对程序员的需求就会快速减少。

我们没有办法阻止分工的逐渐变化，旧的技术越来越快的被替代、淘汰，但熟悉旧技术的人同时也有着在新分工下的优势。

类比而言，我们现在想吃面只需要开门拿个超市快递烧了水泡一下就有热腾腾的面吃。但这不意味着了解种植、制面工艺的人拥有的技能就不再被需要。自动化的种植需要手工种植的经验，种植的品种也可以有更多的精力去研究，了解工艺的人即使是做宣传也会有超出常人的优势。

我们现在熟悉的前端代码可能有一天都会被觉得非常硬核，只有少许专精于框架维护的开发者会去使用。学不动了就转岗去管理了。

import antigravity

另一方面，每一个普通人都实实在在的有了更多的力量，借助飞机，哺乳动物以900公里/小时移动，而哺乳动物需要做的只是走上去坐下。