vue 和boostrap
休息管理员 (REST-ADMIN)
An Powerful Admin Dashboard based on Vue.js and Boostrap v4.
基于Vue.js和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.
REST-ADMIN试图简化为任何后端服务构建管理仪表板的过程。 您需要做的只是为其提供RESTful API。
username:password admin:admin
用户名:密码admin:admin
屏幕截图 (Screenshots)
- | - |
---|---|
![]() | |
![]() | |
![]() |
-- | -- |
---|---|
![]() | |
![]() | |
![]() |
特征 (Features)
Based on the latest Bootstrap(v4) and Vue.js, it means you can easily change any skin based on bootstrap css framework.
基于最新的Bootstrap(v4)和Vue.js,这意味着您可以轻松地基于bootstrap css框架更改任何外观。
Plain vue.js project, can be used for any backend restful api.
普通的vue.js项目,可用于任何后端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.
完全支持基于资源的CRUD选项。
English based fully i18n support.
基于英语的完全i18n支持。
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[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 local # start rest admin client
or you have an exists rest api endpot.
或者您有一个存在的Rest api端点。
API_URI=http://localhost:5555/admin/api/ npm run dev
The default username and password of test-api is
admin
andadmin
test-api的默认用户名和密码为
admin
和admin
建立 (Build)
API_URI=http://localhost:5555/admin/api/ npm run build
Then just copy /dist/admin
folder to the anywhere.
然后只需将/dist/admin
文件夹复制到任何位置。
There is a built-in restful api based on
express
for test.有一个基于
express
的内置Restful API用于测试。
字段定义 (Fields Definition)
Used in listing tables and editing forms Default PRIMARY_KEY field is
_id
, feel free to change it in/src/config.json
用于列表和编辑表单缺省PRIMARY_KEY字段为
_id
,可以在/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" },
"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 displaylabel
显示标题cols
column width, total is 12.cols
列宽,总计为12。input_cols
column width of input control.input_cols
输入控件的列宽。type
Field type, accepted values and additional properties for some fields.type
字段类型,某些字段的接受值和其他属性。<select>
tag from b-select ofbootstrap-vue
options
e.g.[{ "text": "Label", "value": "1" }]
- 从b-select中
select
原始html<select>
标记-
options
例如[{ "text": "Label", "value": "1" }]
-
select2
select2
vue-select, like vue-select ,类似于jQuery中的select2
in jQueryselect2
options
e.g.options
例如[{ "text": "Label", "value": "1" }]
[{ "text": "Label", "value": "1" }]
tree
vue-treeselectoptions
usetext
andvalue
insteadlabel
andid
e.g.[{ "text": "Label", "value": "1", "children": [ { "text": "Item1", "value": "2" } ] }]
-
tree
Vuetree
选择-
options
使用text
和value
代替label
和id
例如[{ "text": "Label", "value": "1", "children": [ { "text": "Item1", "value": "2" } ] }]
-
date
date
vue2-datepicker supports vue2-datepicker支持date range日期范围switch
A iOS-liked switch componentswitch
甲IOS的喜欢开关元件html
An WYSIWYG html editor from vue-html5-editor-
html
来自vue-html5-editor的WYSIWYG html编辑器 array
Array valuesarray
数组值fields
child fields definationfields
子领域定义is_table
display as a table ?is_table
显示为表格吗?
radiolist
radiolist
options
e.g.options
例如[{ "text": "Label", "value": "1" }]
[{ "text": "Label", "value": "1" }]
checkboxlist
checkboxlist
options
e.g.options
例如[{ "text": "Label", "value": "1" }]
[{ "text": "Label", "value": "1" }]
checkbox
checkbox
file
File uploaderfile
文件上传器limit
define file limit options oflimit
定义size in byets, e.g. 大小 byets,例如文件限制选项{ size: 1000000 }
{ size: 1000000 }
image
Image file uploader with preview.image
图像文件上传者预览。limit
define file limit options oflimit
定义width 宽度和height and 高度在byets size in byets, e.g. 尺寸 ,例如文件限制选项{ "width": 320, "height": 180, size: 1000000 }
{ "width": 320, "height": 180, size: 1000000 }
audio
likeimage
一样的image
audio
limit
define file limit options oflimit
定义size in byets, e.g. 大小 byets,例如文件限制选项{ size: 1000000 }
{ size: 1000000 }
video
likeimage
一样的image
video
limit
define file limit options oflimit
定义size in byets, e.g. 大小 byets,例如文件限制选项{ size: 1000000 }
{ size: 1000000 }
textarea
textarea
number
number
text
text
required
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.
https://bootstrap-vue.js.org/docs/components/form-input中接受的任何其他属性,请注意,每种字段组件都有其自己的属性。
翻译自: https://vuejsexamples.com/an-powerful-admin-dashboard-based-on-vue-js-and-boostrap/
vue 和boostrap