add mockjs

package.json

@@ -9,6 +9,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.15.3",
     "echarts": "^3.3.2",
     "flex.css": "^1.1.6",
     "nprogress": "^0.2.0",
@@ -17,6 +18,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.4.0",
+    "axios-mock-adapter": "^1.7.1",
     "babel-core": "^6.0.0",
     "babel-loader": "^6.2.8",
     "babel-plugin-transform-runtime": "^6.0.0",
@@ -37,6 +39,7 @@
     "html-webpack-plugin": "^2.8.1",
     "http-proxy-middleware": "^0.17.2",
     "json-loader": "^0.5.4",
+    "mockjs": "^1.0.1-beta3",
     "opn": "^4.0.2",
     "ora": "^0.3.0",
     "semver": "^5.3.0",

src/api/api.js

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+let base = '';
+
+export const requestLogin = params => { return axios.post(`${ base }/login`, params).then(res => res.data); };

src/api/index.js

@@ -0,0 +1,3 @@
+import * as api from './api';
+
+export default api;

src/main.js

@@ -9,16 +9,20 @@ import Vuex from 'vuex'
 import NProgress from 'nprogress'//页面顶部进度条
 import 'nprogress/nprogress.css'
 
-import Login from './components/Login.vue'
-import Home from './components/Home.vue'
-import Main from './components/Main.vue'
-import Table from './components/nav1/Table.vue'
-import Form from './components/nav1/Form.vue'
-import Page3 from './components/nav1/Page3.vue'
-import Page4 from './components/nav2/Page4.vue'
-import Page5 from './components/nav2/Page5.vue'
-import Page6 from './components/nav3/Page6.vue'
-import echarts from './components/charts/echarts.vue'
+import Login from './pages/Login.vue'
+import Home from './pages/Home.vue'
+import Main from './pages/Main.vue'
+import Table from './pages/nav1/Table.vue'
+import Form from './pages/nav1/Form.vue'
+import Page3 from './pages/nav1/Page3.vue'
+import Page4 from './pages/nav2/Page4.vue'
+import Page5 from './pages/nav2/Page5.vue'
+import Page6 from './pages/nav3/Page6.vue'
+import echarts from './pages/charts/echarts.vue'
+
+// start mock
+import Mock from './mock';
+Mock.bootstrap();
 
 Vue.use(ElementUI)
 Vue.use(VueRouter)

src/mock/index.js

@@ -0,0 +1,3 @@
+import mock from './mock';
+
+export default mock;

src/mock/mock.js

@@ -0,0 +1,45 @@
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { LoginUsers } from '../mockdata/user';
+
+export default {
+  /**
+   * mock bootstrap
+   */
+  bootstrap() {
+    let mock = new MockAdapter(axios);
+
+    // mock success request
+    mock.onGet('/success').reply(200, {
+      msg: 'success'
+    });
+
+    // mock error request
+    mock.onGet('/error').reply(500, {
+      msg: 'failure'
+    });
+
+    mock.onPost('/login').reply(config => {
+      let {username, password} = JSON.parse(config.data);
+      return new Promise((resolve, reject) => {
+        let user = null;
+        setTimeout(() => {
+          let hasUser = LoginUsers.some(u => {
+            if (u.username === username && u.password === password) {
+              user = JSON.parse(JSON.stringify(u));
+              user.password = undefined;
+              return true;
+            }
+          });
+
+          if (hasUser) {
+            resolve([200, { code: 200, msg: '请求成功!!!', user }]);
+          } else {
+            resolve([200, { code: 500, msg: '用户名或密码错误!!!' }]);
+          }
+        }, Math.random() * 1000 + 1000);
+      });
+    });
+
+  }
+};

src/mockdata/user.js

@@ -0,0 +1,25 @@
+import Mock from 'mockjs';
+const LoginUsers = [
+  {
+    id: 1,
+    username: 'admin',
+    password: '123456',
+    avatar: ''
+  }
+];
+
+// const Users = [];
+// const userCount = 200;
+
+// for (let i = 0; i < userCount; i++) {
+//   Users.push(Mock.mock({
+//     id: Mock.Random.guid(),
+//     name: Mock.Random.cname(),
+//     address: Mock.mock('@county(true)'),
+//     'age|18-60': 1,
+//     date: Number(Mock.Random.datetime('T'))
+//   }));
+// }
+
+//export { LoginUsers, Users };
+export { LoginUsers };

src/components/Login.vue → src/pages/Login.vue

@@ -9,19 +9,21 @@
     </el-form-item>
     <el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
     <el-form-item style="width:100%;">
-      <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2">登录</el-button>
+      <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
       <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
     </el-form-item>
   </el-form>
 </template>
 
 <script>
+  import { requestLogin } from '../api/api';
   export default {
     data() {
       return {
+        logining: false,
         ruleForm2: {
-          account: '',
-          checkPass: ''
+          account: 'admin',
+          checkPass: '123456'
         },
         rules2: {
           account: [
@@ -44,8 +46,23 @@
         var _this=this;
         this.$refs.ruleForm2.validate((valid) => {
           if (valid) {
-            //_this.$router.push('/table');
-            _this.$router.replace('/table');
+            //_this.$router.replace('/table');
+            this.logining = true;
+            var loginParams={username:this.ruleForm2.account,password:this.ruleForm2.checkPass};
+            requestLogin(loginParams).then(data => {
+              this.logining = false;
+              let { msg, code, user } = data;
+              if (code !== 200) {
+                this.$message.error(msg);
+              } else {
+                localStorage.setItem('user', JSON.stringify(user));
+                if (this.$route.query.redirect) {
+                  this.$router.push({path: this.$route.query.redirect});
+                } else {
+                  this.$router.push({path: '/table'});
+                }
+              }
+            });
           } else {
             console.log('error submit!!');
             return false;

src/components/nav3/Page6.vue → src/pages/nav3/Page6.vue

@@ -1,4 +1,4 @@
-<template>
-	<section>page6...
-	</section>
+<template>
+	<section>page6...
+	</section>
 </template>