fastapi-admin/front/README-zh.md

REST-ADMIN

如果觉得有用，请在爱发电上赞助我： https://afdian.net/@johnny ，让我可以分出更多精力来完善它。

一个基于 Vue.js 和 Boostrap 4 的后台 UI.

REST-ADMIN 试图让你在构建后台管理界面的时候更轻松点，所有你需要做的仅仅是提供一个后台服务的 RESTFul API 而已。

在线 DEMO

http://rest-admin.genyii.com/

用户名:密码 admin:admin

截图

-	-
登录	用户列表
博客列表	博客编辑表单
全栈之巅微信群 加微信拉群: johnny77577	免费视频教程-《全栈之巅》微信小程序

功能

• 基于最新的 Bootstrap 和 VueJs，这意味着你可以方便地切换各种基于 bootstrap 框架的 CSS 皮肤
• 纯前端的 VueJs 项目，可以无缝对接任何类型的后端 RESTful API
• 强大的 Data Table，自带排序、分页、搜索、显示图片等等功能
• 强大的 Data Form Builder，可以显示/编辑各种类型的值：文本、图片、布尔值等等
• 支持基于资源的各项 CRUD 操作
• 基于英语的 i18n 支持
• 高度可配置的站点信息。如：网站名称、LOGO、后台菜单以及底部信息。
• 可用于实际项目。已经应用于公司的两个项目中

快速开始

git clone git@github.com:wxs77577/rest-admin.git
cd rest-admin
code . # 用VSCODE打开项目
npm i # 或者 cnpm i

# 和本地测试API一起启动
npm run test-api # 启动测试API
npm run serve # 启动REST-ADMIN客户端

测试 API 的后台登录用户名及密码为 admin 和 admin

发布

API_URI=http://localhost:5555/admin/api/ npm run build

然后只需要把/dist/admin/文件夹复制到对应的地方就好了

测试 API 基于express

字段定义

用于表格和表单中 默认主键字段为_id，你可以在/src/config.json中随意更改它。

范例:

{
  "_id": { "label": "ID" },
  "title": { "label": "标题" },
  "type": { "label": "类型", "type": "select", "options": [
    { "text": "Vue", "value": "vue" },
    { "text": "React", "value": "react" },
    { "text": "Angular", "value": "angular" },
  ]},
  "body": { "type": "html", "group": "详情" },
  "steps": { "type": "array", "group": "阶段", "fields": {
    "name": { "label": "名称" },
    "date": { "label": "日期" }
  }},

  "_actions": { // 定义表格视图中的一些额外选项
    "buttons": { // 要隐藏“操作”栏中的某个按钮请把它设置为false
      "delete": false,
      "edit": false
    },
    "toolbar": { // 定义表格视图顶部的按钮
      "extra": [ // 添加额外按钮
        //所有`<b-button>`支持的属性
        { "to": "/form?uri=vouchers/generate", "label": "Generate Vouchers" }
      ]
    }
  }
}

字段属性

• label 显示的名称
• cols 占用栅格列宽度, 总数为 12。（参考 Bootstrap）
• input_cols 输入控件的宽度
• group 在创建、更新表单中的 TAB 分组名称
• type 字段类型。不同字段类型拥有不同的附加属性
  • select 来自 b-select bootstrap-vue 的原生 HTML <select> 标签
    • options e.g. [{ "text": "显示名", "value": "1" }]
  • select2 vue-select, 类似 jQuery 的 select2
    • options e.g. [{ "text": "显示名", "value": "1" }]
  • tree vue-treeselect
    • options 使用 text 和 value 代替 label 和 id 如： [{ "text": "Label", "value": "1", "children": [ { "text": "Item1", "value": "2" } ] }]
  • date vue2-datepicker 支持 日期范围
  • switch 类似 iOS 的开关控件
  • html 来自vue-html5-editor的可视化 HTML 编辑器
  • array 数组值
    • fields 子字段定义
    • is_table 是否要显示为表格
  • radiolist
    • options 如： [{ "text": "Label", "value": "1" }]
  • checkboxlist
    • options 如： [{ "text": "Label", "value": "1" }]
  • checkbox
  • file 文件上传控件
    • limit 定义 size 字节数, e.g. { size: 1000000 }
  • image 带有预览的图片上传控件
    • limit 定义 width height 和 size 字节数, 如： { "width": 320, "height": 180, size: 1000000 }
  • audio 类似 image
    • limit 定义 size 字节数, e.g. { size: 1000000 }
  • video 类似 image
    • limit 定义 size 字节数, e.g. { size: 1000000 }
  • textarea
  • number
  • text
