Python & FastAPI, 后台管理与框架iframe

在项目中遇到这样的情况，服务器获取到数据返回给网页时，都是重新打开一个新的网页页面，而不能放入一个框架的子页面中。

解决的思路：

1）在浏览器中使用get

2）在服务端写一个用于登录的login的post以及一个login的get

3) 在浏览器的js代码中更改iframe的src属性。并在服务端写上其对应的get

关键代码如下：python+fastapi等

import uvicorn
from fastapi import FastAPI, Form
from starlette.requests import Request
from starlette.templating import Jinja2Templates
from starlette.staticfiles import StaticFiles
from UserManager import *

app = FastAPI() #**此写法必须如此写,不能放在类中,且只能在主线程中.
app.mount("/static", StaticFiles(directory="static"),name="static")
tmp = Jinja2Templates(directory="templates")
## .html放在主目录下的templates目录下，主目录下的static目录用于存放js文件以及ico,css等文件。/static/js/xxx.js   /static/css/xxx.css

### 用户从 浏览器开始登录系统;
@app.get("/")  # 接受get请求
async def login(request: Request):
    return tmp.TemplateResponse('index.html', {'request': request})

### 用户输入帐户与密码后的跳转;
@app.post("/login/")  # 接受post请求(输入登录帐户与密码后)
async def login(request: Request,
                username: str = Form(...),  # 直接去请求体获取username键对应的值并自动转换成字符串类型;
                password: str = Form(...)):  # 直接去请求体里面获取password键对应的值并自动转化成整型;
    if username == 'admin' and password == 'gxhj.com':
        return tmp.TemplateResponse('admin.html', {'request': request,'type':"department", 'username':username,'password':password}) #默认加载部门列表;
    else:
        return tmp.TemplateResponse('user.html', {'request': request, 'role': findAccount(username,password)})
    return "Username or Password Error!"

#############  以下为admin后台管理  ################

@app.get("/login/") #进入admin.html后form的get请求;
async def login(request: Request, type:str,username:str,password:str): #注：不能写成 username:str=Form(...)
    return tmp.TemplateResponse('admin.html', {'request': request, 'role': 'administrator','type':type,'username':username,'password':password})

@app.get("/redirect/") #iframe的src的重定向;
async def admin(request: Request, type:str):
    if type == "department":
        return tmp.TemplateResponse('admin_department.html', {'request': request,'result':getDepartmentAll()})
    elif type == "authority":
        return tmp.TemplateResponse('admin_authority.html',{'request': request, 'result': getAuthorityAll()})
    elif type == "role":
        return tmp.TemplateResponse('admin_role.html',{'request': request, 'result': getRoleAll()})
    elif type == "user":
        return tmp.TemplateResponse('admin_user.html',{'request': request, 'result': getUserAll()})

### 部门的增删改操作；
@app.post("/admin/department")
async def admin(request: Request,
                name:str = Form(...),
                operate:str = Form(...),
                descript:str = Form(...),
                ext1:str = Form(...),
                ext2:str = Form(...),
                ext3:str = Form(...)):
    if len(name) <= 0:
        return None
    if operate not in ["1","2","3"]:
        return None
    result = False
    if operate == "1":
        result = appendDepartment(name,descript,ext1,ext2,ext3)
    elif operate == "2":
        result = removeDepartment(name)
    else:
        result = updateDepartment(name,descript,ext1,ext2,ext3)
    if result is True:
        result = getDepartmentAll()
    return tmp.TemplateResponse('admin_department.html',{'request': request, 'result': result})

### 权限的增删改操作；
@app.post("/admin/authority")  # 接受post请求
async def admin(request: Request,
                name:str = Form(...),
                operate:str = Form(...),
                descript:str = Form(...),
                ext1: str = Form(...),
                ext2: str = Form(...),
                ext3: str = Form(...)):
    if len(name) <= 0:
        return None
    if operate not in ["1", "2", "3"]:
        return None
    result = False
    if operate == "1":
        result = appendAuthority(name, descript,ext1,ext2,ext3)
    elif operate == "2":
        result = removeAuthority(name)
    else:
        result = updateAuthority(name, descript,ext1,ext2,ext3)
    if result is True:
        result = getAuthorityAll()
    return tmp.TemplateResponse('admin_authority.html',{'request': request, 'result': result})


