先看一下部分效果图吧
因为以前做的项目大多数以小程序、公众号、H5为主,第一次用vue做后台管理
用vue脚手架搭建一个项目,然后安装elementUI,并且在main.js中引入
1、vue create 项目名称
2、npm i element-ui -S(安装element)
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'
import { Button, Select, Message } from 'element-ui'
import httpRequest from './httpRequest.js'
Vue.prototype.httpRequest = httpRequest
Vue.use(ElementUI)
Vue.use(Button, Select, Message)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
总体布局用的是Contained布局容器
home.vue代码
一定不要忘记加router-view,刚开始就是忘记了没加,老半天没渲染出来
1、menu组件的点击方法是:@select,通过用index=”/页面地址“来在下方进行跳转
2、dropdown组件的事件点击方法是:@command,在item里面需要写入command=“xxx”
3、在home.vue里面主要是左侧菜单和头部信息的布局,主体部分主要是在home.vue的children中(在router.js进行配置)
<template>
<div class="home">
<el-container style=" border: 1px solid #eee">
<!-- 左侧菜单 -->
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :unique-opened="true" style="height:100%" @select="clickLeftMenu">
<!-- 充值模块 -->
<el-submenu index="1" >
<template slot="title">
<i class="el-icon-document"></i>充值信息
</template>
<el-menu-item-group>
<el-menu-item index="/index">充值列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
<!-- 用户模块 -->
<el-submenu index="2">
<template slot="title">
<i class="el-icon-user"></i>用户信息
</template>
<el-menu-item-group >
<el-menu-item index="/userInfo">用户列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
<!-- 餐厅模块 -->
<el-submenu index="3">
<template slot="title">
<i class="el-icon-office-building"></i>餐厅管理
</template>
<el-menu-item-group>
<el-menu-item index="/restaurant">发放记录</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown @command="clickTopAction">
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1">查看</el-dropdown-item>
<el-dropdown-item command="2">修改密码</el-dropdown-item>
<el-dropdown-item command="3">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>超级管理员:admin</span>
</el-header>
<!-- 右侧主体部分 -->
<router-view></router-view>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Home",
data(){
return {
}
},
methods: {
//点击左侧菜单
clickLeftMenu(path,keyPath){
console.log(path,keyPath)
this.$router.push({
path: path,
params: {
textVal: '传值过去了'
}
})
},
//点击头部上方操作
clickTopAction(value){
console.log(value)
this.$message.success(value);
}
}
};
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
restaurant.vue(发放记录页面)
1、这里axios是通过进一步封装的,详情点击:axios进一步封装
2、想要获取每一个列表中的item,需要加一个slot-scope=“scope”,渲染的时候直接写scope.row.xxxxx
响应的点击事件为:@click=“editInfo(scope.$index, scope.row)”
<template>
<div>
<el-main>
<el-table :data="recordsList">
<el-table-column prop="date" label="序号">
<template slot-scope="scope">{{scope.row.ukMobile}}</template>
</el-table-column>
<el-table-column prop="date" label="发放目标">
<template slot-scope="scope">{{scope.row.companyName}}</template>
</el-table-column>
<el-table-column prop="date" label="操作者">
<template slot-scope="scope">{{scope.row.adminName}}</template>
</el-table-column>
<el-table-column prop="date" label="有效时间">
<template slot-scope="scope">{{scope.row.endDate}}</template>
</el-table-column>
<el-table-column prop="date" label="发放总金额">
<template slot-scope="scope">{{scope.row.totalAmount}}</template>
</el-table-column>
<el-table-column prop="date" label="发放总人数">
<template slot-scope="scope">{{scope.row.number}}</template>
</el-table-column>
<el-table-column prop="date" label="发放时间">
<template slot-scope="scope">{{scope.row.gmtCreate}}</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="primary"
@click="editInfo(scope.$index, scope.row)"
size="mini"
label="编辑"
>修改</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</div>
</template>
<script>
export default {
data () {
return {
recordsList: []
}
},
components: {},
computed: {},
mounted() {},
created(){
this.getRecordsoList()
},
methods: {
//获取发放记录
getRecordsoList() {
this.httpRequest.httpGetRequest('/restaurant/grantRecord',{
current: 1,
size: 10
}).then((res) => {
if(res.data.code == 20000){
this.recordsList = res.data.data.records
}
if(res.data.code == 20001){
this.$message.error('获取数据失败')
}
}).catch((error) => {
this.$message.error('获取数据失败')
})
}
}
}
</script>
<style scoped>
</style>
router.js文件
路由模式最好还是用默认的hash,用history还要与后台配置例子(怪麻烦的。。。。。)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
redirect: {name: 'index'},
children: [
{
path: '/index',
name: 'index',
component: () => import('../views/index/index.vue')
},
{
path: '/userInfo',
name: 'userInfo',
component: () => import('../views/index/userInfo.vue')
},
{
path: '/restaurant',
name: 'restaurant',
component: () => import('../views/index/restaurant.vue')
}
]
}
]
// 解决Avoided redundant navigation to current location: “/index/user“报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
// mode: 'history',
// base: process.env.BASE_URL,
routes
})
export default router