内部网站 备案,网络广告推广服务,精品简历网官网,wordpress防抓取1.1 项目概述
简易后台管理系统是一个基于Vue3ElemrntPlus的后台管理系统#xff0c;提供了用户登录、记住密码、数据的增删改查、分页、错误信息提示等功能#xff0c;旨在协助管理员对特定数据进行管理和操作。 没有后台对接#xff0c;数据源为假数据。 全部代码已上传G…1.1 项目概述
简易后台管理系统是一个基于Vue3ElemrntPlus的后台管理系统提供了用户登录、记住密码、数据的增删改查、分页、错误信息提示等功能旨在协助管理员对特定数据进行管理和操作。 没有后台对接数据源为假数据。 全部代码已上传GitHub加⭐防丢失。后台管理系统 注释部分写的很详细。
1.2 具体功能 实现效果如下 简易后台管理系统 1.3 部分代码展示
src\views\LoginView.vue部分——登录页面
templatediv classonShowh3 classtitleOne后台管理系统/h3!-- 姓名 --用户名el-input v-modelinput placeholder请输入用户名 /!-- 错误提示 --div classerrContaindiv v-showinputError classerror-message{{ inputErrorMessage }}/div/div!-- 密码 --密码el-input v-modelpassword typepassword placeholder请输入密码 /!-- 错误提示 --div classerrContaindiv v-showpasswordError classerror-message{{ passwordErrorMessage }}/div/div!-- 记住密码 --div classrem记住密码el-switch v-modelrememberPassword sizesmall //div!-- 验证码 --Vcode:showisShow:imgsimgssuccessonSuccesscloseonClose/!-- 登录 --!-- router-link to/home --el-button typeprimary clickonShow :disabledhasError安全登录/el-button!-- /router-link --/div
/templatescript 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.valuefalseinputErrorMessage.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);// 验证成功需要手动关闭模态框
};/scriptstyle 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);
}/stylesrc\components\ComHome.vue——操作页面的布局部分
templatediv classcommon-layoutel-container!-- ————————————————————————————————————————————————————————————————头部 ————————————————————————————————————————————————————————————————————————--el-headerdiv classaddel-button :plaintrue clickhandleAdd新增数据 /el-button/divdiv classtitle后台管理系统/divspan idlogoutrouter-link to/el-button :plaintrue clickopen1退出/el-button/router-link/span/el-headerhr /!-- ——————————————————————————————————————————————————————————————————————主体———————————————————————————————————————————————————————————————————— --el-main!-- 经查找、分页渲染出来 展示的数据 --el-table :datadisplayedData stylewidth: 100%el-table-column classone labelid propid /el-table-column label用户名 propname /el-table-column label性别 propsex /el-table-column label年龄 propage /el-table-column label爱好 prophobby /el-table-column!-- 查找部分 --template #headerel-inputclasssearchv-modelsearchsizesmallplaceholderType id or name //template!-- 修改、删除按钮 --template #defaultscope!-- scope.$index, scope.row拿到每一行的index和数据 --el-buttonsizesmallclickhandleEdit(scope.row, scope.$index)Edit/el-buttonel-buttonsizesmalltypedangerclickhandleDelete(scope.$index)Delete/el-button/template/el-table-column/el-table/el-main!-- 删除确认弹窗 --el-dialog v-modeldelDialogVisible titleTips width30%template #footerspan classdialog-footerel-button clickopen4Cancel/el-buttonel-button typeprimary clickdelDialogVisible falseYes/el-button/span/template/el-dialog!-- ————————————————————————————————————————————————————————————————尾部—————————————————————————————————————————————————————————— --el-footer!-- 分页 --div classdemo-pagination-blockel-paginationv-model:current-pagecurrentPagev-model:page-sizepageSize:page-sizes[5, 10, 15, 20]:smallsmall:disableddisabled:backgroundbackgroundlayouttotal, sizes, prev, pager, next, jumper:totalfilterTableData.lengthsize-changehandleSizeChangecurrent-changehandleCurrentChange//div/el-footer!-- ——————————————————————————————————————————————————————————新增/编辑弹窗———————————————————————————————————————————————————— --el-dialogv-modeldialogFormVisible:titletitleMsgwidth40%round-buttontrueel-form :modelform label-width100px stylepadding-right: 30pxel-form-item labelidel-input v-modelform.id/el-input/el-form-itemel-form-item label姓名el-input v-modelform.name/el-input/el-form-itemel-form-item label性别el-radio-group v-modelform.sexel-radio label男男/el-radioel-radio label女女/el-radio/el-radio-group/el-form-item!-- 限制只能输入数字 --el-form-item label年龄el-input v-model.numberform.age/el-input/el-form-itemel-form-item label爱好el-input v-modelform.hobby/el-input/el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickdialogFormVisible false取消/el-buttonel-button typeprimary clicksave确认/el-button/span/template/el-dialog/el-container/div
/template
