Browse Source

优化 修改

master
wen 2 years ago
parent
commit
367c97b06d
  1. 27
      src/api/user.js
  2. 6
      src/layout/components/Navbar.vue
  3. 2
      src/layout/components/Sidebar/Logo.vue
  4. 39
      src/layout/index.vue
  5. 2
      src/main.js
  6. 12
      src/router/index.js
  7. 2
      src/styles/sidebar.scss
  8. 2
      src/utils/auth.js
  9. 2
      src/utils/get-page-title.js
  10. 144
      src/utils/request.js
  11. 28
      src/views/dashboard/index.vue
  12. 87
      src/views/form/index.vue
  13. 88
      src/views/login/index.vue
  14. 7
      src/views/nested/menu1/index.vue
  15. 7
      src/views/nested/menu1/menu1-1/index.vue
  16. 7
      src/views/nested/menu1/menu1-2/index.vue
  17. 5
      src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
  18. 5
      src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
  19. 5
      src/views/nested/menu1/menu1-3/index.vue
  20. 5
      src/views/nested/menu2/index.vue
  21. 79
      src/views/table/index.vue
  22. 78
      src/views/tree/index.vue

27
src/api/user.js

@ -1,24 +1,17 @@
import request from '@/utils/request' import request from '@/utils/request'
export function login(data) { export function captcha(datas) {
return request({ return request({
url: '/vue-admin-template/user/login', url: '/api/captcha',
method: 'post', method: 'post',
data data: datas
}) })
} }
export function getInfo(token) { export function login(datas) {
return request({ return request({
url: '/vue-admin-template/user/info', url: '/api/login',
method: 'get', method: 'post',
params: { token } data: datas
}) })
} }
export function logout() {
return request({
url: '/vue-admin-template/user/logout',
method: 'post'
})
}

6
src/layout/components/Navbar.vue

@ -4,7 +4,7 @@
<breadcrumb class="breadcrumb-container" /> <breadcrumb class="breadcrumb-container" />
<div class="right-menu"> <!-- <div class="right-menu">
<el-dropdown class="avatar-container" trigger="click"> <el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
@ -21,7 +21,7 @@
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div> -->
</div> </div>
</template> </template>
@ -46,7 +46,7 @@ export default {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch('app/toggleSideBar')
}, },
async logout() { async logout() {
await this.$store.dispatch('user/logout') //await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`) this.$router.push(`/login?redirect=${this.$route.fullPath}`)
} }
} }

2
src/layout/components/Sidebar/Logo.vue

@ -24,7 +24,7 @@ export default {
}, },
data() { data() {
return { return {
title: 'Vue Admin Template', title: '嘉洛马',
logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png' logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
} }
} }

39
src/layout/index.vue

