用mock模拟测试数据

package.json

@@ -17,6 +17,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
+    "axios": "^0.18.0",
     "babel-core": "^6.22.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
@@ -32,6 +33,7 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
+    "mockjs": "^1.0.1-beta3",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",

src/api/config.js

@@ -0,0 +1,6 @@
+var api='http://www.Zhengy.com/api';
+
+export default{
+	judegAccount:api+"/judegAccount",//登陆时检测用户名和角色是否匹配
+	login:api+"/login",//登陆
+}

src/components/Login.vue

@@ -6,9 +6,9 @@
       <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition">
         <el-form-item label="角色" prop="radio">
           <el-radio-group v-model="form.radio" v-on:change="judegAccount">
-            <el-radio label="1" border>管理员</el-radio>
-            <el-radio label="2" border>商家</el-radio>
-            <el-radio label="3" border>买家</el-radio>
+            <el-radio label="0" border>管理员</el-radio>
+            <el-radio label="1" border>商家</el-radio>
+            <el-radio label="2" border>买家</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="用户名" prop="name">
@@ -35,7 +35,7 @@ export default {
       msg: '欢迎来到《私人定制》个性化商品网站',
       labelPosition: 'top',
       form: {
-        radio: '1',
+        radio: '0',
         name: '',
         password: ''
       }
@@ -49,20 +49,17 @@ export default {
       if(this.form.name==""){
         return;
       }
-      var accountArr = [];
-      var accountName = [];
-      switch(this.form.radio){
-        case "1":accountArr=this.$store.state.adminAccount;break;
-        case "2":accountArr=this.$store.state.shopAccount;break;
-        default:accountArr=this.$store.state.buyerAccount;
-      }
-      for(var i=0,arrLength=accountArr.length;i<arrLength;i++){
-        accountName.push(accountArr[i].name);
-      }
-      if(accountName.indexOf(this.form.name)==-1){
-        this.showText('用户名输入错误，请重新输入');
-        this.form.name = '';
-      }
+      this.axios.post(this.Api.judegAccount,{
+        radio:this.form.radio,
+        name:this.form.name
+      }).then((res)=>{
+        if(res.data==-1){
+          this.showText('用户名输入错误，请重新输入');
+          this.form.name="";
+        }
+      }).catch((err)=>{
+        console.log("judegAccount:"+err);
+      });
     },
     resetForm(formName) {//重置
       this.$refs[formName].resetFields();
@@ -72,23 +69,26 @@ export default {
         this.showText('请输入用户名和密码');
         return;
       }
-      let accountArr = [];
-      var type = "";
-      switch(this.form.radio){
-        case "1":accountArr=this.$store.state.adminAccount;type="admin";break;
-        case "2":accountArr=this.$store.state.shopAccount;type="shop";break;
-        default:accountArr=this.$store.state.buyerAccount;type="buyer";
-      }
-      for(var i=0,arrLength=accountArr.length;i<arrLength;i++){
-        if(this.form.name==accountArr[i].name&&this.form.password!=accountArr[i].password){
+      this.axios.post(this.Api.login,this.form).then((res)=>{
+        if(res.data.code==200){
+          this.$message({
+            type: 'success',
+            message: '登陆成功!'
+          });
+          if(this.form.radio=='0'){
+            this.$router.push({path: '/admin'});
+          }else if(this.form.radio=='1'){
+            this.$router.push({path: '/shop'});
+          }else{
+            this.$router.push({path: '/buyer'});
+          }
+        }else{
           this.showText('密码输入错误，请重新输入');
-          this.form.password = '';
-          return;
-        }else if(this.form.name==accountArr[i].name&&this.form.password==accountArr[i].password){
-          this.$store.commit('login',{userMess:accountArr[i].mess,loginState:this.form.radio})
-          this.$router.push({path:`/${type}`});
+          this.form.password="";
         }
-      }
+      }).catch((err)=>{
+        console.log("login:"+err);
+      });
     },
     showText(mess){//错误提示
       this.$alert(mess, '错了哦', {

src/main.js

@@ -5,10 +5,16 @@ import App from './App'
 import router from './router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import Api from "./api/config.js"
 import store from './store/store.js'
+import axios from 'axios'
+require('./mock/index.js')//此部分引入的是我们所编写的mockjs文档
 
 Vue.config.productionTip = false
 
+Vue.prototype.Api=Api;
+Vue.prototype.axios = axios;
+
 /* eslint-disable no-new */
 Vue.use(ElementUI)
 

src/mock/index.js

@@ -0,0 +1,38 @@
+const Mock = require('mockjs');
+var loginState="0";//登陆状态，0未登录，1管理员登陆，2商家登陆，3买家登陆
+var accountInfo=[//账号列表
+	[//管理员账号
+  	{"name":"admin1","password":"123","mess":{}},
+  	{"name":"admin2","password":"123","mess":{}},
+  	{"name":"admin3","password":"123","mess":{}},
+  ],
+  [//商家账号
+  	{"name":"shop1","password":"123","mess":{}},
+  	{"name":"shop2","password":"123","mess":{}},
+  	{"name":"shop3","password":"123","mess":{}},
+  ],
+  [//买家账号
+  	{"name":"buyer1","password":"123","mess":{}},
+  	{"name":"buyer2","password":"123","mess":{}},
+  	{"name":"buyer3","password":"123","mess":{}},
+  ],
+];
+var userMess={}//登陆者信息
+
+//登陆前检测用户名和角色是否匹配
+Mock.mock('http://www.Zhengy.com/api/judegAccount',function(options){
+	var res = eval('('+options.body+')');
+	var find = accountInfo[res.radio].findIndex((value,index,arr)=>{
+		return value.name==res.name;
+	})
+	return find;
+})
+//登陆
+Mock.mock('http://www.Zhengy.com/api/login',function(options){
+	var res = eval('('+options.body+')');
+	var index = accountInfo[res.radio].findIndex((value,index,arr)=>{
+		return value.name==res.name;
+	})
+	var code=accountInfo[res.radio][index].password==res.password?200:201;
+	return {"code":code};
+})

src/router/index.js

@@ -11,6 +11,10 @@ export default new Router({
   routes: [
     {
       path: '/',
+      redirect:'/index',
+    },
+    {
+      path: '/index',
       component: Login
     },
     {