> 科技资讯 > UiAdmin 零前端代码通用后台 Python&NodeJS 版 V1.0 发布

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

科技资讯 投稿 42500℃ 0 评论

介绍

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

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

更新日志

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

编程笔记 » UiAdmin 零前端代码通用后台 Python&NodeJS 版 V1.0 发布

赞同 (116) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