vue 和boostrap_基于Vue.js和Boostrap的强大管理仪表板

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。

View demo 观看演示

username:password admin:admin

用户名：密码admin：admin

屏幕截图 (Screenshots)

-	-
Login Page
Data Table for posts
Custom Form

--	--
登录页面
职位数据表
自订表格

特征 (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 and admin

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 display

  label显示标题

• 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 of bootstrap-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 jQuery select2
    • options e.g. options例如[{ "text": "Label", "value": "1" }][{ "text": "Label", "value": "1" }]
  • tree vue-treeselect
    • options use text and value instead label and id e.g. [{ "text": "Label", "value": "1", "children": [ { "text": "Item1", "value": "2" } ] }]
  • tree Vue tree 选择
    • 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 values array数组值
    • 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" }]
  • checkboxcheckbox
  • file File uploader file文件上传器
    • limit define file limit options of limit定义size in byets, e.g. 大小 byets，例如文件限制选项{ size: 1000000 }{ size: 1000000 }
  • image Image file uploader with preview. image图像文件上传者预览。
    • limit define file limit options of limit定义width 宽度和height and 高度在byets size in byets, e.g. 尺寸 ，例如文件限制选项{ "width": 320, "height": 180, size: 1000000 }{ "width": 320, "height": 180, size: 1000000 }
  • audio like image一样的image audio
    • limit define file limit options of limit定义size in byets, e.g. 大小 byets，例如文件限制选项{ size: 1000000 }{ size: 1000000 }
  • video like image一样的image video
    • limit define file limit options of limit定义size in byets, e.g. 大小 byets，例如文件限制选项{ size: 1000000 }{ size: 1000000 }
  • textareatextarea
  • numbernumber
  • texttext

• 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