后台管理系统

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/32214.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年的C++基础笔记

C 基本语法 对象 - 对象具有状态和行为。例如&#xff1a;一只狗的状态 - 颜色、名称、品种&#xff0c;行为 - 摇动、叫唤、吃。对象是类的实例。 类 - 类可以定义为描述对象行为/状态的模板/蓝图。 方法 - 从基本上说&#xff0c;一个方法表示一种行为。一个类可以包含多个…

elementui动态表单实现计算属性携带参数,并将计算出的值四舍五入保留两位小数

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言方法1方法2结论 前言 写项目的时候&#xff0c;遇到需要在动态表单中&#xff0c;将同一级输入框输入的内容计算出来&#xff0c;并动态显示&#xff0c;发现c…

4.3、Flink任务怎样读取Kafka中的数据

目录 1、添加pom依赖 2、API使用说明 3、这是一个完整的入门案例 4、Kafka消息应该如何解析 4.1、只获取Kafka消息的value部分 ​4.2、获取完整Kafka消息(key、value、Metadata) 4.3、自定义Kafka消息解析器 5、起始消费位点应该如何设置 ​5.1、earliest() 5.2、lat…

zookeeper总结

1.概念 Zookeeper 是一个分布式协调服务&#xff0c;可用于服务发现&#xff0c;分布式锁&#xff0c;分布式领导选举&#xff0c;配置管理等。Zookeeper 提供了一个类似于 Linux 文件系统的树形结构&#xff08;可认为是轻量级的内存文件系统&#xff0c;但只适合存少量信息&…

MYSQL 根据某个字段计算排名查询

Mysql8.0前的版本 在MySQL中&#xff0c;你可以使用变量和子查询来计算基于某个字段的排名。以下是一个示例查询&#xff0c;假设你要根据某个字段&#xff08;例如score&#xff09;计算排名&#xff1a; SELECT rank, user_id, score FROM (SELECT user_id, score, rank : …

nginx编译以及通过自定义生成证书配置https

1. 环境准备 1.1 软件安装 nginx安装编译安装以及配置https&#xff0c;需要gcc-c pcre-devel openssl openssl-devel软件。因此需要先安装相关软件。 yum -y install gcc-c pcre-devel openssl openssl-devel wgetopenssl/openssl-devel&#xff1a;主要用于nginx编译的htt…

Redis心跳检测

在命令传播阶段&#xff0c;从服务器默认会以每秒一次的频率&#xff0c;向主服务器发送命令&#xff1a; REPLCON FACK <rep1 ication_ offset>其中replication_offset是从服务器当前的复制偏移量。 发送REPLCONF ACK命令对于主从服务器有三个作用&#xff1a; 检测主…

【C++】const_cast基本用法(详细讲解)

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

步入React前厅 - Css In React

目录 扩展学习资料 行内样式 引入样式表 CSS Module /src/components/common.module.css /src/components/listitem.module.css css管理进阶 Css管理工具 练习 扩展学习资料 资料名称 链接 css module CSS Modules 用法教程 - 阮一峰的网络日志 在React中使…

Myatis和MybatisPlus常见分页方式

Myatis和MybatisPlus常见分页方式 一、mybaits 原生limit分页 SELECT * FROM order_info limit #{pageNow},#{pageSize}分页插件&#xff08;ssm中&#xff0c;通过xml配置分页。springboot通过则通过配置文件&#xff09; PageHelper插件&#xff1a;PageHelper.startPage(…

js的转变

今天闲着没事在chat上面搜了一下js的转变大家看看&#xff0c;不喜勿喷 1. 起源和简单脚本语言 JavaScript诞生于上世纪90年代早期&#xff0c;最初作为一种简单的脚本语言用于网页浏览器中&#xff0c;主要用于添加动态效果和交互。当时&#xff0c;它的用途局限&#xff0c…

【图像去噪的滤波器】非局部均值滤波器的实现,用于鲁棒的图像去噪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果

flutter开发实战-实现marquee文本跑马灯效果 最近开发过程中需要marquee文本跑马灯效果&#xff0c;这里使用到了flutter的插件marquee 效果图如下 一、marquee 1.1 引入marquee 在pubspec.yaml中引入marquee # 跑马灯效果marquee: ^2.2.31.2 marquee使用 marquee使用也是…

想要延长Macbook寿命?这六个保养技巧你必须get!

Mac作为我们工作生活的伙伴&#xff0c;重要性不需要多说。但在使用的过程中&#xff0c;我们总会因不当操作导致Mac出现各种问题。 要想它长久的陪伴&#xff0c;平时的维护与保养自然不能少&#xff0c;Mac的保养很重要的两点就是硬件保养和电脑系统保养&#xff0c;硬件保养…

使用 POI 在 Word 中重新开始编号、自定义标题格式

效果图 引入依赖 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependency><!-- https…

SpringCloud整体架构概览

什么是SpringCloud 目标 协调任何服务&#xff0c;简化分布式系统开发。 简介 构建分布式系统不应该是复杂的&#xff0c;SpringCloud对常见的分布式系统模式提供了简单易用的编程模型&#xff0c;帮助开发者构建弹性、可靠、协调的应用程序。SpringCloud是在SpringBoot的基…

Unity游戏源码分享-儿童益智数学大脑训练游戏

Unity游戏源码分享-儿童益智数学大脑训练游戏 5秒内选择答案 项目下载地址&#xff1a;https://download.csdn.net/download/Highning0007/88198773

WebAssembly

WebAssembly&#xff08;简称Wasm&#xff09;是一种面向Web的二进制指令格式&#xff0c;用于在现代Web浏览器中运行高性能的可移植代码。它是一种跨平台、低级别的虚拟机技术&#xff0c;允许开发者将不同编程语言的代码编译成Wasm格式&#xff0c;然后在Web浏览器中运行。 …

信息学奥赛一本通——1267:【例9.11】01背包问题

文章目录 题目【题目描述】【输入】【输出】【输入样例】【输出样例】 AC代码 题目 【题目描述】 一个旅行者有一个最多能装 M M M 公斤的背包&#xff0c;现在有 n n n 件物品&#xff0c;它们的重量分别是 W 1 &#xff0c; W 2 &#xff0c; . . . , W n W_1&#xff0c…

整理mongodb文档:改

个人博客 整理mongodb文档:改 求关注&#xff0c;求批评&#xff0c;求进步 文章概叙 本文主要讲的是mongodb的updateOne以及updateMany&#xff0c;主要还是在shell下进行操作&#xff0c;也讲解下主要的参数upsert以及更新的参数。 数据准备 本次需要准备的数据不是很多…