REST-ADMIN - 这下老板不会说我的后台做的又丑又慢了吧?
42

https://github.com/wxs77577/rest-admin

非侵入式,前后端分离,仅需提供RESTful API接口即可实现一个后台管理界面,让你更加专注于后端代码。

REST-ADMIN

An Powerful Admin Dashboard based on Vue.js and Boostrap v4.

REST-ADMIN is trying to make it easier to built an admin dashboard for any backend services. All you need to do is just provide a RESTful api for it.

Screenshots

- -
Login Page Data Table for users
Data Table for posts Data Form for post
Custom Form Sample Fields of posts

Features

  • Based on the latest Bootstrap(v4) and Vue.js, it means you can easily change any skin based on bootstrap css framework.
  • Plain vue.js project, can be used for any backend restful api.
  • Powerful Data Table with sorting, pagination, searching, display images...
  • Powerful Data Form Builder can display/edit any value of text, image, boolean...
  • Fully support for Resource-based CRUD option.
  • English based fully i18n support.
  • Highly Configurable site info. Such as: site name, logo, Menu and footer...
  • Production ready. It has been used in two projects in our company.

Quick Start

git clone git@github.com:wxs77577/rest-admin.git
cd rest-admin
code . # open with vscode [optional]
npm i # or cnpm i

# start with local test api server
npm run test-api # start test api server
npm run local # start rest admin client

or you have an exists rest api endpot.

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

The default username and password of test-api is admin and admin

Build

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

Then just copy /dist/admin folder to the anywhere.

There is a built-in restful api based on express for test.

Fields Definition

Used in listing tables and editing forms

Example:

{
  "_id": { "label": "ID" },
  "title": { "label": "Title" },
  "type": { "label": "Type", "type": "select", "options": [
    { "text": "Vue", "value": "vue" },
    { "text": "React", "value": "react" },
    { "text": "Angular", "value": "angular" },
  ]},
  "body": { "type": "html" },
  "steps": { "type": "array", "fields": {
    "name": { "label": "Name" },
    "date": { "label": "date" }
  }},

  "_actions": { // define table view, it's optional.
    "buttons": { // define buttons as `false` to hide in actions colum
      "delete": false,
      "edit": false
    },
    "toolbar": { // define actions in top toolbar table view
      "extra": [ // add extra buttons
        { "to": "/form?uri=vouchers/generate", "label": "Generate Vouchers" } //properties of `<b-button>`
      ]
    }
  }
}

Field properties

  • label Title for display
  • cols column width, total is 12.
  • input_cols column width of input control.
  • type Field type, accepted values and additional properties for some fields.
    • select raw html <select> tag from b-select of bootstrap-vue
    • options e.g. [{ "text": "Label", "value": "1" }]
    • select2 vue-select, like select2 in jQuery
    • options e.g. [{ "text": "Label", "value": "1" }]
    • date vue2-datepicker support date range
    • switch A iOS-liked switch component
    • html An WYSIWYG html editor from vue-html5-editor
    • array Array values
    • fields child fields defination
    • is_table display as a table ?
    • radiolist
    • options e.g. [{ "text": "Label", "value": "1" }]
    • checkboxlist
    • options e.g. [{ "text": "Label", "value": "1" }]
    • checkbox
    • file File uploader
    • limit define file limit options of size in byets, e.g. { size: 1000000 }
    • image Image file uploader with preview.
    • limit define file limit options of width height and size in byets, e.g. { "width": 320, "height": 180, size: 1000000 }
    • audio like image
    • limit define file limit options of size in byets, e.g. { size: 1000000 }
    • video like image
    • limit define file limit options of size in byets, e.g. { size: 1000000 }
    • textarea
    • number
    • text
  • required
  • Any other properties accepted in https://bootstrap-vue.js.org/docs/components/form-input, please notice that every kind of field component has it's own properties.

APIs

Tips: check /api/index.js :p

Example Base Api Url: http://localhost:8088/admin/api

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

