REST-ADMIN 中文文档
An Powerful Admin Dashboard based on Boostrap-Vue.
Demo: https://rest-admin.genyii.com/ admin admin
Please support me on https://afdian.net/@johnny if you like it. 如果觉得有用请在爱发电上赞助我:https://afdian.net/@johnny
- Bootswatch Themes
- Powerful Data Table with sorting, pagination, searching, display images...
- Powerful Edit 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.
- | - |
---|---|
Login Page | Home page |
Data Table for posts | Data Form for post |
Wechat Group (Search Wechat johnny77577 to join in) |
Free Videos |
git clone [email protected]: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 serve # start rest admin client
The default username and password of test-api is
admin
andadmin
API_URI=https://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.
Used in listing tables and editing forms Default PRIMARY_KEY field is
_id
, feel free to change it in/src/config.json
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", "group": "Detail" },
"steps": {
"type": "array",
"group": "Steps",
"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>`
]
}
}
}
label
Title for displaycols
column width, total is 12.input_cols
column width of input control.group
title for tabs in create/edit formstype
Field type, accepted values and additional properties for some fields.select
raw html<select>
tag from b-select ofbootstrap-vue
options
e.g.[{ "text": "Label", "value": "1" }]
select2
vue-select, likeselect2
in jQueryoptions
e.g.[{ "text": "Label", "value": "1" }]
tree
vue-treeselectoptions
usetext
andvalue
insteadlabel
andid
e.g.[{ "text": "Label", "value": "1", "children": [ { "text": "Item1", "value": "2" } ] }]
date
vue2-datepicker supports date rangeswitch
A iOS-liked switch componenthtml
An WYSIWYG html editor from vue-html5-editorarray
Array valuesfields
child fields definationis_table
display as a table ?
radiolist
options
e.g.[{ "text": "Label", "value": "1" }]
checkboxlist
options
e.g.[{ "text": "Label", "value": "1" }]
checkbox
file
File uploaderlimit
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
likeimage
limit
define file limit options of size in byets, e.g.{ size: 1000000 }
video
likeimage
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.
Tips: check
/api/index.js
:p
Example Base Api Url: https://localhost:8088/admin/api
GET /site
(url: https://localhost:8088/admin/api/site)
Get config data of site
- Returns
{ "name": "Site Name", "logo": "https://.../logo.png", "locale": "en-US", //or zh-CN "locale_switcher": false, //hide locale switcher "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 } ] }
For admin user login
- POST DATA
{ "username": "admin", "password": "admin" }
- Returns
or with validation errors
{ "user": { "username": "admin", ... }, "token": "1o2u3h4oi2u3h4jkashdflsda" }
must response
422
http status.{ "name": "HttpException", "message": [{ "field": "password", "message": "Incorrect password." }] }
Fetch all records of a resource.
:resource
means any resource name. e.g. /users
, /posts
...
- Returns IMPORTANT
{ "total": 80, "perPage": 10, "page": 1, "data": [ {...}, {...}, {...}, ] }
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... } }
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... } }
create a resource
- POST DATA
{ "_id": "12341234", "title": "The New Title", ... }
- Returns
{ "_id": "12341234", "title": "The New Title", ... }
update a resource
- POST DATA (Request Payload)
{ "_id": "12341234", "title": "The New Title", ... }
- Returns
{ "_id": "12341234", "title": "The New Title", ... }
delete a resource
- Returns
{ "success": true }
delete all
- Returns
{ "success": true }
To render a custom form, you need to define a
menu
item in/site
api, or add anextra
button of toolbar in/:resource/grid
.
There are two apis for a custom form:
- Get form definition
- GET
/site/settings
- Returns
{ "title": "Form Title", "fields": { ...see Fields Definition... } }
- 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. }
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
.
- Vue.js and Bootstrap v4 based bootstrap-vue
- Nice UI from Core UI
- i18n component from vue-i18n