1. 修改密码
关键类：net.mingsoft.people.action.people.PeopleAction.java
关键方法：changePassword(...)
1.1. 范例：用户修改密码
修改密码是指在已登录和输入原密码正确的情况下，才能设定新密码
1.1.1. 实例： 修改密码
注意：若想直接操作并实现以下代码，请先登录
<html>
<head>
<meta charset="utf-8">
<title>修改密码</title>
<meta http-equiv="content-type" content="text/html"/>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
<meta name="viewport"
content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="app-mobile-web-app-capable" content="yes"/>
<meta name="app-mobile-web-app-status-bar-style" content="black-translucent"/>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--通用图标-->
<link rel="stylesheet" href="https://cdn.mingsoft.net/iconfont/iconfont.css"/>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/qs/6.9.0/qs.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://cdn.mingsoft.net/ms/1.0/ms.js"></script>
<script src="http://cdn.mingsoft.net/ms/1.0/ms.http.js"></script>
<script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script>
<style>
[v-cloak] {
display: none;
}
.custom-body {
width: 300px;
margin: auto;
}
</style>
</head>
<body class="custom-body">
<div id="app" v-cloak>
<div v-if="isLogin">
<div class="class-2">
<div class="class-10">
<div class="class-11">
<div class="class-12 "></div>
<div class="class-15">
<div class="class-16 "></div>
<div class="class-17 "></div>
<div class="class-18">
<div class="class-19 ">当前用户：{{peopleName}} 设置密码</div>
</div>
<el-form ref="form" :model="form" :rules="rules">
<div class="class-20">
<el-form-item class="class-21 " prop="peopleOldPassword">
<el-input show-password type="password" v-model="form.peopleOldPassword"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请输入原密码">
</el-input>
</el-form-item>
</div>
<div class="class-20">
<el-form-item class="class-21 " prop="peoplePassword">
<el-input show-password type="password" v-model="form.peoplePassword"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请输入新密码密码">
</el-input>
</el-form-item>
</div>
<div class="class-20">
<el-form-item class="class-21 " prop="rePeoplePassword">
<el-input show-password type="password" v-model="form.rePeoplePassword"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请确认密码">
</el-input>
</el-form-item>
</div>
<div class="class-22">
<el-form-item class="class-23 " prop="rand_code">
<el-input v-model="form.rand_code"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请输入验证码">
</el-input>
</el-form-item>
<div class="class-24">
<img :src="verificationCode" @click="code"
class="class-25 "/>
</div>
<div class="class-26">
<div class="class-27 ">看不清</div>
<div class="class-28 " @click="code">换一个</div>
</div>
</div>
</el-form>
<div class="class-37">
<div @click="changePassword"
class="class-38 ">
<el-button class="class-38" type="primary" :loading="operation"
:disabled="form.rand_code && form.rePeoplePassword && form.peoplePassword && form.peopleOldPassword ? false:true">
提交
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else><span style="color:red">请先登录！</span></div>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
watch: {},
data: {
//判断是否登录
isLogin: false,
//用户账号
peopleName:'',
operation: false,
form: {
peopleOldPassword: '',
peoplePassword: '',
rePeoplePassword: '',//确认密码
rand_code: '',
},
verificationCode: '',//验证码
rules: {
peopleOldPassword: [
{required: true, message: '请输入旧密码'},
],
peoplePassword: [
{required: true, message: '请输入新密码'},
{pattern: /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,18}$/, message: '请输入6-18位由字母数字组成的密码'}
],
rePeoplePassword: [
{
validator: (rule, value, callback) => {
if(!value){
callback('请确认密码');
}else if (app.form.peoplePassword === value) {
callback();} else {
callback('新密码不一致');
}
}
}
],
rand_code:[
{required: true, message: '请输入验证码'},
],
}
},
methods: {
//修改密码
changePassword:function () {
var that = this;
that.$refs.form.validate((valid) => {
if(valid) {
that.operation = true;
ms.http.post("/people/changePassword.do", that.form).then(function (data) {
if (data.result) {
that.$notify.success("修改成功");
} else {
that.operation = false;
that.$notify.error(data.resultMsg);
that.code();
}
});
}else {
that.operation = false;
}
});
},
//验证码
code:function () {
this.verificationCode = "/code?t=" + new Date().getTime();
},
},
created(){
var that = this;
that.code();
ms.http.get('/people/user/info.do').then(function (data) {
if (data.peopleId) {
that.isLogin = true;
that.peopleName = data.peopleName;
}
})
}
})
</script>