REST-ADMIN - 这下老板不会说我的后台做的又丑又慢了吧?
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
- | - |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
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
andadmin
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 displaycols
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 ofbootstrap-vue
options
e.g.[{ "text": "Label", "value": "1" }]
select2
vue-select, likeselect2
in jQueryoptions
e.g.[{ "text": "Label", "value": "1" }]
date
vue2-datepicker support 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/componen..., 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 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... } }
- GET
- 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. }
- POST
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
- Vue.js and Bootstrap v4 based bootstrap-vue
- Nice UI from Core UI
- i18n component from vue-i18n
推荐文章: