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

2023-12-10 06:12

本文主要是介绍【Amis Low Code 结合FastAPI进行前端框架开发】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

官方文档

封装思想

  • 直接复制官网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 HTMLResponseclass 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 refrom 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_jsonlogin_html.register(router=router)"""登录页面"""app_admin_html = AppAdminHtml()app_admin_html.app_brandName = "测试应用"app_admin_html.router_json = router_jsonapp_admin_html.register(router=router)"""后台页面"""return routerapp.include_router(main_router())if __name__ == "__main__":import uvicornuvicorn.run(app, host="0.0.0.0", port=9000)
  • 可以知道当下页面中有登录界面,后台页面
  • 业务中的所有json 页面接口都可以先行注册,再注册静态页面

在这里插入图片描述

在这里插入图片描述

这篇关于【Amis Low Code 结合FastAPI进行前端框架开发】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/476235

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

业务中14个需要进行A/B测试的时刻[信息图]

在本指南中,我们将全面了解有关 A/B测试 的所有内容。 我们将介绍不同类型的A/B测试,如何有效地规划和启动测试,如何评估测试是否成功,您应该关注哪些指标,多年来我们发现的常见错误等等。 什么是A/B测试? A/B测试(有时称为“分割测试”)是一种实验类型,其中您创建两种或多种内容变体——如登录页面、电子邮件或广告——并将它们显示给不同的受众群体,以查看哪一种效果最好。 本质上,A/B测