Get config data of site

  • Returns
    {
    "name": "Site Name",
    "logo": "http://.../logo.png",
    "menu" : [
      {
        "name": "Home",
        "url": "/",
        "icon": "fa fa-home",
        // for home page
      },
      {
        "name": "Content",
        "title": true,
        // display as a delimiter
      },
      {
        "name": "Posts",
        "url": "/rest/posts",
        "icon": "fa fa-list",
        // url format of resource list: /rest/:resourceName      
      },
      {
        "name": "Config",
        "url": "/form?uri=site/settings",
        "icon": "fa fa-cogs",
        // a custom form.
      },
      {
        "name": "Logout",
        "url": "/login",
        "icon": "fa fa-lock",
        // for logout
      },
    ],
    }

POST /login

For admin user login

  • POST DATA
    {
    "username": "admin",
    "password": "admin"
    }
  • Returns
    {
    "user": {
      "username": "admin",
      ...
    },
    "token": "1o2u3h4oi2u3h4jkashdflsda"
    }

    or with validation errors

    must response 422 http status.

    {
    "name":"HttpException",
    "message":[
    { "field":"password", "message":"Incorrect password." }
    ]
    }

GET /:resource

Fetch all records of a resource.
:resource means any resource name. e.g. /users, /posts...

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

GET /:resource/grid

Fetch grid view config of a resource.
:resource means any resource name. e.g. /users/grid, /posts/grid...

  • Returns IMPORTANT
    {
    "searchModel": {},
    "searchFields": {
      render a searching form
      ...see Fields Definition...
    },
    "fields": {
      render a table view
      ...see Fields Definition...
    }
    }

GET /:resource/form

Fetch editing form config of a resource.
:resource means any resource name. e.g. /users/form, /posts/form...

  • Returns IMPORTANT
    {
    "model": {},
    "fields": {
      render a editing form
      ...see Fields Definition...
    }
    }

POST /:resource

create a resource

  • POST DATA
    {
    "_id": "12341234",
    "title": "The New Title",
    ...
    }
  • Returns
    {
    "_id": "12341234",
    "title": "The New Title",
    ...
    }

PUT /:resource/:id

update a resource

  • POST DATA (Request Payload)
    {
    "_id": "12341234",
    "title": "The New Title",
    ...
    }
  • Returns
    {
    "_id": "12341234",
    "title": "The New Title",
    ...
    }

DELETE /:resource/:id

delete a resource

  • Returns
    {
    "success": true
    }

DELETE /:resource

delete all

  • Returns
    {
    "success": true
    }

Custom Form ?

To render a custom form, you need to define a menu item in /site api, or add an extra button of toolbar in /:resource/grid.

There are two apis for a custom form:

  1. Get form definition
    • GET /site/settings
    • Returns
      {
      "title": "Form Title",
      "fields": {
      ...see Fields Definition...        
      }
      }
  2. Handle submission
    • POST /site/settings
    • Returns
      {
      "success": true,
      "message": "Well done!", //[optional] will show after form submited.
      "redirect": "/" //[optional] auto redirect after form submited, default is back to the last page.
      }

i18n

Check vu-i18n for detailed documentation.

REST-ADMIN gives built-in support for en-US and zh-CN, you can change translation files in /src/i18n/*.json.

Thanks to

本帖已被设为精华帖!
本帖由系统于 4个月前 自动加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 12
BradStevens

要是删除和编辑都用那种图标会不会更好点?同理那些添加按钮这些的

4个月前

@BradStev 可以考虑下。 请问您有兴趣翻译AdonisJs的文档么 https://github.com/wxs77577/docs/tree/4.1-zh

4个月前
BradStevens

@genyii 力所不能及哈,不好意思

4个月前

@BradStev 没关系,欢迎了解

4个月前
黑将军

大侠不随手翻译一下吗?英语渣实在伤不起 :joy:

4个月前

@黑将军 嗯嗯,翻译。

4个月前

mark

4个月前

@黑将军 翻译好了

4个月前

根据 角色权限 展开相应左侧菜单 能实现吗

4个月前

@传说中的五毛 可以的,正在开发

4个月前

厉害了, 我的哥~

2个月前

666

2个月前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!