From 6592cfde3aa97399ff8914780cca9d292b8de29c Mon Sep 17 00:00:00 2001 From: lin-xin <2981207131@qq.com> Date: Wed, 18 Apr 2018 09:48:31 +0800 Subject: [PATCH] =?UTF-8?q?'=E7=A7=BB=E9=99=A4DataSource=E7=9B=B8=E5=85=B3?= =?UTF-8?q?'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 22 ++-- README_EN.md | 21 ++-- package.json | 1 - src/components/common/Header.vue | 8 +- src/components/common/Sidebar.vue | 14 +-- src/components/page/BaseTable.vue | 3 +- src/components/page/VueTable.vue | 97 -------------- src/router/index.js | 5 - static/css/datasource.css | 167 ------------------------- static/css/theme-green/color-green.css | 47 ++++--- static/data.json | 162 ------------------------ static/datasource.json | 71 ----------- 12 files changed, 52 insertions(+), 566 deletions(-) delete mode 100644 src/components/page/VueTable.vue delete mode 100644 static/css/datasource.css delete mode 100644 static/data.json delete mode 100644 static/datasource.json diff --git a/README.md b/README.md index b57c25d..0bfd831 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,6 @@ | |-- Readme.vue // 自述组件 | |-- Upload.vue // 图片上传 | |-- VueEditor.vue // 富文本编辑器 - | |-- VueTable.vue // datasource表格组件 | |-- App.vue // 页面入口文件 | |-- main.js // 程序入口文件，加载各种公共组件 |-- .babelrc // ES6语法编译配置 @@ -124,9 +123,6 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu ### element-ui ### 一套基于vue.js2.0的桌面组件库。访问地址：[element](http://element.eleme.io/#/zh-CN/component/layout) -### vue-datasource ### -一个用于动态创建表格的vue.js服务端组件。访问地址：[vue-datasource](https://github.com/coderdiaz/vue-datasource) - ### Vue-Quill-Editor ### 基于Quill、适用于Vue2的富文本编辑器。访问地址：[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor) @@ -141,28 +137,32 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu ## 其他注意事项 ## ### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ### -举个栗子，我不想用 vue-datasource 这个组件，那我需要分四步走。 +举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。 第一步：删除该组件的路由，在目录 src/router/index.js 中，找到引入改组件的路由，删除下面这段代码。 ```JavaScript { - path: '/vuetable', - component: resolve => require(['../components/page/VueTable.vue'], resolve) // vue-datasource组件 + // 富文本编辑器组件 + path: '/editor', + component: resolve => require(['../components/page/VueEditor.vue'], resolve) }, ``` -第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueTable.vue 文件。 +第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。 第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。 -```HTML -Vue表格组件 +```js +{ + index: 'editor', + title: '富文本编辑器' +}, ``` 第四步：卸载该组件。执行以下命令： - npm un vue-datasource -S + npm un vue-quill-editor -S 完成。 diff --git a/README_EN.md b/README_EN.md index a452b8d..419ba7a 100644 --- a/README_EN.md +++ b/README_EN.md @@ -42,7 +42,6 @@ The scheme as a set of multi-function background frame templates, suitable for m | |-- Readme.vue // Readme | |-- Upload.vue // Upload | |-- VueEditor.vue // VueEditor - | |-- VueTable.vue // VueTable | |-- App.vue // Main component | |-- main.js // Entry file |-- .babelrc // ES6 syntax compiler configuration @@ -117,9 +116,6 @@ Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vu ### element-ui ### A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout) -### vue-datasource ### -A Vue.js server side component to create dynamic tables. Github : [vue-datasource](https://github.com/coderdiaz/vue-datasource) - ### Vue-Quill-Editor ### Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor) @@ -133,28 +129,31 @@ A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.co ## Notice ## ### 一、If I don't want to use some components, how can I delete it? ### -For example, I don't want to use the vue-datasource component, I need to take four steps. +For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps. The first step to remove the component of the routing. Enter 'src/router/index.js' and delete the code below. ```JavaScript { - path: '/vuetable', - component: resolve => require(['../components/page/VueTable.vue'], resolve) + path: '/editor', + component: resolve => require(['../components/page/VueEditor.vue'], resolve) }, ``` -Second,delete the component files. Enter 'src/components/page/' and delete 'VueTable.vue' file. +Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file. The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below. -```HTML -Vue表格组件 +```js +{ + index: 'editor', + title: '富文本编辑器' +}, ``` Finally, uninstall this component. - npm un vue-datasource -S + npm un vue-quill-editor -S Complete! diff --git a/package.json b/package.json index 0fd5007..74e4b51 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "mavon-editor": "^2.5.2", "vue": "^2.5.16", "vue-cropperjs": "^2.2.0", - "vue-datasource": "1.0.12", "vue-quill-editor": "3.0.6", "vue-router": "^3.0.1", "vue-schart": "^0.1.4", diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue index cffa632..16e0656 100644 --- a/src/components/common/Header.vue +++ b/src/components/common/Header.vue @@ -11,7 +11,13 @@ {{username}} - 退出登录 + + 关于作者 + + + 项目仓库 + + 退出登录 diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue index 5deddb0..5bc621c 100644 --- a/src/components/common/Sidebar.vue +++ b/src/components/common/Sidebar.vue @@ -37,18 +37,8 @@ }, { icon: 'el-icon-tickets', - index: '2', - title: '常用表格', - subs: [ - { - index: 'table', - title: '基础表格' - }, - { - index: 'datasource', - title: 'datasource表格' - } - ] + index: 'table', + title: '基础表格' }, { icon: 'el-icon-date', diff --git a/src/components/page/BaseTable.vue b/src/components/page/BaseTable.vue index 44a4539..da10bec 100644 --- a/src/components/page/BaseTable.vue +++ b/src/components/page/BaseTable.vue @@ -2,8 +2,7 @@
- 表格 - 基础表格 + 基础表格
diff --git a/src/components/page/VueTable.vue b/src/components/page/VueTable.vue deleted file mode 100644 index 31eda0a..0000000 --- a/src/components/page/VueTable.vue +++ /dev/null @@ -1,97 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index e9c1aee..ecd8f5d 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -21,11 +21,6 @@ export default new Router({ path: '/table', component: resolve => require(['../components/page/BaseTable.vue'], resolve) }, - { - // vue-datasource组件 - path: '/datasource', - component: resolve => require(['../components/page/VueTable.vue'], resolve) - }, { path: '/form', component: resolve => require(['../components/page/BaseForm.vue'], resolve) diff --git a/static/css/datasource.css b/static/css/datasource.css deleted file mode 100644 index c4ed35e..0000000 --- a/static/css/datasource.css +++ /dev/null @@ -1,167 +0,0 @@ -.vue-datasource *{ - box-sizing: border-box; - font-size: 14px; -} -.vue-datasource .panel { - margin-bottom: 22px; - background-color: #fff; - border: 1px solid transparent; - border-radius: 4px; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); -} -.vue-datasource .panel-default { - border-color: #d3e0e9; -} -.vue-datasource .panel-heading { - padding: 10px 15px; - border-bottom: 1px solid transparent; - border-top-right-radius: 3px; - border-top-left-radius: 3px; -} -.vue-datasource .panel-default > .panel-heading { - height:56px; - color: #333333; - background-color: #fff; - border-color: #d3e0e9; -} -.vue-datasource .pull-left { - float: left !important; -} -.vue-datasource .pull-right { - float: right !important; -} -.vue-datasource .form-group { - margin-bottom: 15px; -} -.vue-datasource label { - display: inline-block; - max-width: 100%; - margin-bottom: 5px; - font-weight: bold; -} -.vue-datasource .form-control { - display: block; - width: 100%; - height: 36px; - padding: 6px 12px; - font-size: 14px; - line-height: 1.6; - color: #555555; - background-color: #fff; - background-image: none; - border: 1px solid #ccd0d2; - border-radius: 4px; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; -} -.vue-datasource .btn { - display: inline-block; - margin-bottom: 0; - font-weight: normal; - text-align: center; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - background-image: none; - border: 1px solid transparent; - white-space: nowrap; - padding: 6px 12px; - font-size: 14px; - line-height: 1.6; - border-radius: 4px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.vue-datasource .btn-primary { - color: #fff; - background-color: #3097D1; - border-color: #2a88bd; -} -.vue-datasource .table { - width: 100%; - max-width: 100%; - margin-bottom: 22px; - border-collapse: collapse; - border-spacing: 0; - text-align: center; -} -.vue-datasource .table > thead > tr > th { - vertical-align: bottom; - border-bottom: 2px solid #ddd; -} -.vue-datasource .table th ,.vue-datasource .table td { - padding: 8px; - line-height: 1.6; - vertical-align: top; - border-top: 1px solid #ddd; -} -.vue-datasource .table-striped > tbody > tr:nth-of-type(odd) { - background-color: #f9f9f9; -} -.vue-datasource .success th ,.vue-datasource .success td{ - background-color: #dff0d8; -} -.vue-datasource .pagination { - display: inline-block; - padding-left: 0; - margin: 22px 0; - border-radius: 4px; -} -.vue-datasource .pagination > li { - display: inline; -} -.pagination > li > a,.pagination > li > span { - position: relative; - float: left; - padding: 6px 12px; - line-height: 1.6; - text-decoration: none; - color: #3097D1; - background-color: #fff; - border: 1px solid #ddd; - margin-left: -1px; -} -.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { - color: #777777; - background-color: #fff; - border-color: #ddd; - cursor: not-allowed; -} -.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { - z-index: 3; - color: #fff; - background-color: #3097D1; - border-color: #3097D1; - cursor: default; -} -.vue-datasource .pagination > li:first-child > a, .vue-datasource .pagination > li:first-child > span { - margin-left: 0; - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; -} -.vue-datasource .text-center { - text-align: center; -} - - - - -@media (min-width: 768px){ - .form-inline .form-group { - display: inline-block; - margin-bottom: 0; - vertical-align: middle; - } - .form-inline .control-label { - margin-bottom: 0; - vertical-align: middle; - } - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } -} diff --git a/static/css/theme-green/color-green.css b/static/css/theme-green/color-green.css index f81d70d..7a19ed6 100644 --- a/static/css/theme-green/color-green.css +++ b/static/css/theme-green/color-green.css @@ -1,27 +1,22 @@ -.header{ - background-color: #00d1b2; -} -.login-wrap{ - background: rgba(56, 157, 170, 0.82);; -} -.plugins-tips{ - background: #f2f2f2; -} -.plugins-tips a{ - color: #00d1b2; -} -.el-upload--text em { - color: #00d1b2; -} -.pure-button{ - background: #00d1b2; -} -.vue-datasource .btn-primary { - color: #fff; - background-color: #00d1b2 !important; - border-color: #00d1b2 !important; -} -.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { - background-color: #00d1b2 !important; - border-color: #00d1b2 !important; +.header{ + background-color: #00d1b2; +} +.login-wrap{ + background: rgba(56, 157, 170, 0.82);; +} +.plugins-tips{ + background: #f2f2f2; +} +.plugins-tips a{ + color: #00d1b2; +} +.el-upload--text em { + color: #00d1b2; +} +.pure-button{ + background: #00d1b2; +} +.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { + background-color: #00d1b2 !important; + border-color: #00d1b2 !important; } \ No newline at end of file diff --git a/static/data.json b/static/data.json deleted file mode 100644 index 82a10f5..0000000 --- a/static/data.json +++ /dev/null @@ -1,162 +0,0 @@ -{ - "pagination": { - "total": 15, - "per_page": 15, - "current_page": 1, - "last_page": 1, - "from": 1, - "to": 15 - }, - "data": [ - { - "id": 1, - "name": "Jaylen Schmidt", - "email": "aheaney@example.org", - "city": "Conroyburgh", - "company": "Kunde, Gerhold and Runte", - "job": "Soil Scientist", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 2, - "name": "Ms. Desiree Franecki III", - "email": "pweissnat@example.net", - "city": "New Mathew", - "company": "Davis Ltd", - "job": "Customer Service Representative", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 3, - "name": "Clyde Corwin", - "email": "rolfson.lexus@example.com", - "city": "East Ron", - "company": "Zieme and Sons", - "job": "Claims Taker", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 4, - "name": "Mr. Tyrese Kuphal", - "email": "libby.heaney@example.com", - "city": "Cristianland", - "company": "Abernathy LLC", - "job": "Occupational Health Safety Technician", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 5, - "name": "Ms. Amya West PhD", - "email": "uheller@example.org", - "city": "Treutelmouth", - "company": "Mraz-Effertz", - "job": "Hazardous Materials Removal Worker", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 6, - "name": "Murphy Stamm IV", - "email": "ckautzer@example.com", - "city": "Myleneshire", - "company": "Sporer-Wolf", - "job": "Pipelaying Fitter", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 7, - "name": "Elsa Jast", - "email": "kaitlyn.lang@example.net", - "city": "Mariahstad", - "company": "Hackett LLC", - "job": "Record Clerk", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 8, - "name": "Hardy Mosciski DVM", - "email": "soledad44@example.net", - "city": "Jasminborough", - "company": "Haley Ltd", - "job": "Kindergarten Teacher", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 9, - "name": "Demarcus Littel", - "email": "americo84@example.com", - "city": "New Lilaton", - "company": "Satterfield Group", - "job": "Plant Scientist", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 10, - "name": "Dr. Shad Gleichner", - "email": "eleanora23@example.com", - "city": "Lake Whitneyberg", - "company": "Fay Group", - "job": "Rotary Drill Operator", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 11, - "name": "Milford Mann", - "email": "shartmann@example.net", - "city": "Lake Austinport", - "company": "Sporer-Langosh", - "job": "Social and Human Service Assistant", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 12, - "name": "Prof. Mustafa Lindgren Sr.", - "email": "lizeth.morissette@example.net", - "city": "Roweborough", - "company": "Mitchell-Ratke", - "job": "Shoe Machine Operators", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 13, - "name": "Mrs. Brittany Bode Sr.", - "email": "wiegand.mozelle@example.org", - "city": "South Maxwellville", - "company": "Reilly Inc", - "job": "Bridge Tender OR Lock Tender", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 14, - "name": "Dariana Bauch", - "email": "dessie.schamberger@example.net", - "city": "East Linnie", - "company": "Wuckert PLC", - "job": "Elementary and Secondary School Administrators", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - }, - { - "id": 15, - "name": "Jalon Renner", - "email": "lulu45@example.net", - "city": "New Rashad", - "company": "Muller-Kuhn", - "job": "Manufactured Building Installer", - "created_at": "2017-01-13 19:17:16", - "updated_at": "2017-01-13 19:17:16" - } - ] -} \ No newline at end of file diff --git a/static/datasource.json b/static/datasource.json deleted file mode 100644 index 7f958aa..0000000 --- a/static/datasource.json +++ /dev/null @@ -1,71 +0,0 @@ -{ - "data": [{ - "id": 1, - "name": "段娜", - "email": "g.rgiuory@kctbut.mw", - "ip": "68.28.4.232" - }, - { - "id": 2, - "name": "蔡洋", - "email": "y.mwjjoje@lpkshev.tg", - "ip": "22.126.12.189" - }, - { - "id": 3, - "name": "陈敏", - "email": "e.voaiiuo@mvng.sn", - "ip": "227.89.13.37" - }, - { - "id": 4, - "name": "朱平", - "email": "e.lduuf@nkfypn.az", - "ip": "9.39.240.243" - }, - { - "id": 5, - "name": "侯平", - "email": "t.czqjyndts@jmwenklns.md", - "ip": "178.162.29.113" - }, - { - "id": 6, - "name": "常超", - "email": "d.dhysgem@uxpcutmlk.tt", - "ip": "192.50.103.170" - }, - { - "id": 7, - "name": "许平", - "email": "g.fiqdonvbc@wanepptw.tv", - "ip": "73.20.99.60" - }, - { - "id": 8, - "name": "毛超", - "email": "w.unyyejh@qus.gt", - "ip": "10.88.135.123" - }, - { - "id": 9, - "name": "周磊", - "email": "e.qbejguqqg@ejpxhltoak.gw", - "ip": "244.221.237.210" - }, - { - "id": 10, - "name": "胡秀英", - "email": "s.dszo@uxaojtj.sy", - "ip": "86.199.17.210" - } - ], - "pagination": { - "total": 15, - "per_page": 15, - "current_page": 1, - "last_page": 1, - "from": 1, - "to": 15 - } -} \ No newline at end of file