首页 文章 精选 留言 我的

UiAdmin 零前端代码通用后台 Python&NodeJS 版 V1.0 发布

2023-02-09 377

介绍

UiAdmin 是一套零前端代码通用后台，采用前后端分离技术，数据交互采用 json 格式；通过后端 Builder 不需要一行前端代码就能构建一个 vue+element 的现代化后台；同时我们打造一了套兼容性的 API 标准，从 SpringBoot、ThinkPHP 开始，逐步覆盖.net、nodejs等多语言框架。

 

更新日志

UiAdmin项目创立之初就确定了多语言同步统一发展的方向，在PHP/JAVA/.net版本已经发布基础上，本次新增Python&NodeJS两个全新语言版本，引入依赖包即可使用，适用于新老项目，无代码侵入。详情如下，Builder相关文档可先参考别的语言版本，接口保持完全统一。

Python版本

说明

python版本uiadmin实现， API接口自动生成管理后台，无需前端参与。

教程

安装依赖

pip install Flask
pip install uiadmin-flask

app.py使用

from flask import Flask
from flask_cors import CORS
from uiadmin_flask.Uiadmin import Uiadmin
from uiadmin_flask.util import jsonres
from uiadmin_flask.util.xybuilder.XyBuilderList import XyBuilderList
from uiadmin_flask.util.xybuilder.XyBuilderForm import XyBuilderForm

app = Flask(__name__)

# 调用Uiadmin
uiadmin = Uiadmin(app)
app.config.update(
    UIADMIN_SITE_TITLE='UiAdmin', // 后台名称
    UIADMIN_SITE_LOGO='', // logo
    UIADMIN_SITE_LOGO_BADGE='Beta' // 角标
)

cors = CORS(app, resources={r"/*": {
    "origins": "*",
    "allow_headers": "Authorization, Content-Type, CloudId, Eid",
    "methods": "GET, POST, PUT, DELETE, OPTIONS"
}}, supports_credentials=True)

@app.route("/")
def index():
    return "<a href='/xyadmin/'>点击打开后台</a>"

# 示例
@uiadmin.menu_item({"title": "文章列表", "path": "/demo/lists", "pmenu": "/content", "menuType": 1,
  "routeType": "list", "apiSuffix": "", "apiParams": "", "apiMethod": "GET", "sortnum": 0})
@app.route("/api/v1/admin/demo/lists")
def demo_lists():
    dataList = [
      {
        "id": 1,
        "title": "测试文章1",
        "cate": "开发",
        "cover": "https://ts2.cn.mm.bing.net/th?id=ORMS.11d30098d0f4a79a42c6352014e0f066&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=2&p=0",
        "level": 1,
        "progress": 50,
        "updateTime": "2023-02-01 20:16:19",
        "createTime": "2023-02-01 09:07:40",
        "status": 1
      },
      {
        "id": 2,
        "title": "测试文章2",
        "cate": "开发",
        "cover": "https://ts2.cn.mm.bing.net/th?id=ORMS.ed34ae135a326a834ca9d3379be134d3&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=2&p=0",
        "level": 2,
        "progress": 80,
        "updateTime": "2023-02-01 20:16:19",
        "createTime": "2023-02-01 09:07:40",
        "status": 1
      },
      {
        "id": 3,
        "title": "测试文章3",
        "cate": "科技",
        "cover": "https://ts2.cn.mm.bing.net/th?id=ORMS.ed34ae135a326a834ca9d3379be134d3&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=2&p=0",
        "level": 3,
        "progress": 90,
        "updateTime": "2023-02-01 20:16:19",
        "createTime": "2023-02-01 09:07:40",
        "status": 1
      },
    ]
    xyBuilderlist = XyBuilderList();
    (xyBuilderlist
      .init()
      .addColumn("title", "标题", {
        "type": "text"
      })
      .addColumn("cover", "封面", {
        "type": "image",
      })
      .addColumn("cate", "分类", {
        "type": "tag",
        "prefixType": "dot",
        "options": []
      })
      .addColumn("progress", "进度", {
        "type": "progress"
      })
      .addColumn("level", "评分", {
        "type": "rate"
      })
      .addColumn("level", "优先级", {
        "prefixType": "dot",
        "useOptions": True,
        "options": [
          {"title": "低", "value": 1, "color": "#c6cdd4"},
          {"title": "中", "value": 2, "color": "#0488de"},
          {"title": "高", "value": 3, "color": "#ff9d28"}
        ]
      })
      .addColumn("createTime", "创建时间", {
        "type": "time",
      })
      .addColumn("updateTime", "发布时间", {
        "type": "time",
      })
      .addTopButton("add", "添加", {
        "title": "新增",
        "pageType": "modal",
        "modalType": "form",
        "api": "/v1/admin/demo/add",
        "width": "1000px"
      })
      .addColumn("rightButtonList",  "操作", {
        "type": "rightButtonList",
        "minWidth": "120px"
      })
      .addRightButton("edit", "修改", {
        "title": "修改",
        "pageType": "modal",
        "modalType": "form",
        "api": "/v1/admin/demo/edit",
        "width": "1000px"
      })
      .setDataList(dataList)
      )

    return jsonres({
        "code": 200,
        "msg": "登录成功",
        "data": {
            "listData": xyBuilderlist.getData()
        }
      }
    )

