vue实现的后台管理系统

vue后台管理系统

记录一次后台管理系统项目，需要的朋友私聊我拿源码

---

---

介绍

       这是在在学校对vue进行学习后搭建的小项目。该后台管理系统为spa单页项目，前后端分离，实现了登录、身份鉴别、用户管理、角色查看、权限管理，实现了基本的增删改查功能，可以为用户设置权限，实现了登录拦截、用户增删改查，权限给予，剥夺，查看等功能。可以作为不同类型网站后台的复用。
        技术栈：vue-cli,vue,vue-router,axios,element-ui

---

正文开始，先上效果图

效果图

登录

用户列表

编辑用户

权限列表

角色列表

权限设置

这里由于网速原因，我只放了部分图片上去。

代码实现

登录

<template>
  <div class="bgcbox">
    <div class="logincss">
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="demo-loginForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
   
  data() {
   
    return {
   
      loginForm: {
   
        username: "admin",
        password: "123456",
      },
      rules: {
   
        username: [
          // required 是否为必填项
          // message 当前规则校验失败时的提示
          // trigger 表单验证的触发实际，blur表示失去焦点时触发
          {
    required: true, message: "用户名为必填项", trigger: "blur" },
          // min 最小长度
          // max 最大长度
          {
   
            min: 3,
            max: 6,
            message: "用户名长度在 3 到 6 个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
    required: true, message: "密码为必填项", trigger: "blur" },
          {
   
            min: 3,
            max: 6,
            message: "密码长度在 3 到 6 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
   
    islogin() {
   
      axios
        .post("http://localhost:8888/api/private/v1/login", this.loginForm)
        .then((res) => {
   
          const {
    data, meta } = res.data;
          if (meta.status === 200) {
   
            localStorage.setItem("token", data.token);
            this.$router.push("/home"); //编程式导航，跳转到主页
          } else {
   
            this.$message({
   
              showClose: true,
              message: meta.msg,
              type: "error",
            });
          }
        });
    },
    submitForm() {
   
      this.$refs.loginForm.validate((valid) => {
   
        if (valid) {
   
          this.islogin();
        } else {
   
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
   
      this.$refs.loginForm.resetFields();
    },
  },
};
</script>

<style>
.bgcbox {
   
  background-color: #2c414c;
  width: 100%;
  height: 100%;
}
.logincss {
   
  width: 460px;
  height: 350px;
  border: 1px solid #000;
  border-radius: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
}
.demo-loginForm {
   
  width: 400px;
  height: 100%;
  padding-top: 100px;
}
</style>

用户页

<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 10px">
      <el-col :span="6">
        <el-input
          placeholder="请输入内容"
          v-model="search"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchdata"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="adduserdialog = true"
          >添加用户</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="usersdata" stripe style="width: 100%">
      <el-table-column prop="username" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
      <el-table-column prop="mobile" label="电话"> </el-table-column>
      <el-table