后台管理系统

1.1 项目概述

简易后台管理系统是一个基于Vue3+ElemrntPlus的后台管理系统，提供了用户登录、记住密码、数据的增删改查、分页、错误信息提示等功能，旨在协助管理员对特定数据进行管理和操作。
没有后台对接，数据源为假数据。
全部代码已上传GitHub，加⭐防丢失。后台管理系统 注释部分写的很详细。

1.2 具体功能

实现效果如下

1.3 部分代码展示

src\views\LoginView.vue部分——登录页面

<template><div class="onShow"><h3 class="titleOne">后台管理系统</h3><!-- 姓名 -->用户名<el-input v-model="input" placeholder="请输入用户名" /><!-- 错误提示 --><div class="errContain"><div v-show="inputError" class="error-message">{{ inputErrorMessage }}</div></div><!-- 密码 -->密码<el-input v-model="password" type="password" placeholder="请输入密码" /><!-- 错误提示 --><div class="errContain"><div v-show="passwordError" class="error-message">{{ passwordErrorMessage }}</div></div><!-- 记住密码 --><div class="rem">记住密码<el-switch v-model="rememberPassword" size="small" /></div><!-- 验证码 --><Vcode:show="isShow":imgs="imgs"@success="onSuccess"@close="onClose"/><!-- 登录 --><!-- <router-link to="/home"> --><el-button type="primary" @click="onShow" :disabled="hasError">安全登录</el-button><!-- </router-link> --></div>
</template><script setup>
import { ref, computed, watch } from "vue";
import Vcode from "vue3-puzzle-vcode";
import sheep from "../assets/sheep.jpg";
import router from "@/router";
import Cookies from 'js-cookie';const imgs = [sheep];
//记住密码开关
const rememberPassword = ref(false);const isShow = ref(false);const input = ref("");
const password = ref("");const inputErrorMessage = ref(true);
const passwordErrorMessage = ref(true);
const inputError = ref(false);
const passwordError = ref(false);// 监听input变化
watch(input, (newValue) => {validateInput(newValue);
});
// 监听password变化
watch(password, (newValue) => {validatePassword(newValue);
});
// 校验输入的用户名
const validateInput = (value) => {const nameRegExp = /^[\u4e00-\u9fa5]{2,5}$/; // 由2-5个汉字组成if (!nameRegExp.test(value)) {// 有一个符合就执行以下语句-//真，执行下行语句//先让快展示，然后展示信息inputError.value = true;inputErrorMessage.value = "用户名必须由2-5个汉字组成";} else {inputError.value = false;// inputErrorMessage.value=falseinputErrorMessage.value = false;}
};
// 校验输入的密码
const validatePassword = (value) => {if (value.length >= 8 && value.length <= 16) {passwordError.value = false;inputErrorMessage.value = false;} else {passwordError.value = true;passwordErrorMessage.value = "密码长度在8-16位之间";}
};
// 联合判断是否有错误，禁用登录按钮
//禁用：返回true 只要一个为真即可
//没有错误返回的是假，目的是都为假const hasError = computed(() => {return (inputError.value ||passwordError.value ||input.value === "" || // 添加对输入框的空值判断password.value === "" // 添加对密码输入框的空值判断);
});const onShow = () => {isShow.value = true;
};
const onClose = () => {isShow.value = false;
};const onSuccess = () => {onClose();ElMessage({message: "登录成功",type: "success",duration: 1000,//可手动关闭showClose: true,});if (rememberPassword.value) {const userInfo = { username: input.value,password: password.value};Cookies.set("userInfo", JSON.stringify(userInfo), { expires: 365 });alert("输入信息已保存到Cookie");} else {// 执行取消记住密码的逻辑，例如删除Cookie或LocalStorage// ...Cookies.remove("userInfo");console.log('不存入信息');}router.push("/home");// 验证成功，需要手动关闭模态框
};</script><style scoped>
.errContain{height: 15px;width: 100%;
}
.titleOne{text-align: center;padding-bottom: 20px;
}
.onShow {width: 300px;margin: 120px auto;padding: 40px 120px;background-image: url(../assets/bg.png);/* background-size:cover; */border-radius: 50px;background-size: 100% 100%;}.el-button,
router-link {width: 300px;margin-top: 20px;
}
.el-input {font-size: 10px;
}
.error-message {font-size: 10px;color: red;
}
.rem {font-size: 14px;color: rgb(87, 87, 87);
}</style>

src\components\ComHome.vue——操作页面的布局部分

<template><div class="common-layout"><el-container><!-- ————————————————————————————————————————————————————————————————头部 ————————————————————————————————————————————————————————————————————————--><el-header><div class="add"><el-button :plain="true" @click="handleAdd">新增数据 </el-button></div><div class="title">后台管理系统</div><span id="logout"><router-link to="/"><el-button :plain="true" @click="open1">退出</el-button></router-link></span></el-header><hr /><!-- ——————————————————————————————————————————————————————————————————————主体———————————————————————————————————————————————————————————————————— --><el-main><!-- 经查找、分页渲染出来 展示的数据 --><el-table :data="displayedData" style="width: 100%"><el-table-column class="one" label="id" prop="id" /><el-table-column label="用户名" prop="name" /><el-table-column label="性别" prop="sex" /><el-table-column label="年龄" prop="age" /><el-table-column label="爱好" prop="hobby" /><el-table-column><!-- 查找部分 --><template #header><el-inputclass="search"v-model="search"size="small"placeholder="Type id or name "/></template><!-- 修改、删除按钮 --><template #default="scope"><!-- scope.$index, scope.row拿到每一行的index和数据 --><el-buttonsize="small"@click="handleEdit(scope.row, scope.$index)">Edit</el-button><el-buttonsize="small"type="danger"@click="handleDelete(scope.$index)">Delete</el-button></template></el-table-column></el-table></el-main><!-- 删除确认弹窗 --><el-dialog v-model="delDialogVisible" title="Tips" width="30%"><template #footer><span class="dialog-footer"><el-button @click="open4">Cancel</el-button><el-button type="primary" @click="delDialogVisible = false">Yes</el-button></span></template></el-dialog><!-- ————————————————————————————————————————————————————————————————尾部—————————————————————————————————————————————————————————— --><el-footer><!-- 分页 --><div class="demo-pagination-block"><el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[5, 10, 15, 20]":small="small":disabled="disabled":background="background"layout="total, sizes, prev, pager, next, jumper":total="filterTableData.length"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></el-footer><!-- ——————————————————————————————————————————————————————————新增/编辑弹窗———————————————————————————————————————————————————— --><el-dialogv-model="dialogFormVisible":title="titleMsg"width="40%"round-button="true"><el-form :model="form" label-width="100px" style="padding-right: 30px"><el-form-item label="id："><el-input v-model="form.id"></el-input></el-form-item><el-form-item label="姓名："><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="性别："><el-radio-group v-model="form.sex"><el-radio label="男">男</el-radio><el-radio label="女">女</el-radio></el-radio-group></el-form-item><!-- 限制只能输入数字 --><el-form-item label="年龄："><el-input v-model.number="form.age"></el-input></el-form-item><el-form-item label="爱好："><el-input v-model="form.hobby"></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogFormVisible = false">取消</el-button><el-button type="primary" @click="save">确认</el-button></span></template></el-dialog></el-container></div>
</template>