Compare commits
10 Commits
879318692c
...
afc7a06e80
| Author | SHA1 | Date |
|---|---|---|
 gyc
|
afc7a06e80 | |
花裤衩
|
4c18a3f47b | |
|
花裤衩
|
714ded1155 | |
|
花裤衩
|
785f19f551 | |
|
花裤衩
|
75ba8cf038 | |
|
花裤衩
|
abcd5d810d | |
|
花裤衩
|
8c4e38fb1f | |
|
花裤衩
|
fe326aa2b0 | |
morrxy
|
c9cb7db3ce | |
|
morrxy
|
cd8d52bfbd |
|
|
@ -8,6 +8,15 @@
|
|||
|
||||
目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。
|
||||
|
||||
<p align="center">
|
||||
<b>SPONSORED BY</b>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
|
||||
<img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Extra
|
||||
|
||||
如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
|
||||
|
|
|
|||
10
README.md
10
README.md
|
|
@ -9,8 +9,16 @@ English | [简体中文](./README-zh.md)
|
|||
|
||||
**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**
|
||||
|
||||
## Build Setup
|
||||
<p align="center">
|
||||
<b>SPONSORED BY</b>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
|
||||
<img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Build Setup
|
||||
|
||||
```bash
|
||||
# clone the project
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import request from '@/utils/request'
|
|||
|
||||
export function login(data) {
|
||||
return request({
|
||||
url: '/vue-admin-template/user/login',
|
||||
url: '/auth/login',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
|
@ -10,7 +10,7 @@ export function login(data) {
|
|||
|
||||
export function getInfo(token) {
|
||||
return request({
|
||||
url: '/vue-admin-template/user/info',
|
||||
url: '/auth/info',
|
||||
method: 'get',
|
||||
params: { token }
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
|
|||
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import locale from 'element-ui/lib/locale/lang/en' // lang i18n
|
||||
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
|
||||
|
||||
import '@/styles/index.scss' // global css
|
||||
|
||||
|
|
|
|||
|
|
@ -54,107 +54,20 @@ export const constantRoutes = [
|
|||
meta: { title: 'Dashboard', icon: 'dashboard' }
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/example',
|
||||
component: Layout,
|
||||
redirect: '/example/table',
|
||||
name: 'Example',
|
||||
meta: { title: 'Example', icon: 'el-icon-s-help' },
|
||||
children: [
|
||||
{
|
||||
path: 'table',
|
||||
name: 'Table',
|
||||
component: () => import('@/views/table/index'),
|
||||
meta: { title: 'Table', icon: 'table' }
|
||||
},
|
||||
{
|
||||
path: 'tree',
|
||||
name: 'Tree',
|
||||
component: () => import('@/views/tree/index'),
|
||||
meta: { title: 'Tree', icon: 'tree' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/form',
|
||||
// 路径
|
||||
path: '/list',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
// 这个是要到的页面
|
||||
path: 'index',
|
||||
name: 'Form',
|
||||
component: () => import('@/views/form/index'),
|
||||
meta: { title: 'Form', icon: 'form' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/nested',
|
||||
component: Layout,
|
||||
redirect: '/nested/menu1',
|
||||
name: 'Nested',
|
||||
meta: {
|
||||
title: 'Nested',
|
||||
icon: 'nested'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu1',
|
||||
component: () => import('@/views/nested/menu1/index'), // Parent router-view
|
||||
name: 'Menu1',
|
||||
meta: { title: 'Menu1' },
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-1',
|
||||
component: () => import('@/views/nested/menu1/menu1-1'),
|
||||
name: 'Menu1-1',
|
||||
meta: { title: 'Menu1-1' }
|
||||
},
|
||||
{
|
||||
path: 'menu1-2',
|
||||
component: () => import('@/views/nested/menu1/menu1-2'),
|
||||
name: 'Menu1-2',
|
||||
meta: { title: 'Menu1-2' },
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-2-1',
|
||||
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
|
||||
name: 'Menu1-2-1',
|
||||
meta: { title: 'Menu1-2-1' }
|
||||
},
|
||||
{
|
||||
path: 'menu1-2-2',
|
||||
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
|
||||
name: 'Menu1-2-2',
|
||||
meta: { title: 'Menu1-2-2' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'menu1-3',
|
||||
component: () => import('@/views/nested/menu1/menu1-3'),
|
||||
name: 'Menu1-3',
|
||||
meta: { title: 'Menu1-3' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'menu2',
|
||||
component: () => import('@/views/nested/menu2/index'),
|
||||
meta: { title: 'menu2' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: 'external-link',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
|
||||
meta: { title: 'External Link', icon: 'link' }
|
||||
// 这个是给他取个别名
|
||||
name: 'List',
|
||||
// 这个是路径,页面的路径
|
||||
component: () => import('@/views/list/index'),
|
||||
// title是名称,icon是图标
|
||||
meta: { title: '列表', icon: 'form' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const actions = {
|
|||
const { data } = response
|
||||
|
||||
if (!data) {
|
||||
reject('Verification failed, please Login again.')
|
||||
return reject('Verification failed, please Login again.')
|
||||
}
|
||||
|
||||
const { name, avatar } = data
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
|
|||
const service = axios.create({
|
||||
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
|
||||
// withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 5000 // request timeout
|
||||
timeout: 50000 // request timeout
|
||||
})
|
||||
|
||||
// request interceptor
|
||||
|
|
@ -19,7 +19,7 @@ service.interceptors.request.use(
|
|||
// let each request carry token
|
||||
// ['X-Token'] is a custom headers key
|
||||
// please modify it according to the actual situation
|
||||
config.headers['X-Token'] = getToken()
|
||||
config.headers['token'] = getToken()
|
||||
}
|
||||
return config
|
||||
},
|
||||
|
|
@ -46,7 +46,7 @@ service.interceptors.response.use(
|
|||
const res = response.data
|
||||
|
||||
// if the custom code is not 20000, it is judged as an error.
|
||||
if (res.code !== 20000) {
|
||||
if (res.code !== 200) {
|
||||
Message({
|
||||
message: res.message || 'Error',
|
||||
type: 'error',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div>
|
||||
<span>aaa</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
// 例如：import 《组件名称》 from '《组件路径》,
|
||||
export default {
|
||||
// import引入的组件需要注入到对象中才能使用"
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
// 这里存放数据"
|
||||
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于data概念",
|
||||
computed: {},
|
||||
// 监控data中的数据变化",
|
||||
watch: {},
|
||||
// 生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {},
|
||||
// 生命周期 - 挂载完成（可以访问DOM元素）",
|
||||
mounted() {},
|
||||
beforeCreate() {}, // 生命周期 - 创建之前",
|
||||
beforeMount() {}, // 生命周期 - 挂载之前",
|
||||
beforeUpdate() {}, // 生命周期 - 更新之前",
|
||||
updated() {}, // 生命周期 - 更新之后",
|
||||
beforeDestroy() {}, // 生命周期 - 销毁之前",
|
||||
destroyed() {}, // 生命周期 - 销毁完成",
|
||||
activated() {},
|
||||
// 方法集合",
|
||||
methods: {} // 如果页面有keep-alive缓存功能，这个函数会触发",
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
|
@ -43,11 +43,6 @@
|
|||
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
|
||||
|
||||
<div class="tips">
|
||||
<span style="margin-right:20px;">username: admin</span>
|
||||
<span> password: any</span>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -58,28 +53,14 @@ import { validUsername } from '@/utils/validate'
|
|||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!validUsername(value)) {
|
||||
callback(new Error('Please enter the correct user name'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value.length < 6) {
|
||||
callback(new Error('The password can not be less than 6 digits'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
loginForm: {
|
||||
username: 'admin',
|
||||
password: '111111'
|
||||
password: 'admin'
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
|
||||
username: [{ required: true, trigger: 'blur' }],
|
||||
password: [{ required: true, trigger: 'blur' }]
|
||||
},
|
||||
loading: false,
|
||||
passwordType: 'password',
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-2-1" type="warning" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-2-2" type="warning" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-3" type="success" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 2" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -36,7 +36,15 @@ module.exports = {
|
|||
warnings: false,
|
||||
errors: true
|
||||
},
|
||||
before: require('./mock/mock-server.js')
|
||||
proxy: {
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: 'http://127.0.0.1:18080',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
configureWebpack: {
|
||||
// provide the app's title in webpack's name field, so that
|
||||
|
|
|
|||
Loading…
Reference in New Issue