@ -1,12 +1,29 @@
<template> <template>
<div :class="classObj" class="app-wrapper"> <div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <div class="toptitle clearfix">
<sidebar class="sidebar-container" /> <a class="leftk" href="javascript:;">
<div class="main-container"> <img src="" alt="图片">
<div :class="{'fixed-header':fixedHeader}">
<navbar /> </a>
</div> <div class="rightk tpriht">
<app-main /> <a id="dLabel" href="javascript:;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<img class="mailtp verMiddle" src="" alt="图片">
<span class="verMiddle glyphicon glyphicon-menu-down"></span>
</a>
<em class="erectline"></em>
<!-- <a class="Cache tuichu" href="/admin.php/Cache/index.html">清除缓存</a> -->
<el-button class="quit" @click="dengchu" id="tuichu" size="mini" round>退出</el-button>
</div>
</div>
<div class="content_main">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" />
<div class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
</div>
<app-main />
</div>
</div> </div>
</div> </div>
</template> </template>
@ -90,4 +107,12 @@ export default {
.mobile .fixed-header { .mobile .fixed-header {
width: 100%; width: 100%;
} }
.content_main{margin-top:91px;}
.toptitle{color:#FFF;height:91px;padding:0 6% 0 34px;z-index:1002;background-color:#2b3245;position:fixed;top:0;left:0;right:0;}
.toptitle .leftk{float:left;margin-top:18px;}
.toptitle .leftk>img{vertical-align:middle;}
.toptitle .leftk>i{vertical-align:middle;color:#FFF;font-size:30px;margin:6px 0 0 15px;}
.toptitle .rightk{float:right;margin-top:24px;position:relative;}
.toptitle .erectline{margin:0 18px;display:inline-block;vertical-align:middle;height:40px;width:1px;background-color:#414758;}
</style> </style>

2
src/main.js

@ -13,7 +13,7 @@ import store from './store'
import router from './router' import router from './router'
import '@/icons' // icon import '@/icons' // icon
import '@/permission' // permission control如果 //import '@/permission' // permission control如果
/** /**
* If you don't want to use mock-server * If you don't want to use mock-server

12
src/router/index.js

@ -45,7 +45,7 @@ export const constantRoutes = [
{ {
path: '/', path: '/',
component: Layout, component: Layout,
redirect: '/filemange', redirect: '/filemange', // 重定向地址
children: [{ children: [{
path: 'filemange', path: 'filemange',
name: 'Filemange', name: 'Filemange',
@ -190,16 +190,6 @@ export const constantRoutes = [
// ] // ]
// }, // },
// {
// path: 'external-link',
// component: Layout,
// children: [
// {
// path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
// meta: { title: 'External Link', icon: 'link' }
// }
// ]
// },
// 404 page must be placed at the end !!! // 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true } { path: '*', redirect: '/404', hidden: true }

2
src/styles/sidebar.scss

@ -14,7 +14,7 @@
height: 100%; height: 100%;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
top: 0; top: 91px;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1001; z-index: 1001;

2
src/utils/auth.js

@ -1,6 +1,6 @@
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
const TokenKey = 'vue_admin_template_token' const TokenKey = 'jialuoma_token'
export function getToken() { export function getToken() {
return Cookies.get(TokenKey) return Cookies.get(TokenKey)

2
src/utils/get-page-title.js

@ -1,6 +1,6 @@
import defaultSettings from '@/settings' import defaultSettings from '@/settings'
const title = defaultSettings.title || 'Vue Admin Template' const title = defaultSettings.title || '嘉洛马'
export default function getPageTitle(pageTitle) { export default function getPageTitle(pageTitle) {
if (pageTitle) { if (pageTitle) {

144
src/utils/request.js

@ -1,85 +1,89 @@
import axios from 'axios' import axios from 'axios'
import { MessageBox, Message } from 'element-ui' //import { MessageBox, Message } from 'element-ui'
import store from '@/store' //import store from '@/store'
import { getToken } from '@/utils/auth' //import { getToken } from '@/utils/auth'
// create an axios instance // create an axios instance
const service = axios.create({ const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url //baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests // withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout headers: { 'Content-Type': 'multipart/form-data' },
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded'
// },
timeout: 0 // request timeout
}) })
// request interceptor // request interceptor
service.interceptors.request.use( // service.interceptors.request.use(
config => { // config => {
// do something before request is sent // // do something before request is sent
if (store.getters.token) { // if (store.getters.token) {
// let each request carry token // // let each request carry token
// ['X-Token'] is a custom headers key // // ['X-Token'] is a custom headers key
// please modify it according to the actual situation // // please modify it according to the actual situation
config.headers['X-Token'] = getToken() // config.headers['X-Token'] = getToken()
} // }
return config // return config
}, // },
error => { // error => {
// do something with request error // // do something with request error
console.log(error) // for debug // console.log(error) // for debug
return Promise.reject(error) // return Promise.reject(error)
} // }
) // )
// response interceptor // // response interceptor
service.interceptors.response.use( // service.interceptors.response.use(
/** // /**
* If you want to get http information such as headers or status // * If you want to get http information such as headers or status
* Please return response => response // * Please return response => response
*/ // */
/** // /**
* Determine the request status by custom code // * Determine the request status by custom code
* Here is just an example // * Here is just an example
* You can also judge the status by HTTP Status Code // * You can also judge the status by HTTP Status Code
*/ // */
response => { // response => {
const res = response.data // const res = response.data
// if the custom code is not 20000, it is judged as an error. // // if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) { // if (res.code !== 20000) {
Message({ // Message({
message: res.message || 'Error', // message: res.message || 'Error',
type: 'error', // type: 'error',
duration: 5 * 1000 // duration: 5 * 1000
}) // })
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; // // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) { // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login // // to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { // MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login', // confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel', // cancelButtonText: 'Cancel',
type: 'warning' // type: 'warning'
}).then(() => { // }).then(() => {
store.dispatch('user/resetToken').then(() => { // store.dispatch('user/resetToken').then(() => {
location.reload() // location.reload()
}) // })
}) // })
} // }
return Promise.reject(new Error(res.message || 'Error')) // return Promise.reject(new Error(res.message || 'Error'))
} else { // } else {
return res // return res
} // }
}, // },
error => { // error => {
console.log('err' + error) // for debug // console.log('err' + error) // for debug
Message({ // Message({
message: error.message, // message: error.message,
type: 'error', // type: 'error',
duration: 5 * 1000 // duration: 5 * 1000
}) // })
return Promise.reject(error) // return Promise.reject(error)
} // }
) // )
export default service export default service

