写在前面。希望你不会有快速搭建 UI 界面为他人服务这种迫切的需求。虽然这是我的博客，但是我并不希望你搜到他。对于完全未知的领域，快速搭建、快速学习、不会就去学、不会就查、速成，通过这种方式写出来的代码一定是不好的，心累的，事倍功半的，也一定存在多多少少的 bug 和无法实现的逻辑。

但也有一个好消息，如果你完全不会前端后端，只会 Python，看了本文也能搭建完成的前后端服务，但距离入门的全栈工程师还差很远。

前端开发

在开发初期，我真的以为是弄一些简单的图表就结束，所以没放在心上。但是越往后项目越大，我的 js 和 html 水平实在驾驭不了，工作时也不会给我足够的时间让我从头学这些东西。每天晚上都在给之前的同学打电话询问：这种交互逻辑该怎么实现。在她帮我写了整体架构后，我便在架构上修修改改，查 api，整体是能满足需求的。

但是后续，项目又变大了，要求这个，要求那个，要求各种各样的 UI 界面和交互。0 前端基础的我实在应付不了，麻烦同学也不是长久之计，于是开始使用 amis 搭建前端界面。

选择低代码框架 amis

以上内容摘自百度 amis 的官方文档：

在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，必须懂 npm、webpack、react/vue，必须熟悉 ES6 语法，最好还了解状态管理，比如 Redux，如果没接触过函数式编程，入门都很费劲。而入门之后会发现它还有巨大的生态，相关的库有 2347 个，很多功能相似，挑选成本高。然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了……
用 amis 只需要几百行 JSON 配置，不需要了解 React/Vue、Webpack，甚至不需要了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发。
可以借助 amis 的可视化编辑器，快速完成页面的开发。对于大部分常用页面，应该使用最简单的方法来实现，甚至不需要学习前端框架和工具。
amis 在百度内部得到了广泛使用，在 6 年多的时间里创建了 5 万页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求。

下载 amis 并使用

下载链接中的 sdk.tar.gz，解压放到本地文件夹。目录结构：

1 2	sdk/ index.html

index.html 中的内容，重点是 14，15，33 行中的 sdk 路径，需要正确的指定。index.html 中的内容：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>amis demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="./sdk/sdk.css" />
    <link rel="stylesheet" href="./sdk/helper.css" />
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
      html,
      body,
      .app-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="root" class="app-wrapper"></div>
    <script src="./sdk/sdk.js"></script>
    <script type="text/javascript">
      (function () {
        let amis = amisRequire('amis/embed');
        // 通过替换下面这个配置来生成不同页面
        let amisJSON = {
          type: 'page',
          title: '表单页面',
          body: {
            type: 'form',
            mode: 'horizontal',
            api: '/saveForm',
            controls: [
              {
                label: 'Name',
                type: 'text',
                name: 'name'
              },
              {
                label: 'Email',
                type: 'email',
                name: 'email'
              }
            ]
          }
        };
        let amisScoped = amis.embed('#root', amisJSON);
      })();
    </script>
  </body>
</html>

用浏览器打开 index.html，就能看到一个简单的页面。当然，也可以打开百度提供的前端编辑器，以拖拉拽的形式完成前端界面的开发即可，类似 qtdesigner 或者 C# 开发 .NET FrameWork 的操作。

友情提示：和任何 UI 开发一样，建议为每个组件提供 flex 布局或者容器，后期容易调整样式，开发出来的 UI 界面也更好看。开发完成之后，点击这个按钮获取 json 文件：

待补充图片

然后拷贝到 index.html 中的 let amisJSON = 字段，就完成了 UI 界面的开发。注意：这里只是完成了 UI 界面开发，并没有和后台的数据相关联，并没有捕捉用户的动作，完成交互和响应需要单独写代码。需要在下图的位置添加事件：

待补充图片

如果你有幸搞过 Qt 或者 .NET FrameWork 的开发，那么一定对这个东西不陌生。熟练使用事件可以让界面的响应更加流畅。下面开始介绍事件的使用，并和后端相关联。

后端

结语

说实话，入职 3 个月培训结束后，一直在被安排干前后端开发的活，为他人提供一些网站服务。然而实际是我是一个算法工程师，每天到工位都感觉自己像个傻逼。

Just for Life.

前后端全栈开发：0 基础搭建 UI 界面和提供数据服务

前端开发

选择低代码框架 amis

下载 amis 并使用

后端

结语