Skip to content

A
adminDemo
Commit 625be390 by 黄志甲
Options

修改请求操作以及修改

parent 1a67d4a5
Showing with 309 additions and 73 deletions
src/App.vue
...@@ -16,4 +16,8 @@ export default { ...@@ -16,4 +16,8 @@ export default {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.newInput{
width: 150px;
}
</style> </style>
src/commons/api/login.js 0 → 100644
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
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
...@@ -2,29 +2,17 @@ ...@@ -2,29 +2,17 @@
* 函数的返回值：promise * 函数的返回值：promise
* 第一个参数（url），第二个参数（post/get）--字符串*/ * 第一个参数（url），第二个参数（post/get）--字符串*/
import http from './http' import http from './http'
/** /**
* 基础请求 * 基础请求
* @param url 请求路径 * @param url 请求路径
* @param params 请求参数 * @param params 请求参数
* @param method 请求方式: POST(默认)、GET * @param method 请求方式: POST(默认)、GET
* */ * */
export const sendRequest = (url, params, method) => { export const sendRequest = (obj) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
//调用请求方法 //调用请求方法
http({ http(obj).then(res => {
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)
if(res.data.code==200){ if(res.data.code==200){
console.log("进入这里了") console.log("进入这里了")
resolve(res.data) resolve(res.data)
......
src/commons/http/http.js
...@@ -5,7 +5,7 @@ import router from '../../router/index' //引入路由(接口拦截操作) ...@@ -5,7 +5,7 @@ import router from '../../router/index' //引入路由(接口拦截操作)
//所有请求的携带的参数设置 //所有请求的携带的参数设置
const http = axios.create({ const http = axios.create({
baseURL: '', // 地址 baseURL: 'http://baidu.com', // 地址
timeout: 30000 timeout: 30000
}) })
//设置拦截器 //设置拦截器
...@@ -30,7 +30,7 @@ http.interceptors.request.use(function (config) { ...@@ -30,7 +30,7 @@ http.interceptors.request.use(function (config) {
}) })
http.interceptors.response.use(res => { http.interceptors.response.use(res => {
//取消表格loading状态 //取消表格loading状态
//store.state.loading = false //store.state.loading = false
//回调成功（success = false） //回调成功（success = false）
......
src/main.js
...@@ -10,10 +10,32 @@ Vue.config.productionTip = false ...@@ -10,10 +10,32 @@ Vue.config.productionTip = false
Vue.use(ViewUI); 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 */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,
components: { App }, components: {
App
},
template: '<App/>' template: '<App/>'
}) })
src/router/index.js
...@@ -8,19 +8,27 @@ import userList from "@/view/user/list.vue" //列表 ...@@ -8,19 +8,27 @@ import userList from "@/view/user/list.vue" //列表
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
mode:'history',
routes: [{ routes: [{
path: '/', path: '/',
name: 'main', redirect: '/login'
component: Main, },
children: [{ {
path: '/list', path: '/login',
name: "login",
component: login,
},{
path: '/',
name: 'main',
component: Main,
meta: {
requireAuth: true
},
children: [{
path: '/user/list',
name: "userList", name: "userList",
component: userList, component: userList,
} }]
] }
},{ ]
path: '/login',
name: "login",
component: login,
}]
}) })
src/router/menu.js
...@@ -3,12 +3,7 @@ const menu = [{ ...@@ -3,12 +3,7 @@ const menu = [{
icon: 'ios-people', icon: 'ios-people',
children: [{ children: [{
title: '会员列表', title: '会员列表',
path: '/list', path: '/user/list',
action: 'member-page'
},
{
title: '登录',
path: '/login',
action: 'member-page' action: 'member-page'
} }
] ]
......
src/view/Main.vue
<template> <template>
<div class="layout"> <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']"> <Menu active-name="1-2" theme="dark" width="auto" :open-names="['1']">
<Submenu :name="index" v-for="(item,index) in menu" :key="index"> <Submenu :name="index" v-for="(item,index) in menu" :key="index">
<template slot="title"> <template slot="title" >
<Icon :type="item.icon"></Icon> <Icon :type="item.icon"></Icon>
{{item.title}} {{item.title}}
</template> </template>
...@@ -14,18 +17,18 @@ ...@@ -14,18 +17,18 @@
</Menu> </Menu>
</Sider> </Sider>
<Layout :style="{marginLeft: '200px'}"> <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"> <Row type="flex" justify="end" align="middle">
<div class="name">name</div> <div class="name">name</div>
<Button type="error">退出登录</Button> <Button type="error" size="small" @click="loginOut">退出登录</Button>
</Row> </Row>
</Header> </Header>
<Content :style="{padding: '0 16px 16px'}"> <Content :style="{padding: '0 16px 16px'}">
<Breadcrumb :style="{margin: '16px 0'}"> <Breadcrumb :style="{margin: '8px 0'}">
<BreadcrumbItem>{{menu[menuIndex].title}}</BreadcrumbItem> <BreadcrumbItem>{{menu[menuIndex].title}}</BreadcrumbItem>
<BreadcrumbItem>{{menu[menuIndex].children[menuChildren].title}}</BreadcrumbItem> <BreadcrumbItem>{{menu[menuIndex].children[menuChildren].title}}</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
<div style="height:750px"> <div class="content">
<router-view/> <router-view/>
</div> </div>
</Content> </Content>
...@@ -40,7 +43,7 @@ ...@@ -40,7 +43,7 @@
menu:menus, menu:menus,
menuIndex:0, menuIndex:0,
menuChildren:0, menuChildren:0,
type:0 type:0,
} }
}, },
created() { created() {
...@@ -52,6 +55,10 @@ ...@@ -52,6 +55,10 @@
onSelect(index,i){ onSelect(index,i){
this.menuIndex = index this.menuIndex = index
this.menuChildren = i this.menuChildren = i
},
loginOut(){
localStorage.removeItem('token')
this.$router.push('/login')
} }
} }
} }
...@@ -62,10 +69,11 @@ ...@@ -62,10 +69,11 @@
<style scoped> <style scoped>
.layout { .layout {
border: 1px solid #d7dde4; border: 1px solid #d7dde4;
background: #f5f7f9; background: #e6e6e6;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
.layout-header-bar { .layout-header-bar {
...@@ -77,4 +85,42 @@ ...@@ -77,4 +85,42 @@
.name { .name {
margin-right: 30px; 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> </style>
src/view/login/login.vue
<template> <template>
<div> <Row type="flex" justify="center" align="middle" style="height:100vh" class="bgRow">
<div> <Card class="cardSize" style="text-align: center;">
list <h1>后台管理系统</h1>
</div> <Form :model="formItem" style="margin-top:10px;" :rules="ruleValidate" ref="formItem">
</div> <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> </template>
<script> <script>
import { login } from "@/commons/api/login.js"
export default { export default {
data(){ data() {
return { 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> </script>
<style> <style scoped="scoped">
.cardSize {
padding: 25px 50px 30px 50px;
width: 500px;
}
.bgRow{
background-color: #20222A;
}
</style> </style>
src/view/user/list.vue
<template> <template>
<Card > <div>
<Table border :columns="columns" :data="list"></Table> <Card>
</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> </template>
<script> <script>
import { import { getList } from "@/commons/api/userList.js"
sendRequest,
getImgStream,
fileUpload
} from '../../commons/http/api'
export default { export default {
data() { data() {
return { return {
list: [], list: [],
columns: [ columns: [{
{
title: '内容', title: '内容',
key: 'text' key: 'text'
}, },
{ {
title:"作者ID", title: "作者ID",
key:"uid" key: "uid"
}, },
{ {
title: '作者', title: '作者',
...@@ -30,7 +69,24 @@ ...@@ -30,7 +69,24 @@
title: '时间', title: '时间',
key: 'passtime' key: 'passtime'
}, },
{
title: '操作',
width: '150',
solt:"operate"
},
], ],
//分页
pageInfo: {
total: 100, //总条数
page: 1, //页码
size: 10 ,//一页的数量
type:"text"
},
//搜索
searchForm: {}
} }
}, },
created() { created() {
...@@ -39,20 +95,68 @@ ...@@ -39,20 +95,68 @@
methods: { methods: {
//示例 //示例
getList() { getList() {
sendRequest('https://api.apiopen.top/getJoke?page=1&count=5&type=text').then(res => { this.pageInfo.count = this.pageInfo.size //实例接口操作
console.log("POST请求") getList(this.pageInfo).then(res => {
this.list = res.result this.list = res.result
}).catch(err => { }).catch(err=>{
console.log(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> </script>
<style> <style>
img{ img {
width: 100px; 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> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment