{"id":13938011,"url":"https://github.com/wxs77577/rest-admin","last_synced_at":"2025-04-04T22:08:57.951Z","repository":{"id":28896199,"uuid":"109596628","full_name":"wxs77577/rest-admin","owner":"wxs77577","description":"Restful Admin Dashboard Based on Vue and Boostrap 4","archived":false,"fork":false,"pushed_at":"2022-12-07T17:33:01.000Z","size":9018,"stargazers_count":625,"open_issues_count":27,"forks_count":129,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-03-28T21:09:16.239Z","etag":null,"topics":["admin","adonisjs","bootstrap","crud","dashboard","restful","vue"],"latest_commit_sha":null,"homepage":"http://rest-admin.genyii.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wxs77577.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-05T16:35:09.000Z","updated_at":"2025-02-28T15:33:35.000Z","dependencies_parsed_at":"2023-01-14T13:45:16.087Z","dependency_job_id":null,"html_url":"https://github.com/wxs77577/rest-admin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxs77577%2Frest-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxs77577%2Frest-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxs77577%2Frest-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxs77577%2Frest-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wxs77577","download_url":"https://codeload.github.com/wxs77577/rest-admin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256115,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin","adonisjs","bootstrap","crud","dashboard","restful","vue"],"created_at":"2024-08-07T23:04:10.211Z","updated_at":"2025-04-04T22:08:57.929Z","avatar_url":"https://github.com/wxs77577.png","language":"Vue","readme":"# REST-ADMIN\n\n### 如果觉得有用，请在爱发电上赞助我： https://afdian.net/@johnny ，让我可以分出更多精力来完善它。\n\n\u003e 一个基于 Vue.js 和 Boostrap 4 的后台 UI.\n\nREST-ADMIN 试图让你在构建后台管理界面的时候更轻松点，所有你需要做的仅仅是提供一个后台服务的 RESTFul API 而已。\n\n## 在线 DEMO\n\n#### http://rest-admin.genyii.com/\n\n\u003e 用户名:密码 `admin:admin`\n\n## 截图\n\n| -                                                                             | -                                                                   |\n| ----------------------------------------------------------------------------- | ------------------------------------------------------------------- |\n| ![](./screenshots/1.png) 登录                                                 | ![](./screenshots/2.png) 用户列表                                   |\n| ![](./screenshots/3.png) 博客列表                                             | ![](./screenshots/4.png) 博客编辑表单                               |\n| ![](./screenshots/tfs-qrcode.png) 全栈之巅微信群 \u003cbr\u003e 加微信拉群: johnny77577 | ![](./screenshots/tfs-logo.png) 免费视频教程-《全栈之巅》微信小程序 |\n\n## 功能\n\n- 基于最新的 Bootstrap 和 VueJs，这意味着你可以方便地切换各种基于 bootstrap 框架的 CSS 皮肤\n- 纯前端的 VueJs 项目，可以无缝对接任何类型的后端 RESTful API\n- 强大的 **Data Table**，自带排序、分页、搜索、显示图片等等功能\n- 强大的 **Data Form Builder**，可以显示/编辑各种类型的值：文本、图片、布尔值等等\n- 支持基于资源的各项 CRUD 操作\n- 基于英语的 i18n 支持\n- **高度可配置的**站点信息。如：网站名称、LOGO、**后台菜单**以及底部信息。\n- 可用于实际项目。已经应用于公司的两个项目中\n\n## 快速开始\n\n```bash\ngit clone git@github.com:wxs77577/rest-admin.git\ncd rest-admin\ncode . # 用VSCODE打开项目\nnpm i # 或者 cnpm i\n\n# 和本地测试API一起启动\nnpm run test-api # 启动测试API\nnpm run serve # 启动REST-ADMIN客户端\n```\n\n\u003e 测试 API 的后台登录用户名及密码为 `admin` 和 `admin`\n\n### 发布\n\n```bash\nAPI_URI=http://localhost:5555/admin/api/ npm run build\n```\n\n然后只需要把`/dist/admin/`文件夹复制到对应的地方就好了\n\n\u003e 测试 API 基于`express`\n\n## 字段定义\n\n\u003e 用于表格和表单中\n\u003e 默认主键字段为`_id`，你可以在`/src/config.json`中随意更改它。\n\n范例:\n\n```javascript\n{\n  \"_id\": { \"label\": \"ID\" },\n  \"title\": { \"label\": \"标题\" },\n  \"type\": { \"label\": \"类型\", \"type\": \"select\", \"options\": [\n    { \"text\": \"Vue\", \"value\": \"vue\" },\n    { \"text\": \"React\", \"value\": \"react\" },\n    { \"text\": \"Angular\", \"value\": \"angular\" },\n  ]},\n  \"body\": { \"type\": \"html\", \"group\": \"详情\" },\n  \"steps\": { \"type\": \"array\", \"group\": \"阶段\", \"fields\": {\n    \"name\": { \"label\": \"名称\" },\n    \"date\": { \"label\": \"日期\" }\n  }},\n\n  \"_actions\": { // 定义表格视图中的一些额外选项\n    \"buttons\": { // 要隐藏“操作”栏中的某个按钮请把它设置为false\n      \"delete\": false,\n      \"edit\": false\n    },\n    \"toolbar\": { // 定义表格视图顶部的按钮\n      \"extra\": [ // 添加额外按钮\n        //所有`\u003cb-button\u003e`支持的属性\n        { \"to\": \"/form?uri=vouchers/generate\", \"label\": \"Generate Vouchers\" }\n      ]\n    }\n  }\n}\n```\n\n### 字段属性\n\n- `label` 显示的名称\n- `cols` 占用栅格列宽度, 总数为 12。（参考 Bootstrap）\n- `input_cols` 输入控件的宽度\n- `group` 在创建、更新表单中的 TAB 分组名称\n- `type` 字段类型。不同字段类型拥有不同的附加属性\n  - `select` 来自 [b-select](https://bootstrap-vue.js.org/docs/components/form-select) `bootstrap-vue` 的原生 HTML `\u003cselect\u003e` 标签\n    - `options` e.g. `[{ \"text\": \"显示名\", \"value\": \"1\" }]`\n  - `select2` [vue-select](https://github.com/sagalbot/vue-select), 类似 jQuery 的 `select2`\n    - `options` e.g. `[{ \"text\": \"显示名\", \"value\": \"1\" }]`\n  - `tree` [vue-treeselect](https://vue-treeselect.js.org/)\n    - `options` **使用 `text` 和 `value` 代替 `label` 和 `id`** 如： `[{ \"text\": \"Label\", \"value\": \"1\", \"children\": [ { \"text\": \"Item1\", \"value\": \"2\" } ] }]`\n  - `date` [vue2-datepicker](https://github.com/mengxiong10/vue2-datepicker) 支持 **日期范围**\n  - `switch` 类似 iOS 的开关控件\n  - `html` 来自[vue-html5-editor](https://github.com/PeakTai/vue-html5-editor)的可视化 HTML 编辑器\n  - `array` 数组值\n    - `fields` 子字段定义\n    - `is_table` 是否要显示为表格\n  - `radiolist`\n    - `options` 如： `[{ \"text\": \"Label\", \"value\": \"1\" }]`\n  - `checkboxlist`\n    - `options` 如： `[{ \"text\": \"Label\", \"value\": \"1\" }]`\n  - `checkbox`\n  - `file` 文件上传控件\n    - `limit` 定义 **size** 字节数, e.g. `{ size: 1000000 }`\n  - `image` 带有预览的图片上传控件\n    - `limit` 定义 **width** **height** 和 **size** 字节数, 如： `{ \"width\": 320, \"height\": 180, size: 1000000 }`\n  - `audio` 类似 `image`\n    - `limit` 定义 **size** 字节数, e.g. `{ size: 1000000 }`\n  - `video` 类似 `image`\n    - `limit` 定义 **size** 字节数, e.g. `{ size: 1000000 }`\n  - `textarea`\n  - `number`\n  - `text`\n- `required`\n- 以及https://bootstrap-vue.js.org/docs/components/form-input支持的任何其他属性，请注意：每种字段类型可能拥有不同的属性。\n\n## 接口\n\n\u003e Tips: check `/api/index.js` :p\n\n测试 API: http://localhost:8088/admin/api\n\n#### GET `/site` (url: http://localhost:8088/admin/api/site)\n\n获取站点配置\n\n- 返回值\n  ```javascript\n  {\n    \"name\": \"网站名称\",\n    \"logo\": \"http://.../logo.png\",\n    \"locale\": \"zh-CN\", //or zh-CN\n    \"locale_switcher\": false, //hide locale switcher\n    \"menu\" : [\n      {\n        \"name\": \"首页\",\n        \"url\": \"/\",\n        \"icon\": \"fa fa-home\",\n        // for home page\n      },\n      {\n        \"name\": \"内容管理\",\n        \"title\": true,\n        // display as a delimiter\n      },\n      {\n        \"name\": \"文章\",\n        \"url\": \"/rest/posts\",\n        \"icon\": \"fa fa-list\",\n        // url format of resource list: /rest/:resourceName\n      },\n      {\n        \"name\": \"设置\",\n        \"url\": \"/form?uri=site/settings\",\n        \"icon\": \"fa fa-cogs\",\n        // a custom form.\n      },\n      {\n        \"name\": \"注销\",\n        \"url\": \"/login\",\n        \"icon\": \"fa fa-lock\",\n        // for logout\n      },\n    ],\n  }\n  ```\n\n#### POST `/login`\n\n管理员登录\n\n- POST 数据\n  ```javascript\n  {\n    \"username\": \"admin\",\n    \"password\": \"admin\"\n  }\n  ```\n- 返回值\n  ```javascript\n  {\n    \"user\": {\n      \"username\": \"admin\",\n      ...\n    },\n    \"token\": \"1o2u3h4oi2u3h4jkashdflsda\"\n  }\n  ```\n  或者错误验证\n  \u003e 必须响应 `422` 的 HTTP 状态码\n  ```javascript\n  {\n    \"name\":\"HttpException\",\n    \"message\":[\n      { \"field\":\"password\", \"message\":\"密码不正确\" }\n    ]\n  }\n  ```\n\n#### GET `/:resource`\n\n获取某个资源列表\n`:resource` 表示一个资源名称. 如： `/users`, `/posts`...\n\n- 返回值 **IMPORTANT**\n  ```javascript\n  {\n    \"total\": 80,\n    \"perPage\": 10,\n    \"page\": 1,\n    \"data\": [\n      {...},\n      {...},\n      {...},\n    ]\n  }\n  ```\n\n#### GET `/:resource/grid`\n\n返回资源的表格视图配置\n`:resource` 表示一个资源名称。 如： `/users/grid`, `/posts/grid`...\n\n- 返回 **IMPORTANT**\n  ```javascript\n  {\n    \"searchModel\": {},\n    \"searchFields\": {\n      渲染搜索字段\n      ...参考 字段定义...\n    },\n    \"fields\": {\n      渲染表格字段\n      ...参考 字段定义...\n    }\n  }\n  ```\n\n#### GET `/:resource/form`\n\n获取资源的编辑表单配置\n`:resource` 表示资源名称。 如： `/users/form`, `/posts/form`...\n\n- Returns **IMPORTANT**\n  ```javascript\n  {\n    \"model\": {},\n    \"fields\": {\n      渲染表单字段\n      ...参考 字段定义...\n    }\n  }\n  ```\n\n#### POST `/:resource`\n\n创建资源\n\n- POST 数据\n  ```javascript\n  {\n    \"_id\": \"12341234\",\n    \"title\": \"The New Title\",\n    ...\n  }\n  ```\n- 返回值\n  ```javascript\n  {\n    \"_id\": \"12341234\",\n    \"title\": \"The New Title\",\n    ...\n  }\n  ```\n\n#### PUT `/:resource/:id`\n\n更新一个资源\n\n- POST DATA (Request Payload)\n  ```javascript\n  {\n    \"_id\": \"12341234\",\n    \"title\": \"The New Title\",\n    ...\n  }\n  ```\n- 返回值\n  ```javascript\n  {\n    \"_id\": \"12341234\",\n    \"title\": \"The New Title\",\n    ...\n  }\n  ```\n\n#### DELETE `/:resource/:id`\n\n删除一个资源\n\n- 返回值\n  ```javascript\n  {\n    \"success\": true\n  }\n  ```\n\n#### DELETE `/:resource`\n\n删除一个资源中的全部记录\n\n- 返回值\n  ```javascript\n  {\n    \"success\": true\n  }\n  ```\n\n#### 自定义表单 ?\n\n\u003e 要显示一个自定义表单，你需要事先在`/site`接口中添加一个`menu`，或者在`/:resource/grid`的额外字段中加一个按钮。\n\n自定义表单需要两个 API：\n\n1. 获取表单字段定义\n\n- GET `/site/settings`\n- 返回值\n  ```\n  {\n    \"title\": \"表单名称\",\n    \"fields\": {\n      ...参考 字段定义...\n    }\n  }\n  ```\n\n2. 处理表单提交\n\n- POST `/site/settings`\n- 返回值\n  ```javascript\n  {\n    \"success\": true,\n    \"message\": \"干得漂亮！\", //[可选] 会在提交之后显示在前端\n    \"redirect\": \"/\" //[可选] 自动跳转到某个前端路由，默认是返回上一页\n  }\n  ```\n\n## i18n\n\n\u003e 参考 [vu-i18n](https://github.com/kazupon/vue-i18n/)\n\nREST-ADMIN 默认支持 `en-US` 和 `zh-CN`, 你可以修改`/src/i18n/*.json`中的翻译文件。\n\n## 感谢\n\n- 基于 Vue.js 和 Bootstrap v4 的 [bootstrap-vue](https://github.com/bootstrap-vue/bootstrap-vue)\n- 来自 [Core UI](https://coreui.io/) 的漂亮的 UI\n- 来自 [vue-i18n](https://github.com/kazupon/vue-i18n/) 的 i18n 组件\n","funding_links":[],"categories":["Frameworks [🔝](#readme)","Vue","构架","Components \u0026 Libraries","Frameworks"],"sub_categories":["管理员模板","Frameworks","Admin Template"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwxs77577%2Frest-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwxs77577%2Frest-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwxs77577%2Frest-admin/lists"}