first commit

README.md

@@ -4,17 +4,25 @@
 ```
 npm install
 ```
-
 ### Compiles and hot-reloads for development
 ```
 npm run serve
 ```
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
 
 ### Compiles and minifies for production
 ```
 npm run build
 ```
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
 
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
 ### Lints and fixes files
 ```
 npm run lint

package-lock.json

@@ -1719,6 +1719,14 @@
       "integrity": "sha1-ePrtjD0HSrgfIrTphdeehzj3IPg=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "http://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -1862,8 +1870,7 @@
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "http://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
-      "dev": true
     },
     "babel-loader": {
       "version": "8.0.5",
@@ -1895,6 +1902,22 @@
         "esutils": "^2.0.2"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -2054,6 +2077,12 @@
           "resolved": "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "dev": true
         }
       }
     },
@@ -2980,8 +3009,7 @@
     "core-js": {
       "version": "2.6.1",
       "resolved": "http://registry.npm.taobao.org/core-js/download/core-js-2.6.1.tgz",
-      "integrity": "sha1-h0Fq6BfelXo/JJs7XKR11KrtYEI=",
+      "integrity": "sha1-h0Fq6BfelXo/JJs7XKR11KrtYEI="
-      "dev": true
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -3392,8 +3420,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "http://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
-      "dev": true
     },
     "default-gateway": {
       "version": "2.7.2",
@@ -3732,6 +3759,19 @@
       "integrity": "sha1-iZ+wiN7yEK7muDikdlW7spkZDhM=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.4.11.tgz",
+      "integrity": "sha512-RtgK0t840NAFTajGMWvylzZRSX1EkZ7V4YgAoBxhv4TtkeMscLuk/IdYOzPdlQq6IN0byx1YVBxCX+u4yYkGvw==",
+      "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.4.1",
       "resolved": "http://registry.npm.taobao.org/elliptic/download/elliptic-6.4.1.tgz",
@@ -4334,6 +4374,12 @@
           "resolved": "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "dev": true
         }
       }
     },
@@ -4853,14 +4899,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4880,8 +4924,7 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -5029,7 +5072,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -7297,6 +7339,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "http://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -8504,10 +8551,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.2",
+      "version": "6.6.0",
-      "resolved": "http://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.6.0.tgz",
-      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
+      "integrity": "sha512-KIJqT9jQJDQx5h5uAVPimw6yVg2SekOKu959OCtktD3FjzbpvaPr8i4zzg07DOMz+igA4W/aNM7OV8H37pFYfA=="
-      "dev": true
     },
     "querystring": {
       "version": "0.2.0",
@@ -8797,6 +8843,14 @@
         "tough-cookie": "~2.4.3",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "dev": true
+        }
       }
     },
     "request-promise-core": {
@@ -8853,6 +8907,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.9.0",
       "resolved": "http://registry.npm.taobao.org/resolve/download/resolve-1.9.0.tgz",
@@ -9971,6 +10030,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "http://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
@@ -10593,6 +10657,11 @@
       "integrity": "sha1-3EJpcTMwLOMBdSQ1amxht7abShg=",
       "dev": true
     },
+    "vuex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
+      "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "http://registry.npm.taobao.org/watchpack/download/watchpack-1.6.0.tgz",

package.json

@@ -8,8 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "element-ui": "^2.4.11",
+    "qs": "^6.6.0",
     "vue": "^2.5.21",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.3",

src/App.vue

@@ -1,29 +1,28 @@
 <template>
-  <div id="app">
+<div id="app">
-    <div id="nav">
+    <router-view />
-      <router-link to="/">Home</router-link> |
+</div>
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
-  </div>
 </template>
 
 <style lang="less">
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+    text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
     color: #2c3e50;
-    &.router-link-exact-active {
+}
-      color: #42b983;
+
+#nav {
+    padding: 30px;
+
+    a {
+        font-weight: bold;
+        color: #2c3e50;
+
+        &.router-link-exact-active {
+            color: #42b983;
+        }
     }
-  }
 }
 </style>

src/components/HelloWorld.vue

@@ -1,58 +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-eslint" target="_blank" rel="noopener">eslint</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 lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Store.js

@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+    state: {
+        user: {
+            userId: 0,
+            userName: null,
+            email: null
+        }
+    },
+    mutations: {
+        login(state,user) {
+            state.user.userId = user.userId;
+            state.user.userName = user.userName;
+            state.user.email = user.email;
+        },
+        logout(state) {
+            state.user.userId = 0;
+            state.user.userName = null;
+            state.user.email = null;
+        }
+    }
+});
+
+export default store

src/components/http.js

@@ -0,0 +1,39 @@
+import qs from 'qs';
+import { async } from 'q';
+
+const baseUri = "http://127.0.0.1:8080/api";
+const processResponse = (promise)=>{
+    return new Promise((resolve,reject)=>{
+        promise.then(ret=>{
+            if(typeof(ret['errcode']) != 'undefined'){
+                if(ret.errcode != 0){
+                    reject(ret.message);
+                    return;
+                }
+            }
+            resolve(ret);
+        }).catch(err=>{
+            reject(err);
+        })
+    })
+}
+const http = {
+    $getUrl(url) {
+        return baseUri + url;
+    },
+    async get(url) {
+        const resp = await fetch(this.$getUrl(url));
+        return processResponse(resp.json());
+    },
+    async post(url, data) {
+        const resp = await fetch(this.$getUrl(url), {
+            body: qs.stringify(data),
+            method: 'post',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+            }
+        });
+        return processResponse(resp.json());
+    }
+}
+export default http;

src/main.js

@@ -1,8 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
+import 'element-ui/lib/theme-chalk/index.css'
+import ElementUI from "element-ui"
 import router from './router'
 
 Vue.config.productionTip = false
+Vue.use(ElementUI)
 
 new Vue({
   router,

src/router.js

@@ -1,23 +1,32 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from './views/Home.vue'
+import Vuex from 'vuex'
+import store from './components/Store'
 
+Vue.use(Vuex)
 Vue.use(Router)
-
+const router = new Router({
-export default new Router({
+  routes: [{
-  routes: [
-    {
       path: '/',
       name: 'home',
       component: Home
     },
     {
-      path: '/about',
+      path: '/login',
-      name: 'about',
+      name: 'login',
-      // route level code-splitting
+      component: () => import( /* webpackChunkName: "about" */ './views/Login.vue')
-      // 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/About.vue')
     }
   ]
-})
+});
+router.beforeEach((to,from,next)=>{
+  if(to.path != '/login'){
+    if(store.state.user.userId < 1){
+      next({path:'/login'});
+      return;
+    }
+  }
+  next();
+});
+
+export default router;

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +1,88 @@
+<style lang="less">
+.home {
+    width: 1000px;
+    margin: 50px auto;
+    .page-container{
+            margin-top: 10px;
+    }
+}
+</style>
+
 <template>
-  <div class="home">
+<div class="home" v-loading="loading">
     <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+
-  </div>
+    <el-table :data="userList" style="width: 100%" border>
+        <el-table-column prop="userId" label="用户编号" width="150">
+        </el-table-column>
+        <el-table-column prop="userName" label="用户名" width="120">
+        </el-table-column>
+        <el-table-column prop="email" label="邮箱">
+        </el-table-column>
+        <el-table-column prop="salt" label="加密盐" width="120">
+        </el-table-column>
+        <el-table-column label="操作" width="120">
+            <template slot-scope="scope">
+                <el-button @click.native.prevent="resetPwd(scope.$index)" type="text" size="small">
+                    重置密码
+                </el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <div class="page-container">
+        <el-pagination layout="prev, pager, next" @current-change="onPageChange" :total="total" :page-size="pageSize"></el-pagination>
+    </div>
+</div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import http from '../components/http';
 
 export default {
-  name: 'home',
+    name: "home",
-  components: {
+    data() {
-    HelloWorld
+        return {
-  }
+            loading: false,
-}
+            userList: [],
+            total: 0,
+            pageSize: 15
+        }
+    },
+    mounted() {
+        document.title = "用户列表";
+        this.loadData(1);
+    },
+
+    methods: {
+        onPageChange(page){
+            this.loadData(page);
+        },
+        loadData(page) {
+            this.loading = true;
+            http.get('/user/all?page=' + page).then(data => {
+                this.loading = false;
+                this.userList = data.list;
+                this.total = data.total;
+                this.pageSize = data.page_size;
+            }).catch(err => {
+                this.loading = false;
+                this.$message.error({
+                    title: err
+                });
+            })
+        },
+        resetPwd(index) {
+            this.loading = true;
+            const user = this.userList[index];
+            setTimeout(() => {
+                this.loading = false;
+                this.$notify({
+                    title: '提示',
+                    message: user.userName + '的密码重置成功'
+                });
+            }, Math.ceil(Math.random() * 500) + 500);
+        }
+    }
+};
 </script>

src/views/Login.vue

@@ -0,0 +1,93 @@
+<style lang="less">
+.login {
+    width: 400px;
+    margin: 50px auto 0;
+
+    .display-block {
+        display: block;
+        width: 100%;
+    }
+
+    .error-notice {
+        color: #f56c6c;
+        font-size: 12px;
+        text-align: left;
+    }
+}
+</style>
+
+<template>
+<div class="login">
+    <el-form :model="loginForm" status-icon :rules="loginRule" ref="loginForm" label-width="0px" class="demo-ruleForm">
+        <el-form-item prop="userName">
+            <el-input type="text" placeholder="请输入用户名" @keyup.enter.native="submitForm('loginForm')" v-model="loginForm.userName" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+            <el-input type="password" placeholder="请输入密码" @keyup.enter.native="submitForm('loginForm')" v-model="loginForm.password" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item>
+            <el-button class="display-block" :loading="loging" type="primary" @click="submitForm('loginForm')">提交</el-button>
+        </el-form-item>
+        <div class="error-notice">{{errorMessage}}</div>
+    </el-form>
+</div>
+</template>
+
+<script>
+import http from "../components/http";
+import store from '../components/Store';
+
+export default {
+    mounted() {
+        document.title = "登录";
+
+    },
+    data() {
+        return {
+            loginForm: {
+                userName: "",
+                password: "",
+                valicode: "m8k2"
+            },
+            errorMessage: "",
+            loging: false,
+            loginRule: {
+                userName: [{
+                    required: true,
+                    message: "请输入登录用户名",
+                    trigger: "blur"
+                }],
+                password: [{
+                    required: true,
+                    message: "请输入登录密码",
+                    trigger: "blur"
+                }]
+            }
+        };
+    },
+    methods: {
+        submitForm() {
+            this.$refs.loginForm.validate(valid => {
+                if (valid) {
+                    this.loging = true;
+                    http
+                        .post("/user/login", this.loginForm)
+                        .then(ret => {
+                            store.commit('login', ret);
+                            this.$router.push('/');
+                        })
+                        .catch(err => {
+                            this.loging = false;
+                            this.errorMessage = err;
+                            console.log(err);
+                        });
+                } else {
+                    console.log("表单填写错误");
+                    return false;
+                }
+            });
+        },
+        resetForm() {}
+    }
+};
+</script>

vue.config.js

@@ -0,0 +1,6 @@
+// vue.config.js
+module.exports = {
+    devServer:{
+        port:3000
+    }
+}