github/basic
1
0
Fork 1
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-06 14:53:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新mock支持

Browse Source
This commit is contained in:
hooray
2020-11-23 02:22:21 +08:00
parent 81ea94c658
commit c5130b1a62
17 changed files with 2928 additions and 2748 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+1 -1
View File
@@ -1,7 +1,7 @@
# 页面标题
VUE_APP_TITLE = Fantastic-admin 演示
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VUE_APP_API_ROOT = 此处填写正式环境接口地址
VUE_APP_API_ROOT = /
# 是否开启 CDN 支持，开启设置 ON，关闭设置 OFF
# 详情介绍请阅读 http://eoner.gitee.io/vue-automation/#/cdn
VUE_APP_CDN = OFF
.env.example
+1 -1
View File
@@ -7,7 +7,7 @@ VUE_APP_TYPE = example
# 页面标题
VUE_APP_TITLE = 后台框架模版
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VUE_APP_API_ROOT = 此处填写正式环境接口地址
VUE_APP_API_ROOT = /
# 是否开启 CDN 支持，开启设置 ON，关闭设置 OFF
# 详情介绍请阅读 http://eoner.gitee.io/vue-automation/#/cdn
VUE_APP_CDN = OFF
.env.production
+1 -1
View File
@@ -1,7 +1,7 @@
# 页面标题
VUE_APP_TITLE = 后台框架模版
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VUE_APP_API_ROOT = 此处填写正式环境接口地址
VUE_APP_API_ROOT = /
# 是否开启 CDN 支持，开启设置 ON，关闭设置 OFF
# 详情介绍请阅读 http://eoner.gitee.io/vue-automation/#/cdn
VUE_APP_CDN = OFF
package.json
+3 -1
View File
@@ -35,12 +35,13 @@
"@vue/cli-plugin-babel": "~4.5.8",
"@vue/cli-plugin-eslint": "~4.5.8",
"@vue/cli-service": "~4.5.8",
"@winner-fed/vue-cli-plugin-stylelint": "~1.0.4",
"@winner-fed/vue-cli-plugin-stylelint": "^1.0.4",
"babel-eslint": "^10.1.0",
"babel-plugin-dynamic-import-node": "^2.3.3",
"eslint": "^7.12.1",
"eslint-plugin-vue": "^7.1.0",
"html-webpack-plugin": "^4.5.0",
"mockjs": "^1.1.0",
"sass": "^1.28.0",
"sass-loader": "^10.0.4",
"sass-resources-loader": "^2.1.1",
@@ -50,6 +51,7 @@
"stylelint-scss": "^3.18.0",
"svg-sprite-loader": "^5.0.0",
"svgo": "^1.3.0",
"vue-cli-plugin-mock": "^1.0.1",
"vue-template-compiler": "^2.6.12",
"webpack-spritesmith": "^1.1.0"
},
src/api/index.js
+2 -2
View File
@@ -1,5 +1,5 @@
import axios from 'axios'
import qs from 'qs'
// import qs from 'qs'
import router from '@/router/index'
import store from '@/store/index'
import { Message } from 'element-ui'
@@ -36,7 +36,7 @@ api.interceptors.request.use(
if (store.getters['user/isLogin']) {
request.data.token = store.state.user.token
}
request.data = qs.stringify(request.data)
// request.data = qs.stringify(request.data)
}
} else {
// 带上 token
src/assets/icons/sidebar-mock.svg
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1606068703845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3192" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M512 384C307.2 384 85.333333 328.533333 85.333333 213.333333s221.866667-170.666667 426.666667-170.666666 426.666667 55.466667 426.666667 170.666666-221.866667 170.666667-426.666667 170.666667z m0-256C290.133333 128 170.666667 192 170.666667 213.333333s119.466667 85.333333 341.333333 85.333334 341.333333-64 341.333333-85.333334-119.466667-85.333333-341.333333-85.333333zM512 682.666667c-204.8 0-426.666667-55.466667-426.666667-170.666667 0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667c0 21.333333 106.666667 85.333333 341.333333 85.333333s341.333333-64 341.333333-85.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667c0 115.2-221.866667 170.666667-426.666667 170.666667z" p-id="3193"></path><path d="M512 981.333333c-204.8 0-426.666667-55.466667-426.666667-170.666666V213.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v597.333334c0 21.333333 106.666667 85.333333 341.333333 85.333333s341.333333-64 341.333333-85.333333V213.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v597.333334c0 115.2-221.866667 170.666667-426.666667 170.666666z" p-id="3194"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/main.js
+2
View File
@@ -35,6 +35,8 @@ requireAll(req)
import './assets/styles/reset.scss'
import './mock'
Vue.config.productionTip = false
Vue.prototype.$eventBus = new Vue({
src/mock/index.js
+49
View File
@@ -0,0 +1,49 @@
const Mock = require('mockjs')
export function param2Obj(url) {
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
if (!search) {
return {}
}
const obj = {}
const searchArr = search.split('&')
searchArr.forEach(v => {
const index = v.indexOf('=')
if (index !== -1) {
const name = v.substring(0, index)
const val = v.substring(index + 1, v.length)
obj[name] = val
}
})
return obj
}
function XHR2ExpressReqWrap(respond) {
return function(options) {
let result = null
if (respond instanceof Function) {
const { body, type, url } = options
// https://expressjs.com/en/4x/api.html#req
result = respond({
method: type,
body: JSON.parse(body),
query: param2Obj(url)
})
} else {
result = respond
}
return Mock.mock(result)
}
}
const mocksContext = require.context('./modules/', true, /.js$/)
mocksContext.keys().forEach(file_name => {
// 获取文件中的 default 模块
const mocks = mocksContext(file_name)
for (const mock of mocks) {
Mock.mock(
new RegExp(`${process.env.VUE_APP_API_ROOT}mock/${mock.url}`),
mock.type || 'get',
XHR2ExpressReqWrap(mock.result)
)
}
})
src/mock/modules/member.js
+43
View File
@@ -0,0 +1,43 @@
module.exports = [
{
url: 'member/login',
type: 'post',
result: option => {
return {
error: '',
state: 1,
data: {
account: option.body.account,
token: '@string',
failure_time: Date.parse(new Date()) / 1000 + 24 * 60 * 60
}
}
}
},
{
url: 'member/permission',
type: 'get',
result: option => {
let permissions = []
if (option.query.account == 'admin') {
permissions = [
'permission.browse',
'permission.create',
'permission.edit',
'permission.remove'
]
} else if (option.query.account == 'test') {
permissions = [
'permission.browse'
]
}
return {
error: '',
state: 1,
data: {
permissions
}
}
}
}
]
src/mock/server-modules/member.js
+37
View File
@@ -0,0 +1,37 @@
const Mock = require('mockjs')
export default {
'POST /mock/member/login': (req, res) => {
return res.json(Mock.mock({
error: '',
state: 1,
data: {
account: req.body.account,
token: '@string',
failure_time: Date.parse(new Date()) / 1000 + 24 * 60 * 60
}
}))
},
'GET /mock/member/permission': (req, res) => {
let permissions = []
if (req.query.account == 'admin') {
permissions = [
'permission.browse',
'permission.create',
'permission.edit',
'permission.remove'
]
} else if (req.query.account == 'test') {
permissions = [
'permission.browse'
]
}
return res.json({
error: '',
state: 1,
data: {
permissions
}
})
}
}
src/mock/server.js
+10
View File
@@ -0,0 +1,10 @@
let mockMap = {}
const mocksContext = require.context('./server-modules/', false, /.js$/)
mocksContext.keys().forEach(file_name => {
mockMap = {
...mocksContext(file_name)
}
})
module.exports = mockMap
src/router/index.js
+3 -1
View File
@@ -72,6 +72,7 @@ import BreadcrumbExample from './modules/breadcrumb.example'
import KeepAliveExample from './modules/keep.alive.example'
import ComponentExample from './modules/component.example'
import PermissionExample from './modules/permission.example'
import MockExample from './modules/mock.example'
import VideosExample from './modules/videos.example'
import ExTernalLinkExample from './modules/external.link.example'
@@ -87,7 +88,8 @@ let asyncRoutes = [
BreadcrumbExample,
KeepAliveExample,
ComponentExample,
PermissionExample
PermissionExample,
MockExample
]
},
{
src/router/modules/mock.example.js
+26
View File
@@ -0,0 +1,26 @@
import Layout from '@/layout'
export default {
path: '/mock_example',
component: Layout,
redirect: '/mock_example/index',
name: 'mockExample',
meta: {
title: 'Mock',
icon: 'sidebar-mock',
badge: 'NEW'
},
children: [
{
path: 'index',
name: 'mockExampleIndex',
component: () => import(/* webpackChunkName: 'mock_example' */ '@/views/mock_example'),
meta: {
title: 'Mock',
sidebar: false,
breadcrumb: false,
activeMenu: '/mock_example'
}
}
]
}
src/store/modules/user.js
+14 -35
View File
@@ -1,4 +1,4 @@
// import api from '@/api'
import api from '@/api'
const state = {
account: localStorage.account,
@@ -21,25 +21,13 @@ const getters = {
}
const actions = {
// login({commit}, data) {
// return new Promise((resolve, reject) => {
// api.post('member/login', data).then(res => {
// commit('setUserData', res.data)
// resolve(res)
// }).catch(error => {
// reject(error)
// })
// })
// }
login({commit}, data) {
return new Promise(resolve => {
// 模拟登录成功，写入 token 信息
commit('setUserData', {
account: data.account,
token: '1234567890',
failure_time: Date.parse(new Date()) / 1000 + 24 * 60 * 60
// 通过 mock 进行登录
api.post('mock/member/login', data).then(res => {
commit('setUserData', res.data)
resolve()
})
resolve()
})
},
logout({commit}) {
@@ -49,24 +37,15 @@ const actions = {
// 获取我的权限
getPermissions({state, commit}) {
return new Promise(resolve => {
// 模拟权限数据
let permissions
if (state.account == 'admin') {
permissions = [
'permission.browse',
'permission.create',
'permission.edit',
'permission.remove'
]
} else if (state.account == 'test') {
permissions = [
'permission.browse'
]
} else {
permissions = []
}
commit('setPermissions', permissions)
resolve(permissions)
// 通过 mock 获取权限
api.get('mock/member/permission', {
params: {
account: state.account
}
}).then(res => {
commit('setPermissions', res.data.permissions)
resolve(res.data.permissions)
})
})
}
}
src/views/mock_example/index.vue
+26
View File
@@ -0,0 +1,26 @@
<template>
<div>
<page-header title="Mock" content="通过拦截 Ajax 请求，返回模拟的响应数据，可以让前端工程师独立于后端进行开发，本演示站的登录和权限获取就是通过 mock 实现的。更多 Mock 语法规则请查询官方文档">
<el-button icon="el-icon-link" @click="open('http://mockjs.com/')">Mock.js 官网</el-button>
</page-header>
<page-main>
<el-button @click="getPermission">测试：获取用户权限</el-button>
</page-main>
</div>
</template>
<script>
export default {
methods: {
getPermission() {
this.$store.dispatch('user/getPermissions').then(res => {
this.$notify({
title: '当前用户权限',
dangerouslyUseHTMLString: true,
message: res.map(p => `<p>${p}</p>`).join('')
})
})
}
}
}
</script>
vue.config.js
+17 -2
View File
@@ -59,7 +59,18 @@ module.exports = {
// target: process.env.VUE_APP_API_ROOT,
// changeOrigin: true
// }
// }
// },
// 用于 mock-server
// proxy: {
// '/mock': {
// target: '/',
// changeOrigin: true
// },
// '/': {
// target: process.env.VUE_APP_API_ROOT,
// changeOrigin: true
// }
// },
},
configureWebpack: config => {
config.resolve.modules = ['node_modules', 'assets/sprites']
@@ -86,7 +97,11 @@ module.exports = {
lintStyleOnBuild: true,
stylelint: {
fix: true
}
},
// mock: {
// entry: './src/mock/server.js',
// debug: true
// }
},
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store
yarn.lock
+2692 -2704
View File
File diff suppressed because it is too large Load Diff