vue后台登录系统通用配合elemenui快速搭建

在看这篇文章前，你首先得了解vue2的基本用法以及elementui的基本使用方法，如果不会也没有关系，看下面的代码相信也能够看得明白

 好了，先看一下最终实现的效果预览：

 基本就是如此的样式，也算是通用的后台管理功能，左边导航栏，右边功能区，首先我们先找一下elementuui的这个导航栏，可以自行去elementui官网去找一下，这种风格是通用的，当然，样式可以根据自己的喜爱更换即可

 右边功能区，先择elementui的表格：

 表格样式有很多，大家自行取一个就可以了，最后有了两个样式，加入vue即可

代码如下：

左侧导航栏部分：

<template>
	<el-container style="height: 100%; ">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-user-solid"></i>账户管理</template>
        
          <el-menu-item index="1-1" @click="useraccount">用户账号</el-menu-item>
          <el-menu-item index="1-2" @click="logout">注销账号</el-menu-item>
        
        <!-- <el-submenu index="1-4">
          <template slot="title">选项4</template> -->
          <!-- <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu> -->
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>事务管理</template>
          <el-menu-item index="2-1" @click="admincharge">记账管理</el-menu-item>
          <el-menu-item index="2-2">生活管理</el-menu-item>
          <el-menu-item index="2-3">喝水管理</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">用户反馈</template>
          <el-menu-item index="2-4-1" @click="feedback">意见反馈</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>
  </el-container>
</template>
 
<script>
	export default{
        methods:{
            useraccount(){
               this.$router.push('/admin/daohang1',()=>{},()=>{});
            },
            logout(){
              this.$router.push('/admin/logout',()=>{},()=>{});
            },
            admincharge(){
              this.$router.push('/admin/adminaccount',()=>{},()=>{});
            },
            feedback(){
              this.$router.push('/admin/feedback',()=>{},()=>{});
            }
        }
    }
</script>
 
<style>
</style>

 右侧功能区：

<template>
  	<div style="height: 100%; width: 85%; margin-left: 2%; margin-right: 2%;" >
		<div style="margin-top: 1%;padding: 10px;">
			<!-- <el-button type="primary">新增</el-button>
			<el-button type="success">导出</el-button>
			<el-button type="info">导入</el-button> -->
		</div>
		
		<div>
			<el-table :data="filterTableData" style="width: 100%"
			      border
			>
			    <el-table-column label="用户账户" prop="date" />
			    <el-table-column label="用户昵称" prop="name" />
			    <el-table-column label="操作" align="center">
				 
			      <template #default="scope">
			        <el-button size="default " @click="handleEdit(scope.$index, scope.row)"
			          >编辑</el-button
			        >
			        <el-button
			          size="default "
			          type="danger"
			          @click="handleDelete(scope.$index, scope.row)"
			          >删除</el-button
			        >
			      </template>
			    </el-table-column>
			  </el-table>
		</div>
	
	</div>
</template>

<script>
import axios from 'axios'
export default {
	mounted(){
		axios({
			url:"http://127.0.0.1:5000/adminname",
            method:"GET",
		}).then((res=>{
			console.log(res.data);
			this.filterTableData=res.data
		}))
	},
    data(){
			return {
                //首先利用假数据
				filterTableData:  []
			}
		},
		methods:{
			handleEdit(a,b){
				alert("此处不能编辑")
			},
			handleDelete(index,meg){//删除账号所对应的所有信息
				console.log(index);
				this.filterTableData.splice(index,1);
				console.log(meg);
				axios({
					url:"http://127.0.0.1:5000/admindelete",
            		method:"POST",
					data:{
						username:meg.date
					}
				})
			}
		}
}
</script>

<style>

</style>