Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
M
mould-vuecli3
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
lhfe
mould-vuecli3
Commits
a7b6aedc
Commit
a7b6aedc
authored
Sep 28, 2020
by
lipengcheng
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: api管理
parent
c27dc482
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
1854 additions
and
352 deletions
+1854
-352
index.js
src/api/index.js
+36
-0
main.js
src/main.js
+3
-1
axios.handleStatus.js
src/plugins/axios/axios.handleStatus.js
+8
-4
index.js
src/plugins/axios/index.js
+7
-4
index.js
src/router/index.js
+2
-2
global.js
src/store/global.js
+3
-3
home.vue
src/views/home.vue
+52
-1
yarn.lock
yarn.lock
+1743
-337
No files found.
src/api/index.js
0 → 100644
View file @
a7b6aedc
/**api管理页面
* apiMap中新增需要的api
*
* 导出的requestMap是一个对象,属性名为调用时的名称,值为实际请求方法
* 方法接收两个对象参数,第一个为需要传递的数据,第二个为请求的配置
* 第一个参数:如果为put/post/patch方法中的一种,会被转化为data属性;其余则是params
* 第二个参数:请求配置
* let xx = await this.$api.getBanner({ account: '18038018084', psw: '2' })
* let vv = await this.$api.login({ account: '18038018084', psw: '2' })
* 如果类似post的方法需要通过url后缀形式传递参数,在第二个参数config加上params属性即可:
* let vv = await this.$api.login({ account: '18038018084', psw: '2' },{ params: {} })
* 设置请求信息及请求头:
* let xx = await this.$api.getBanner({}, {timeout: 1000, headers:{ aaa: 111 }})
*/
import
{
request
}
from
'@/plugins/axios/index'
const
apiMap
=
{
getBanner
:
{
method
:
'get'
,
url
:
'/home/banner'
},
login
:
{
method
:
'post'
,
url
:
'/login'
}
}
const
requestMap
=
{}
Object
.
keys
(
apiMap
).
forEach
((
alias
)
=>
{
const
{
method
,
url
,
config
}
=
apiMap
[
alias
]
requestMap
[
alias
]
=
(
dataOrParams
=
{},
instanceConf
=
{})
=>
{
const
keyName
=
[
'PUT'
,
'POST'
,
'PATCH'
].
includes
(
method
)
?
'data'
:
'params'
return
request
({
method
:
method
.
toUpperCase
(),
url
,
[
keyName
]:
dataOrParams
,
...
Object
.
assign
(
config
||
{},
instanceConf
)
})
}
})
export
default
requestMap
src/main.js
View file @
a7b6aedc
...
@@ -4,7 +4,8 @@ import router from './router'
...
@@ -4,7 +4,8 @@ import router from './router'
import
store
from
'./store'
import
store
from
'./store'
import
'./registerServiceWorker'
import
'./registerServiceWorker'
import
'./assets/style/index.scss'
import
'./assets/style/index.scss'
import
requests
from
'@/plugins/axios/index'
import
*
as
requests
from
'@/plugins/axios/index'
import
api
from
'@/api/index.js'
import
VueBus
from
'vue-bus'
import
VueBus
from
'vue-bus'
import
VModal
from
'vue-js-modal'
import
VModal
from
'vue-js-modal'
import
moment
from
'@/plugins/moment.js'
import
moment
from
'@/plugins/moment.js'
...
@@ -30,6 +31,7 @@ Vue.use(VModal)
...
@@ -30,6 +31,7 @@ Vue.use(VModal)
Vue
.
config
.
productionTip
=
false
Vue
.
config
.
productionTip
=
false
Vue
.
prototype
.
$request
=
requests
.
request
Vue
.
prototype
.
$request
=
requests
.
request
Vue
.
prototype
.
$axios
=
requests
.
pureAxios
Vue
.
prototype
.
$axios
=
requests
.
pureAxios
Vue
.
prototype
.
$api
=
api
Vue
.
prototype
.
$mt
=
moment
Vue
.
prototype
.
$mt
=
moment
Vue
.
prototype
.
$
=
utils
Vue
.
prototype
.
$
=
utils
new
Vue
({
new
Vue
({
...
...
src/plugins/axios/axios.handleStatus.js
View file @
a7b6aedc
// 处理响应错误码
// 处理响应错误码
export
default
(
response
)
=>
{
export
default
(
response
)
=>
{
console
.
log
(
'response:'
,
response
)
const
status
=
response
.
status
const
status
=
response
.
status
// 如果http响应状态码response.status正常,则直接返回数据
// 如果http响应状态码response.status正常,则直接返回数据
if
((
status
>=
200
&&
status
<
300
)
||
status
===
304
)
{
if
((
status
>=
200
&&
status
<
=
300
)
||
status
===
304
)
{
return
response
.
data
return
response
.
data
}
else
{
}
else
{
// 判断后端返回的code
// 判断后端返回的code
let
errMsg
=
''
let
errMsg
=
''
const
code
=
parseInt
(
response
.
data
&&
response
.
data
.
code
)
const
code
=
parseInt
(
response
.
data
&&
response
.
data
.
code
)
console
.
log
(
'code:'
,
code
)
const
msg
=
(
response
.
data
||
{}).
msg
console
.
log
(
'msg:'
,
msg
)
switch
(
code
)
{
switch
(
code
)
{
case
400
:
case
400
:
break
break
...
@@ -22,6 +23,10 @@ export default (response) => {
...
@@ -22,6 +23,10 @@ export default (response) => {
errMsg
=
'未登录'
errMsg
=
'未登录'
// store.commit('changeLogin', {})
// store.commit('changeLogin', {})
break
break
case
404
:
errMsg
=
'请求地址错误'
// store.commit('changeLogin', {})
break
case
412
:
case
412
:
errMsg
=
'未找到有效session'
errMsg
=
'未找到有效session'
break
break
...
@@ -50,7 +55,6 @@ export default (response) => {
...
@@ -50,7 +55,6 @@ export default (response) => {
// errMsg = err.response.data.msg
// errMsg = err.response.data.msg
break
break
}
}
console
.
log
(
'errMsg:'
,
errMsg
)
return
{
return
{
code
,
code
,
errMsg
errMsg
...
...
src/plugins/axios/index.js
View file @
a7b6aedc
...
@@ -7,6 +7,8 @@ import setOptions from '@/plugins/axios/axios.setOptions.js'
...
@@ -7,6 +7,8 @@ import setOptions from '@/plugins/axios/axios.setOptions.js'
// import store from '@/store/index'
// import store from '@/store/index'
// import router from '@/router/index.js'
// import router from '@/router/index.js'
// import { Message, Notification } from 'element-ui'
// import { Message, Notification } from 'element-ui'
// import qs from 'qs'
// console.log('qs:',qs)
console
.
log
(
'axios-process.env:'
,
process
.
env
)
console
.
log
(
'axios-process.env:'
,
process
.
env
)
...
@@ -101,7 +103,8 @@ request.removeRequestInterceptors = removeRequestInterceptors
...
@@ -101,7 +103,8 @@ request.removeRequestInterceptors = removeRequestInterceptors
request
.
removeResponseInterceptors
=
removeResponseInterceptors
request
.
removeResponseInterceptors
=
removeResponseInterceptors
request
.
clearPendingPool
=
clearPendingPool
request
.
clearPendingPool
=
clearPendingPool
export
default
{
// export default{
pureAxios
,
// pureAxios,
request
// request
}
// }
export
{
pureAxios
,
request
}
src/router/index.js
View file @
a7b6aedc
import
Vue
from
'vue'
import
Vue
from
'vue'
import
VueRouter
from
'vue-router'
import
VueRouter
from
'vue-router'
import
store
from
'@/store/index.js'
import
store
from
'@/store/index.js'
import
requests
from
'@/plugins/axios/index'
import
{
request
}
from
'@/plugins/axios/index'
Vue
.
use
(
VueRouter
)
Vue
.
use
(
VueRouter
)
let
routes
=
[]
let
routes
=
[]
...
@@ -57,7 +57,7 @@ const router = new VueRouter({
...
@@ -57,7 +57,7 @@ const router = new VueRouter({
// 路由全局前置守卫
// 路由全局前置守卫
router
.
beforeEach
((
to
,
from
,
next
)
=>
{
router
.
beforeEach
((
to
,
from
,
next
)
=>
{
// 路由变化时取消所有非全局的pending状态的请求
// 路由变化时取消所有非全局的pending状态的请求
request
s
.
request
.
clearPendingPool
()
request
.
clearPendingPool
()
// 未登录情况下访问的页面需要登录,自动跳转到指定页面(登录页)
// 未登录情况下访问的页面需要登录,自动跳转到指定页面(登录页)
if
(
to
.
meta
.
needAuth
&&
!
store
.
getters
[
'authed'
])
next
({
name
:
'page2'
})
if
(
to
.
meta
.
needAuth
&&
!
store
.
getters
[
'authed'
])
next
({
name
:
'page2'
})
else
next
()
else
next
()
...
...
src/store/global.js
View file @
a7b6aedc
// 全局vuex信息
// 全局vuex信息
// getter调用示例:this.$store.getters['authed']
// getter调用示例:this.$store.getters['authed']
import
axios
from
'@/plugins/axios
'
// import axios from '@/plugins/axios/index
'
const
state
=
{
const
state
=
{
_authed
:
false
_authed
:
false
...
@@ -15,8 +15,8 @@ const mutations = {}
...
@@ -15,8 +15,8 @@ const mutations = {}
const
actions
=
{
const
actions
=
{
async
testAction
(
ctx
,
paylaod
)
{
async
testAction
(
ctx
,
paylaod
)
{
let
result
=
await
axios
.
get
(
'/home/banner?type=1&category=18'
)
//
let result = await axios.get('/home/banner?type=1&category=18')
console
.
log
(
'result:'
,
result
)
//
console.log('result:', result)
}
}
}
}
...
...
src/views/home.vue
View file @
a7b6aedc
...
@@ -55,7 +55,12 @@ export default {
...
@@ -55,7 +55,12 @@ export default {
}
}
},
},
created
()
{},
created
()
{},
mounted
()
{},
async
mounted
()
{
let
xx
=
await
this
.
$api
.
getBanner
({
pageSize
:
20
,
pIndex
:
2
})
console
.
log
(
'xx:'
,
xx
)
let
vv
=
await
this
.
$api
.
login
({
account
:
'18038018084'
,
psw
:
'2'
})
console
.
log
(
'vv:'
,
vv
)
},
methods
:
{
methods
:
{
ttt
()
{
ttt
()
{
this
.
$store
.
dispatch
(
'testAction'
)
this
.
$store
.
dispatch
(
'testAction'
)
...
@@ -109,6 +114,52 @@ export default {
...
@@ -109,6 +114,52 @@ export default {
setTimeout
(()
=>
{
setTimeout
(()
=>
{
cancelFn
()
cancelFn
()
},
500
)
},
500
)
},
// get写法1
async
getMethod1
()
{
let
params
=
{
a
:
1
,
type
:
1
,
category
:
18
}
let
result
=
await
this
.
$request
.
get
(
'/home/banner'
,
{
params
})
console
.
log
(
'getMethod1 result1:'
,
result
)
},
// get写法2
async
getMethod2
()
{
let
params
=
{
a
:
2
,
type
:
1
,
category
:
18
}
let
result
=
await
this
.
$request
({
method
:
'GET'
,
url
:
'/home/banner'
,
params
:
params
})
console
.
log
(
'getMethod2 result:'
,
result
)
},
// post写法1
async
postMethod1
()
{
const
paramObj
=
{
account
:
'18038018084'
,
psw
:
'111'
}
let
result
=
await
this
.
$request
.
post
(
'/login'
,
paramObj
)
console
.
log
(
'postMethod1 result:'
,
result
)
},
// post写法2
async
postMethod2
()
{
const
paramObj
=
{
account
:
'18038018084'
,
psw
:
'111'
}
let
result
=
await
this
.
$request
({
method
:
'POST'
,
url
:
'/login'
,
data
:
paramObj
})
console
.
log
(
'postMethod2 result:'
,
result
)
}
}
}
}
}
}
...
...
yarn.lock
View file @
a7b6aedc
This source diff could not be displayed because it is too large. You can
view the blob
instead.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment