【JSON2WEB】10 基于 Amis 做个登录页面login.html

原创

已于 2025-01-08 17:20:05 修改 · 3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #amis #json2web

于 2024-03-21 16:49:57 首次发布

【JSON2WEB】01 WEB管理信息系统架构设计

【JSON2WEB】02 JSON2WEB初步UI设计

【JSON2WEB】03 go的模板包html/template的使用

【JSON2WEB】04 amis低代码前端框架介绍

【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成

【JSON2WEB】06 JSON2WEB前端框架搭建

【JSON2WEB】07 Amis可视化设计器CRUD增删改查

【JSON2WEB】08 Amis的事件和校验

【JSON2WEB】09 Amis-editor的代码移植到json2web

基于 Amis 做个登录页面 login.html ，用于验证用户名和密码的，验证成功后返回token,并保存token在 localStorage中。
参考视频教程，https://www.bilibili.com/video/BV1wu411Q7y3/?spm_id_from=333.788 ，Amis官方也没有视频教程，没有一点基础学起来很费劲啊。

1 创建登录页面 Login.html

1 新建登录页面

从官方文档 https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started 拷贝hello.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" />
  <link rel="stylesheet" href="/sdk/iconfont.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: '登录JSON2WEB',
        body: {
     
     
          type: 'form',
          title: '',
          mode: 'horizontal',
          api: {
     
     
            url: 'http://127.0.0.1:5217/token/generate-token?userid=$userId&passwd=$passWd',
            method: 'post',
            adaptor: function (payload) {
     
     
              console.log(payload);
              if (payload.status === 0) {
     
     
                localStorage.setItem('token', payload.data.token);
                // localStorage.clear(); location.href = '/login.html';
                return payload;
              }
            }
          },
          redirect: '/index.html',
          body: [
            {

最低0.47元/天解锁文章