@uiadmin.menu_item({"title": "文章增加", "path": "/demo/add", "pmenu": "/demo/lists", "menuType": 1,
  "routeType": "form", "apiSuffix": "", "apiParams": "", "apiMethod": "POST", "sortnum": 0})
@app.route("/api/v1/admin/demo/add")
def demo_add():
    xyBuilderForm = XyBuilderForm()
    (xyBuilderForm
      .init()
      .addFormItem("name", "文章标题", "text", "", {})
      .addFormItem("content", "文章内容", "html", "", {})
      .addFormItem("level", "登记", "select", "", {
        "options":[
          {"title": "低", "value": 1},
          {"title": "中", "value": 2},
          {"title": "高", "value": 3},
        ]
      })
      )

    return jsonres({
        "code": 200,
        "msg": "成功",
        "data": {
            "formData": xyBuilderForm.getData()
        }
      }
    )

@uiadmin.menu_item({"title": "文章修改", "path": "/demo/edit", "pmenu": "/demo/lists", "menuType": 1,
  "routeType": "form", "apiSuffix": "", "apiParams": "", "apiMethod": "POST", "sortnum": 0})
@app.route("/api/v1/admin/demo/edit/<string:id>")
def demo_edit(id):
    xyBuilderForm = XyBuilderForm()
    (xyBuilderForm
      .init()
      .addFormItem("id", "ID", "text", "", {
        "disabled": True
      })
      .addFormItem("name", "文章标题", "text", "", {})
      .addFormItem("content", "文章内容", "html", "", {})
      .addFormItem("level", "登记", "select", "", {
        "options":[
          {"title": "低", "value": 1},
          {"title": "中", "value": 2},
          {"title": "高", "value": 3},
        ]
      })
      .setFormValues({
        "id": id,
        "name": "text",
        "content": "测试",
        "level": 2
      })
      )

    return jsonres({
        "code": 200,
        "msg": "成功",
        "data": {
            "formData": xyBuilderForm.getData()
        }
      }
    )

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

运行

export FLASK_APP=app
flask run

 

NodeJS版本

 

简介

uiadmin的nodejs-express实现版本

使用步骤

安装

npm i uiadmin-express
npm i -g @babel/cli

配置babel

babel.config.js文件增加如下配置 注意删除.babelrc

const path = require('path')
module.exports = {
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }],
      ["@babel/plugin-proposal-private-methods", { "loose": true }],
      ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
    ],
    "presets": [
      [
        "@babel/preset-env"
      ]
    ]
}

配置启动

package.json配置如下命令，其中app为你的express应用入口。

"scripts": {
    "start": "babel-node app"
}

初始化

app.js请参考如下代码

// 必须，支持node_modules中的装饰器等语法
require("@babel/register")({
  // This will override `node_modules` ignoring - you can alternatively pass
  // an array of strings to be explicitly matched or a regex / glob
  ignore: [],
  plugins: [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
  ]
});
const express = require('express')
const app = express()
const port = 4000

// 引入
import {
    Controller, Get, RootUrl, Post, MenuItem,
    UiAdmin, XyBuilderList, XyBuilderForm
} from 'uiadmin-express'

// 引入
const {
  Controller, Get, RootUrl, Post, MenuItem, UiAdmin, XyBuilderList, XyBuilderForm
} =  require('uiadmin-express')

// 配置
app.set('uiadmin', {
  site: {
      title: "UiAdmin(NodeJS)"
  },
  system: {
      'api-url': {
          'api-admin': ""
      }
  },
  user: {
      'user-role': [
          {
              name: 'super_admin',
              title: '超级管理员',
              menus: "",
              status: 1
          },
          {
              name: 'beta',
              title: '内测',
              menus: "/v1/admin/demo/lists,",
              status: 1
          }
      ],
      'user-list': [
          {
              id: 1,
              nickname: "admin",
              username: "admin",
              password: "uiadmin",
              avatar: "",
              roles: "super_admin",
              country: "+86",
              mobile: "",
              email: "",
              authorities: ["ROLE_SUPER_ADMIN"],
              status: 1
          },
          {
              id: 5,
              nickname: "bet",
              username: "beta",
              password: "uiadmin",
              avatar: "",
              roles: "beta",
              country: "+86",
              mobile: "",
              email: "",
              authorities: ["ROLE_BETA"],
              status: 1
          }
      ]
    }
  }
);


// 文章管理后台控制器（演示DEMO）
@Controller
class DemoController {
  @RootUrl('/api')
  url() {}

  @MenuItem({title: "文章列表", path: "/demo/lists", pmenu: "/content", menuType: 1,
    routeType: "list", apiSuffix: "", apiParams: "", apiMethod: "GET", sortnum: 0})
  @Get('/v1/admin/demo/lists')
  lists(req, res) {
    let dataList = [
      {
        "title": "测试文章1",
        "cate": "开发",
        "cover": "https://ts2.cn.mm.bing.net/th?id=ORMS.11d30098d0f4a79a42c6352014e0f066&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=2&p=0",
        "level": 1,
        "progress": 50,
        "updateTime": "2023-02-01 20:16:19",
        "createTime": "2023-02-01 09:07:40",
        "status": 1
      },
      {
        "title": "测试文章2",
        "cate": "开发",
        "cover": "https://ts2.cn.mm.bing.net/th?id=ORMS.ed34ae135a326a834ca9d3379be134d3&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=2&p=0",
        "level": 2,
        "progress": 80,
        "updateTime": "2023-02-01 20:16:19",
        "createTime": "2023-02-01 09:07:40",
        "status": 1
      },
      {
        "title": "测试文章3",
        "cate": "科技",
        "cover": "https://ts2.cn.mm.bing.net/th?id=ORMS.ed34ae135a326a834ca9d3379be134d3&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=2&p=0",
        "level": 3,
        "progress": 90,
        "updateTime": "2023-02-01 20:16:19",
        "createTime": "2023-02-01 09:07:40",
        "status": 1
      },
    ]
    let xyBuilderList = new XyBuilderList();
    xyBuilderList
      .init()
      .addColumn("title", "标题", {
        type: "text"
      })
      .addColumn("cover", "封面", {
        type: "image",
      })
      .addColumn("cate", "分类", {
        type: "tag",
        prefixType: "dot",
        options: []
      })
      .addColumn("progress", "进度", {
        type: "progress"
      })
      .addColumn("level", "评分", {
        type: "rate"
      })
      .addColumn("level", "优先级", {
        prefixType: "dot",
        useOptions: true,
        options: [
          {title: "低", value: 1, color: "#c6cdd4"},
          {title: "中", value: 2, color: "#0488de"},
          {title: "高", value: 3, color: "#ff9d28"}
        ]
      })
      .addColumn("createTime", "创建时间", {
        type: "time",
      })
      .addColumn("updateTime", "发布时间", {
        type: "time",
      })
      .addTopButton("add", "添加", {
        title: "新增",
        pageType: "drawer",
        modalType: "form",
        api: "/v1/admin/demo/add",
        width: "1000px"
      })
      .addColumn("rightButtonList",  "操作", {
        type: "rightButtonList",
        minWidth: "120px"
      })
      .addRightButton("edit", "修改", {
        title: "修改",
        pageType: "drawer",
        modalType: "form",
        api: "/v1/admin/demo/edit",
        width: "1000px"
      })
      .setDataList(dataList)

    res.json({
      code: 200,
      msg: '成功',
      data: {
        listData: xyBuilderList.getData()
      }
    });
  }

  @MenuItem({title: "文章新增", path: "/demo/add", pmenu: "/demo/lists", menuType: 2,
    routeType: "form", apiSuffix: "", apiParams: "", apiMethod: "GET", sortnum: 0})
  @Get('/v1/admin/demo/add')
  add(req, res) {
    let xyBuilderForm = new XyBuilderForm();
    xyBuilderForm.init()
      .addFormItem("name", "文章标题", "text", "", {})
      .addFormItem("content", "文章内容", "html", "", {})
      .addFormItem("level", "登记", "select", "", {
        options:[
          {'title': "低", value: 1},
          {'title': "中", value: 2},
          {'title': "高", value: 3},
        ]
      })

    res.json({
      code: 200,
      msg: '成功',
      data: {
        formData: xyBuilderForm.getData()
      }
    });
  }

  @MenuItem({title: "文章修改", path: "/demo/edit", pmenu: "/demo/lists", menuType: 2,
    routeType: "form", apiSuffix: "", apiParams: "", apiMethod: "GET", sortnum: 0})
  @Get('/v1/admin/demo/edit/:id')
  add(req, res) {
    let xyBuilderForm = new XyBuilderForm();
    xyBuilderForm.init()
      .addFormItem("id", "ID", "text", "", {
        disabled: true
      })
      .addFormItem("name", "文章标题", "text", "", {})
      .addFormItem("content", "文章内容", "html", "", {})
      .addFormItem("level", "登记", "select", "", {
        options:[
          {'title': "低", value: 1},
          {'title': "中", value: 2},
          {'title': "高", value: 3},
        ]
      })
      .setFormValues({
        id: 123123,
        name: "text",
        content: "测试",
        level: 2
      })

    res.json({
      code: 200,
      msg: '成功',
      data: {
        formData: xyBuilderForm.getData()
      }
    });
  }
}
app.use(new DemoController())

app.listen(port, () => { console.log(http://127.0.0.1:${port}) })

启动

npm run start

访问{host:端口}/xyadmin/

开发

仿照DemoController进行业务开发

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://www.oschina.net/news/227686/uiadmin-nodejs-1-0-released

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Laravel 开源商城系统 BeikeShop 2023 年更新计划 Roadmap 公布

前言：BeikeShop作为开源电商建站系统，我们有必要向各位开发者同步我们未来一年的开发计划！ 今天，我们一次性将全年的开发计划Roadmap 公布出来，希望各位开发者根据自身的需求，共同决策BeikeShop未来的发展方向！！ BeikeShop是什么？——BeikeShop是一款开源好用的跨境电商系统！ BeikeShop能够帮助卖家，快速的搭建属于自己的独立站，让卖家快速的进行国际网站建站——系统完全开源免费可商用！ ✦✦ Roadmap 开发计划 本开发计划可能会根据用户的使用需求，以及开发者反馈的情况，提前或延后部分功能的开发时间节点！ 此外Roadmap计划中，如果没有您需要的功能，欢迎你积极留言反馈，我们会评估后，将其添加到开发计划中 v1.3 - 2023年02月 1. 开发文档完善 文档的完善，可以帮助开发者更高效的进行开发。 后续，我们会根据开发者在qq交流群中提出的疑问，不断的完善docs文档！ 文档地址： https://docs.beikeshop.com/ 2. 代码优化 + 格式 + 命名 代码的优化和标准化，能保证beikeshop系统的代码具...
2023-02-09
400
上一篇

Apache ShenYu 2.5.1 发布

春节刚过，Apache ShenYu 便迎来了 2.5.1 版本。此次发布内容，共有 250+ 个 Pull Request ，60+ 位贡献者的参与。新增了若干功能，修复了 bug，优化了若干内容。 新功能 添加 bRPC 插件 在网关中引入 bRPC 插件 引入网关对 bRPC 的代理插件，在网关的 pom.xml 文件中增加如下依赖： <!-- apache shenyu brpc plugin --> <dependency> <groupId>org.apache.shenyu</groupId> <artifactId>shenyu-spring-boot-starter-plugin-brpc</artifactId> <version>${project.version}</version> </dependency> bRPC 服务接入网关 在由 bRPC 构建的微服务中，引入如下依赖： <dependency> <gro...
2023-02-09
235
下一篇

相关文章

发表评论

资源下载

更多资源
优质分享App

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

时间: 2025-12-03 大小: 4.36MB 下载: 23次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2025-12-21 大小: 189MB 下载: 2次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-01-03 大小: 1.42GB 下载: 2次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Nacos3 Gemini3 Kubernetes DeepSeek OpenAi SpringBoot4 Redis Jdk25 Docker HarmonyOS6 SpringCloud Rocky Service Mesh

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册