Skip to content

ifanrx/user-dashboard-antd-demo

 
 

Repository files navigation

自动生成运营后台

知晓云支持开发者结合 User Dash API 按需编写一套独立的运营后台,并支持一键部署至知晓云服务器,用户可以通过生成的链接直接访问使用。

  • 该服务适用于需要独立管理后台的用户,比如你的运营同事,并非开发者,你也不会希望他直接操作数据表,此时你可以写一套简单的运营后台供运营同事使用。

如果你的电脑没有 nodejs,请先下载 nodejs 并安装

本地调试

修改 public/index.html:

  1. 修改 TOCLFMHonESsHTsc 为你的 client id
  2. 修改 NDKLal9998LDjk 为你的环境 ID,如果为生产环境,环境 ID 设为空或将 env_id=NDKLal9998LDjk 去掉,测试环境 ID 的获取需要在控制台切换到测试环境后,到设置页面获取
  3. 替换原有的表数据
  window._USER_CONFIG = {
      TABLE_LIST: [
        {name: 'dev_team_test' /* 数据表名称 */, id: 43488 /* 数据表 id */}, 
        {name: 'test_user_dash', id: 52124}]
    }

部署到运营后台

第一步:在此项目根目录下执行 npm install

第二步:在此项目根目录下执行 npm run build

成功时如下图所示:

第二步:将 dist 目录中的文件压缩为 zip 包:

第三步:在知晓云运营后台部署代码

稍等一会,进入控制台,即可看到部署成功的运营后台

二次开发

本项目是在 AntDesign 的 create-react-app-antd 项目基础上改进,并结合了知晓云的 OPEN API 进行开发

预备知识

在开发之前,建议你对以下罗列的几个知识点有所了解:

  • 基础的 HTML/CSS/JS 知识
  • React 前端框架
  • webpack 构建工具
  • antDesign UI

项目目录结构

src 目录结构如下

├── App.css 
├── App.js                
├── components
│   ├── AddRowModalView  // 添加/编辑行模态框
│   ├── CommonContainer  // 样式组件
│   ├── CreateFormItem   // 表单控件渲染组件
│   ├── SchemaDataFilterFormModal // 查询模态框
│   ├── SchemaFileUpload // 文件上传组件
│   ├── SchemaList       // 左侧栏列表
│   └── SchemaTable      // 表格组件
├── constants.js          // 常量配置
├── index.css
├── index.js            // 入口
├── io                  // 接口 API
│   └── index.js
├── registerServiceWorker.js
└── utils.js            // 工具函数

待完善的功能

数据格式

目前数据表的展示和编辑支持以下数据格式

  • id
  • string
  • number
  • integer
  • file
  • data
  • array
  • object
  • geojson

批量删除

目前 OPEN API 暂不支持批量删除功能

其他

一键部署运营后台示例(旧)

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 86.6%
  • HTML 8.2%
  • CSS 5.2%