百度低代码框架amis实现登录页实例

百度amis实现用户登录页面实例

passerby&

3990人浏览 · 2022-07-24 22:44:34

passerby& · 2022-07-24 22:44:34 发布

前言

随着互联网的发展如今已经出现了越来越多更加简洁的框架了，amis就是一种通过配置json代码来实现不同页面效果的框架。此文章是我自己的一个学习实例。

官方api网址

 https://aisuda.bce.baidu.com/amis/zh-CN/components/index

国内文档网址

https://aisuda.bce.baidu.com/amis/zh-CN/docs/index

实例效果

在这里插入图片描述

json代码

{
  "type": "form",
  "title": "",
  "body": [
    {
      "label": "登录名",
      "type": "input-text",
      "name": "login_name",
      "required": true,
      "visibleOn": "!this._logined",
      "placeholder": "请输入用户名"
    },
    {
      "type": "input-password",
      "label": "密码",
      "name": "password",
      "id": "u:6d67561d4b38",
      "required": true,
      "visibleOn": "!this._logined"
    },
    {
      "type": "checkboxes",
      "label": "",
      "name": "checkboxes",
      "options": [
        {
          "label": "记住密码",
          "value": "A"
        },
        {
          "label": "选自动登录",
          "value": "B"
        }
      ],
      "id": "u:a56f72eb2a9f"
    }
  ],
  "id": "u:cbe2b7997281",
  "submitText": "登录",
  "api": {
    "method": "post",
    "url": "/privilege/login",
    "dataType": "json",
    "adaptor": "",
    "requestAdaptor": "document.cookie = '';\r\nreturn api;"
  },
  "messages": {
    "fetchFailed": "",
    "saveSuccess": "登录成功",
    "saveFailed": "登录失败",
    "fetchSuccess": ""
  },
  "mode": "horizontal",
  "horizontal": {
    "leftFixed": "",
    "left": 2,
    "right": 10
  },
  "redirect": "",
  "checkAll": false,
  "reload": "",
  "debug": false,
  "affixFooter": false,
  "visibleOn": "",
  "panelClassName": "b-info"
}

完整代码


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>登录</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"
      title="default"
      href="https://unpkg.com/amis@beta/sdk/sdk.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/amis@beta/sdk/helper.css"
    />
    <script src="https://unpkg.com/amis@beta/sdk/sdk.js"></script>
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://unpkg.com/history@4.10.1
/umd/history.js"></script>
    <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>
      (function () {
        let amis = amisRequire('amis/embed');
        const match = amisRequire('path-to-regexp').match;

        // 如果想用 browserHistory 请切换下这处代码, 其他不用变
        // const history = History.createBrowserHistory();
        const history = History.createHashHistory();

        const app = {
          type: 'service',
          schemaApi: 'get:/pages/index.json'
        };

        function normalizeLink(to, location = history.location) {
          to = to || '';

          if (to && to[0] === '#') {
            to = location.pathname + location.search + to;
          } else if (to && to[0] === '?') {
            to = location.pathname + to;
          }

          const idx = to.indexOf('?');
          const idx2 = to.indexOf('#');
          let pathname = ~idx
            ? to.substring(0, idx)
            : ~idx2
            ? to.substring(0, idx2)
            : to;
          let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
          let hash = ~idx2 ? to.substring(idx2) : location.hash;

          if (!pathname) {
            pathname = location.pathname;
          } else if (pathname[0] != '/' && !/^https?\:\/\//.test(pathname)) {
            let relativeBase = location.pathname;
            const paths = relativeBase.split('/');
            paths.pop();
            let m;
            while ((m = /^\.\.?\//.exec(pathname))) {
              if (m[0] === '../') {
                paths.pop();
              }
              pathname = pathname.substring(m[0].length);
            }
            pathname = paths.concat(pathname).join('/');
          }

          return pathname + search + hash;
        }

        function isCurrentUrl(to, ctx) {
          if (!to) {
            return false;
          }
          const pathname = history.location.pathname;
          const link = normalizeLink(to, {
            ...location,
            pathname,
            hash: ''
          });

          if (!~link.indexOf('http') && ~link.indexOf(':')) {
            let strict = ctx && ctx.strict;
            return match(link, {
              decode: decodeURIComponent,
              strict: typeof strict !== 'undefined' ? strict : true
            })(pathname);
          }

          return decodeURI(pathname) === link;
        }

        let amisInstance = amis.embed(
          '#root',
          app,
          {
            location: history.location
          },
          {
            // watchRouteChange: fn => {
            //   return history.listen(fn);
            // },
            updateLocation: (location, replace) => {
              location = normalizeLink(location);
              if (location === 'goBack') {
                return history.goBack();
              } else if (
                (!/^https?\:\/\//.test(location) &&
                  location ===
                    history.location.pathname + history.location.search) ||
                location === history.location.href
              ) {
                // 目标地址和当前地址一样，不处理，免得重复刷新
                return;
              } else if (/^https?\:\/\//.test(location) || !history) {
                return (window.location.href = location);
              }

              history[replace ? 'replace' : 'push'](location);
            },
            jumpTo: (to, action) => {
              if (to === 'goBack') {
                return history.goBack();
              }

              to = normalizeLink(to);

              if (isCurrentUrl(to)) {
                return;
              }

              if (action && action.actionType === 'url') {
                action.blank === false
                  ? (window.location.href = to)
                  : window.open(to, '_blank');
                return;
              } else if (action && action.blank) {
                window.open(to, '_blank');
                return;
              }

              if (/^https?:\/\//.test(to)) {
                window.location.href = to;
              } else if (
                (!/^https?\:\/\//.test(to) &&
                  to === history.pathname + history.location.search) ||
                to === history.location.href
              ) {
                // do nothing
              } else {
                history.push(to);
              }
            },
            isCurrentUrl: isCurrentUrl,
            theme: 'cxd'
          }
        );

        history.listen(state => {
          amisInstance.updateProps({
            location: state.location || state
          });
        });
      })();
    </script>
  </body>
</html>

低代码技术专区

低代码爱好者的网上家园

更多推荐

低代码：引领数字化革命的新浪潮

随着科技的飞速发展，数字化转型已经成为企业发展的必然选择。在这一过程中，低代码技术应运而生，以其高效、简便的特点，引领着一场前所未有的数字化革命。本文将从低代码技术的内涵、发展背景、应用优势以及在我国的发展现状等方面进行深入剖析。

低代码技术专区

低代码与数字经济的大腾飞：构建未来的新引擎

低代码（Low-Code）是指通过图形化界面和配置化方式，降低软件开发门槛，使非专业开发人员也能快速构建应用程序的一种技术。低代码平台提供了丰富的组件、模板和接口，开发者可以通过拖拽、配置和少量编程的方式，快速搭建满足自身需求的应用程序。低代码技术起源于20世纪90年代的敏捷开发，随着云计算、大数据、人工智能等技术的快速发展，低代码平台逐渐成为了一种主流的开发模式。