<template>
<el-card>
<el-form
ref="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 {ElMessage} from 'element-plus'
import axios from '@/util/axios'
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){
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){
ElMessage.error("系统运行出错，请联系管理员")
}
}
}else{
console.log("fail")
}
})
}
</script>
<style lang="scss" scoped>
.el-input{
width: 300px;
}
</style>
package com.java1234.controller.admin;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.baomidou.mybatisplus.extension.conditions.update.UpdateChainWrapper;
import com.java1234.constant.SystemConstant;
import com.java1234.entity.Admin;
import com.java1234.entity.R;
import com.java1234.service.IAdminService;
import com.java1234.util.JwtUtils;
import com.java1234.util.StringUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
/**
*
* 管理员Controller
*/
@RestController
public class AdminController {
@Autowired
private IAdminService adminService;
/**
* 管理员登录
*/
@PostMapping("/adminLogin")
public R adminLogin(@RequestBody Admin admin){
if(admin==null){
return R.error();
}
if(StringUtil.isEmpty(admin.getUserName())){
return R.error("用户名不能为空！");
}
if(StringUtil.isEmpty(admin.getPassword())){
return R.error("密码不能为空！");
}
Admin resultAdmin = adminService.getOne(new QueryWrapper<Admin>().eq("userName",admin.getUserName()));
if(resultAdmin==null){
return R.error("用户名不存在");
}
if(!resultAdmin.getPassword().trim().equals(admin.getPassword())){
return R.error("用户名或者密码错误！");
}
String token = JwtUtils.createJWT("-1","admin", SystemConstant.JWT_TTL);
Map<String,Object> resultMap=new HashMap<>();
resultMap.put("token",token);
return R.ok(resultMap);
}
/**
* 修改密码
* @param admin
* @return
*/
@PostMapping("/admin/modifyPassword")
public R modifyPassword(@RequestBody Admin admin){
if(StringUtil.isEmpty(admin.getUserName())){
return R.error("用户名不能为空");
}
if(StringUtil.isEmpty(admin.getPassword())){
return R.error("新密码不能为空");
}
adminService.update(new UpdateWrapper<Admin>().set("password",admin.getNewPassword()).eq("userName",admin.getUserName()));
return R.ok();
}
}
<template>
<div class="login-container">
<el-form
ref="formRef"
:rules="rules"
:model="form"
class="login-form"
>
<div class="title-container">
<h3 class="title">Java1234Mall-管理员登录</h3>
</div>
<el-form-item prop="userName">
<!-- <el-icon :size="20" class="svg-container">-->
<!-- <edit/>-->
<!-- </el-icon>-->
<svg-icon icon="user" class="svg-container"></svg-icon>
<el-input v-model="form.userName" placeholder="请输入用户名..."/>
</el-form-item>
<el-form-item prop="password">
<!-- <el-icon :size="20" class="svg-container">-->
<!-- <edit/>-->
<!-- </el-icon>-->
<svg-icon icon="password" class="svg-container"></svg-icon>
<el-input v-model="form.password" type="password" placeholder="请输入密码.."/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="login-button" @click="handleLogin">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import axios from 'axios'
import {ElMessage} from 'element-plus'
import axiosUtil from '@/util/axios'
import router from '@/router'
const form=ref({
userName:'',
password:''
})
const rules=ref({
userName: [
{
required: true,
message: '请输入用户名',
trigger: 'blur'
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: 'blur'
}
]
})
const formRef=ref(null);
const handleLogin=()=>{
formRef.value.validate(async (valid)=>{
if(valid){
// axios.post("http://localhost:8080/adminLogin",form.value).then(response=>{
// console.log(response.data);
// }).catch(error=>{
// ElMessage.error('系统运行出错，请联系管理员')
// })
try {
let result = await axiosUtil.post("adminLogin",form.value);
let data=result.data;
if(data.code==0){
// ElMessage.success("登录成功");
window.sessionStorage.setItem("token",data.token);
window.sessionStorage.setItem("userInfo",JSON.stringify(form.value))
router.replace("/");
}else{
ElMessage.error(data.msg);
}
}catch(err) {
console.log("error:"+err);
ElMessage.error("服务器出错，请联系管理员！");
}
}else{
console.log("验证失败")
}
})
}
</script>
<style lang="scss" scoped>
$bg:
$dark_gray:
$light_gray:
$cursor:
.login-container {
min-height: 100%;
width: 100%;
background-color: $bg;
overflow: hidden;
.login-form {
position: relative;
width: 520px;
max-width: 100%;
padding: 160px 35px 0;
margin: 0 auto;
overflow: hidden;
::v-deep .el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color:
}
::v-deep .el-form-item__content{
color:
background: rgba(0, 0, 0, 0.1);
}
::v-deep .el-input__wrapper {
display: block;
color:
background: rgb(36,47,60);
box-shadow:none;
}
::v-deep .el-input {
display: inline-block;
background: rgb(36,47,60);
height: 47px;
width: 85%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
caret-color: $cursor;
}
}
.login-button {
width: 100%;
box-sizing: border-box;
}
}
.tips {
font-size: 16px;
line-height: 28px;
color:
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
display: inline-block;
}
.title-container {
position: relative;
.title {
font-size: 26px;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
::v-deep .lang-select {
position: absolute;
top: 4px;
right: 0;
background-color: white;
font-size: 22px;
padding: 4px;
border-radius: 4px;
cursor: pointer;
}
}
.show-pwd {
// position: absolute;
// right: 10px;
// top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
</style>
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
