Java毕业设计开发手记从困惑到成长的编程之旅 各位CSDN的技术小伙伴们~✨作为一名正在Java毕业设计海洋中奋力前行的准毕业生我怀着既紧张又兴奋的心情在这里种下这棵技术分享树。这个空间将记录我从零搭建完整Java项目的奇妙旅程包括技术选型的纠结、功能实现的喜悦、踩坑的酸爽以及破局的顿悟 为什么选择分享这段旅程在代码世界漫游的日子里我发现✨ 纸上得来终觉浅 - 课堂Java知识如何在真实项目中跳舞✨ 选择困难症发作 - Spring Boot还是SSMMyBatis还是JPA✨ 深夜debug的孤独 - 那些让咖啡都失效的bug该向谁倾诉正是这些酸甜苦辣让我决定打开这个技术日记本。期待能得到各位大佬的指点也为学弟学妹们点亮一盏小夜灯~ 期待与您碰撞的火花在这里我们会遇见 技术选择的内心戏 - 为什么最终拜倒在MyBatis-Plus的石榴裙下 bug捕捉日记 - 比如上周那个让我头发掉一地的Spring事务问题 最佳实践礼包 - 从项目结构到代码规范的升级打怪之路 宝藏资源分享 - 那些救我于水火的神仙教程和工具 程序员成长物语 - 从战战兢兢到自信爆棚的心路历程 最后的彩蛋编程从来不是单机游戏正是开源分享让技术世界如此绚烂。虽然我现在只是技术森林里的一棵小树苗但也想为生态贡献一片绿叶。接下来会保持每周2-3篇的更新节奏⏰像连载小说一样记录这个项目的成长。您的每个点赞、收藏⭐、评论都是浇灌我继续生长的阳光雨露☀️️。让我们开始这段充满惊喜的奇幻之旅吧如果对我的项目有任何奇思妙想欢迎随时来聊天室坐坐☕~Happy CodingPS为保护学术小花朵核心业务代码不能show但技术细节会像拆盲盒一样分享哦目录一.基本使用1.代码2.效果展示3.代码解读二.案例修改用户的密码1.期望效果2.代码3.展示效果结语一.基本使用1.代码从官网复制如下代码template div el-steps stylemax-width: 600px :space200 :activeactiveStep finish-statussuccess el-step title第一步 / el-step title第二步 / el-step title第三步 / /el-steps /div /template script setup import {ref} from vue; //控制步骤条的高亮显示 const activeStep ref(0); /script style scoped /style2.效果展示3.代码解读①:space代表每一个步骤之间的距离。②:active表示令哪个步骤高亮显示。举例当activeStep 为0时代表我们要完成第一步当activeStep 为1时代表我们第一步已经完成当前要完成第二步当activeStep 为2时代表我们第二步已经完成当前要完成第三步当activeStep 为3时代表我们第三步已经完成当前要完成第四步但没有第四步了。③finish-statussuccess代表被完成的步骤显示对钩图标。我们可以自行查询element-plus官网还有其他的样式。二.案例修改用户的密码1.期望效果第一步点击【修改密码】按钮第二步弹出【修改用户密码】对话框第三步完成修改用户密码的三步操作输入旧密码、设置新密码、修改成功后跳转到登录页。2.代码①定义一个变量控制哪个步骤高亮显示//控制修改密码步骤条的激活步骤 const activeStep ref(0);//一开始要完成第一步②编写【修改用户密码】对话框在对话框中使用Step步骤条组件其中变量activeStep 控制哪个步骤高亮显示并决定渲染哪些元素旧密码输入框 / 新密码输入框 / 修改密码成功提示。!-- 修改用户密码的对话框 -- el-dialog v-modelupdatePasswordDialog width500 styleheight: auto; draggable closedclosedUpdatePasswordDialog !-- 对话框标题插槽 -- template #header !-- el-iconSetting //el-iconspan stylemargin-left: 5px;修改密码/span -- !-- 步骤条 -- el-steps stylewidth: 800px :space200 :activeactiveStep finish-statussuccess el-step title输入旧密码 / el-step title设置新密码 / el-step title修改成功 / /el-steps /template !-- 步骤一的输入框 -- div v-ifactiveStep 0 el-input v-modeluserOldPwd typepassword show-password stylewidth: 240px placeholder请输入用户的旧密码/el-input el-button typeprimary stylemargin-left: 5px; clickconfirmOldPwd确定/el-button /div !-- 步骤二的输入框 -- div v-ifactiveStep 1 el-input v-modeluserNewPwd typepassword show-password stylewidth: 240px placeholder请设置用户的新密码/el-input el-button typeprimary stylemargin-left: 5px; clicksetNewPwd设置/el-button /div !-- 完成步骤三的提示 -- div v-ifactiveStep 3 span修改密码成功将在 3 秒后返回登录页面.../span /div /el-dialog③输入旧密码点击【确认】按钮触发的事件//点击【输入旧密码】的确认按钮 const confirmOldPwd () { //如果旧密码 pinia中的用户密码则完成本步骤 if(userOldPwd.value user.password){ //提示验证成功 ElMessage.success(验证成功); //完成本步骤 activeStep.value 1; }else{ ElMessage.error(验证错误请重新输入); } }④输入新密码后点击【设置】按钮触发的事件//点击【设置新密码】的设置按钮 const setNewPwd async () { //完成本步骤2 activeStep.value 2; //给后端发送修改密码的请求 const data { password: userNewPwd.value } const res1 await updateUserPwdById(user.id, data); //倒计时1秒后提示设置密码成功并完成步骤3 setTimeout(() { if(res1.code 200){ //提示成功信息 ElMessage.success(设置成功将在3秒后返回登录页面~) //完成步骤3 activeStep.value 3; //倒计时3秒后退出系统跳转到登录页面 setTimeout(() { //跳转到登录页面 router.push(/login) //清空pinia中的用户信息、tabs标签信息 tagStoreInfo.removeAllTagButHome(); },3000) }else{ //提示失败信息 ElMessage.error(设置失败~) //返回步骤2 activeStep.value 1; } }, 1000); }⑤关闭【修改用户密码】对话框后触发事件//关闭修改密码对话框后触发的事件 const closedUpdatePasswordDialog () { //令步骤条的激活步骤为0 activeStep.value 0; //清空输入框的值 userOldPwd.value ; userNewPwd.value ; }3.展示效果结语以上就是element-plus中Step步骤条组件的基本使用。我们使用该组件完成了修改用户密码的功能。喜欢本篇文章的话可以留个免费的关注~