第78讲 修改密码

系统管理实现
修改密码实现

前端 modifyPassword.vue:

<template><el-card><el-formref="formRef":model="form":rules="rules"label-width="150px"><el-form-item label="用户名:" prop="userName"><el-input v-model="form.userName" disabled/></el-form-item><el-form-item label="原密码:" prop="oldPassword"><el-input v-model="form.oldPassword" type="password"/></el-form-item><el-form-item label="新密码:" prop="newPassword"><el-input v-model="form.newPassword" type="password"/></el-form-item><el-form-item label="确认新密码:" prop="newPassword2"><el-input v-model="form.newPassword2" type="password"/></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">确认修改</el-button></el-form-item></el-form></el-card>
</template><script setup>
import { ref } from 'vue'
import axios from "@/util/axios";
import { ElMessage } from "element-plus";const form=ref({userName:"",password:"",oldPassword:"",newPassword:"",newPassword2:""
})const rules=ref({userName: [{required: true,message: '请输入用户名'}],oldPassword: [{required: true,message: '请输入密码'}],newPassword: [{required: true,message: '请输入新密码'}],newPassword2: [{required: true,message: '请输入确认新密码'}],})const formRef=ref(null);const initFormData=()=>{let userInfoJson=window.sessionStorage.getItem("userInfo");form.value=JSON.parse(userInfoJson);
}initFormData()const onSubmit=()=>{formRef.value.validate(async(valid)=>{if(valid){console.log("success")if(form.value.oldPassword!==form.value.password){ElMessage.error("原密码错误!");}else if(form.value.newPassword!==form.value.newPassword2){ElMessage.error("确认新密码错误!");}else{try{let result=await axios.post("admin/modifyPassword",form.value)let data=result.data;if(data.code==0){ElMessage.success("密码修改成功,重新登录后生效!");formRef.value.resetFields();}else{ElMessage.error(data.msg);}}catch(err){console.log(err)ElMessage.error("系统运行出错,请联系管理员!");}}}else{console.log("fail")return false}})
}</script><style lang="scss" scoped>.el-input{width: 300px;
}
</style>

后端:AdminController

    /*** 修改密码* @param admin* @return*/@PostMapping("/admin/modifyPassword")public R modifyPassword(@RequestBody Admin admin){if(StringUtil.isEmpty(admin.getUserName())){return R.error("用户名不能为空!");}if(StringUtil.isEmpty(admin.getNewPassword())){return R.error("新密码不能为空!");}adminService.update(new UpdateWrapper<Admin>().set("password",admin.getNewPassword()).eq("userName",admin.getUserName()));return R.ok();}

router.js

在这里插入图片描述

import { createRouter, createWebHashHistory } from 'vue-router'const routes = [{path: '/',name: '首页',component: () => import('../views/layout'),redirect:'/home',children:[{path: '/home',name: '首页',component: () => import('../views/home/index')},{path: '/bigType',name: '商品大类',component: () => import('../views/bigType/index')},{path: '/user',name: '用户管理',component: () => import('../views/user/index')},{path: '/modifyPassword',name: '修改密码',component: () => import('../views/modifyPassword/index')}]},{path: '/login',name: 'login',component: () => import('../views/login')}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

报错

Uncaught (in promise) TypeError: Cannot read property 'userName' of nullat eval (index.vue?0772:1)at renderFnWithContext (runtime-core.esm-bundler.js?d2dd:816)at renderSlot (runtime-core.esm-bundler.js?d2dd:2968)at Proxy.eval (form-item.vue?d3c6:428)at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:875)at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:6002)at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:177)at instance.update (runtime-core.esm-bundler.js?d2dd:6133)at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:6143)at mountComponent (runtime-core.esm-bundler.js?d2dd:5911)

views/login/index.vue

          window.sessionStorage.setItem("userInfo",JSON.stringify(form.value))

在这里插入图片描述

成功

在这里插入图片描述

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

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

相关文章

《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)

文章目录 2.1 Flexbox&#xff1a;灵活的布局解决方案2.1.1 基础知识2.1.2 重点案例&#xff1a;创建一个响应式导航菜单2.1.3 拓展案例 1&#xff1a;卡片布局2.1.4 拓展案例 2&#xff1a;中心对齐的登录表单 2.2 Grid 布局&#xff1a;网格系统的魔力2.2.1 基础知识2.2.2 重…

C语言求解猴子分桃子

问题&#xff1a;海滩上有一堆桃子&#xff0c;五只猴子来分。第一只猴子把这堆桃子平均分为五份&#xff0c;多了一个&#xff0c;这只 猴子把多的一个扔入海中&#xff0c;拿走了一份。第二只猴子把剩下的桃子又平均分成五份&#xff0c;又多了 一个&#xff0c;它同样把多的…

english_syntax

文章目录 什么是英语的句子&#xff1f;英语句子的结构句子的成分&#xff08;词性问题&#xff09;谓语系动词主语宾语表语 并列句从句引导词名词性从句形容词性从句&#xff08;定语从句&#xff09;副词性从句&#xff08;状语从句&#xff09; 特殊结构强调句型倒装句型虚拟…

C#log4net日志保存到Sqlserver数据库表(16)

要将log4net的日志保存到SQL Server数据库表中&#xff0c;你需要配置log4net使用一个数据库追加器&#xff08;appender&#xff09;&#xff0c;通常是AdoNetAppender。以下是一个示例配置&#xff0c;展示如何将log4net的日志输出配置为写入SQL Server数据库表。 首先&…

9.手写bind

bind 函数的实现步骤&#xff1a; 判断调用对象是否为函数&#xff0c;即使我们是定义在函数的原型上的&#xff0c;但是可能出现使用 call 等方式调用的情况。保存当前函数的引用&#xff0c;获取其余传入参数值。创建一个函数返回函数内部使用 apply 来绑定函数调用&#xf…

