diff --git a/vueadmin-vue/package-lock.json b/vueadmin-vue/package-lock.json
index ead64a5d06c69465c6b6e03c0738450c7090dc87..d7405fc8d6e0f1c120cd8452a7c7e41f7644b9f1 100644
--- a/vueadmin-vue/package-lock.json
+++ b/vueadmin-vue/package-lock.json
@@ -1702,6 +1702,16 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
+          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1616431156987&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1728,6 +1738,53 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995367379&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
+          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.nlark.com/source-map/download/source-map-0.6.1.tgz",
@@ -1744,6 +1801,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1618560983872&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1610196021147&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -1760,6 +1827,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.2.0",
+          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.2.0.tgz?cache=0&sync_timestamp=1616796718461&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.2.0.tgz",
+          "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -2296,6 +2375,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.nlark.com/async-validator/download/async-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.nlark.com/asynckit/download/asynckit-0.4.0.tgz",
@@ -2335,6 +2422,19 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz?cache=0&sync_timestamp=1608609215811&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.21.1.tgz",
+      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
+    },
     "babel-loader": {
       "version": "8.2.2",
       "resolved": "https://registry.nlark.com/babel-loader/download/babel-loader-8.2.2.tgz",
@@ -2386,6 +2486,27 @@
         "@babel/helper-define-polyfill-provider": "^0.2.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.nlark.com/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1619708029123&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz",
+          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
@@ -2839,7 +2960,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.nlark.com/call-bind/download/call-bind-1.0.2.tgz",
       "integrity": "sha1-sdTonmiBGcPJqQOtMKuy9qkZvjw=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -4018,8 +4138,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -4457,6 +4576,19 @@
       "integrity": "sha1-UnaadWNTQqTbKa9fHkC9Pa0CyHc=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.15.1.tgz?cache=0&sync_timestamp=1614083011767&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-ui%2Fdownload%2Felement-ui-2.15.1.tgz",
+      "integrity": "sha1-raAKpuMsAndKLndWPdhGaPgTzf8=",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.4.tgz",
@@ -5104,8 +5236,7 @@
     "follow-redirects": {
       "version": "1.14.0",
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.0.tgz",
-      "integrity": "sha1-9dJg+VxfjBBYlEkf7uXciZO0Av4=",
-      "dev": true
+      "integrity": "sha1-9dJg+VxfjBBYlEkf7uXciZO0Av4="
     },
     "for-in": {
       "version": "1.0.2",
@@ -5209,8 +5340,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz",
-      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=",
-      "dev": true
+      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0="
     },
     "gensync": {
       "version": "1.0.0-beta.2",
@@ -5228,7 +5358,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.nlark.com/get-intrinsic/download/get-intrinsic-1.1.1.tgz",
       "integrity": "sha1-FfWfN2+FXERpY5SPDSTNNje0q8Y=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -5367,7 +5496,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/has/download/has-1.0.3.tgz",
       "integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -5387,8 +5515,7 @@
     "has-symbols": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/has-symbols/download/has-symbols-1.0.2.tgz?cache=0&sync_timestamp=1614443484522&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-symbols%2Fdownload%2Fhas-symbols-1.0.2.tgz",
-      "integrity": "sha1-Fl0wcMADCXUqEjakeTMeOsVvFCM=",
-      "dev": true
+      "integrity": "sha1-Fl0wcMADCXUqEjakeTMeOsVvFCM="
     },
     "has-value": {
       "version": "1.0.0",
@@ -6937,6 +7064,15 @@
         "minimist": "^1.2.5"
       }
     },
