├── static
    ├── .gitkeep
    ├── 1.png
    └── vuetable.json
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   ├── img.jpg
    │   └── logo.png
    ├── components
    │   ├── common
    │   │   ├── img
    │   │   │   └── img.jpg
    │   │   ├── Home.vue
    │   │   ├── Sidebar.vue
    │   │   └── Header.vue
    │   ├── HelloWorld.vue
    │   └── page
    │   │   ├── datalist
    │   │       ├── FoodList.vue
    │   │       ├── OrderList.vue
    │   │       ├── UserList.vue
    │   │       └── ShopList.vue
    │   │   ├── Tabs.vue
    │   │   ├── 404.vue
    │   │   ├── formcorrelation
    │   │       ├── VueEditor.vue
    │   │       ├── Upload.vue
    │   │       ├── Markdown.vue
    │   │       └── BaseForm.vue
    │   │   ├── BaseCharts.vue
    │   │   ├── Login.vue
    │   │   ├── Dashboard.vue
    │   │   └── BaseTable.vue
    ├── main.js
    ├── App.vue
    └── router
    │   └── index.js
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── index.html
├── README.md
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/static/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrZHLF/vue-admin-system/HEAD/static/1.png


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrZHLF/vue-admin-system/HEAD/src/assets/img.jpg


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrZHLF/vue-admin-system/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/common/img/img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrZHLF/vue-admin-system/HEAD/src/components/common/img/img.jpg


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |   </div>
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   name: 'HelloWorld',
 9 |   data () {
10 |     return {
11 |     }
12 |   }
13 | }
14 | </script>
15 | 
16 | <!-- Add "scoped" attribute to limit CSS to this component only -->
17 | <style scoped>
18 | 
19 | </style>
20 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
 6 |     <link rel="icon" type="image/x-icon" class="js-site-favicon" href="https://assets-cdn.github.com/favicon.ico">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <title>后台管理项目</title>
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <!-- built files will be auto injected -->
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import ElementUI from 'element-ui'
 6 | import 'element-ui/lib/theme-chalk/index.css'
 7 | import router from './router'
 8 | import VueResource from 'vue-resource'
 9 | 
10 | Vue.config.productionTip = false
11 | Vue.use(ElementUI);
12 | Vue.use(VueResource);
13 | /* eslint-disable no-new */
14 | // 使用钩子函数对路由权限跳转 
15 | new Vue({
16 |   el: '#app',
17 |   router,
18 |   components: { App },
19 |   template: '<App/>'
20 | })
21 | 


--------------------------------------------------------------------------------
/src/components/page/datalist/FoodList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="deit">
 3 |     <div class="crumbs">
 4 |       <el-breadcrumb separator="/">
 5 |             <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>
 6 |             <el-breadcrumb-item>食品列表</el-breadcrumb-item>
 7 |         </el-breadcrumb>
 8 |         <div class="cantainer">
 9 |         </div>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'foodlist',
17 |   data () {
18 |       return {
19 |       }
20 |   }
21 | }
22 | </script>
23 | 
24 | <!-- Add "scoped" attribute to limit CSS to this component only -->
25 | <style scoped>
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/components/page/datalist/OrderList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="deit">
 3 |     <div class="crumbs">
 4 |       <el-breadcrumb separator="/">
 5 |             <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>
 6 |             <el-breadcrumb-item>订单列表</el-breadcrumb-item>
 7 |         </el-breadcrumb>
 8 |         <div class="cantainer">
 9 |         </div>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'orderlist',
17 |   data () {
18 |       return {
19 |       }
20 |   }
21 | }
22 | </script>
23 | 
24 | <!-- Add "scoped" attribute to limit CSS to this component only -->
25 | <style scoped>
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'App'
10 | }
11 | </script>
12 | 
13 | <style>
14 | #app {
15 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   width: 100%;
19 |   height: 100%;
20 |   /* overflow:hidden; */
21 | }
22 | *{
23 |   margin: 0;
24 |   padding: 0;
25 | }
26 | body{
27 |   overflow: hidden;
28 | }
29 | .ql-container {
30 |     min-height: 400px;
31 | }
32 | .cantainer{
33 |   padding: 30px;
34 |   background: #ffffff;
35 |   border-radius: 5px;
36 |   border: 1px #ddd solid;
37 |   margin-top: 20px;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/page/Tabs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="tabs">
 3 |     <div class="crumbs">
 4 |       <el-breadcrumb>
 5 |           <el-breadcrumb-item>
 6 |             <i class="el-icon-message">基础表格</i>
 7 |           </el-breadcrumb-item>
 8 |         </el-breadcrumb>
 9 |         <div class="cantainer">
10 |           <el-tabs v-model="activeName" @tab-click="handleClick">
11 |             <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
12 |             <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
13 |             <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
14 |             <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
15 |           </el-tabs>
16 |         </div>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   name: 'HelloWorld',
24 |   data () {
25 |     return {
26 |       activeName: 'second'
27 |     }
28 |   },
29 |   methods: {
30 |     handleClick(tab, event) {
31 |       console.log(tab, event);
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | <!-- Add "scoped" attribute to limit CSS to this component only -->
38 | <style scoped>
39 | 
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/components/page/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="error-page">
 3 |     <div class="error-code">4<span>0</span>4</div>
 4 |     <div class="error-desc">你访问的页面不在</div>
 5 |     <div class="error-handle">
 6 |       <router-link to="/">
 7 |         <el-button type="primary" size="large">返回首页</el-button>
 8 |       </router-link>
 9 |       <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一级</el-button>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'HelloWorld',
17 |   data () {
18 |     return {
19 |     }
20 |   },
21 |   methods:{
22 |     goBack() {
23 |       this.$router.go(-1)
24 |     }
25 |   }
26 | }
27 | </script>
28 | 
29 | <!-- Add "scoped" attribute to limit CSS to this component only -->
30 | <style scoped>
31 | .error-page{
32 |   display: flex;
33 |   justify-content: center;
34 |   align-items: center;
35 |   flex-direction: column;
36 |   width: 100%;
37 |   height: 100%;
38 |   background: #f3f3f3;
39 |   box-sizing: border-box;
40 | }
41 | .error-code{
42 |   line-height: 1;
43 |   font-size: 250px;
44 |   font-weight: bold;
45 |   color: #2d8cf0;
46 | }
47 | .error-code span {
48 |   color: #00a854;
49 | }
50 | .error-desc {
51 |   font-size: 30px;
52 |   color: #777;
53 | }
54 | .error-handle{
55 |   margin-top: 30px;
56 |   padding-bottom: 200px;
57 | }
58 | .error-btn{
59 |   margin-left: 100px;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/components/common/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="wrapper">
 3 |         <app-header></app-header>
 4 |         <sider-list></sider-list>
 5 |         <!-- 内容显示区域 -->
 6 |         <div class="content-box" :class="{'content-collapse':collapse}">
 7 |             <div class="content">
 8 |                 <transition name="move" mode="out-in">
 9 |                     <router-view></router-view>
10 |                 </transition>
11 |             </div>
12 |         </div>
13 |     </div>
14 | </template>
15 | 
16 | <script>
17 | import Header from './Header'
18 | import Sidebar from './Sidebar'
19 | export default {
20 | 
21 |   name: 'HelloWorld',
22 |   data () {
23 |     return {
24 |       collapse:false
25 |     }
26 |   },
27 |   created() {
28 |       
29 |   },
30 |   components: {
31 |       "app-header":Header,
32 |       "sider-list":Sidebar
33 |   }
34 | }
35 | </script>
36 | 
37 | <!-- Add "scoped" attribute to limit CSS to this component only -->
38 | <style>
39 | .wrapper{
40 |     height: 100%;
41 |     width: 100%;
42 |     overflow: hidden;
43 | }
44 | .content-collapse {
45 |     left: 56px;
46 | }
47 | .content-box{
48 |     position: absolute;
49 |     left: 250px;
50 |     right: 0;
51 |     top:70px;
52 |     bottom: 0;
53 |     /* overflow: hidden; */
54 |     overflow-y: scroll;
55 |     transition: left .3s ease-in-out;
56 |     background: #f0f0f0;
57 | }
58 | .content {
59 |     width: auto;
60 |     padding: 40px;
61 | }
62 | </style>


--------------------------------------------------------------------------------
/static/vuetable.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "list": [
 3 |         {
 4 | 			"id": "1",
 5 |             "date": "1997-11-11",
 6 |             "name": "林丽",
 7 |             "address": "吉林省 辽源市 龙山区"
 8 |         },
 9 |         {
10 | 			"id": "2",
11 |             "date": "1987-09-24",
12 |             "name": "文敏",
13 |             "address": "江西省 萍乡市 芦溪县"
14 |         },
15 |         {
16 | 			"id": "3",
17 |             "date": "1996-08-08",
18 |             "name": "杨秀兰",
19 |             "address": "黑龙江省 黑河市 五大连池市"
20 |         },
21 |         {
22 | 			"id": "4",
23 |             "date": "1978-06-18",
24 |             "name": "魏强",
25 |             "address": "广东省 韶关市 始兴县"
26 |         },
27 |         {
28 | 			"id": "5",
29 |             "date": "1977-07-09",
30 |             "name": "石秀兰",
31 |             "address": "江苏省 宿迁市 宿豫区"
32 |         },
33 |         {
34 | 			"id": "6",
35 |             "date": "1994-09-20",
36 |             "name": "朱洋",
37 |             "address": "海外 海外 -"
38 |         },
39 |         {
40 | 			"id": "7",
41 |             "date": "1980-01-22",
42 |             "name": "傅敏",
43 |             "address": "海外 海外 -"
44 |         },
45 |         {
46 | 			"id": "8",
47 |             "date": "1985-10-10",
48 |             "name": "毛明",
49 |             "address": "内蒙古自治区 包头市 九原区"
50 |         },
51 |         {
52 | 			"id": "9",
53 |             "date": "1975-09-08",
54 |             "name": "何静",
55 |             "address": "西藏自治区 阿里地区 普兰县"
56 |         },
57 |         {
58 | 			"id": "10",
59 |             "date": "1970-06-07",
60 |             "name": "郭秀英",
61 |             "address": "四川省 巴中市 恩阳区"
62 |         }
63 |     ]
64 | }


--------------------------------------------------------------------------------
/src/components/page/formcorrelation/VueEditor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="deit">
 3 |     <div class="crumbs">
 4 |       <el-breadcrumb separator="/">
 5 |             <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
 6 |             <el-breadcrumb-item>编辑器</el-breadcrumb-item>
 7 |         </el-breadcrumb>
 8 |         <div class="cantainer">
 9 |           <quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
10 |           <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
11 |         </div>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import 'quill/dist/quill.core.css'
18 | import 'quill/dist/quill.snow.css'
19 | import 'quill/dist/quill.bubble.css'
20 | 
21 | import { quillEditor } from 'vue-quill-editor'
22 | export default {
23 |   name: 'HelloWorld',
24 |   data () {
25 |     return {
26 |       content: '',
27 |       editorOption: {
28 |           placeholder: '请编辑相关内容'
29 |       }
30 |     }
31 |   },
32 |   components: {
33 |     quillEditor
34 |   },
35 |   methods: {
36 |       onEditorChange({ editor, html, text }) {
37 |           this.content = text;
38 |       },
39 |       submit(){
40 |           console.log(this.content);
41 |           this.$message.success('提交成功！');
42 |           this.content=""
43 |       }
44 |   }
45 | }
46 | </script>
47 | 
48 | <!-- Add "scoped" attribute to limit CSS to this component only -->
49 | <style scoped>
50 | .cantainer{
51 |   padding: 30px;
52 |   background: #ffffff;
53 |   border-radius: 5px;
54 |   border: 1px #ddd solid;
55 |   margin-top: 20px;
56 | }
57 | .ql-container {
58 |   /* min-height: 400px; */
59 | }
60 | .editor-btn{
61 |     margin-top: 20px;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/components/page/formcorrelation/Upload.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="deit">
 3 |     <div class="crumbs">
 4 |       <el-breadcrumb separator="/">
 5 |             <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
 6 |             <el-breadcrumb-item>文件上传</el-breadcrumb-item>
 7 |         </el-breadcrumb>
 8 |         <div class="cantainer">
 9 |           <div class="content-title">图片列表缩略图</div>
10 |           <el-upload
11 |             class="upload-demo"
12 |             action="https://jsonplaceholder.typicode.com/posts/"
13 |             :on-preview="handlePreview"
14 |             :on-remove="handleRemove"
15 |             :file-list="fileList2"
16 |             list-type="picture">
17 |             <el-button class="btn" size="small" type="primary">点击上传</el-button>
18 |             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
19 |           </el-upload>
20 |           <!-- 支持裁剪 -->
21 |           <div class="content-title">支持裁剪</div>
22 |         </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   name: 'HelloWorld',
30 |   data () {
31 |     return {
32 |       fileList2:[
33 |         {
34 |           name:'food.jpeg',
35 |           url:"http://img1.imgtn.bdimg.com/it/u=1532260787,252993782&fm=27&gp=0.jpg"
36 |         }
37 |       ]
38 |     }
39 |   },
40 |   methods: {
41 |     handleRemove(file, fileList) {
42 |       console.log(file, fileList);
43 |       this.$message.success('删除成功！');
44 |     },
45 |     handlePreview(file) {
46 |       this.$message.success('上传成功！');
47 |       console.log(file);
48 |     }
49 |   }
50 | }
51 | </script>
52 | 
53 | <!-- Add "scoped" attribute to limit CSS to this component only -->
54 | <style scoped>
55 | .btn {
56 |   margin: 20px 0;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 基于vue实现一个简单后台管理界面
 2 | 
 3 | 
 4 | #### vue.js与Element-ui结合搭建一个后台管理界面,利用vue-resource请求数据，数据的来源是野狗云存储，
 5 | 
 6 | 
 7 | ## 项目结构
 8 | ```
 9 |   |——— build  #webpack编译相关文件目录，一般不需要动
10 | 	|——— config  #配置环境变量
11 | 	|    |——— dev.env.js #开发环境变量
12 | 	|		 |——— index.js   #主配置文件
13 | 	|    |——— prod.js    #生产环境变量
14 | 	|——— node_modules #一些常用安装的依赖
15 | 	|——— src #前端项目源码目录
16 | 	|    |——— assets  #资源目录
17 | 	|    |——— components   #组件以及页面文件目录
18 | 	|         |---common   #公共组件
19 | 	|            	|--- Header.vue  #公共头部内容
20 | 	|					    |--- Home.vue    #公共路由出口
21 | 	|					    |--- Sidebar.vue #公共左边栏
22 | 	|		 			|——— page        #相关路由页面
23 | 	|						  |--- formcorrelation 表单相关文件目录
24 | 	|                  |--- BaseForm.vue   #基本表单
25 | 	|                  |--- Markdown.vue   #Markdown
26 | 	|                  |--- VueEditor.vue  #富文本编辑器
27 | 	|                  |--- Upload.vue     #文件上传
28 | 	|             |--- 404.vue             #404页面
29 | 	|             |--- BaseCharts.vue      #图表 
30 | 	|             |--- BaseTable.vue       #基础表格
31 | 	|             |--- Dashboard.vue       #首页      
32 | 	|             |--- Login.vue           #登录页面
33 | 	|             |--- Tabs.vue            #选项卡
34 | 	|    |——— router  #路由目录
35 | 	|    |——— App.vue #项目入口文件
36 | 	|    |——— main.js #项目核心文件
37 | 	|——— static       #开发模式下静态资源目录
38 | 	|——— index.html   #首页入口文件，你可以添加一些 meta 信息或同统计代码啥的
39 | 	|——— package.json #项目配置文件
40 | 	|___ README.md    #项目的说明文档，markdown 格式
41 | ```
42 | 
43 | ## 项目编译和运行
44 |     1. 可以直接在git上下载项目源码。把github下载到本地，
45 | 	git clone 
46 | 	2. 进入到tourism目录，进行初始化，安装依赖
47 | 		npm run dev
48 | 	3. 依赖安装成功后执行启动命令
49 | 	   npm run dev
50 | 	   如果显示一下内容说明安装成功
51 | 	   I  Your application is running here: http://localhost:8080
52 | 		 
53 | ## 相关功能
54 | 	1. 登录/注销
55 | 	2. markdown编辑器
56 | 	3. 富文本编辑器
57 | 	4. 图表 bar_chart
58 | 	5. 表单
59 | 	6. Tab选项卡
60 | 	7. 表格
61 | 	8. 实现分页
62 | 	
63 | ## 成果展示
64 | ![avatar](./static/1.png)
65 | 
66 | #### 后续功能正在完善中......


--------------------------------------------------------------------------------
/src/components/page/formcorrelation/Markdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="deit">
 3 |     <div class="crumbs">
 4 |       <el-breadcrumb separator="/">
 5 |             <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
 6 |             <el-breadcrumb-item>Markdown</el-breadcrumb-item>
 7 |         </el-breadcrumb>
 8 |         <div class="cantainer">
 9 |           <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
10 |           <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
11 |         </div>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import {mavonEditor} from 'mavon-editor'
18 | import 'mavon-editor/dist/css/index.css'
19 | export default {
20 |   name: 'HelloWorld',
21 |   data () {
22 |     return {
23 |       content:'',
24 |       html:'',
25 |       configs: {}
26 |     }
27 |   },
28 |   components: {
29 |       mavonEditor
30 |   },
31 |   methods: {
32 |       // 将图片上传到服务器，返回地址替换到md中
33 |       $imgAdd(pos, $file){
34 |           var formdata = new FormData();
35 |           
36 |           formdata.append('file', $file);
37 |           // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
38 |           this.$axios({
39 |               url: '/common/upload',
40 |               method: 'post',
41 |               data: formdata,
42 |               headers: { 'Content-Type': 'multipart/form-data' },
43 |           }).then((url) => {
44 |               this.$refs.md.$img2Url(pos, url);
45 |           })
46 |       },
47 |       change(value, render){
48 |           // render 为 markdown 解析后的结果
49 |           this.html = render;
50 |       },
51 |       submit(){
52 |           console.log(this.content);
53 |           console.log(this.html);
54 |           this.content = ""
55 |           this.$message.success('提交成功！');
56 |       }
57 |   }
58 | }
59 | </script>
60 | 
61 | <!-- Add "scoped" attribute to limit CSS to this component only -->
62 | <style scoped>
63 | 
64 | </style>
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-admin-system",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "周利峰 <480970024@qq.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "echarts": "^4.1.0",
14 |     "element-ui": "^2.4.2",
15 |     "vue": "^2.5.2",
16 |     "vue-router": "^3.0.1",
17 |     "vue-schart": "^1.0.0"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^7.1.2",
21 |     "babel-core": "^6.22.1",
22 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
23 |     "babel-loader": "^7.1.1",
24 |     "babel-plugin-syntax-jsx": "^6.18.0",
25 |     "babel-plugin-transform-runtime": "^6.22.0",
26 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
27 |     "babel-preset-env": "^1.3.2",
28 |     "babel-preset-stage-2": "^6.22.0",
29 |     "chalk": "^2.0.1",
30 |     "copy-webpack-plugin": "^4.0.1",
31 |     "css-loader": "^0.28.0",
32 |     "extract-text-webpack-plugin": "^3.0.0",
33 |     "file-loader": "^1.1.4",
34 |     "friendly-errors-webpack-plugin": "^1.6.1",
35 |     "html-webpack-plugin": "^2.30.1",
36 |     "mavon-editor": "^2.6.9",
37 |     "node-notifier": "^5.1.2",
38 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
39 |     "ora": "^1.2.0",
40 |     "portfinder": "^1.0.13",
41 |     "postcss-import": "^11.0.0",
42 |     "postcss-loader": "^2.0.8",
43 |     "postcss-url": "^7.2.1",
44 |     "rimraf": "^2.6.0",
45 |     "semver": "^5.3.0",
46 |     "shelljs": "^0.7.6",
47 |     "uglifyjs-webpack-plugin": "^1.1.1",
48 |     "url-loader": "^0.5.8",
49 |     "vue-loader": "^13.3.0",
50 |     "vue-quill-editor": "^3.0.6",
51 |     "vue-resource": "^1.5.1",
52 |     "vue-style-loader": "^3.0.1",
53 |     "vue-template-compiler": "^2.5.2",
54 |     "webpack": "^3.6.0",
55 |     "webpack-bundle-analyzer": "^2.9.0",
56 |     "webpack-dev-server": "^2.9.1",
57 |     "webpack-merge": "^4.1.0"
58 |   },
59 |   "engines": {
60 |     "node": ">= 6.0.0",
61 |     "npm": ">= 3.0.0"
62 |   },
63 |   "browserslist": [
64 |     "> 1%",
65 |     "last 2 versions",
66 |     "not ie <= 8"
67 |   ]
68 | }
69 | 


--------------------------------------------------------------------------------
/src/components/page/datalist/UserList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="deit">
 3 |     <div class="crumbs">
 4 |       <el-breadcrumb separator="/">
 5 |             <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>
 6 |             <el-breadcrumb-item>用户列表</el-breadcrumb-item>
 7 |         </el-breadcrumb>
 8 |         <div class="cantainer">
 9 | 					<el-table style="width: 100%;"
10 | 					:data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
11 | 					>
12 | 						<el-table-column type="index" width="50">	
13 | 						</el-table-column>
14 | 						<el-table-column label="日期" prop="date" width="180">	
15 | 						</el-table-column>
16 | 						<el-table-column label="用户姓名" prop="name" width="180">	
17 | 						</el-table-column>
18 | 						<el-table-column label="邮箱" prop="email" width="180">	
19 | 						</el-table-column>
20 | 						<el-table-column label="地址" prop="address" width="200">	
21 | 						</el-table-column>	
22 | 					</el-table>
23 | 						<el-pagination
24 | 							@size-change="handleSizeChange"
25 | 							@current-change="handleCurrentChange"
26 | 							:current-page="currentPage"
27 | 							:page-sizes="[5, 10, 20, 40]"
28 | 							:page-size="pagesize"
29 | 							layout="total, sizes, prev, pager, next, jumper"
30 | 							:total="userList.length">
31 | 					</el-pagination>
32 |         </div>
33 |     </div>
34 |   </div>
35 | </template>
36 | 
37 | <script>
38 | export default {
39 |   name: 'userlist',
40 |   data () {
41 |       return {
42 | 				currentPage:1, //初始页
43 | 				pagesize:10,    //	每页的数据
44 | 				userList: []
45 |       }
46 |   },
47 | 	created() {
48 | 		this.handleUserList()
49 | 	},
50 | 	methods: {
51 | 		// 初始页currentPage、初始每页数据数pagesize和数据data
52 | 		handleSizeChange: function (size) {
53 | 				this.pagesize = size;
54 | 				console.log(this.pagesize)
55 | 		},
56 | 		handleCurrentChange: function(currentPage){
57 | 				this.currentPage = currentPage;
58 | 				console.log(this.currentPage)
59 | 		},
60 | 		handleUserList() {
61 | 			this.$http.get('http://localhost:3000/userList').then(res => {
62 | 				this.userList = res.body
63 | 			})
64 | 		}
65 | 	}
66 | }
67 | </script>
68 | 
69 | <!-- Add "scoped" attribute to limit CSS to this component only -->
70 | <style scoped>
71 | </style>
72 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8082, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: true,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: './',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/components/page/BaseCharts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="deit">
 3 |     <div class="crumbs">
 4 |       <el-breadcrumb separator="/">
 5 |             <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
 6 |             <el-breadcrumb-item>基础图表</el-breadcrumb-item>
 7 |         </el-breadcrumb>
 8 |         <div class="cantainer">
 9 |           <div class="schart-box">
10 |             <div class="content-title">柱状图</div>
11 |             <schart class="schart" canvasId="bar" :data="data1" type="bar" :options="options1"></schart>
12 |           </div>
13 |           <div class="schart-box">
14 |             <div class="content-title">折线图</div>
15 |             <schart class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart>
16 |           </div>
17 |         </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import Schart from 'vue-schart'
24 | export default {
25 |   name: '',
26 |   data () {
27 |       return {
28 |         data1:[
29 |             {name:'2012',value:1141},
30 |             {name:'2013',value:1499},
31 |             {name:'2014',value:2260},
32 |             {name:'2015',value:1170},
33 |             {name:'2016',value:970},
34 |             {name:'2017',value:1450}
35 |         ],
36 |         data2 : [
37 |             {name:'短袖',value:1200},
38 |             {name:'休闲裤',value:1222},
39 |             {name:'连衣裙',value:1283},
40 |             {name:'外套',value:1314},
41 |             {name:'羽绒服',value:2314}
42 |         ],
43 |         options1: {
44 |             title: '某商店近年营业总额',
45 |             autoWidth: true,   // 设置宽高自适应
46 |             showValue: false,
47 |             bgColor: '#F9EFCC',
48 |             fillColor: '#00887C',
49 |             contentColor: 'rgba(46,199,201,0.3)',
50 |             yEqual: 7
51 |         },
52 |         options2: {
53 |             title: '某商店近年营业总额',
54 |             bgColor: '#D5E4EB',
55 |             titleColor: '#00887C',
56 |             fillColor: 'red',
57 |             contentColor: 'rgba(46,199,201,0.3)'
58 |         },
59 |       }
60 |   },
61 |   components:{
62 |     Schart
63 |   }
64 | }
65 | </script>
66 | 
67 | <!-- Add "scoped" attribute to limit CSS to this component only -->
68 | <style scoped>
69 | .schart-box{
70 |   display: inline-block;
71 |   margin: 20px;
72 | }
73 | .content-title {
74 |   clear: both;
75 |   font-weight: 400;
76 |   line-break: 50px;
77 |   margin: 10px 0;
78 |   font-size: 22px;
79 |   color: #1f2f3d;
80 | }
81 | .schart {
82 |   width: 500px;
83 |   height: 500px;
84 | }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/components/common/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="sidebar">
 3 |         <el-menu
 4 |             router
 5 |             class="sidebar-el-menu"
 6 |             background-color="#545c64"
 7 |             text-color="#fff"
 8 |             :collapse="collapse"
 9 |             active-text-color="#ffd04b">
10 |             <el-menu-item index="dashboard">
11 |                 <i class="el-icon-setting"></i>
12 |                 <span slot="title">首页</span>
13 |             </el-menu-item>
14 |             <el-menu-item index="table">
15 |                 <i class="el-icon-tickets"></i>
16 |                 <span slot="title">基础表格</span>
17 |             </el-menu-item>
18 |             <el-menu-item index="tabs">
19 |                 <i class="el-icon-message"></i>
20 |                 <span slot="title">tab选项卡</span>
21 |             </el-menu-item>
22 |             <el-submenu index="4">
23 |                 <template slot="title">
24 |                     <i class="el-icon-date"></i>
25 |                     <span slot="title">表单相关</span>
26 |                 </template>
27 |                     <el-menu-item-group>
28 |                     <el-menu-item index="form">基本表单</el-menu-item>
29 |                     <el-menu-item index="editor">富文本编辑器</el-menu-item>
30 |                     <el-menu-item index="markdown">markdown编辑器</el-menu-item>
31 |                     <el-menu-item index="upload">文件上传</el-menu-item>
32 |                 </el-menu-item-group>
33 |             </el-submenu>
34 | 						<el-submenu index="5">
35 | 								<template slot="title">
36 | 										<i class="el-icon-document"></i>
37 | 										<span slot="title">数据管理</span>
38 | 								</template>
39 | 										<el-menu-item-group>
40 | 										<el-menu-item index="userlist">用户列表</el-menu-item>
41 | 										<el-menu-item index="shoplist">商家列表</el-menu-item>
42 | 										<el-menu-item index="foodlist">食品列表</el-menu-item>
43 | 										<el-menu-item index="orderlist">订单列表</el-menu-item>
44 | 								</el-menu-item-group>
45 | 						</el-submenu>
46 |             <el-menu-item index="charts">
47 |                 <i class="el-icon-star-on"></i>
48 |                 <span slot="title">schart图表</span>
49 |             </el-menu-item>
50 |             <el-menu-item index="404">
51 |                     <i class="el-icon-error"></i>
52 |                     <span slot="title">404页面</span>
53 |             </el-menu-item>
54 |         </el-menu>
55 |     </div>
56 | </template>
57 | 
58 | <script>
59 | export default {
60 |   name: 'HelloWorld',
61 |   data () {
62 |     return {
63 |       collapse:false
64 |     }
65 |   }
66 | }
67 | </script>
68 | 
69 | <!-- Add "scoped" attribute to limit CSS to this component only -->
70 | <style scoped>
71 | .sidebar{
72 |     display: block;
73 |     position: absolute;
74 |     top: 70px;
75 |     left: 0;
76 |     bottom: 0;
77 |     height: 100%;
78 | 		background-color: rgb(50, 65, 87);
79 | }
80 | .sidebar-el-menu{
81 |     width: 250px;
82 | }
83 | .sidebar>ul{
84 |     height: 100%;
85 | }
86 | </style>


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | export default new Router({
 7 |   routes: [
 8 |     {
 9 |       path:'/',
10 |       redirect: '/dashboard'
11 |     },
12 |     {
13 |       path: '/login',
14 |       component: resolve => require(['../components/page/Login.vue'], resolve),
15 |     },
16 |     {
17 |       path: '/',
18 |       component: resolve => require(['../components/common/Home.vue'], resolve),
19 |       meta: { title: '自述文件' },
20 |       children:[
21 |         {
22 |           path: '/dashboard',
23 |           component: resolve => require(['../components/page/Dashboard.vue'], resolve),
24 |           meta: { title: '首页' },
25 |         },
26 |         {
27 |           path: '/table',
28 |           component: resolve => require(['../components/page/BaseTable.vue'], resolve),
29 |           meta: { title: '基础表格' },
30 |         },
31 |         {
32 |           path: '/tabs',
33 |           component: resolve => require(['../components/page/Tabs.vue'], resolve),
34 |           meta: { title: 'tab选项卡' },
35 |         },
36 |         {
37 |           path: '/form',
38 |           component: resolve => require(['../components/page/formcorrelation/BaseForm.vue'], resolve),
39 |           meta: { title: '基本表单' },
40 |         },
41 |         {
42 |           path: '/editor',
43 |           component: resolve => require(['../components/page/formcorrelation/VueEditor.vue'], resolve),
44 |           meta: { title: '富文本编辑器' },
45 |         },
46 |         {
47 |           path: '/markdown',
48 |           component: resolve => require(['../components/page/formcorrelation/Markdown.vue'], resolve),
49 |           meta: { title: 'Markdown编辑器' },
50 |         },
51 |         {
52 |           path: '/upload',
53 |           component: resolve => require(['../components/page/formcorrelation/Upload.vue'], resolve),
54 |           meta: { title: '文件上传' },
55 |         },
56 | 				{
57 | 					path: '/userlist',
58 | 					component: resolve => require(['../components/page/datalist/UserList.vue'], resolve),
59 | 					meta: { title: '用户列表' },
60 | 				},
61 | 				{
62 | 					path: '/shoplist',
63 | 					component: resolve => require(['../components/page/datalist/ShopList.vue'], resolve),
64 | 					meta: { title: '商家列表' },
65 | 				},
66 | 				{
67 | 					path: '/foodlist',
68 | 					component: resolve => require(['../components/page/datalist/FoodList.vue'], resolve),
69 | 					meta: { title: '食品列表' },
70 | 				},
71 | 				{
72 | 					path: '/orderlist',
73 | 					component: resolve => require(['../components/page/datalist/OrderList.vue'], resolve),
74 | 					meta: { title: '订单列表' },
75 | 				},
76 |         {
77 |           path: '/charts',
78 |           component: resolve => require(['../components/page/BaseCharts.vue'], resolve),
79 |           meta: { title: 'chasts图表' },
80 |         }
81 |       ]
82 |     },
83 |     {
84 |       path: '/404',
85 |       component: resolve => require(['../components/page/404.vue'], resolve)
86 |     }
87 |   ],
88 |   model:history
89 | })
90 | 


--------------------------------------------------------------------------------
/src/components/page/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login-wrap">
  3 |       <div class="ms-title">后台管理项目</div>
  4 |       <div class="ms-login">
  5 |           <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
  6 |             <el-form-item prop="username">
  7 |               <el-input placeholder="username" v-model="ruleForm.username"></el-input>
  8 |             </el-form-item>
  9 |             <el-form-item prop="password">
 10 |               <el-input placeholder="password" v-model="ruleForm.password"></el-input>
 11 |             </el-form-item>
 12 |             <div class="login-btn">
 13 |               <el-form-item>
 14 |                 <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
 15 |                 <el-button @click="resetForm('ruleForm')">重置</el-button>
 16 |               </el-form-item>
 17 |             </div>
 18 |           </el-form>
 19 |       </div>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | export default {
 25 |   name: 'HelloWorld',
 26 |   data () {
 27 |     return {
 28 |       ruleForm:{
 29 |         username:"admin",
 30 |         password:"admin"
 31 |       },
 32 |       rules:{
 33 |         // 规则验证
 34 |         username:[
 35 |           {required:true,message:"请输入用户名",trigger:'blur'}
 36 |         ],
 37 |         password:[
 38 |           {required:true,message:"请输入密码",trigger:'blur'}
 39 |         ]
 40 |       }
 41 |     }
 42 |   },
 43 |   methods:{
 44 |     // 登录
 45 |     submitForm(formName) {
 46 |       this.$refs[formName].validate((valid) => {
 47 |         if (valid) {
 48 |           localStorage.setItem('ms_username',this.ruleForm.username,this.ruleForm.password)
 49 |           console.log(this.ruleForm.username,"+++",this.ruleForm.password)
 50 | 
 51 |           this.$router.push('/dashboard')
 52 |           this.$notify({
 53 |             title:"成功",
 54 |             message:"登录成功",
 55 |             type:'success',
 56 |             duration:1000
 57 |           })
 58 |         } else {
 59 |           this.$notify.error({
 60 |             title:"失败",
 61 |             message:"请出入对应的信息",
 62 |             duration:1000
 63 |           })
 64 |           return false
 65 |         }
 66 |       })
 67 |     },
 68 |   // 重置
 69 |     resetForm(formName) {
 70 |       this.$refs[formName].resetFields();
 71 |     }
 72 |   }
 73 | }
 74 | </script>
 75 | 
 76 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 77 | <style scoped>
 78 | .login-wrap {
 79 |     position: relative;
 80 |     width: 100%;
 81 |     height: 1000px;
 82 | }
 83 | .login-wrap  {
 84 |   background: #324157;
 85 | }
 86 | .ms-title{
 87 |   position: absolute;
 88 |   top: 40%;
 89 |   width: 100%;
 90 |   margin-top: -230px;
 91 |   text-align: center;
 92 |   font-size: 30px;
 93 |   color: white;
 94 | }
 95 | .ms-login{
 96 |   position: absolute;
 97 |   left: 50%;
 98 |   top: 40%;
 99 |   width: 300px;
100 |   height: 160px;
101 |   margin: -150px 0 0 -190px;
102 |   padding: 40px;
103 |   border-radius: 5px;
104 |   background: #ffffff;
105 | }
106 | .login-btn{
107 |   text-align: center;
108 | }
109 | .login-btn button {
110 |   display: inline-block;
111 |   width:100px;
112 |   height: 36px;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/components/page/datalist/ShopList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="deit">
  3 |     <div class="crumbs">
  4 |       <el-breadcrumb separator="/">
  5 |             <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>
  6 |             <el-breadcrumb-item>商家列表</el-breadcrumb-item>
  7 |         </el-breadcrumb>
  8 |         <div class="cantainer">
  9 | 					<el-table
 10 | 						:data="shopList"
 11 | 						style="width: 100%">
 12 | 						<el-table-column type="expand">
 13 | 							<template slot-scope="props">
 14 | 								<el-form label-position="left" inline class="demo-table-expand">
 15 | 									<el-form-item label="商品名称">
 16 | 										<span>{{ props.row.name }}</span>
 17 | 									</el-form-item>
 18 | 									<el-form-item label="店铺地址">
 19 | 										<span>{{ props.row.address }}</span>
 20 | 									</el-form-item>
 21 | 									<el-form-item label="商品Id">
 22 | 										<span>{{ props.row.id }}</span>
 23 | 									</el-form-item>
 24 | 									<el-form-item label="联系电话">
 25 | 										<span>{{ props.row.phone }}</span>
 26 | 									</el-form-item>
 27 | 									<el-form-item label="评分">
 28 | 										<span>{{ props.row.score}}</span>
 29 | 									</el-form-item>
 30 | 									<el-form-item label="店铺销售量">
 31 | 										<span>{{ props.row.Sale }}</span>
 32 | 									</el-form-item>
 33 | 									<el-form-item label="商品分类">
 34 | 										<span>{{ props.row.classification}}</span>
 35 | 									</el-form-item>
 36 | 									<el-form-item label="商品展示">
 37 | 										<img class="imgs" :src="props.row.imngurl" alt="">
 38 | 									</el-form-item>
 39 | 								</el-form>
 40 | 							</template>
 41 | 						</el-table-column>
 42 | 						<el-table-column
 43 | 							label="店铺名称"
 44 | 							prop="name">
 45 | 						</el-table-column>
 46 | 						<el-table-column
 47 | 							label="商品地址"
 48 | 							prop="address">
 49 | 						</el-table-column>
 50 | 						<el-table-column
 51 | 							label="描述"
 52 | 							prop="desc">
 53 | 						</el-table-column>
 54 | 						<el-table-column label="操作">
 55 | 							<template slot-scope="scope">
 56 | 								<el-button
 57 | 									size="mini"
 58 | 									@click="handleEdit(scope.$index, scope.row)"
 59 | 									>编辑</el-button>
 60 | 								<el-button
 61 | 									size="mini"
 62 | 									type="danger"
 63 | 									@click="deleteList(scope.$index,scope.row)">删除</el-button>
 64 | 							</template>
 65 | 						</el-table-column>
 66 | 					</el-table>
 67 |         </div>
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <script>
 73 | export default {
 74 |   name: 'shoplist',
 75 |   data () {
 76 | 		return {
 77 | 			shopList:[]
 78 | 		}
 79 |   },
 80 | 	methods:{
 81 | 		HandleShopList () {
 82 | 			this.$http.get('http://localhost:3000/shoplist').then(res => {
 83 | 				this.shopList = res.body
 84 | 			})
 85 | 		},
 86 | 		handleEdit(index,row) {
 87 | 			console.log(index,row)
 88 | 		},
 89 | 		deleteList(index,row) {
 90 | 			console.log(row.id)
 91 | 		},
 92 | 	},
 93 | 	created() {
 94 | 		this.HandleShopList()
 95 | 	}
 96 | }
 97 | </script>
 98 | 
 99 | <!-- Add "scoped" attribute to limit CSS to this component only -->
100 | <style scoped>
101 | .demo-table-expand {
102 |     font-size: 0;
103 |   }
104 |   .demo-table-expand label {
105 |     width: 90px;
106 |     color: #99a9bf;
107 |   }
108 |   .demo-table-expand .el-form-item {
109 |     margin-right: 0;
110 |     margin-bottom: 0;
111 |     width: 50%;
112 |   }
113 | 	.imgs {
114 | 		width: 150px;
115 | 		height: 150px;
116 | 	}
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/components/common/Header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="header">
  3 |         <!-- 折叠按钮 -->
  4 |         <div class="collapse-btn" @click="collapseChange">
  5 |             <i class="el-icon-menu"></i>
  6 |         </div>
  7 |         <div class="logo">后台界面管理</div>
  8 |         <!-- 右边内容 -->
  9 |         <div class="header-right">
 10 |             <div class="header-user-icon">
 11 |                 <!-- 全屏展示 -->
 12 |                 <div class="btn-fullscreen">
 13 |                     <i class="el-icon-rank"></i>
 14 |                 </div>
 15 |                 <!-- 头像 -->
 16 |                 <div class="user-avator">
 17 |                     <img src="./img/img.jpg" alt="">
 18 |                 </div>
 19 |                 <!-- 用户名下拉菜单 -->
 20 |                 <el-dropdown trigger="click" @command="handleCommand">
 21 |                     <span class="el-dropdown-link">
 22 |                         {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
 23 |                     </span>
 24 |                     <el-dropdown-menu slot="dropdown">
 25 |                         <el-dropdown-item>
 26 |                             <a href="http://www.cnblogs.com/zhoulifeng/" target="_blank">个人博客</a>
 27 |                             </el-dropdown-item>
 28 |                         <el-dropdown-item>
 29 |                             <a href="https://github.com/MrZHLF" target="_blank">github</a>
 30 |                         </el-dropdown-item>
 31 |                         <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
 32 |                     </el-dropdown-menu>
 33 |                 </el-dropdown>
 34 |             </div>
 35 |         </div>
 36 |     </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | export default {
 41 |   data () {
 42 |     return {
 43 |       collpase:false,
 44 |       name: "3221"
 45 |     }
 46 |   },
 47 |   computed:{
 48 |       username() {
 49 |         let username = localStorage.getItem('ms_username');
 50 |         return username ? username : this.name;
 51 |     }
 52 |   },
 53 |   methods:{
 54 |     //   侧边栏折叠
 55 |       collapseChange() {
 56 |           this.collpase = !this.collpase
 57 |       },
 58 |     //   下拉菜单
 59 |     handleCommand(command) {
 60 |         if(command == 'loginout') {
 61 |             this.$router.push('/login')
 62 |         }
 63 |     }
 64 |   }
 65 | }
 66 | </script>
 67 | 
 68 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 69 | <style scoped>
 70 | .header {
 71 |     position: relative;
 72 |     box-sizing: border-box;
 73 |     width: 100%;
 74 |     height: 70px;
 75 |     font-size: 22px;
 76 |     color: #fff;
 77 |     background-color: #242f42;
 78 |     z-index: 0;
 79 | }
 80 | .collapse-btn{
 81 |     float: left;
 82 |     padding: 0 21px;
 83 |     cursor: pointer;
 84 |     line-height: 70px;
 85 | }
 86 | .logo {
 87 |     float: left;
 88 |     width: 250px;
 89 |     line-height: 70px;
 90 | }
 91 | .header-right {
 92 |     float: right;
 93 |     padding-right: 50px;
 94 | }
 95 | .header-user-icon{
 96 |     display: flex;
 97 |     height: 70px;
 98 |     align-items: center;
 99 | }
100 | .btn-fullscreen{
101 |     transform: rotate(45deg);
102 |     margin-right: 5px;
103 |     font-size: 24px;
104 | }
105 | .user-avator{
106 |     margin-left: 10px;
107 | }
108 | .user-avator img{
109 |     display: block;
110 |     width: 40px;
111 |     height: 40px;
112 |     border-radius: 50%;
113 |     z-index: 999;
114 | 		padding-right: 10px;
115 | }
116 | .el-dropdown-link{
117 |     color: white;
118 |     cursor: pointer;
119 | }
120 | a{
121 |     text-decoration: none;
122 |     color: black;
123 | }
124 | </style>
125 | 


--------------------------------------------------------------------------------
/src/components/page/formcorrelation/BaseForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="deit">
  3 |     <div class="crumbs">
  4 |       <el-breadcrumb separator="/">
  5 |             <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
  6 |             <el-breadcrumb-item>基础表单</el-breadcrumb-item>
  7 |         </el-breadcrumb>
  8 |         <div class="cantainer">
  9 |           <div class="formbox">
 10 |             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
 11 |             <el-form-item label="活动名称" prop="name">
 12 |               <el-input v-model="ruleForm.name"></el-input>
 13 |             </el-form-item>
 14 |             <el-form-item label="活动区域" prop="region">
 15 |               <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
 16 |                 <el-option label="区域一" value="shanghai"></el-option>
 17 |                 <el-option label="区域二" value="beijing"></el-option>
 18 |               </el-select>
 19 |             </el-form-item>
 20 |             <el-form-item label="活动时间" required>
 21 |               <el-col :span="11">
 22 |                 <el-form-item prop="date1">
 23 |                   <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
 24 |                 </el-form-item>
 25 |               </el-col>
 26 |               <el-col class="line" :span="2">-</el-col>
 27 |               <el-col :span="11">
 28 |                 <el-form-item prop="date2">
 29 |                   <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
 30 |                 </el-form-item>
 31 |               </el-col>
 32 |             </el-form-item>
 33 |             <el-form-item label="即时配送" prop="delivery">
 34 |               <el-switch v-model="ruleForm.delivery"></el-switch>
 35 |             </el-form-item>
 36 |             <el-form-item label="活动性质" prop="type">
 37 |               <el-checkbox-group v-model="ruleForm.type">
 38 |                 <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
 39 |                 <el-checkbox label="地推活动" name="type"></el-checkbox>
 40 |                 <el-checkbox label="线下主题活动" name="type"></el-checkbox>
 41 |                 <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
 42 |               </el-checkbox-group>
 43 |             </el-form-item>
 44 |             <el-form-item label="特殊资源" prop="resource">
 45 |               <el-radio-group v-model="ruleForm.resource">
 46 |                 <el-radio label="线上品牌商赞助"></el-radio>
 47 |                 <el-radio label="线下场地免费"></el-radio>
 48 |               </el-radio-group>
 49 |             </el-form-item>
 50 |             <el-form-item label="活动形式" prop="desc">
 51 |               <el-input type="textarea" v-model="ruleForm.desc"></el-input>
 52 |             </el-form-item>
 53 |             <el-form-item>
 54 |               <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
 55 |               <el-button @click="resetForm('ruleForm')">重置</el-button>
 56 |             </el-form-item>
 57 |           </el-form>
 58 |           </div>
 59 |         </div>
 60 |     </div>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script>
 65 | export default {
 66 |   data() {
 67 |     return {
 68 |       ruleForm: {
 69 |         name: '',
 70 |         region: '',
 71 |         date1: '',
 72 |         date2: '',
 73 |         delivery: false,
 74 |         type: [],
 75 |         resource: '',
 76 |         desc: ''
 77 |       },
 78 |       rules: {
 79 |         name: [
 80 |           { required: true, message: '请输入活动名称', trigger: 'blur' },
 81 |           { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
 82 |         ],
 83 |         region: [
 84 |           { required: true, message: '请选择活动区域', trigger: 'change' }
 85 |         ],
 86 |         date1: [
 87 |           { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
 88 |         ],
 89 |         date2: [
 90 |           { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
 91 |         ],
 92 |         type: [
 93 |           { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
 94 |         ],
 95 |         resource: [
 96 |           { required: true, message: '请选择活动资源', trigger: 'change' }
 97 |         ],
 98 |         desc: [
 99 |           { required: true, message: '请填写活动形式', trigger: 'blur' }
100 |         ]
101 |       }
102 |     };
103 |   },
104 |   methods: {
105 |     submitForm(formName) {
106 |       this.$refs[formName].validate((valid) => {
107 |         if (valid) {
108 |           alert('submit!');
109 |         } else {
110 |           console.log('error submit!!');
111 |           return false;
112 |         }
113 |       });
114 |     },
115 |     resetForm(formName) {
116 |       this.$refs[formName].resetFields();
117 |     }
118 |   }
119 | }
120 | </script>
121 | 
122 | <!-- Add "scoped" attribute to limit CSS to this component only -->
123 | <style scoped>
124 | .formbox{
125 |   width: 600px;
126 | }
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/page/Dashboard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |       <el-row :gutter="20">
  4 |         <el-col :span="8">
  5 |           <el-row>
  6 |             <el-col>
  7 |               <el-card shadow="hover">
  8 |                 <div class="user-info">
  9 |                   <img src="../common/img/img.jpg" class="user-avator">
 10 |                   <div class="user-info-text">
 11 | 										<div class="user-info-name">{{username}}</div>
 12 | 										<div>普通用户</div>
 13 | 									</div>
 14 |                 </div>
 15 |                 <div class="user-info-list">上次登录时间:<span>2018-07-20</span></div>
 16 |               </el-card>
 17 |             </el-col>
 18 |           </el-row>
 19 |           <el-row>
 20 |             <el-col>
 21 |               <el-card shadow="hover">
 22 | 								<div slot="header" class="clearfix">
 23 | 									<span>语言详情</span>
 24 | 								</div>
 25 | 								Vue.js
 26 | 								<el-progress :percentage="60" ></el-progress>
 27 | 								JavaScript
 28 | 								<el-progress :percentage="50" color="#8e71c7"></el-progress>
 29 | 								CSS3
 30 | 								<el-progress :percentage="60" color="#67c23a"></el-progress>
 31 | 								HTML5
 32 | 								<el-progress :percentage="70" color="#f56c6c"></el-progress>
 33 |               </el-card>
 34 |             </el-col>
 35 |           </el-row>
 36 |         </el-col>
 37 |         <el-col :span="16">
 38 | 					<el-row :gutter="20" class="mgb20">
 39 | 							<el-col :span="8">
 40 | 									<el-card shadow="hover" :body-style="{padding: '0px'}">
 41 | 											<div class="grid-content grid-con-1">
 42 | 													<i class="el-icon-view grid-con-icon"></i>
 43 | 													<div class="grid-cont-right">
 44 | 															<div class="grid-num">1234</div>
 45 | 															<div>用户访问量</div>
 46 | 													</div>
 47 | 											</div>
 48 | 									</el-card>
 49 | 							</el-col>
 50 | 							<el-col :span="8">
 51 | 									<el-card shadow="hover" :body-style="{padding: '0px'}">
 52 | 											<div class="grid-content grid-con-2">
 53 | 													<i class="el-icon-message grid-con-icon"></i>
 54 | 													<div class="grid-cont-right">
 55 | 															<div class="grid-num">321</div>
 56 | 															<div>系统消息</div>
 57 | 													</div>
 58 | 											</div>
 59 | 									</el-card>
 60 | 							</el-col>
 61 | 							<el-col :span="8">
 62 | 									<el-card shadow="hover" :body-style="{padding: '0px'}">
 63 | 											<div class="grid-content grid-con-3">
 64 | 													<i class="el-icon-goods grid-con-icon"></i>
 65 | 													<div class="grid-cont-right">
 66 | 															<div class="grid-num">5000</div>
 67 | 															<div>数量</div>
 68 | 													</div>
 69 | 											</div>
 70 | 									</el-card>
 71 | 							</el-col>
 72 | 					</el-row>
 73 | 				</el-col>
 74 | 				<el-col :span="16">
 75 | 					<el-collapse v-model="activeNames" @change="handleChange">
 76 | 						<el-collapse-item title="vue.js" name="1">
 77 | 							<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
 78 | 							<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
 79 | 						</el-collapse-item>
 80 | 						<el-collapse-item title="反馈 Feedback" name="2">
 81 | 							<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
 82 | 							<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
 83 | 						</el-collapse-item>
 84 | 						<el-collapse-item title="效率 Efficiency" name="3">
 85 | 							<div>简化流程：设计简洁直观的操作流程；</div>
 86 | 							<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
 87 | 							<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
 88 | 						</el-collapse-item>
 89 | 						<el-collapse-item title="可控 Controllability" name="4">
 90 | 							<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
 91 | 							<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
 92 | 						</el-collapse-item>
 93 | 					</el-collapse>
 94 | 				</el-col>
 95 |       </el-row>
 96 |   </div>
 97 | </template>
 98 | 
 99 | <script>
100 | export default {
101 |   name: 'HelloWorld',
102 |   data () {
103 |     return {
104 | 			 activeNames: ['1'],
105 |       username: localStorage.getItem('ms_username')
106 |     }
107 |   },
108 | 	methods: {
109 | 		handleChange(val) {
110 | 			console.log(val);
111 | 		}
112 | 	}
113 | }
114 | </script>
115 | 
116 | <!-- Add "scoped" attribute to limit CSS to this component only -->
117 | <style scoped>
118 | .el-row{
119 | 	margin: 20px;
120 | }
121 | .user-info{
122 | 	display: flex;
123 | 	align-items: center;
124 | 	padding-bottom: 20px;
125 | 	margin-bottom: 20px;
126 |   border-bottom: 2px solid #ccc;
127 | }
128 | .user-info-text {
129 | 	flex: 1;
130 | 	padding-left: 20px;
131 | }
132 | .user-info-text .user-info-name {
133 | 	font-weight: bold;
134 | 	font-size: 25px;
135 | }
136 | .user-avator {
137 | 	width: 120px;
138 | 	height: 120px;
139 | 	border-radius: 50%;
140 | }
141 | .user-info-list {
142 | 	font-size: 16px;
143 | 	color: #212121;
144 | 	padding: 20px 0 0 0;
145 | }
146 | .user-info-list span {
147 | 	font-size: 14px;
148 | 	padding-left: 15px;
149 | }
150 | .el-card {
151 | 	border: 1px solid #ebeef5;
152 | 	background-color: #fff;
153 | 	color: #303133;
154 | 	transition: .3s;
155 | }
156 | .grid-content {
157 | 	display: -ms-flexbox;
158 | 	display: flex;
159 | 	-ms-flex-align: center;
160 | 	align-items: center;
161 | 	height: 100px;
162 | }
163 | .grid-cont-right {
164 | 	flex: 1;
165 | 	text-align: center;
166 | 	font-size: 12px;
167 | 	color: #999;
168 | }
169 | .grid-con-1 .grid-num {
170 | 	color: #2d8cf0;
171 | }
172 | .grid-con-2 .grid-num {
173 | 	color: #2d8cf0;
174 | }
175 | .grid-con-3 .grid-num {
176 | 	color: #f25e43;
177 | }
178 | .grid-num{
179 | 	font-size: 30px;
180 | 	font-weight: 700;
181 | }
182 | .grid-con-icon {
183 | 	font-size: 50px;
184 | 	width: 100px;
185 | 	height: 100px;
186 | 	text-align: center;
187 | 	line-height: 100px;
188 | 	color: #fff;
189 | }
190 | .grid-con-1 .grid-con-icon {
191 | 	background: #2d8cf0;
192 | }
193 | .grid-con-2 .grid-con-icon{
194 | 	background: #64d572;
195 | }
196 | .grid-con-3 .grid-con-icon{
197 | 	background: #f25e43;
198 | }
199 | .el-collapse-item >>> .el-collapse-item__header {
200 | 	padding-left: 20px;
201 | }
202 | .el-collapse-item >>> .el-collapse-item__wrap >>> .el-collapse-item__content{
203 | 	padding-left: 20px !important;
204 | }
205 | </style>
206 | 


--------------------------------------------------------------------------------
/src/components/page/BaseTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="table">
  3 |       <div class="crumbs">
  4 |         <el-breadcrumb>
  5 |           <el-breadcrumb-item>
  6 |             <i class="el-icon-tickets">基础表格</i>
  7 |           </el-breadcrumb-item>
  8 |         </el-breadcrumb>
  9 |         <div class="cantainer">
 10 |           <div class="handle-box">
 11 |             <el-button type="primary" @click="dialogFormVisible = true" class="handle-del mr10">添加</el-button>
 12 | 						<el-input class="search-input" placeholder="筛选关键词" size="small" v-model="ListSearch"></el-input>
 13 |           </div>
 14 |           <el-table
 15 | 					:data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
 16 |           tooltip-effect="dark"
 17 |           style="width: 100%"
 18 |           >
 19 |             <el-table-column type="selection" width="55"></el-table-column>
 20 |             <el-table-column
 21 |               label="日期"
 22 |               width="120"
 23 | 							sortable
 24 |               prop="date">
 25 |               <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
 26 |             </el-table-column>
 27 |             <el-table-column
 28 |               prop="name"
 29 |               label="姓名"
 30 | 							sortable
 31 |               width="120">
 32 |             </el-table-column>
 33 |             <el-table-column
 34 |               prop="address"
 35 |               label="地址"
 36 | 							sortable
 37 |               show-overflow-tooltip>
 38 |             </el-table-column>
 39 |             <el-table-column label="操作">
 40 |               <template slot-scope="scope">
 41 |                 <el-button
 42 |                   size="mini"
 43 | 									@click="handleEdit(scope.$index, scope.row)"
 44 | 									>编辑</el-button>
 45 |                 <el-button
 46 |                   size="mini"
 47 |                   type="danger"
 48 |                   @click="deleteList(scope.$index,scope.row)">删除</el-button>
 49 |               </template>
 50 |             </el-table-column>
 51 |           </el-table>
 52 | 					<el-pagination
 53 | 						@size-change="handleSizeChange"
 54 | 						@current-change="handleCurrentChange"
 55 | 						:current-page="currentPage"
 56 | 						:page-sizes="[5, 10, 20, 40]"
 57 | 						:page-size="pagesize"
 58 | 						layout="total, sizes, prev, pager, next, jumper"
 59 | 						:total="list.length">
 60 | 				</el-pagination>
 61 |         </div>
 62 |       </div> 
 63 | 			
 64 | 			<!--编辑弹出框-->
 65 | 			<el-dialog title="编辑" :visible.sync="editFormVisible"  width="30%">
 66 | 				<el-form :model="editForm" label-width="50px" ref="addForm">
 67 | 					<el-form-item label="日期">
 68 | 						<el-date-picker type="date" placeholder="选择日期" v-model="editForm.date" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
 69 | 					</el-form-item>
 70 | 					<el-form-item label="姓名">
 71 | 						<el-input v-model="editForm.name"></el-input>
 72 | 					</el-form-item>
 73 | 					<el-form-item label="地址">
 74 | 						<el-input v-model="editForm.address"></el-input>
 75 | 					</el-form-item>
 76 | 				</el-form>
 77 | 				<div slot="footer" class="dialog-footer">
 78 | 					<el-button @click="editFormVisible = false">取 消</el-button>
 79 | 					<el-button type="primary" @click="editSubmit">确 定</el-button>
 80 | 				</div>
 81 | 			</el-dialog>
 82 | 			
 83 |       <!-- 添加弹出框 -->
 84 |       <el-dialog title="信息添加" :visible.sync="dialogFormVisible" width="30%">
 85 |         <el-form :model="form" label-width="50px">
 86 |           <el-form-item label="日期">
 87 |             <el-date-picker type="date" placeholder="选择日期" v-model="form.date" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
 88 |           </el-form-item>
 89 |           <el-form-item label="姓名">
 90 |             <el-input v-model="form.name"></el-input>
 91 |           </el-form-item>
 92 |           <el-form-item label="地址">
 93 |             <el-input v-model="form.address"></el-input>
 94 |           </el-form-item>
 95 |         </el-form>
 96 |         <div slot="footer" class="dialog-footer">
 97 |           <el-button @click="dialogFormVisible = false">取 消</el-button>
 98 |           <el-button type="primary" @click="add"  :loading="addLoading">确 定</el-button>
 99 |         </div>
100 |       </el-dialog>
101 |   </div>
102 | </template>
103 | 
104 | <script>
105 | export default {
106 |   data () {
107 |     return {
108 |       list:[], //数据存储
109 |       dialogFormVisible:false,   //添加弹出框
110 | 			ListSearch:"",  //搜索
111 | 			editFormVisible: false,  //编辑器弹出框
112 |       form:{    //需要添加的字段
113 |         name:"",
114 |         date:"",
115 |         address:""
116 |       },
117 | 			editForm:{   //编辑需要的字段
118 | 				name:"",
119 | 				date:"",
120 | 				address:""
121 | 			},
122 | 			addLoading:false,
123 | 			currentPage:1, //初始页
124 |       pagesize:5    //	每页的数据
125 |     }
126 |   },
127 |   created() {
128 |     this.vueTable()
129 |   },
130 | 	watch:{
131 | 		ListSearch(val) {
132 | 			this.list.forEach(val => {
133 | 				
134 | 			})
135 | 		}
136 | 	},
137 |   methods:{
138 | 		// 初始页currentPage、初始每页数据数pagesize和数据data
139 | 		handleSizeChange: function (size) {
140 |         this.pagesize = size;
141 | 				console.log(this.pagesize)
142 |     },
143 |     handleCurrentChange: function(currentPage){
144 |         this.currentPage = currentPage;
145 | 				console.log(this.currentPage)
146 |     },
147 | 		// 获取用户列表
148 | 		vueTable() {
149 | 			this.$http.get("https://wd6176291011jokkcy.wilddogio.com/vuetable.json").then(data => {
150 | 				return data.json()
151 | 			}).then(data =>{
152 | 				let ListArray =[]
153 | 				for (let key in data) {
154 | 					data[key].id = key
155 | 					ListArray.push(data[key])
156 | 				}
157 | 				this.list = ListArray
158 | 			})
159 | 		},
160 | 		// 显示编辑弹出框
161 | 		handleEdit(index, row){
162 | 			this.editFormVisible = true;
163 | 			this.editForm = Object.assign({}, row);
164 | 			console.log(this.editForm)
165 | 		},
166 | 		// 编辑
167 | 		editSubmit(row) {
168 | 			if (!this.editForm.name || !this.editForm.address || !this.editForm.date) {
169 | 				this.$messageerror('内容不能为空');
170 | 			} else {
171 | 				let HandleEdit = {
172 | 					name: this.form.name,
173 | 					address: this.form.address,
174 | 					date: this.form.date
175 | 				}
176 | 				this.$http.post("https://wd6176291011jokkcy.wilddogio.com/vuetable.json",HandleEdit).then(res => {
177 | 					this.editFormVisible = false
178 | 					this.$message.success('添加成功');
179 | 					this.vueTable()
180 | 				})
181 | 				console.log(HandleEdit)
182 | 			}
183 | 			
184 | 		},
185 |     // 删除
186 |     deleteList(index,row) {
187 |       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
188 |           confirmButtonText: '确定',
189 |           cancelButtonText: '取消',
190 |           type: 'warning'
191 |         }).then(() => {
192 | 					this.$http.delete("https://wd6176291011jokkcy.wilddogio.com/vuetable/"+row.id+".json").then(res => {
193 | 						this.list.splice(index,1)
194 | 						this.vueTable()
195 | 						this.$message({
196 | 							type: 'success',
197 | 							message: '删除成功!'
198 | 						})
199 | 					})
200 |         }).catch(() => {
201 |           this.$message({
202 |             type: 'info',
203 |             message: '已取消删除'
204 |           });          
205 |         });
206 |       },
207 |       // 添加数据
208 |       add() {
209 |         if (!this.form.name || !this.form.address || !this.form.date) {
210 |           this.$message.error('内容不能为空');
211 |         } else {
212 | 					let handleAddClick ={
213 | 						name: this.form.name,
214 | 						address: this.form.address,
215 | 						date: this.form.date
216 | 					}
217 | 					this.$http.post("https://wd6176291011jokkcy.wilddogio.com/vuetable.json",handleAddClick).then(res => {
218 | 						this.dialogFormVisible = false;
219 | 						this.$message.success('添加成功');
220 | 						this.vueTable()
221 | 					})
222 |         }
223 |       }
224 |     }
225 | 	}
226 | </script>
227 | <!-- Add "scoped" attribute to limit CSS to this component only -->
228 | <style scoped>
229 | .search-input {
230 | 	width: 200px;
231 | 	margin-left: 50px;
232 | }
233 | .el-table__body-wrapper{
234 | 	height: 500px;
235 | }
236 | .crumbs{
237 |   margin-bottom:20px;
238 | }
239 | </style>
240 | 


--------------------------------------------------------------------------------