Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
A
adminDemo
Overview
Overview
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
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄志甲
adminDemo
Commits
625be390
Commit
625be390
authored
Mar 04, 2020
by
黄志甲
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改请求操作以及修改
parent
1a67d4a5
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
309 additions
and
73 deletions
+309
-73
src/App.vue
+4
-0
src/commons/api/login.js
+9
-0
src/commons/api/userList.js
+9
-0
src/commons/http/api.js
+3
-15
src/commons/http/http.js
+2
-2
src/main.js
+23
-1
src/router/index.js
+20
-12
src/router/menu.js
+1
-6
src/view/Main.vue
+54
-8
src/view/login/login.vue
+61
-10
src/view/user/list.vue
+123
-19
No files found.
src/App.vue
View file @
625be390
...
...
@@ -16,4 +16,8 @@ export default {
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
}
.newInput
{
width
:
150px
;
}
</
style
>
src/commons/api/login.js
0 → 100644
View file @
625be390
import
{
sendRequest
}
from
"../http/api.js"
export
const
login
=
params
=>
{
return
sendRequest
({
url
:
'/user/info'
,
method
:
'post'
,
params
});
}
src/commons/api/userList.js
0 → 100644
View file @
625be390
import
{
sendRequest
}
from
"../http/api.js"
export
const
getList
=
params
=>
{
return
sendRequest
({
baseURL
:
'https://api.apiopen.top/getJoke'
,
method
:
'post'
,
params
});
}
src/commons/http/api.js
View file @
625be390
...
...
@@ -2,29 +2,17 @@
* 函数的返回值:promise
* 第一个参数(url),第二个参数(post/get)--字符串*/
import
http
from
'./http'
/**
* 基础请求
* @param url 请求路径
* @param params 请求参数
* @param method 请求方式: POST(默认)、GET
* */
export
const
sendRequest
=
(
url
,
params
,
method
)
=>
{
export
const
sendRequest
=
(
obj
)
=>
{
return
new
Promise
((
resolve
,
reject
)
=>
{
//调用请求方法
http
({
url
:
url
,
data
:
params
||
{},
method
:
method
||
'POST'
}).
then
(
res
=>
{
// if (res.status === 200) {
// if (res.data.success) {
// resolve(res.data)
// } else {
// reject(JSON.stringify(res.data))
// }
// }
console
.
log
(
res
.
data
.
code
)
http
(
obj
).
then
(
res
=>
{
if
(
res
.
data
.
code
==
200
){
console
.
log
(
"进入这里了"
)
resolve
(
res
.
data
)
...
...
src/commons/http/http.js
View file @
625be390
...
...
@@ -5,7 +5,7 @@ import router from '../../router/index' //引入路由(接口拦截操作)
//所有请求的携带的参数设置
const
http
=
axios
.
create
({
baseURL
:
''
,
// 地址
baseURL
:
'
http://baidu.com
'
,
// 地址
timeout
:
30000
})
//设置拦截器
...
...
@@ -30,7 +30,7 @@ http.interceptors.request.use(function (config) {
})
http
.
interceptors
.
response
.
use
(
res
=>
{
http
.
interceptors
.
response
.
use
(
res
=>
{
//取消表格loading状态
//store.state.loading = false
//回调成功(success = false)
...
...
src/main.js
View file @
625be390
...
...
@@ -10,10 +10,32 @@ Vue.config.productionTip = false
Vue
.
use
(
ViewUI
);
router
.
beforeEach
((
to
,
from
,
next
)
=>
{
if
(
to
.
matched
.
some
(
m
=>
m
.
meta
.
requireAuth
))
{
// 对路由进行验证
if
(
localStorage
.
getItem
(
'token'
))
{
// 已经登陆
next
()
// 正常跳转到你设置好的页面
}
else
{
// 未登录则跳转到登陆界面
next
({
path
:
'/login'
})
}
}
else
{
next
()
}
})
/* eslint-disable no-new */
new
Vue
({
el
:
'#app'
,
router
,
components
:
{
App
},
components
:
{
App
},
template
:
'<App/>'
})
src/router/index.js
View file @
625be390
...
...
@@ -8,19 +8,27 @@ import userList from "@/view/user/list.vue" //列表
Vue
.
use
(
Router
)
export
default
new
Router
({
mode
:
'history'
,
routes
:
[{
path
:
'/'
,
name
:
'main'
,
component
:
Main
,
children
:
[{
path
:
'/list'
,
path
:
'/'
,
redirect
:
'/login'
},
{
path
:
'/login'
,
name
:
"login"
,
component
:
login
,
},{
path
:
'/'
,
name
:
'main'
,
component
:
Main
,
meta
:
{
requireAuth
:
true
},
children
:
[{
path
:
'/user/list'
,
name
:
"userList"
,
component
:
userList
,
}
]
},{
path
:
'/login'
,
name
:
"login"
,
component
:
login
,
}]
}]
}
]
})
src/router/menu.js
View file @
625be390
...
...
@@ -3,12 +3,7 @@ const menu = [{
icon
:
'ios-people'
,
children
:
[{
title
:
'会员列表'
,
path
:
'/list'
,
action
:
'member-page'
},
{
title
:
'登录'
,
path
:
'/login'
,
path
:
'/user/list'
,
action
:
'member-page'
}
]
...
...
src/view/Main.vue
View file @
625be390
<
template
>
<div
class=
"layout"
>
<Sider
:style=
"
{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
<Sider
:style=
"
{position: 'fixed', height: '100vh', left: 0, overflow: 'auto',backgroundColor:'#20222A' }">
<div
class=
"title"
>
<h4>
后台管理系统
</h4>
</div>
<Menu
active-name=
"1-2"
theme=
"dark"
width=
"auto"
:open-names=
"['1']"
>
<Submenu
:name=
"index"
v-for=
"(item,index) in menu"
:key=
"index"
>
<template
slot=
"title"
>
<template
slot=
"title"
>
<Icon
:type=
"item.icon"
></Icon>
{{
item
.
title
}}
</
template
>
...
...
@@ -14,18 +17,18 @@
</Menu>
</Sider>
<Layout
:style=
"{marginLeft: '200px'}"
>
<Header
:style=
"{
background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)
'}"
>
<Header
:style=
"{
background: '#fff',borderBottom:'1px solid rgba(0, 0, 0, .1)',height: '50px',lineHeight:'50px
'}"
>
<Row
type=
"flex"
justify=
"end"
align=
"middle"
>
<div
class=
"name"
>
name
</div>
<Button
type=
"error"
>
退出登录
</Button>
<Button
type=
"error"
size=
"small"
@
click=
"loginOut"
>
退出登录
</Button>
</Row>
</Header>
<Content
:style=
"{padding: '0 16px 16px'}"
>
<Breadcrumb
:style=
"{margin: '
16
px 0'}"
>
<Breadcrumb
:style=
"{margin: '
8
px 0'}"
>
<BreadcrumbItem>
{{menu[menuIndex].title}}
</BreadcrumbItem>
<BreadcrumbItem>
{{menu[menuIndex].children[menuChildren].title}}
</BreadcrumbItem>
</Breadcrumb>
<div
style=
"height:750px
"
>
<div
class=
"content
"
>
<router-view/>
</div>
</Content>
...
...
@@ -40,7 +43,7 @@
menu
:
menus
,
menuIndex
:
0
,
menuChildren
:
0
,
type
:
0
type
:
0
,
}
},
created
()
{
...
...
@@ -52,6 +55,10 @@
onSelect
(
index
,
i
){
this
.
menuIndex
=
index
this
.
menuChildren
=
i
},
loginOut
(){
localStorage
.
removeItem
(
'token'
)
this
.
$router
.
push
(
'/login'
)
}
}
}
...
...
@@ -62,10 +69,11 @@
<
style
scoped
>
.layout
{
border
:
1px
solid
#d7dde4
;
background
:
#
f5f7f9
;
background
:
#
e6e6e6
;
position
:
relative
;
border-radius
:
4px
;
overflow
:
hidden
;
}
.layout-header-bar
{
...
...
@@ -77,4 +85,42 @@
.name
{
margin-right
:
30px
;
}
.ivu-menu-dark
{
background
:
#20222A
;
}
.ivu-menu-dark.ivu-menu-vertical
.ivu-menu-submenu
.ivu-menu-item-active
,
.ivu-menu-dark.ivu-menu-vertical
.ivu-menu-submenu
.ivu-menu-item-active
:hover
{
border-right
:
none
;
color
:
#fff
;
background
:
#2d8cf0
!important
;
}
.title
{
height
:
50px
;
text-align
:
center
;
line-height
:
50px
;
color
:
#EEEEEE
;
border-bottom
:
1px
solid
rgba
(
0
,
0
,
0
,
.1
);
}
.content
{
overflow
:
auto
;
height
:
750px
;
}
.content
::-webkit-scrollbar
{
width
:
4px
;
background-color
:
#d8d8d8
;
}
/* 滚动槽 */
.content
::-webkit-scrollbar-track
{
border-radius
:
10px
;
}
.content
::-webkit-scrollbar-thumb
{
background-color
:
#bfc1c4
;
}
.ivu-layout
{
background-color
:
#f5f5f5
;
}
</
style
>
src/view/login/login.vue
View file @
625be390
<
template
>
<div>
<div>
list
</div>
</div>
<Row
type=
"flex"
justify=
"center"
align=
"middle"
style=
"height:100vh"
class=
"bgRow"
>
<Card
class=
"cardSize"
style=
"text-align: center;"
>
<h1>
后台管理系统
</h1>
<Form
:model=
"formItem"
style=
"margin-top:10px;"
:rules=
"ruleValidate"
ref=
"formItem"
>
<FormItem
prop=
"number"
>
<Input
v-model=
"formItem.number"
placeholder=
"请输入账号"
size=
"large"
></Input>
</FormItem>
<FormItem
prop=
"password"
>
<Input
v-model=
"formItem.password"
type=
"password"
password
placeholder=
"请输入密码"
size=
"large"
></Input>
</FormItem>
<FormItem>
<Button
type=
"primary"
long
size=
"large"
@
click=
"login('formItem')"
>
登录
</Button>
</FormItem>
</Form>
</Card>
</Row>
</
template
>
<
script
>
import
{
login
}
from
"@/commons/api/login.js"
export
default
{
data
(){
data
()
{
return
{
test
:
"我是登录页"
test
:
"我是登录页"
,
formItem
:
{
user
:
''
,
password
:
''
}
,
//form表单
//验证数据
ruleValidate
:{
number
:[{
required
:
true
,
message
:
'请输入账号'
,
trigger
:
'blur'
}],
password
:[{
required
:
true
,
message
:
'请输入密码'
,
trigger
:
'blur'
}]
}
}
},
methods
:{
methods
:
{
login
(
name
){
// login(this.formItem).then(res=>{
// localStorage.setItem('token','15154848df4s8f4s84sd84s')
// this.$router.push({path:'/user/list'})
// }).catch(err=>{
// })
this
.
$refs
[
name
].
validate
((
valid
)
=>
{
if
(
valid
)
{
this
.
$Message
.
success
(
'Success!'
);
localStorage
.
setItem
(
'token'
,
'15154848df4s8f4s84sd84s'
)
this
.
$router
.
push
({
path
:
'/user/list'
})
}
else
{
this
.
$Message
.
error
(
'请输入账号和密码'
);
}
})
}
}
}
</
script
>
<
style
>
<
style
scoped=
"scoped"
>
.cardSize
{
padding
:
25px
50px
30px
50px
;
width
:
500px
;
}
.bgRow
{
background-color
:
#20222A
;
}
</
style
>
src/view/user/list.vue
View file @
625be390
<
template
>
<Card
>
<Table
border
:columns=
"columns"
:data=
"list"
></Table>
</Card
>
<div>
<Card>
<Row
type=
"flex"
justify=
"space-between"
>
<Form
:model=
"searchForm"
:label-width=
"40"
inline
>
<FormItem
label=
"昵称"
class=
"ivuFormItem"
>
<Input
v-model=
"searchForm.name"
placeholder=
"请输入昵称"
class=
"newInput"
></Input>
</FormItem>
<FormItem
label=
"ID"
class=
"ivuFormItem"
>
<Input
v-model=
"searchForm.id"
placeholder=
"请输入ID"
class=
"newInput"
></Input>
</FormItem>
<FormItem
label=
"类型"
class=
"ivuFormItem"
>
<Select
v-model=
"searchForm.type"
placeholder=
"请选择类型"
class=
"newInput"
clearable
@
on-clear=
"clearFun"
>
<Option
value=
"text"
>
文字
</Option>
<Option
value=
"video"
>
视频
</Option>
<Option
value=
"img"
>
图片
</Option>
</Select>
</FormItem>
<FormItem
label=
"日期"
class=
"ivuFormItem"
>
<DatePicker
@
on-change=
"dateChange"
type=
"daterange"
placement=
"bottom-end"
placeholder=
"请选择日期"
class=
"newInput"
></DatePicker>
</FormItem>
<FormItem
class=
"ivuFormItem"
>
<Button
type=
"primary"
@
click=
"searchFun"
>
<Icon
type=
"md-search"
/>
搜索
</Button>
</FormItem>
</Form>
<div>
<Button
type=
"primary"
>
<Icon
type=
"md-add"
/>
添加
</Button>
</div>
</Row>
</Card>
<!-- 列表 -->
<Table
border
:columns=
"columns"
:data=
"list"
class=
"tab"
></Table>
<!-- 分页插件 -->
<Row
class=
"pageClass"
>
<Page
:total=
"pageInfo.total"
:page-size=
"pageInfo.size"
@
on-change=
"pageFun"
:current=
"pageInfo.page"
@
on-page-size-change=
"sizeNumFun"
show-total
show-elevator
show-sizer
style=
"background-color: #FFFFFF;"
/>
</Row>
<!-- 弹出操作 -->
</div>
</
template
>
<
script
>
import
{
sendRequest
,
getImgStream
,
fileUpload
}
from
'../../commons/http/api'
import
{
getList
}
from
"@/commons/api/userList.js"
export
default
{
data
()
{
return
{
list
:
[],
columns
:
[
{
columns
:
[{
title
:
'内容'
,
key
:
'text'
},
{
title
:
"作者ID"
,
key
:
"uid"
title
:
"作者ID"
,
key
:
"uid"
},
{
title
:
'作者'
,
...
...
@@ -30,7 +69,24 @@
title
:
'时间'
,
key
:
'passtime'
},
{
title
:
'操作'
,
width
:
'150'
,
solt
:
"operate"
},
],
//分页
pageInfo
:
{
total
:
100
,
//总条数
page
:
1
,
//页码
size
:
10
,
//一页的数量
type
:
"text"
},
//搜索
searchForm
:
{}
}
},
created
()
{
...
...
@@ -39,20 +95,68 @@
methods
:
{
//示例
getList
()
{
sendRequest
(
'https://api.apiopen.top/getJoke?page=1&count=5&type=text'
).
then
(
res
=>
{
console
.
log
(
"POST请求"
)
this
.
pageInfo
.
count
=
this
.
pageInfo
.
size
//实例接口操作
getList
(
this
.
pageInfo
).
then
(
res
=>
{
this
.
list
=
res
.
result
}).
catch
(
err
=>
{
console
.
log
(
err
)
}).
catch
(
err
=>
{
console
.
log
(
'错误'
,
err
)
})
}
},
//下拉框清除操作
clearFun
(){
this
.
searchForm
.
type
=
"text"
},
//搜索
searchFun
(){
this
.
pageInfo
.
page
=
1
//重置分页
let
obj
=
Object
.
assign
(
this
.
pageInfo
,
this
.
searchForm
)
//合并对象,将搜索的内容合并与分页
this
.
pageInfo
=
obj
//再赋值与分页infor
this
.
getList
()
},
//翻页操作
pageFun
(
pageIndex
)
{
this
.
pageInfo
.
page
=
pageIndex
this
.
getList
()
},
//切换条数
sizeNumFun
(
size
)
{
this
.
pageInfo
.
size
=
size
this
.
pageInfo
.
page
=
1
//切换后将返回第一页
this
.
getList
()
},
//时间选择器
dateChange
(
date
){
console
.
log
(
date
[
0
])
//起始时间
console
.
log
(
date
[
1
])
//终止时间
},
}
}
</
script
>
<
style
>
img
{
img
{
width
:
100px
;
height
:
200px
;
height
:
200px
;
}
.tab
{
margin-top
:
10px
;
background-color
:
#FFFFFF
;
}
.pageClass
{
background-color
:
#FFFFFF
;
padding
:
16px
16px
;
width
:
100%
;
position
:
fixed
;
bottom
:
0
;
background-color
:
#FFFFFF
;
}
.ivuFormItem
{
margin-bottom
:
0
;
}
</
style
>
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