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

2023-12-10 06:12
文章标签 进行 开发 code 框架 结合 前端 low frontend fastapi amis

本文主要是介绍【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。

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
Python实例题之pygame开发打飞机游戏实例代码

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,：本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部
阅读更多...
使用Python开发一个现代化屏幕取色器

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,：本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
Python使用smtplib库开发一个邮件自动发送工具

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
Linux使用scp进行远程目录文件复制的详细步骤和示例

Linux使用scp进行远程目录文件复制的详细步骤和示例

《Linux使用scp进行远程目录文件复制的详细步骤和示例》在Linux系统中,scp（安全复制协议）是一个使用SSH（安全外壳协议）进行文件和目录安全传输的命令,它允许在远程主机之间复制文件和目录,... 目录1. 什么是scp？2. 语法3. 示例示例 1: 复制本地目录到远程主机示例 2: 复制远程主
阅读更多...
基于Python开发一个有趣的工作时长计算器

基于Python开发一个有趣的工作时长计算器

《基于Python开发一个有趣的工作时长计算器》随着远程办公和弹性工作制的兴起,个人及团队对于工作时长的准确统计需求日益增长,本文将使用Python和PyQt5打造一个工作时长计算器,感兴趣的小伙伴可... 目录概述功能介绍界面展示php软件使用步骤说明代码详解1.窗口初始化与布局2.工作时长计算核心逻辑3
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2