28
src/views/dashboard/index.vue

@ -1,28 +0,0 @@
<template>
<div class="dashboard-container">
<div class="dashboard-text">
<el-button type="primary">创建目录</el-button>
</div>
</div>
</template>
<script>
//import { mapGetters } from 'vuex'
export default {
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>

87
src/views/form/index.vue

@ -1,87 +0,0 @@
<template>
<div class="app-container">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
</el-col>
<el-col :span="2" class="line">-</el-col>
<el-col :span="11">
<el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
</el-col>
</el-form-item>
<el-form-item label="Instant delivery">
<el-switch v-model="form.delivery" />
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="Online activities" name="type" />
<el-checkbox label="Promotion activities" name="type" />
<el-checkbox label="Offline activities" name="type" />
<el-checkbox label="Simple brand exposure" name="type" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="form.resource">
<el-radio label="Sponsor" />
<el-radio label="Venue" />
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="form.desc" type="textarea" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button @click="onCancel">Cancel</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
this.$message('submit!')
},
onCancel() {
this.$message({
message: 'cancel!',
type: 'warning'
})
}
}
}
</script>
<style scoped>
.line{
text-align: center;
}
</style>

88
src/views/login/index.vue

@ -1,5 +1,8 @@
<template> <template>
<div class="login-container"> <div class="login-container">
<div class="toptitle clearfix">
<a class="leftk" href="javascript:;"><img src="" alt="图片"></a>
</div>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
<div class="title-container"> <div class="title-container">
@ -43,7 +46,7 @@
<div class="captcha_k"> <div class="captcha_k">
<el-form-item prop="captcha"> <el-form-item prop="captcha">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="user" /> <svg-icon icon-class="example" />
</span> </span>
<el-input <el-input
ref="captcha" ref="captcha"
@ -55,7 +58,7 @@
auto-complete="on" auto-complete="on"
/> />
</el-form-item> </el-form-item>
<div class="captcha_main" @click="getCustomers" v-loading="captcha_loading"> <div class="captcha_main" @click="getcaptcha" v-loading="captcha_loading">
<img v-if="!captcha_loading" class="captcha_img" :src="captchaimg" alt="验证码"/> <img v-if="!captcha_loading" class="captcha_img" :src="captchaimg" alt="验证码"/>
</div> </div>
</div> </div>
@ -74,11 +77,13 @@
<script> <script>
//import { validUsername } from '@/utils/validate' //import { validUsername } from '@/utils/validate'
import axios from 'axios' //import axios from 'axios'
//import { setToken } from '@/utils/auth' // set token from cookie
import { captcha, login } from '@/api/user'
export default { export default {
mounted: function () { mounted: function () {
this.getCustomers(); this.getcaptcha();
}, },
data() { data() {
@ -134,23 +139,16 @@ export default {
}, },
methods: { methods: {
// //
getCustomers() { getcaptcha() {
let thiss = this; //let thiss = this;
this.captcha_loading = true; this.captcha_loading = true;
axios.post('/api/captcha').then(function (response) { captcha().then(response => {
let datamain = response.data; let datamain = response.data;
thiss.captchaimg = datamain.data; this.captchaimg = datamain.data;
thiss.captcha_loading = false; this.captcha_loading = false;
//console.log(response); //console.log(response);
}).catch(function (error) { })
//console.log(error);
this.$message({
showClose: true,
message: error,
type: 'error'
});
});
}, },
showPwd() { showPwd() {
if (this.passwordType === 'password') { if (this.passwordType === 'password') {
@ -167,27 +165,38 @@ export default {
// console.log(valid); // console.log(valid);
if (valid) { if (valid) {
this.loading = true this.loading = true
let thiss = this; //let thiss = this;
axios.post('/api/login', this.loginForm, {headers: {'Content-Type': 'multipart/form-data'} login(this.loginForm).then(response => {
}).then(function (response) { let datamain = response.data;
console.log(response) //console.log(response);
thiss.$router.push({path: '/usermange'}) if (datamain.code == 0) {
console.log('6666'); this.loading = false;
}).catch(function (error) { this.$message({
//console.log(error); showClose: true,
this.$message({ message: datamain.err,
showClose: true, type: 'error'
message: error, });
type: 'error' return false;
}); }
}); //console.log(response)
// this.$store.dispatch('user/login', this.loginForm).then(() => {
// this.$router.push({ path: this.redirect || '/' }) this.$router.push({path: '/filemange'})
// this.loading = false //console.log('6666');
// }).catch(() => { })
// this.loading = false
// }) // axios.post('/api/login', this.loginForm, {headers: {'Content-Type': 'multipart/form-data'}
// }).then(function (response) {
// console.log(response)
// thiss.$router.push({path: '/usermange'})
// console.log('6666');
// }).catch(function (error) {
// //console.log(error);
// this.$message({
// showClose: true,
// message: error,
// type: 'error'
// });
// });
} else { } else {
console.log('error submit!!') console.log('error submit!!')
return false return false
@ -201,7 +210,6 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
$bg:#283443; $bg:#283443;
$light_gray:#fff; $light_gray:#fff;
$cursor: #3c3535; $cursor: #3c3535;

7
src/views/nested/menu1/index.vue

@ -1,7 +0,0 @@
<template>
<div style="padding:30px;">
<el-alert :closable="false" title="menu 1">
<router-view />
</el-alert>
</div>
</template>

7
src/views/nested/menu1/menu1-1/index.vue

@ -1,7 +0,0 @@
<template>
<div style="padding:30px;">
<el-alert :closable="false" title="menu 1-1" type="success">
<router-view />
</el-alert>
</div>
</template>

7
src/views/nested/menu1/menu1-2/index.vue

@ -1,7 +0,0 @@
<template>
<div style="padding:30px;">
<el-alert :closable="false" title="menu 1-2" type="success">
<router-view />
</el-alert>
</div>
</template>

5
src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

@ -1,5 +0,0 @@
<template functional>
<div style="padding:30px;">
<el-alert :closable="false" title="menu 1-2-1" type="warning" />
</div>
</template>

5
src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

@ -1,5 +0,0 @@
<template functional>
<div style="padding:30px;">
<el-alert :closable="false" title="menu 1-2-2" type="warning" />
</div>
</template>

5
src/views/nested/menu1/menu1-3/index.vue

@ -1,5 +0,0 @@
<template functional>
<div style="padding:30px;">
<el-alert :closable="false" title="menu 1-3" type="success" />
</div>
</template>

5
src/views/nested/menu2/index.vue

@ -1,5 +0,0 @@
<template>
<div style="padding:30px;">
<el-alert :closable="false" title="menu 2" />
</div>
</template>

79
src/views/table/index.vue

@ -1,79 +0,0 @@
<template>
<div class="app-container">
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<el-table-column align="center" label="ID" width="95">
<template slot-scope="scope">
{{ scope.$index }}
</template>
</el-table-column>
<el-table-column label="Title">
<template slot-scope="scope">
{{ scope.row.title }}
</template>
</el-table-column>
<el-table-column label="Author" width="110" align="center">
<template slot-scope="scope">
<span>{{ scope.row.author }}</span>
</template>
</el-table-column>
<el-table-column label="Pageviews" width="110" align="center">
<template slot-scope="scope">
{{ scope.row.pageviews }}
</template>
</el-table-column>
<el-table-column class-name="status-col" label="Status" width="110" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" prop="created_at" label="Display_time" width="200">
<template slot-scope="scope">
<i class="el-icon-time" />
<span>{{ scope.row.display_time }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getList } from '@/api/table'
export default {
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
}
return statusMap[status]
}
},
data() {
return {
list: null,
listLoading: true
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.listLoading = true
getList().then(response => {
this.list = response.data.items
this.listLoading = false
})
}
}
}
</script>

78
src/views/tree/index.vue

@ -1,78 +0,0 @@
<template>
<div class="app-container">
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
<el-tree
ref="tree2"
:data="data2"
:props="defaultProps"
:filter-node-method="filterNode"
class="filter-tree"
default-expand-all
/>
</div>
</template>
<script>
export default {
data() {
return {
filterText: '',
data2: [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 9,
label: 'Level three 1-1-1'
}, {
id: 10,
label: 'Level three 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
id: 6,
label: 'Level two 2-2'
}]
}, {
id: 3,
label: 'Level one 3',
children: [{
id: 7,
label: 'Level two 3-1'
}, {
id: 8,
label: 'Level two 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
watch: {
filterText(val) {
this.$refs.tree2.filter(val)
}
},
methods: {
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
}
}
}
</script>
Loading…
Cancel
Save