+    "mockjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/mockjs/download/mockjs-1.1.0.tgz",
+      "integrity": "sha1-5qDDeOkZBtuv8gkRzAJzs8fXWwY=",
+      "dev": true,
+      "requires": {
+        "commander": "*"
+      }
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.nlark.com/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -7137,6 +7273,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -7207,8 +7348,7 @@
     "object-inspect": {
       "version": "1.10.2",
       "resolved": "https://registry.nlark.com/object-inspect/download/object-inspect-1.10.2.tgz",
-      "integrity": "sha1-tjhaPit8rgter8+Qzd+F0Sh2fzA=",
-      "dev": true
+      "integrity": "sha1-tjhaPit8rgter8+Qzd+F0Sh2fzA="
     },
     "object-is": {
       "version": "1.1.5",
@@ -8392,10 +8532,12 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.nlark.com/qs/download/qs-6.5.2.tgz",
-      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
-      "dev": true
+      "version": "6.10.1",
+      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.10.1.tgz?cache=0&sync_timestamp=1616385315895&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.10.1.tgz",
+      "integrity": "sha1-STFIL6jWR6Wqt5nFJx0hM7mB+2o=",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
     },
     "query-string": {
       "version": "4.3.4",
@@ -8666,6 +8808,14 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz?cache=0&sync_timestamp=1616385315895&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.5.2.tgz",
+          "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
+          "dev": true
+        }
       }
     },
     "require-directory": {
@@ -8686,6 +8836,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.nlark.com/resolve/download/resolve-1.20.0.tgz",
@@ -9039,6 +9194,16 @@
       "integrity": "sha1-Z6fQLHbJ2iT5nSCAj8re0ODgS+I=",
       "dev": true
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.nlark.com/side-channel/download/side-channel-1.0.4.tgz",
+      "integrity": "sha1-785cj9wQTudRslxY1CkAEfpeos8=",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.3.tgz?cache=0&sync_timestamp=1614858571178&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsignal-exit%2Fdownload%2Fsignal-exit-3.0.3.tgz",
@@ -9794,6 +9959,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1604313832516&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npm.taobao.org/through2/download/through2-2.0.5.tgz",
@@ -10316,87 +10486,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.2.0",
-      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz",
-      "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995367379&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
-          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.nlark.com/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.nlark.com/loader-utils/download/loader-utils-2.0.0.tgz?cache=0&sync_timestamp=1618846812625&other_urls=https%3A%2F%2Fregistry.nlark.com%2Floader-utils%2Fdownload%2Floader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1618560983872&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1617697788171&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz",
diff --git a/vueadmin-vue/src/App.vue b/vueadmin-vue/src/App.vue
index 855c4d3ce1240a26ca0fbf407942c6181cbe7007..e215936e9ecd75b82462c24f6744907059368083 100644
--- a/vueadmin-vue/src/App.vue
+++ b/vueadmin-vue/src/App.vue
@@ -5,24 +5,13 @@
 </template>
 
 <style>
-#app {
+  html, body, #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
+  margin: 0;
+  padding: 0;
+  height: 100%;
 }
 </style>
diff --git a/vueadmin-vue/src/axios.js b/vueadmin-vue/src/axios.js
new file mode 100644
index 0000000000000000000000000000000000000000..0f0d1c5076e1c425afb9114b25a2ddfe3c2d4bfb
--- /dev/null
+++ b/vueadmin-vue/src/axios.js
@@ -0,0 +1,40 @@
+import axios from "axios";
+import Element from 'element-ui'
+import router from "./router";
+// axios.defaults.baseURL = "http://localhost:8081"
+const request = axios.create({
+    timeout: 5000,
+    headers: {
+        'Content-Type': 'application/json; charset=utf-8'
+    }
+})
+// 拦截请求
+request.interceptors.request.use(config => {
+    config.headers['Authorization'] = localStorage.getItem("token") // 请求头带上token
+    return config
+})
+//拦截响应
+request.interceptors.response.use(response => {
+        let res = response.data;
+        console.log("response")
+        console.log(res)
+        if (res.code === 200) {
+            return response
+        } else {
+            Element.Message.error(res.msg? res.msg : '系统异常！', {duration: 3 * 1000})
+            return Promise.reject(response.data.msg)
+        }
+    },
+    error => {
+        console.log(error)
+        if(error.response.data) {
+            error.message = error.response.data.msg
+        }
+        if(error.response.status === 401) { //权限不够
+            router.push("/login")
+        }
+        Element.Message.error(error.message, {duration: 3000})
+        return Promise.reject(error)
+    }
+)
+export default request
diff --git a/vueadmin-vue/src/components/HelloWorld.vue b/vueadmin-vue/src/components/HelloWorld.vue
deleted file mode 100644
index b9f3c7da7e1614bf5df82f62537e792c39448279..0000000000000000000000000000000000000000
--- a/vueadmin-vue/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/vueadmin-vue/src/main.js b/vueadmin-vue/src/main.js
index 6def8c288e5fbbabe511d4cbfbdf50d24b898b41..6f91144926078aaf646dc5dedaf3ed5da06ab836 100644
--- a/vueadmin-vue/src/main.js
+++ b/vueadmin-vue/src/main.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import axios from 'axios'
+import axios from './axios'
 import App from './App.vue'
 import router from './router'
 import store from './store'
diff --git a/vueadmin-vue/src/mock.js b/vueadmin-vue/src/mock.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..07894c9fdb8231c2e041e3ffb8c1086215476f42 100644
--- a/vueadmin-vue/src/mock.js
+++ b/vueadmin-vue/src/mock.js
@@ -0,0 +1,28 @@
+const Mock = require('mockjs')
+// 参考：https://github.com/nuysoft/Mock/wiki/Mock.Random
+const Random = Mock.Random
+
+let Result = {
+    code: 200,
+    msg: '操作成功',
+    data: null
+}
+/**
+ * Mock.mock( url, post/get , function(options))；
+ * url 表示需要拦截的 URL，
+ * post/get 需要拦截的 Ajax 请求类型
+ *
+ * 用于生成响应数据的函数
+ */
+// 获取验证码图片base64编码以及一个随机码
+Mock.mock('/captcha', 'get', () => {
+    Result.data = {
+        token: Random.string(32), // 获取一个32位的随机字符串,
+        captchaImg: Random.dataImage( "100x40", "fAui1" ) //生成base64图片编码
+    }
+    return Result
+})
+Mock.mock('/login', 'post', () => {
+    // 无法往header中传入数据
+    return Result
+})
diff --git a/vueadmin-vue/src/router/index.js b/vueadmin-vue/src/router/index.js
index d7b0689c71cfd77a1d0a8d7dd55800189cac9533..d6dc747e534df6c76611a07e787b472e94981d32 100644
--- a/vueadmin-vue/src/router/index.js
+++ b/vueadmin-vue/src/router/index.js
@@ -1,24 +1,25 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Login from "@/views/Login";
 import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
   {
     path: '/login',
     name: 'Login',
-    component: Login
+    component: () => import('../views/Login.vue')
   },
   {
     path: '/index',
-    name: 'Index',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/Index.vue')
-  }
+      name: 'Index',
+    component: () => import('../views/Index.vue')
+  },
 ]
 
 const router = new VueRouter({
diff --git a/vueadmin-vue/src/store/index.js b/vueadmin-vue/src/store/index.js
index 332b916928b6051df5dc7286ead3e04ee067f4ab..e91786a52d11350840bef6a95f81e83340de078c 100644
--- a/vueadmin-vue/src/store/index.js
+++ b/vueadmin-vue/src/store/index.js
@@ -5,8 +5,13 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    token: ''
   },
   mutations: {
+    SET_TOKEN: (state, token) => {
+      state.token = token
+      localStorage.setItem("token", token)
+    }
   },
   actions: {
   },
diff --git a/vueadmin-vue/src/views/Home.vue b/vueadmin-vue/src/views/Home.vue
index 8bd6c57f306571c13dab5ce8ee5dab0d3e03eeeb..11b9f0896e00653b69e79c72defb17f416f1f367 100644
--- a/vueadmin-vue/src/views/Home.vue
+++ b/vueadmin-vue/src/views/Home.vue
@@ -1,18 +1,16 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h1>主页</h1>
+    <el-button>测试</el-button>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
   name: 'Home',
   components: {
-    HelloWorld
   }
 }
 </script>
