8

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

 8 months ago
source link: https://muyuuuu.github.io/2024/01/03/full-stack-amis-tornado/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

2024-01-03

1 3.2k 3 分钟

写在前面。希望你不会有快速搭建 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，解压放到本地文件夹。目录结构：

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK