介绍

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}) })