在CE和MSE损失函数中使用置信度的方法

以下是在一个半监督情景中 weak_output_ul为弱扰动出来的logits ,strong_output_ul为强扰动出来的logits 两者尺寸都可看作[8,2,256,256] CE: weak_x_ul self.encoder(A_ul, B_ul) weak_output_ul self.main_decoder(weak_x_ul) weak_targets …

PostgreSQL导出导入

导出常用方法 pg_dumpall&#xff1a;适合导出cluster中所有业务库 pg_dump&#xff1a;适合单个库、schema级、表级导出 copy&#xff1a;适合单表或带条件sql结果导出&#xff08;可导出为csv或txt格式&#xff09; 一、 pg_dumpall pg_dumpall可以转储cluster里的所有数…

C#面:Sleep() 和 Wait() 有什么区别

Sleep() 和 Wait() 是两个不同的方法&#xff0c;用于控制线程的执行。 Sleep() 方法&#xff1a; 是线程类 Thread 的静态方法&#xff0c;它使当前线程暂停执行一段时间。 Sleep() 方法接受一个参数&#xff0c;表示线程暂停的时间长度&#xff0c;单位是毫秒。 在暂停期…

C++ 11新特性之语法甜点4

概述 C 11中引入了许多简化编程工作的语法上的新特性&#xff0c;我们暂且美其名曰&#xff1a;“语法甜点”。书接上篇&#xff0c;我们继续介绍C 11中的这些“语法甜点”&#xff0c;也是最后一篇关于“语法甜点”的文章。 语法甜点16&#xff1a;新的字符串字面值 C 03提供了…

VitePress-13- 配置-title的作用详解

作用描述 1、title 是当前站点的标题&#xff1b;2、默认值是 &#xff1a;VitePress&#xff1b;3、当使用默认主题时&#xff0c;会直接展示在 页面的【导航条】中&#xff1b;4、一个特殊的作用 &#xff1a; 会作为单个页面的默认标题后缀&#xff01;除非又指定了【title…

WSL下如何使用Ubuntu本地部署Vits2.3-Extra-v2:中文特化修复版(新手从0开始部署教程)

环境&#xff1a; 硬&#xff1a; 台式电脑 1.cpu:I5 11代以上 2.内存16G以上 3.硬盘固态500G以上 4.显卡N卡8G显存以上 20系2070以上 本案例英伟达4070 12G 5.网络可连github 软&#xff1a; Win10 专业版 19045以上 WSL2 -Ubuntu22.04 1.bert-Vits2.3 Extra-v2:…

CSP-201912-1-报数

CSP-201912-1-报数 知识点总结 整数转化为字符串#include <string> string str_num to_string(num);字符串中查找是否包含字符‘7’&#xff1a;str_num.find(7) 未找到返回-1找到返回返回该字符在字符串中的位置&#xff08;即第一次出现的索引位置&#xff09; #i…

腾讯云4核8G服务器够用吗?容纳多少人同时访问?

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…

java nio零拷贝

零拷贝是一种计算机执行IO操作的优化技术&#xff0c;其核心目标是减少数据拷贝次数&#xff0c;从而提高系统性能。它主要体现在以下几个方面&#xff1a; 1. **定义与原理**&#xff1a;零拷贝字面上的意思包括“零”和“拷贝”。其中&#xff0c;“拷贝”是指数据从一个存储…

西工大计算机学院复试问题整理

1. DMA DMA是一种无须CPU参与就可以让外设与系统内存之间进行双向数据传输的硬件机制1&#xff0c;而中断是指CPU在执行程序的过程中&#xff0c;出现了某些突发事件时必须暂停执行当前的程序&#xff0c;转去处理突发事件1。两者的主要区别是&#xff1a; 中断方式是在每个数据…

读千脑智能笔记11_保存人类遗产

1. 智能生物通常能延续多久 1.1. SETI和METI计划的可行性在很大程度上取决于智能生物通常能延续多久 1.1.1. 搜寻地外文明&#xff08;以下简称SETI&#xff09;计划的目标 1.1.1.1. 这是一个力图寻找宇宙其他地方智能生物存在证据的研究项目 1.1.1.2. SETI计划旨在寻找含有…

[NSSCTF]-Web:[SWPUCTF 2021 新生赛]easy_sql解析

查看网页 有提示&#xff0c;参数是wllm&#xff0c;并且要我们输入点东西 所以&#xff0c;我们尝试以get方式传入 有回显&#xff0c;但似乎没啥用 从上图看应该是字符型漏洞&#xff0c;单引号字符注入 先查看字段数 /?wllm2order by 3-- 没回显 报错了&#xff0c;说明…

顺序表、链表(ArrayList、LinkedList)

目录 前言&#xff1a; 顺序表&#xff08;ArrayList&#xff09;&#xff1a; 顺序表的原理&#xff1a; ArrayList源码&#xff1a; 的含义&#xff1a;​编辑 ArrayList的相关方法&#xff1a;​编辑 向上转型List&#xff1a; 练习题&#xff08;杨辉三角&#x…

修改GI文件的权限

参考文档&#xff1a; How to check and fix file permissions on Grid Infrastructure environment (Doc ID 1931142.1) -- 验证二进制文件的权限 [gridnode19c01 ~]$ cluvfy comp software -n node19c01 -verbosePerforming following verification checks ...Software …

tokio tcp通信

引入crate tokio { version "1.35.1", features ["full"] } 服务端 use std::time::Duration; use tokio::{io::{AsyncBufReadExt, AsyncWriteExt},net::{tcp::{OwnedReadHalf, OwnedWriteHalf},TcpListener, TcpStream,},sync::mpsc, };#[tokio::ma…