介绍

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进行业务开发