角色管理、管理员管理、用户信息存储、退出功能-------后台管理系统

1.角色管理

role.vue

<template>
  <div>
    <el-button type="primary" @click="add">添加</el-button>
    <!-- 添加组件 -->
    <v-add  :info="info" ref="add"></v-add>
    <!-- 角色列表组件 -->
    <v-list @edit="edit"></v-list>
  </div>
</template>

<script>
import vAdd from './components/add.vue'
import vList from './components/list.vue'
export default {
  data(){
    return {
      info:{
        show:false,
        title:'',
        isAdd:true,
      }
    }
  },
  methods:{
    add(){
      this.info.show = true;
      this.info.title = ' 添加角色';
      this.info.isAdd = true;
    },
    edit(id){
      this.info.show = true;
      this.info.title = "编辑角色";
      this.info.isAdd = false;
      this.$refs.add.getDetail(id)

    }
  },
  components:{
    vAdd,
    vList
  }
}
</script>

<style scoped>
.el-button{
  margin-top:10px;
}
</style>

add.vue

<template>
  <div>
    <el-dialog :title="info.title" :visible.sync="info.show">
      <el-form :model="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.rolename"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-checked-keys="defaultKey"
            :props="defaultProps" ref="tree"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="角色状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            active-color="blue"
            inactive-color="grey"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm"  v-if="info.isAdd">确 定</el-button>
        <el-button type="primary" @click="update"  v-else>修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
import {addRole,oneRole,updateRole} from '../../../utils/request'
import { successAlert } from '../../../utils/alert';
export default {
  props:['info'],
  data(){
    return {
       formLabelWidth: '120px',
      form:{
        rolename:'',
        menus:'',
        status:1,
      },
      defaultProps: {
          children: 'children',
          label: 'title'
        },
        defaultKey:[],//默认选中的key值
    }
  },
  computed:{
    ...mapGetters({
      "data":"menu/menuList"
    })
  },
  methods:{
    ...mapActions({
      "requestMenuList":"menu/menuListActions",
      "requestRoleList":"role/roleListActions",
    }),
    // 取消
    cancel(){
      this.info.show = false;
      this.form = {
         rolename:'',
          menus:'',
          status:1,
      };
      this.defaultKey = this.$refs.tree.setCheckedKeys([]);
    },
    // 添加角色
    confirm(){
      this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
      // 发起添加角色请求
      addRole(this.form).then(res=>{
        successAlert(res.data.msg)
        this.cancel()
        this.requestRoleList()
      })
    },
    // 获取角色详情
    getDetail(id){
      // 发起获取角色详情请求
      oneRole({id}).then(res=>{
        this.form = res.data.list;
        this.form.id = id;
        this.defaultKey = JSON.parse(this.form.menus);
      })
    },
    //修改并提交数据
    update(){
      this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys())
      updateRole(this.form).then(res=>{
        successAlert(res.data.msg);
        this.cancel()
        this.requestRoleList()
      })
    }

  },
  mounted(){
    this.requestMenuList();
  }
};
</script>

<style scoped>

</style>

list.vue

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{ children: 'children'}"
    >
      <el-table-column prop="id" label="角色编号" ></el-table-column>
      <el-table-column prop="rolename" label="角色名称"  ></el-table-column>
      <el-table-column prop="status" label="状态">
          <template v-slot="prop">
              <el-button type="primary" v-if="prop.row.status==1">启用</el-button>
              <el-button type="danger" v-else>禁止</el-button>
          </template>
      </el-table-column>
      <el-table-column prop="status" label="操作">
          <template v-slot="prop">
            <el-button type="primary" @click="edit(prop.row.id)">编辑</el-button>
            <el-button type="danger" @click="del(prop.row.id)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
import {delRole} from '../../../utils/request'
import {successAlert} from '../../../utils/alert'
export default {
  computed:{
    ...mapGetters({
      "tableData":"role/roleList"
    })
  },
  methods:{
    ...mapActions({
      'requestRoleList':"role/roleListActions"
    }),
    //传递自定义事件
    edit(id){
      this.$emit('edit',id)
    },
    // 删除角色
    del(id){
         this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发起删除角色请求
          delRole({id}).then(res=>{
              // 已经删除成功
              successAlert(res.data.msg);
              this.requestRoleList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  },
  mounted(){
    this.requestRoleList()
  }
}
</script>

<style>

</style>

store/modules/role.js

import {getRole} from '../../utils/request'
const state = {
  roleList:[],//声明角色列表数据
}

// 操作数据
const mutations = {
  changeRoleList(state,arr){
    state.roleList = arr;
  }
}

const actions = {
  roleListActions(context){
    // 发起获取角色列表请求
    getRole().then(res=>{
      context.commit('changeRoleList',res.data.list)
    })
  }
}

const getters = {
  roleList(state){
    return state.roleList
  }
}

export default {
  state,
  mutations,
  actions,
  getters,
  namespaced:true,//使用命名空间
}

2.管理员管理

manager.vue

<template>
  <div>
    <!-- 添加按钮 -->
    <el-button type="success" @click="add">添加</el-button>
    <!-- 添加子组件 -->
    <v-add :info="info" ref="add"></v-add>
    <!-- 列表子组件 -->
    <v-list @edit="edit"></v-list>

  </div>
</template>

<script>
import vAdd from './components/add.vue'
import vList from './components/list.vue'
export default {
  data(){
    return {
      info:{
        show:false,//控制add组件的显示和隐藏
        title:'',//控制add组件的标题
        isAdd:true,//控制add组件是添加还是编辑
      }
    }
  },
  components:{
    vAdd,
    vList
  },
  methods:{
    add(){
      this.info.show = true;
      this.info.title = '添加管理员';
      this.info.isAdd = true;
    },
    edit(uid){
      this.info.show = true;
      this.info.title = '编辑管理员';
      this.info.isAdd = false;
      this.$refs.add.getDetail(uid)

    }
  }
}
</script>

<style scoped>
.el-button{
  margin-top:10px;
}
</style>

add.vue

<template>
  <div>
    <el-dialog :title="info.title" :visible.sync="info.show">
        <el-form :model="form">
           <el-form-item label="所属角色" :label-width="formLabelWidth">
            <el-select v-model="form.roleid" >
              <el-option label="--请选择--" value="" disabled></el-option>
              <el-option v-for="item in roleList" :key="item.id" :label="item.rolename" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.username" ></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input type="password" v-model="form.password" ></el-input>
          </el-form-item>
          <el-form-item label="管理员状态" :label-width="formLabelWidth">
            <el-switch
                v-model="form.status"
                active-color="blue"
                inactive-color="grey" :active-value="1" :inactive-value="2">
              </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm" v-if="info.isAdd">确 定</el-button>
          <el-button type="primary" @click="update" v-else>修 改</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
import {addManager,oneManager,updateManager} from '../../../utils/request'
import { successAlert } from '../../../utils/alert'
export default {
  props:['info'],
  data(){
    return {
       dialogFormVisible: false,
        form: {
          roleid:'',
          username:'',
          password:'',
          status:1,//1:启用  2:禁用
        },
        formLabelWidth: '120px'
    }
  },
  computed:{
    ...mapGetters({
      "roleList":"role/roleList"
    })
  },
  methods:{
    ...mapActions({
      "requestRoleList":"role/roleListActions",
      "requestCount":"manager/countActions",
      "requestManagerList":"manager/managerListActions"
    }),
    // 取消add组件
    cancel(){
      this.info.show = false;
      this.form = {
          roleid:'',
          username:'',
          password:'',
          status:1,//1:启用  2:禁用
      }
    },
    // 添加管理员数据到数据库
    confirm(){
      // 发起添加数据请求
      addManager(this.form).then(res=>{
        successAlert(res.data.msg)
        this.cancel()
        // 获取总的记录数
        this.requestCount()
        // 更新列表
        this.requestManagerList()
      })
    },
    getDetail(uid){
      // 发起获取管理员详情请求
      oneManager({uid}).then(res=>{
        this.form = res.data.list;
        this.form.password = '';
      })

    },
    update(){
      // 发起修改管理员请求
      updateManager(this.form).then(res=>{
        successAlert(res.data.msg);
        this.cancel();
        this.requestManagerList()
      })
    }
  },
  mounted(){
    this.requestRoleList();
  }
}
</script>

<style>

</style>

list.vue

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{ children: 'children'}"
    >
      <el-table-column prop="id" label="用户编号"  > </el-table-column>
      <el-table-column prop="username" label="用户名"  ></el-table-column>
      <el-table-column prop="rolename" label="所属角色"> </el-table-column>
      <el-table-column prop="status" label="状态">
          <template v-slot="prop">
              <el-button type="primary" v-if="prop.row.status==1">启用</el-button>
              <el-button type="danger" v-else>禁止</el-button>
          </template>
      </el-table-column>
      <el-table-column prop="status" label="操作">
          <template v-slot="prop">
            <el-button type="primary" @click="edit(prop.row.uid)">编辑</el-button>
            <el-button type="danger" @click="del(prop.row.uid)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="2"
        @current-change="cPage"
        :total="count">
      </el-pagination>
  </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
import {delManager} from '../../../utils/request'
import {successAlert} from '../../../utils/alert'
export default {
  computed:{
    ...mapGetters({
      "tableData":"manager/managerList",
      'count':"manager/count"
    })
  },
  methods:{
    ...mapActions({
      "requestManagerList":'manager/managerListActions',
      "requestCount":"manager/countActions",
      "requestPage":"manager/pageActions",
    }),
    // 获取当前页码数
    cPage(page){
      this.requestPage(page)
      this.requestManagerList()
    },
    edit(uid){
      this.$emit('edit',uid)
    },
    del(uid){
           this.$confirm('确定要删除吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 发起删除菜单请求
              delManager({uid}).then(res=>{
                  // 已经删除成功
                  successAlert(res.data.msg);
                  this.requestCount()
                  this.requestManagerList()
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
    }
  },
  mounted(){
    this.requestCount()
    this.requestManagerList()
  }
}
</script>

<style>

</style>

store/modules/manager.js

import {getManager,managerCount} from '../../utils/request'
const state = {
  managerList:[],
  // size :每页显示的条数
  size:2,
  // page: 当前页码数据
  page:1,
  count:0,//计算总的记录数
}

const mutations = {
  changeManagerList(state,arr){
    state.managerList = arr
  },
  changeCount(state,num){
    state.count = num
  },
  //修改当前页码数
  changePage(state,page){
    state.page = page
  }
}


const actions = {
  managerListActions(context){
    var params = {
      size:context.state.size,
      page:context.state.page
    }
    // 发起获取管理员列表请求
    getManager(params).then(res=>{
      // 判断返回列表的数据是否为空.如果为空,将page-1,如果不为空则直接获取列表数据
      if((res.data.list == null || res.data.list.length == 0) && context.state.page > 1){
        // 将page-1
        var p = context.state.page -1;
        context.commit('changePage',p);
        // 自调
        context.dispatch('managerListActions');
        return;
      }
      context.commit('changeManagerList',res.data.list)
    })
  },
  countActions(context){
    // 发起获取总的额记录数请求
    managerCount().then(res=>{
        context.commit('changeCount',res.data.list[0].total)
    })
  },
  pageActions(context,page){
    context.commit('changePage',page)
  }
}

const getters = {
  managerList(state){
    return state.managerList
  },
  count(state){
    return state.count
  }
}

export default {
  state,mutations,actions,getters,
  namespaced:true,
}

3.login.vue(用户信息存储)

<template>
  <div class="container">
    <div class="con">
      <h3>欢迎登录</h3>
      <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
      <el-input v-model="user.password" type="password" placeholder="请输入密码"></el-input>
      <div class="btn">
        <el-button  type="primary" @click="login">登录</el-button>
      </div>

    </div>
  </div>
</template>

<script>
import { warningAlert, successAlert } from '../../utils/alert'
import {requestLogin} from '../../utils/request'
import {mapActions} from 'vuex'
export default {
  data(){
    return {
      user:{
        username:'',
        password:'',
      }
    }
  },
  methods:{
    ...mapActions({
      "requestUser":"userActions"
    }),
    login(){
      //方式二:通过vuex结合sessionStorage来做用户信息存储
      if(this.user.username !== '' | this.user.password !== ''){
        //允许发起请求
        requestLogin(this.user).then(res=>{
          successAlert(res.data.msg);
          // 将数据存入vuex中
          this.requestUser(res.data.list)
          this.$router.push('/')
        })
      }else{
        warningAlert('请输入名户名或者密码')
      }



      //方式一:通过localStorage进行数据存储
      // if(this.user.username !== '' || this.user.password !== ''){
      //   // 允许发起请求
      //   requestLogin(this.user).then(res=>{
      //       successAlert(res.data.msg);
      //       // 将用户信息存入到localStorage中
      //       if(localStorage.getItem('user') !== null){
      //         localStorage.removeItem('user')
      //       }
      //       localStorage.setItem('user',JSON.stringify(res.data.list))
      //       this.$router.push('/')
      //   })
      // }else{
      //   warningAlert('请输入名户名或者密码')
      // }
    }
  }
}
</script>

<style scoped>
.container{
  width:100vw;
  height: 100vh;
  background: linear-gradient(#563443,#2F3D60);
  position:fixed;
  top:0;
  left:0;
}
.con{
  width:400px;
  height: 300px;
  background: white;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;
}
h3{
  text-align: center;
  margin: 20px;
}
.el-input,.el-button{
  width:90%;
  margin:20px;
}
.el-button{
  color:white;
}
</style>

store/actions.js

export default {
  userActions(context,user){
    context.commit('changeUser',user)
  }
}

store/mutations.js

export const state = {
  //用来存储登录后的用户信息
  user:sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : null,
}
export const mutations = {
  changeUser(state,user){
    //1.将用户信息存入到store中的state中
    state.user = user;
    if(user){
        // 2.同时将用户信息存入sessionStorage中
        sessionStorage.setItem('user',JSON.stringify(user))
    }else{
        sessionStorage.removeItem('user')
    }

  }
}
export const getters = {
  user(state){
    return state.user
  }
}

4.index.vue(退出功能)

 <el-header height="80px">
     {{user.username}}
     <el-button type="primary" @click="logout">退出</el-button>
</el-header>


<script>
import {mapGetters,mapActions} from 'vuex'
export default {
  computed:{
    ...mapGetters({
      'user':'user'
    })
  },
  methods:{
    ...mapActions({
      "requestUser":"userActions"
    }),
    logout(){
      // 1.清空用户信息
      this.requestUser(null)
      //2.跳转登录页
      this.$router.push('/login')
    }
  }
}
</script>