Browse Source

add mockjs

master
taylor 8 years ago
parent
commit
c8bf07868b
  1. 3
      package.json
  2. 5
      src/api/api.js
  3. 3
      src/api/index.js
  4. 24
      src/main.js
  5. 3
      src/mock/index.js
  6. 45
      src/mock/mock.js
  7. 25
      src/mockdata/user.js
  8. 0
      src/pages/Home.vue
  9. 27
      src/pages/Login.vue
  10. 0
      src/pages/Main.vue
  11. 0
      src/pages/charts/echarts.vue
  12. 0
      src/pages/nav1/Form.vue
  13. 0
      src/pages/nav1/Page3.vue
  14. 0
      src/pages/nav1/Table.vue
  15. 0
      src/pages/nav2/Page4.vue
  16. 0
      src/pages/nav2/Page5.vue
  17. 0
      src/pages/nav3/Page6.vue

3
package.json

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

5
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); };

3
src/api/index.js

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

24
src/main.js

@ -9,16 +9,20 @@ import Vuex from 'vuex'
import NProgress from 'nprogress'//页面顶部进度条 import NProgress from 'nprogress'//页面顶部进度条
import 'nprogress/nprogress.css' 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(ElementUI)
Vue.use(VueRouter) Vue.use(VueRouter)

3
src/mock/index.js

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

45
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);
});
});
}
};

25
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 };

0
src/components/Home.vue → src/pages/Home.vue

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

@ -9,19 +9,21 @@
</el-form-item> </el-form-item>
<el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox> <el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;"> <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-button @click.native.prevent="handleReset2">重置</el-button>-->
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script> <script>
import { requestLogin } from '../api/api';
export default { export default {
data() { data() {
return { return {
logining: false,
ruleForm2: { ruleForm2: {
account: '',
checkPass: ''
account: 'admin',
checkPass: '123456'
}, },
rules2: { rules2: {
account: [ account: [
@ -44,8 +46,23 @@
var _this=this; var _this=this;
this.$refs.ruleForm2.validate((valid) => { this.$refs.ruleForm2.validate((valid) => {
if (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 { } else {
console.log('error submit!!'); console.log('error submit!!');
return false; return false;

0
src/components/Main.vue → src/pages/Main.vue

0
src/components/charts/echarts.vue → src/pages/charts/echarts.vue

0
src/components/nav1/Form.vue → src/pages/nav1/Form.vue

0
src/components/nav1/Page3.vue → src/pages/nav1/Page3.vue

0
src/components/nav1/Table.vue → src/pages/nav1/Table.vue

0
src/components/nav2/Page4.vue → src/pages/nav2/Page4.vue

0
src/components/nav2/Page5.vue → src/pages/nav2/Page5.vue

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

Loading…
Cancel
Save