• required
• 以及https://bootstrap-vue.js.org/docs/components/form-input支持的任何其他属性，请注意：每种字段类型可能拥有不同的属性。

接口

Tips: check /api/index.js :p

测试 API: http://localhost:8088/admin/api

GET /site (url: http://localhost:8088/admin/api/site)

获取站点配置

• 返回值

  {
    "name": "网站名称",
    "logo": "http://.../logo.png",
    "locale": "zh-CN", //or zh-CN
    "locale_switcher": false, //hide locale switcher
    "menu" : [
      {
        "name": "首页",
        "url": "/",
        "icon": "fa fa-home",
        // for home page
      },
      {
        "name": "内容管理",
        "title": true,
        // display as a delimiter
      },
      {
        "name": "文章",
        "url": "/rest/posts",
        "icon": "fa fa-list",
        // url format of resource list: /rest/:resourceName
      },
      {
        "name": "设置",
        "url": "/form?uri=site/settings",
        "icon": "fa fa-cogs",
        // a custom form.
      },
      {
        "name": "注销",
        "url": "/login",
        "icon": "fa fa-lock",
        // for logout
      },
    ],
  }
  

POST /login

管理员登录

• POST 数据

  {
    "username": "admin",
    "password": "admin"
  }
  

• 返回值

  {
    "user": {
      "username": "admin",
      ...
    },
    "token": "1o2u3h4oi2u3h4jkashdflsda"
  }
  

  或者错误验证

  必须响应 422 的 HTTP 状态码

  {
    "name":"HttpException",
    "message":[
      { "field":"password", "message":"密码不正确" }
    ]
  }
  

GET /:resource

获取某个资源列表 :resource 表示一个资源名称. 如： /users, /posts...

• 返回值 IMPORTANT

  {
    "total": 80,
    "perPage": 10,
    "page": 1,
    "data": [
      {...},
      {...},
      {...},
    ]
  }
  

GET /:resource/grid

返回资源的表格视图配置 :resource 表示一个资源名称。 如： /users/grid, /posts/grid...

• 返回 IMPORTANT

  {
    "searchModel": {},
    "searchFields": {
      渲染搜索字段
      ...参考 字段定义...
    },
    "fields": {
      渲染表格字段
      ...参考 字段定义...
    }
  }
  

GET /:resource/form

获取资源的编辑表单配置 :resource 表示资源名称。 如： /users/form, /posts/form...

• Returns IMPORTANT

  {
    "model": {},
    "fields": {
      渲染表单字段
      ...参考 字段定义...
    }
  }
  

POST /:resource

创建资源

• POST 数据

  {
    "_id": "12341234",
    "title": "The New Title",
    ...
  }
  

• 返回值

  {
    "_id": "12341234",
    "title": "The New Title",
    ...
  }
  

PUT /:resource/:id

更新一个资源

• POST DATA (Request Payload)

  {
    "_id": "12341234",
    "title": "The New Title",
    ...
  }
  

• 返回值

  {
    "_id": "12341234",
    "title": "The New Title",
    ...
  }
  

DELETE /:resource/:id

删除一个资源

• 返回值

  {
    "success": true
  }
  

DELETE /:resource

删除一个资源中的全部记录

• 返回值

  {
    "success": true
  }
  

自定义表单 ?

要显示一个自定义表单，你需要事先在/site接口中添加一个menu，或者在/:resource/grid的额外字段中加一个按钮。

自定义表单需要两个 API：

1. 获取表单字段定义

• GET /site/settings
• 返回值

  {
    "title": "表单名称",
    "fields": {
      ...参考 字段定义...
    }
  }
  

2. 处理表单提交

• POST /site/settings
• 返回值

  {
    "success": true,
    "message": "干得漂亮！", //[可选] 会在提交之后显示在前端
    "redirect": "/" //[可选] 自动跳转到某个前端路由，默认是返回上一页
  }
  

i18n

参考 vu-i18n

REST-ADMIN 默认支持 en-US 和 zh-CN, 你可以修改/src/i18n/*.json中的翻译文件。

感谢

• 基于 Vue.js 和 Bootstrap v4 的 bootstrap-vue
• 来自 Core UI 的漂亮的 UI
• 来自 vue-i18n 的 i18n 组件