百度amis+fastapi构建后台管理系统(四)——前端amis其它页面

577 阅读1分钟

登录页面OK之后,搞一下其它页面

其它页面多了可设置的页面title、全局增加请求头、异常跳转到登录页

以此页面为模板${site_title}格式为需要填充的数据,按照需求填充后返回页面

代码如下templates/login.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <!-- 自定义页面title -->
    <title>${site_title}</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
    <meta content="IE=Edge" http-equiv="X-UA-Compatible"/>
    <!-- 自定义页面小图标 -->
    <link href="sdk/logo2.png" rel="shortcut icon" type="image/x-icon"/>

    <!-- <link rel="stylesheet" href="sdk/sdk.css" />
    <link rel="stylesheet" href="sdk/helper.css" />
    <link rel="stylesheet" href="sdk/iconfont.css" /> -->

    <!-- ${theme_css} -->
    <!-- <link rel="stylesheet" href="sdk/sdk.js" />
    <script src="sdk/history.js"></script> -->

    <link href="https://unpkg.com/amis@6.0.0/sdk/sdk.css" rel="stylesheet" title="default"/>
    <link href="https://unpkg.com/amis@6.0.0/sdk/helper.css" rel="stylesheet"/>
    <link href="https://unpkg.com/amis@6.0.0/sdk/iconfont.css" rel="stylesheet"/>
    <script src="https://unpkg.com/amis@6.0.0/sdk/sdk.js"></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 class="amiss" id="amisId"></div>
<script type="text/javascript">
    // 页面主题
    let amis = amisRequire('amis/embed')
    let amisData = amis.embed(
        '#amisId', 
        // 页面的body部分
        ${AmisSchemaJson}, 
        {locale: history.location},
        {
            // 请求适配器。这里全局增加请求头
            requestAdaptor(api) {
                api.headers["Authorization"] = "Bearer " + localStorage.getItem("admins_token")
                return api;
            },
            // 接收适配器。这里配置一些异常跳转到登录页
            responseAdaptor(api, payload, query, request, response) {
                if (response.status === 401) {
                    localStorage.removeItem("admins_token");
                    location.href = "/html/login";
                } else if (response.status === 403) {
                    location.href = "/html/login";
                } else {
                    return payload;
                }
            }
        }
        );
</script>
</body>
</html>