百度 amis 登陆页

原创已于 2022-11-22 17:30:14 修改 · 3.3k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

wycs11

关注

标签

#低代码

分类前端开发

于 2022-11-22 17:25:17 首次发布

amis 专栏收录该内容

1 篇文章

订阅专栏

前言

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

官方文档

amis - 低代码前端框架

练手页面

代码有一个后端这里就不发出来了登录会跳转到 /admins
登录成功 localStorage 会添加一个token 以后每次调用的时候会带上这个token
最好先将sdk,css 等静态文件下载到本地测试

实例效果

完整代码

<!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="{% static 'amis/public/resource/sdk_2.1.0/sdk.css' %}" />
    <link rel="stylesheet" href="{% static 'amis/public/resource/helper.css' %}" />
    <script src="{% static 'amis/public/resource/sdk_2.1.0/sdk.js' %}"></script>
    <script src="{% static 'amis/public/resource/vue@2' %}"></script>
 -->
    <link rel="stylesheet" title="default" href="https://unpkg.com/amis@2.4.0/sdk/sdk.css" />     
    <link rel="stylesheet" href="https://unpkg.com/amis@2.4.1-beta.0/sdk/helper.css" />     
    <script src="https://unpkg.com/amis@2.1.0/sdk/sdk.js"></script>     
    <script src="https://unpkg.com/vue@2"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/md5.js"></script>
    <style>
    html,
    body,
    .app-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .loginTitle {
        text-align: center;
    }

    .loginTitle p {
        margin: 10px auto;
        color: black;
        font-size: 25px;
    }
    </style>
</head>

<body>
    <div id="root" class="app-wrapper"></div>
    <script>
    (function() {
        let amis = amisRequire('amis/embed');

        // 清理掉vue控制台无效打印
        Vue.config.productionTip = false;
        Vue.config.devtools = false

        // 全局后端url
        // const serverUrl = 'http://192.168.1.127:8080';
        const serverUrl = location.origin;

        // 清理token
        localStorage.removeItem("admins_token");

        const app = {
            type: 'page',
            title: "",
            style: {
                "backgroundImage": "linear-gradient(180deg, #86a4e9, transparent)"
            },
            cssVars: {
                "--Form-input-onFocused-borderColor": "#e8e9eb",
                "--Form-input-onHover-borderColor": "#e8e9eb",
            },
            body: {
                "type": "grid-2d",
                "cols": 12,
                "grids": [{
                        x: 5,
                        y: 5,
                        h: 1,
                        w: 4,
                        width: 200,
                        type: 'form',
                        mode: 'horizontal',
                        title: "",
                        api: {
                            url: "${serverUrl}/admins/master/login/",
                            method: "post",
                            dataType: "form-data",
                            adaptor: function(payload, response, api) {
                                if (payload.status == 0) {
                                    localStorage.setItem('admins_token', payload.data.token);
                                    payload.msg = "登陆成功"
                                }
                                return payload;
                            },
                            requestAdaptor(api) {
                                api.body.password = CryptoJS.MD5(api.body.password).toString()
                            }
                        },
                        panelClassName: "p-r p-l p-b-md",
                        redirect: "/admins",
                        body: [{
                                "type": "tpl",
                                "tpl": "<div class='loginTitle'><p>管理后台</p></div>"
                            },
                            {
                                type: "input-text",
                                label: false,
                                name: "userName",
                                size: "full",
                                placeholder: "登陆名",
                                addOn: {
                                    "label": "",
                                    "type": "text",
                                    "position": "left",
                                    "icon": "fa fa-user"
                                },
                            },
                            {
                                type: "input-password",
                                label: false,
                                name: "password",
                                size: "full",
                                placeholder: "密码",
                                addOn: {
                                    "label": "",
                                    "type": "text",
                                    "position": "left",
                                    "icon": "fa fa-lock"
                                },
                            },
                            {
                                type: "checkbox",
                                label: false,
                                name: "record",
                                option: "记住密码"
                            },
                            {
                                type: "control",
                                label: false,
                                body: {
                                    "type": "button",
                                    "level": "primary",
                                    "actionType": "submit",
                                    "block": true,
                                    "label": "登陆"
                                }
                            }
                        ]
                    }

                ]
            }
        };

        let amisInstance = amis.embed(
            '#root',
            app, {
                serverUrl: serverUrl
            }, {
                theme: 'cxd',
            }
        );

    })();
    </script>
</body>

</html>