diff --git a/vueadmin-vue/src/views/Index.vue b/vueadmin-vue/src/views/Index.vue
index afe44bf53cc57e031bbeb83ba964b458b22afb0c..0465793c708aea54cce1c49499deae0848213588 100644
--- a/vueadmin-vue/src/views/Index.vue
+++ b/vueadmin-vue/src/views/Index.vue
@@ -10,4 +10,4 @@ export default {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/vueadmin-vue/src/views/Login.vue b/vueadmin-vue/src/views/Login.vue
index 1aa188e0998db9217bd4a39acab522c8bc2e5233..254ccceac87a3808676bb64db6c9ba22fb2cc889 100644
--- a/vueadmin-vue/src/views/Login.vue
+++ b/vueadmin-vue/src/views/Login.vue
@@ -1,13 +1,114 @@
 <template>
 
+        <el-row type="flex" class="row-bg" justify="center">
+            <el-col :xl="6" :lg="7">
+                <h2>欢迎来到VueAdmin管理系统</h2>
+                <el-image :src="require('@/assets/MarkerHub.jpg')" style="width: 180px; height: 180px"></el-image>
+                <p>公众号 MarkerHub </p>
+                <p>扫码二维码，回复【 VueAdmin 】获取登录密码 </p>
+
+            </el-col>
+            <el-col :span="1">
+                <el-divider direction="vertical"></el-divider>
+            </el-col>
+            <el-col :xl="6" :lg="7">
+                <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm">
+                    <el-form-item label="用户名" prop="username" style="width: 380px;">
+                        <el-input v-model="loginForm.username"></el-input>
+                    </el-form-item>
+                    <el-form-item label="密码" prop="password" style="width: 380px;">
+                        <el-input v-model="loginForm.password"></el-input>
+                    </el-form-item>
+                    <el-form-item label="验证码" prop="code" style="width: 380px;">
+                        <el-input v-model="loginForm.code" style="width: 172px;float: left" maxlength="5"></el-input>
+                        <el-image :src="captchaImg" class="captchaImg"></el-image>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="submitForm('loginForm')">立即创建</el-button>
+                        <el-button @click="resetForm('loginForm')">重置</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
+
 </template>
 
 <script>
 export default {
-  name: "Login.vue"
+  name: "Login.vue",
+    data() {
+        return {
+            loginForm: {
+                username: '',
+                password: '',
+                code: '',
+                token: '',//随机码
+            },
+            captchaImg: '',
+            rules: {
+                username: [
+                    { required: true, message: '请输入用户名', trigger: 'blur' },
+                ],
+                password: [
+                    { required: true, message: '请输入密码', trigger: 'blur' },
+                ],
+                code: [
+                    { required: true, message: '请输入验证码', trigger: 'blur' },
+                    {min: 5, max: 5, message: '验证码为5个字符', trigger: 'blur'}
+                ],
+            }
+        };
+    },
+    methods: {
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    this.$axios.post('/login',this.loginForm).then(res => {
+                        const jwt = res.headers['authorization']
+                        this.$store.commit("SET_TOKEN", jwt)
+                        this.$router.push("/index")
+                    }).catch(error => {
+                        this.getCaptcha();
+                        console.log('error submit!!');
+                    })
+                } else {
+                    this.getCaptcha();
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        getCaptcha() {
+            this.$axios.get('/captcha').then(res => {
+                this.loginForm.token = res.data.data.token
+                this.captchaImg = res.data.data.captchaImg
+            })
+        },
+    },
+    created() {
+        this.getCaptcha()
+    }
 }
 </script>
 
 <style scoped>
+    .el-row{
+        background-color:rgb(250,250,250);
+        height: 100%;
+        display: flex;
+        align-items: center;
+        text-align: center;
+    }
+    .el-divider{
+        height: 200px;
+    }
 
-</style>
\ No newline at end of file
+    .captchaImg{
+        float: left;
+        margin-left: 8px;
+        border-radius: 4px;
+    }
+</style>