Vue使用elementUI实现一个后台管理
功能效果
- 初始界面
- 添加商品分类
- 修改分类
- 删除分类
思路
使用element UI中提供的布局容器，然后在容器内布局自己的页面，home.vue是主页面，上面是系统的头部，左侧是导航，右侧是主体部分，通过点击左侧的导航（classify，goods），右侧的主体部分（main）显示不同的内容。路由配置的时候，要把home配置在根路由下，，然后把classify和goods配置在home的子路由下。一定要注意要在main里面写占位符，这样，点击左侧的导航，内容才会在main里面显示出来。
功能分析
1.安装
（1）首先创建一个vue项目，创建过程我之前的博客有写过。该后台是基于element UI组件库。
（2）安装element ui
npm -i element-ui -S
（3）全局引入，参考element-UI官网
引入下面的代码到mian.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2.main.vue
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3.App.vue
删除自动生成的多余代码，剩下下面的部分就可以
<template>
//占位符，渲染页面
<router-view></router-view>
</template>
<style>
body,html{
height: 100%;
margin: 0;
padding: 0;
}
</style>
4.views
(1) Home.vue
<template>
<div id="app">
<el-container class="my_container">
<el-header class="my_header">
<div class="my_sysName">
JDAPP后台管理
<i :class="isopen" @click="isOpen"></i>
</div>
<div class="my_header_right">
<span>当前用户：</span>
<span>退出登录</span>
</div>
</el-header>
<el-container>
<el-aside class="my_aside" :width="`${asideWidth}px`">
<el-menu
:collapse-transition='false'
:collapse="iscollapse"
:default-active="defaultActive"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
router
style="border :0">
<el-menu-item index="/goods">
<i class="el-icon-setting"></i>
<span slot="title">商品管理</span>
</el-menu-item>
<el-menu-item index="/classify">
<i class="el-icon-menu"></i>
<span slot="title">分类管理</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main class="my_main">
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data(){
return{
iscollapse : true, //是否折叠导航
isopen : 'el-icon-s-unfold', //控制展开折叠的图标
asideWidth : 64 , //默认折叠时的导航栏的宽度
defaultActive : window.location.pathname //当前默认选中的导航
}
},
methods:{
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
//控制展开折叠的图标的点击事件
isOpen(){
//点击，展开导航，再次点击，折叠导航
this.iscollapse = !this.iscollapse;
//当导航折叠时，导航栏的宽度为64px，展开时，宽度为200px
this.asideWidth = this.iscollapse ? 64 : 200;
//当导航展开和折叠时的图标
this.isopen = this.iscollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
}
}
}
</script>
<style scoped>
#app{
height: 100%;
}
.my_container{
height: 100%;
}
.my_header{
background:#303133;
color:#fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.my_sysName{
font-size: 20px;
font-weight: 500;
}
.my_header_right{
display: flex;
align-items: center;
justify-content: space-around;
width: 200px;
}
.my_aside{
background: #545c64;
transition: width .3s;
}
.my_main{
background: #E4E7ED;
}
</style>
(2) Classify.vue
<template>
<div>
<el-button type="primary" class="el-icon-plus" @click="addClassify">添加分类</el-button>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="name"
label="商品名称">
</el-table-column>
<el-table-column
prop="date"
label="创建时间">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button type="danger" @click="handleClick(scope.row)" icon="el-icon-edit">修改</el-button>
<el-button type="primary" icon="el-icon-delete" @click="deleteClick(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return{
tableData : []
}
},
methods:{
// 添加商品分类
addClassify(){
this.open();
},
open() {
this.$prompt('请输入分类名称', '添加分类', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({
value }) => {
let d = new Date();
this.tableData.push({
name : value,
date : `${
d.getFullYear()}-${
d.getMonth()+1}-${
d.getDate()} ${
d.getHours()}:${
d.getMinutes()}:${
d.getSeconds()}`
}),
this.$message({
type: 'success',
message: '分类名称 ' + value + ' 添加成功！'
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消添加'
});
});
},
// 修改分类名称
handleClick(scoped){
this.$prompt('是否要修改 ' + scoped.name +' 分类名称', '修改分类名称', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue : scoped.name
}).then(({
value }) => {
// console.log(scoped);
let d = new Date();
scoped.name = value;
scoped.date = `${
d.getFullYear()}-${
d.getMonth()+1}-${
d.getDate()} ${
d.getHours()}:${
d.getMinutes()}:${
d.getSeconds()}`;
this.$message({
type: 'success',
message: '分类名称 ' + value + ' 修改成功！'
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消修改'
});
});
},
// 删除分类名称
deleteClick(scoped){
// console.log(scoped);
this.$confirm('此操作将永久删除该文件, 是否继续?', '删除分类', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(({
value }) => {
this.tableData.splice(scoped.$index,1);
this.$message({
type: 'success',
message: '分类名称 ' + scoped.row.name + ' 删除成功！'
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消删除'
});
});
}
}
}
</script>
<style>
</style>
5 router路由
/index.js
路由配置，注意，calssify和Goods是在Home的子路由下。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'),
children : [
{
path: '/classify',
name: 'Classify',
component: () => import('@/views/Classify.vue'),
},
{
path: '/goods',
name: 'Goods',
component: () => import('@/views/Goods.vue'),
}
]
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router