if __name__ == "__main__":
    print('\n======= 启动web服务... ==========\n')
    uvicorn.run("WebServer:app", host="192.168.110.37", port=8001, log_level="info")


== index.html =>

<form enctype="multipart/form-data" method="post" action="/login/" name="longinForm">
    <div class="form-group">
        <label>用户名：</label>
        <input type="username" class=" form-control" id="username" name="username"
               placeholder="请输入用户名"><span id="p1"></span>
    </div>
    <!--/.form-group -->
    <div class="form-group">
        <label>密码:</label>
        <input type="password" class="form-control" id="password" name="password"
               placeholder="请输入密码"><span
            id="isPassWord"></span>
    </div>
    <!--/.form-group -->
    <div class="row">
        <div class="col-sm-12">
            <div class="signin-footer">
                <!-- <button type="button" class="btn signin_btn" data-toggle="modal" data-target=".signin_modal">
            登录
            </button> -->
                <input type="submit" class="btn signin_btn" value="登录" onclick="checkSubmit()">
            </div>
        </div>
    </div>
</form>



=== admin.html ===

<div id="nav">
     <form name="adminForm" action="/login/" enctype="multipart/form-data" method="get" >
       <br>
        <h2><a href="#" onclick="postFunc('department')" target="content_area">部门管理</a></h2><br>
        <h2><a href="#" onclick="postFunc('authority')" target="content_area">权限管理</a></h2><br>
        <h2><a href="#" onclick="postFunc('role')" target="content_area">角色管理</a></h2><br>
        <h2><a href="#" onclick="postFunc('user')" target="content_area">用户管理</a></h2><br>

         <!--获取外部传入的参数，并作为参数传出-->
        <input type="hidden" name="type"  id="type" value={{type}}>
         <input type="hidden" name="username" id="username" value={{username}}>
         <input type="hidden" name="password" id="password" value={{password}}>
    </form>
</div>
<div id="content">
    <iframe src="" id="contentId" name="content_area" frameborder="0" width="100%" height="100%"></iframe>
</div>
</body>

    <script>
        window.onload = function () {
            type = document.adminForm.type.value;
            username = document.adminForm.username.value;
            password = document.adminForm.password.value;
<!--            dt = new Date().getTime()-->
            document.getElementById('contentId').contentWindow.location.reload(true);  //这个一定要写在.src设置的前面！！如下：
<!--            document.getElementById('contentId').src = "/redirect/?type="+type+'&time='+dt-->
            document.getElementById('contentId').src = "/redirect/?type="+type
        }
        function postFunc(type) {
<!--   修改type值定位到不同的页面         -->
            document.adminForm.type.value = type;
            document.adminForm.submit()
        }
    </script>



===  admin_department.html ===

<span id="data" style="display:none">{{result}}</span> //获取服务器传过来的值
<form name="departmentForm" action="/admin/department" enctype="multipart/form-data" method="post">
    <div class="form-group">
        <label>名&nbsp;&nbsp;称:</label>
        <input type="text" name="name"><span style="color: red">&nbsp;*</span>
    </div>
    <div class="form-group">
        <label>描&nbsp;&nbsp;述:</label>
        <input type="text" name="descript"><span style="color: red">&nbsp;*</span>
    </div>
    <div class="form-group">
        <label>扩展1:</label>
        <input type="text" name="ext1" value=""><span>&nbsp;&nbsp;</span>
    </div>
    <div class="form-group">
        <label>扩展2:</label>
        <input type="text" name="ext2" value=""><span>&nbsp;&nbsp;</span>
    </div>
    <div class="form-group">
        <label>扩展3:</label>
        <input type="text" name="ext3" value=""><span>&nbsp;&nbsp;</span>
    </div>
    <input type="text" name="operate" value="" style="display: none;">//隐藏的控件，用于post时增加给服务器的operate:str=From(...)的返回值
    <div class="form-group" align="center">
        <button type="submit" onclick="appendDep(1)" name="append" id="append" class="btn">添加</button>
        <button type="submit" onclick="appendDep(3)" name="update" id="update" class="btn">提交</button>
    </div>
</form>

function appendDep(type) {
    document.departmentForm.operate.value = type;
    document.departmentForm.submit();
}