FastAPI + layui 后台管理系统

内容分享18小时前发布

0 1 0

小蚂蚁开源，探索、发现、分享主流开源技术框架，搭建开源技术社区，共创美好开源生态！

FastAPI 是一个现代、快速（高性能）的基于 Python 3.6+ 的 web 框架，用于构建 API。它旨在使 API 的设计和开发更加简单、快速和有趣。

Layui 是一个模块化前端 UI 框架，它以简单、模块化和轻量级而闻名。Layui 提供了一套丰富的 UI 组件，如表格、分页器、弹出框等，可以协助开发者快速构建美观的界面。

将 FastAPI 与 Layui 结合使用，可以创建一个高效、美观且功能强劲的 web 应用。下面是一个简单的示例，展示如何使用 FastAPI 和 Layui 创建一个后台管理系统：

FastAPI + layui 后台管理系统

安装 FastAPI 和 Layui

第一，确保你已经安装了 FastAPI。你可以使用 pip 来安装它：

pip install fastapi

创建 FastAPI 应用

使用 FastAPI 创建一个简单的 RESTful API。例如，创建一个 main.py 文件：

from fastapi import FastAPI

from pydantic import BaseModel

app = FastAPI()

class Item(BaseModel):

name: str

description: str = None

price: float = None

quantity: int = None

@app.get("/items/")

def read_items():

return [{"name": "Foo", "description": "Baz"}, {"name": "Qux"}]

@app.post("/items/")

def create_item(item: Item):

return {"name": item.name, "description": item.description}

创建 Layui 前端页面

在你的项目目录中创建一个 static 文件夹，并在其中创建一个 layui 子文件夹。将 Layui 的 CSS、JS 和其他资源文件放入 layui 文件夹中。然后，创建一个 HTML 文件（例如 index.html），并在其中引入 Layui 的 CSS 和 JS 文件：

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="layui/css/layui.css">

</head>

<body>

<h2>Layui + FastAPI 后台管理系统</h2>

<button id="get-items">获取数据</button>

<table id="items-table" lay-filter="itemsTable"></table>

<script src="layui/layui.js"></script>

<script>

layui.use(['table', 'form'], function(){

var table = layui.table;

var form = layui.form;

document.getElementById('get-items').onclick = function(){

table.ajax.reload('items-table', {url:'/items/'});

};

});

</script>

</body>

</html>

运行 FastAPI 应用

在终端中运行 FastAPI 应用：

uvicorn main:app --reload --host 0.0.0.0 --port 8000

运行前端页面

在浏览器中打开 index.html 文件。点击 “获取数据” 按钮，Layui 将向后端发送 GET 请求，并显示返回的数据。你也可以尝试使用 POST 请求创建新的项目。

6. 部署

你可以将 FastAPI 应用部署到生产环境，例如使用 Gunicorn 和 Nginx。对于前端页面，你可以将其部署到静态文件服务器（如 Nginx），或者使用构建工具（如 Webpack）和服务器（如 Apache 或 Nginx）进行部署。

路由

from fastapi import APIRouter

from apps.views import level, login, position, dept, role, menu, role_menu, user, city, notice, item, item_cate, link, 
    ad_sort, ad, member_level, member, dicts, dicts_data, config, config_data, config_web, analysis, index, upload

# 创建路由
v1 = APIRouter()
# 系统登录
v1.include_router(login.router, prefix="", tags=["系统登录"])
# 系统主页
v1.include_router(index.router, prefix="", tags=["系统主页"])
# 上传文件
v1.include_router(upload.router, prefix="/upload", tags=["上传文件"])
# 职级管理
v1.include_router(level.router, prefix="/level", tags=["职级管理"])
# 岗位管理
v1.include_router(position.router, prefix="/position", tags=["岗位管理"])
# 部门管理
v1.include_router(dept.router, prefix="/dept", tags=["部门管理"])
# 角色管理
v1.include_router(role.router, prefix="/role", tags=["角色管理"])
# 角色菜单
v1.include_router(role_menu.router, prefix="/rolemenu", tags=["角色菜单"])
# 菜单管理
v1.include_router(menu.router, prefix="/menu", tags=["菜单管理"])
# 用户管理
v1.include_router(user.router, prefix="/user", tags=["用户管理"])
# 城市管理
v1.include_router(city.router, prefix="/city", tags=["城市管理"])
# 通知公告
v1.include_router(notice.router, prefix="/notice", tags=["通知公告"])
# 站点管理
v1.include_router(item.router, prefix="/item", tags=["站点管理"])
# 栏目管理
v1.include_router(item_cate.router, prefix="/itemcate", tags=["栏目管理"])
# 友链管理
v1.include_router(link.router, prefix="/link", tags=["友链管理"])
# 广告位管理
v1.include_router(ad_sort.router, prefix="/adsort", tags=["广告位管理"])
# 广告管理
v1.include_router(ad.router, prefix="/ad", tags=["广告管理"])
# 会员等级管理
v1.include_router(member_level.router, prefix="/memberlevel", tags=["会员等级管理"])
# 会员管理
v1.include_router(member.router, prefix="/member", tags=["会员管理"])
# 字典管理
v1.include_router(dicts.router, prefix="/dict", tags=["字典管理"])
# 字典项管理
v1.include_router(dicts_data.router, prefix="/dictdata", tags=["字典项管理"])
# 配置管理
v1.include_router(config.router, prefix="/config", tags=["配置管理"])
# 配置项管理
v1.include_router(config_data.router, prefix="/configdata", tags=["配置项管理"])
# 网站配置
v1.include_router(config_web.router, prefix="/configweb", tags=["网站配置"])
# 统计分析
v1.include_router(analysis.router, prefix="/analysis", tags=["统计分析"])

核心组件

+ 单图上传组件

```
{{ "avatar|头像|90x90|提议上传尺寸450x450|450x450"|image(data.avatar, "jpg|png|gif", 0) }}
```
+ 多图上传组件
```
{{ "imgs|图集|90x90|20|提议上传尺寸450x450"|album(data.imgsList, "jpg|png|gif", 10) }}
```
+ 下拉选择组件
```
{{ "gender|1|性别|name|id"|select("1=男,2=女,3=保密", data.gender) }}
```
+ 单选按钮组件
```
{{ "gender|name|id"|radio("1=男,2=女,3=保密", 1) }}
```
+ 复选框组件
```
{{ "gender|name|id"|checkbox("1=男,2=女,3=保密", 1) }}
```
+ 城市选择组件
```
{{ data.district_code|default("")|city(3, 1) }}
```
+ 开关组件
```
{{ "status"|switch("在用|禁用", data.status|default(1)) }}
```
+ 日期组件
```
{{ "birthday|1|出生日期|date"|date(data.birthday) }}
```
+ 图标组件
```
{{ "icon"|icon(data.icon|default("layui-icon-component")) }}
```