【Amis Low Code 结合FastAPI进行前端框架开发】

最新推荐文章于 2024-01-16 23:22:31 发布

Mr.Lee jack

最新推荐文章于 2024-01-16 23:22:31 发布

阅读量766

点赞数 6

分类专栏： anyscript 通用文章标签： fastapi 前端框架状态模式

本文链接：https://blog.csdn.net/xzpdxz/article/details/134899618

版权

通用同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

anyscript

7 篇文章 0 订阅

订阅专栏

官方文档

封装思想

直接复制官网json数据即可开发
每个json中的接口由fastapi 转发（透传）使其开发模式与前端思维一致

基础组件

from amis import Page, Service, App
from pydantic import BaseModel, Field
from fastapi import FastAPI, Request, Response, APIRouter
from starlette.responses import HTMLResponse


class JsonRegister(BaseModel):
    page_json_url: str = "/demo.json"

    def __init__(self, **kwargs):
        super(JsonRegister, self).__init__(**kwargs)

    def register(self, router: APIRouter):
        router.add_api_route(self.page_json_url, endpoint=self.json)

    def json(self) -> {}:
        """amis json格式数据"""
        return {}


class HtmlRegister(BaseModel):
    page_url = "/"

    def __init__(self, **kwargs):
        super(HtmlRegister, self).__init__(**kwargs)

    def register(self, router: APIRouter):
        router.add_api_route(self.page_url, endpoint=self.html)

    def html(self):
        """渲染html页面"""
        return HTMLResponse(content=Page().render())


class TableRegister(JsonRegister):
    base_url = "/crud/"
    primary_key = "id"
    page_json_url = "/curd/model.json"

    primary_key_url = ""

    def __init__(self, **kwargs):
        super(TableRegister, self).__init__(**kwargs)

    def register(self, router: APIRouter):
        super(TableRegister, self).register(router=router)
        self.primary_key_url = self.base_url + "{" + self.primary_key + "}"
        router.add_api_route(self.primary_key_url, endpoint=self.get_item, methods=["GET"])
        router.add_api_route(self.primary_key_url, endpoint=self.delete_item, methods=["DELETE"])
        router.add_api_route(self.primary_key_url, endpoint=self.put_item, methods=["PUT"])
        router.add_api_route(self.primary_key_url, endpoint=self.options_item, methods=["OPTIONS"])
        router.add_api_route(self.base_url, endpoint=self.get_items, methods=["GET"])
        router.add_api_route(self.base_url, endpoint=self.post_item, methods=["POST"])

    def get_item(self, request: Request):
        return {}

    def delete_item(self, request: Request):
        return {}

    def put_item(self, request: Request):
        return {}

    def options_item(self, request: Request):
        return {}

    def get_items(self, request: Request):
        return []

    def post_item(self, request: Request):
        return {}

上诉组件中定义
json格式注册器
html页面注册器
表格增删改查注册器

常见业务功能组件封装

class RouterJson(JsonRegister):
    page_json_url = "/router.json"
    children_pages = [
        {
            "label": "父页面",
            "url": "/parent",
            "redirect": "/parent/pageA",
            "children": [
                {
                    "label": "子页面",
                    "url": "pageA",
                    "schemaApi": "get:/pages/crud-list.json"
                },
                {
                    "label": "子页面",
                    "url": "pageB",
                    "schemaApi": "get:/pages/crud-list.json"
                }
            ]
        }
    ]

    def json(self) -> {}:
        return {
            "status": 0,
            "msg": "",
            "data": {
                "pages": {
                    "children": self.children_pages
                }
            }
        }


class AppAdminHtml(HtmlRegister):
    web_url: str = "/"
    """获取静态页面地址"""
    app_brandName = "测试Demo"
    router_json: RouterJson = RouterJson()

    def html(self):
        app_ = App()
        app_.brandName = "测试Demo"
        app_.api = f"get:{self.router_json.page_json_url}"
        return HTMLResponse(app_.render())


class ModelAdminJson(TableRegister):
    base_url = "/crud/"
    primary_key = "id"
    page_json_url = "/curd/model.json"

    def get_item(self, request: Request):
        id_ = request.get(self.primary_key)
        return {"name": "mock data", "id": id_}

    def delete_item(self, request: Request):
        id_ = request.get(self.primary_key)
        return {"name": "mock data", "id": id_}

    def put_item(self, request: Request):
        id_ = request.get(self.primary_key)
        return {"name": "mock data", "id": id_}

    def options_item(self, request: Request):
        id_ = request.get(self.primary_key)
        return {"name": "mock data", "id": id_}

    def get_items(self, request: Request):
        return [{"name": f"mock data {id_}", "id": id_} for id_ in range(10)]

    def post_item(self, request: Request):
        return {"name": "mock data", "id": 0}


class LoginJson(JsonRegister):
    page_json_url: str = "/login.json"
    """获取json配置接口地址"""
    title: str = ""
    """标题"""
    success_redirect_url = "/"
    """成功登陆后的重定向地址"""
    login_params = {
        "url": "${serverUrl}/login/",
        "method": "post",
        "dataType": "form-data"
    }

    def register(self, router: APIRouter):
        super(LoginJson, self).register(router=router)
        router.add_api_route("/login/", endpoint=self.post_item, methods=["POST"])

    def post_item(self, request: Request):
        return {"name": "mock data", "id": 0}

    def json(self):
        return Page(**{
            "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": self.login_params,
                        "panelClassName": "p-r p-l p-b-md",
                        "redirect": self.success_redirect_url,
                        "body": [
                            {
                                "type": "tpl",
                                "tpl": f"<div style='text-align: center; font-weight: bold;'><p>{self.title}</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": "登陆",
                                    "size": "lg"
                                }
                            }
                        ]
                    }
                ]
            }
        }).to_dict()


class LoginHtml(HtmlRegister):
    page_url: str = "/login"
    """获取静态页面地址"""
    login_json: LoginJson = LoginJson()

    def html(self):
        return HTMLResponse(Page(body=Service(schemaApi=f"get:{self.login_json.page_json_url}")).render())

启动运行

import json
import re

from fastapi import FastAPI, Request, APIRouter
from default_template import *

app = FastAPI()


def main_router():
    router = APIRouter()

    login_json = LoginJson()
    login_json.title = "欢迎登录"
    login_json.success_redirect_url = "/#/home"
    login_json.register(router=router)
    """登录json"""
    router_json = RouterJson()
    router_json.children_pages = [
        {
            "label": "首页",
            "url": "/home",
            "schema": {
                "type": "markdown",
                "value": "# title\n markdown **text**"
            }
        },
        {
            "label": "测试页面",
            "url": "/parent",
            "redirect": "/parent/pageA",
            "children": [
                {
                    "label": "测试页面1",
                    "url": "pageA",
                    "schemaApi": "get:/pages/crud-list.json"
                },
                {
                    "label": "测试页面2",
                    "url": "pageB",
                    "schemaApi": "get:/pages/crud-list.json"
                }
            ]
        }
    ]
    router_json.register(router=router)
    """路由json"""

    login_html = LoginHtml()
    login_html.login_json = login_json
    login_html.register(router=router)
    """登录页面"""
    app_admin_html = AppAdminHtml()
    app_admin_html.app_brandName = "测试应用"
    app_admin_html.router_json = router_json
    app_admin_html.register(router=router)
    """后台页面"""
    return router


app.include_router(main_router())

if __name__ == "__main__":
    import uvicorn

    uvicorn.run(app, host="0.0.0.0", port=9000)