1. Http发送请求接口
关键类：net.mingsoft.people.action.web.PeopleActon.java
关键方法：sendCode(...)
1.1. 范例：用户忘记密码
当用户忘记了登录密码，可以通过手机/邮箱发送验证码的方式重置密码
以下demo中演示并实现了用户的取回密码
<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 class="class-1">
<div class="class-8">
<div class="class-9">
<div class="class-10 "></div>
<div class="class-11">
<div class="class-12 "></div>
<div class="class-13 "></div>
<div class="class-14">
<div class="class-15 ">忘记密码</div>
</div>
<el-form ref="form" :model="form" :rules="rules">
<div class="class-29">
<el-form-item class="class-30 " prop="peoplePhone">
<el-input v-model="form.peoplePhone"
: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>
<div class="class-31">
<el-form-item class="class-30 " prop="peopleCode">
<el-input v-model="form.peopleCode"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请输入验证码">
</el-input>
</el-form-item>
<div class="class-33">
</div>
<div class="class-35">
<el-button type="primary" @click="sendRandCode" class="class-36"
:disabled="countdown ? true : false">
<span v-text="countdown ? ''+countdown + 's重新发送':'获取验证码'"></span>
</el-button>
</div>
</div>
<div class="class-18">
<el-form-item class="class-19 " prop="peoplePassword">
<el-input password type="password" v-model="form.peoplePassword"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请输入设置6-18位字母数字组成的密码">
</el-input>
</el-form-item>
</div>
</el-form>
<div class="class-38">
<div @click="changePassword"
class="class-39 ">
<el-button class="class-39" type="primary" :loading="operation"
:disabled="form.peoplePassword && form.peoplePhone && form.rand_code && form.peopleCode ? false:true">
确认
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
watch: {},
data() {
let isExistsPeoplePhone = (rule, value, callback) => {
var that = this;
ms.http.post("/isExists.do", {
peoplePhone: that.form.peoplePhone,
}).then(function (data) {
if (!data.result) {
return callback("该手机号未绑定");
}
callback();
});
}
return {
operation: false,
countdown: 0,//验证码计时
form: {
peopleName: '',//用户名
peoplePassword: '',//密码
rePeoplePassword: '',//确认密码
peoplePhone: '',//邮箱
peopleCode: '',//验证码
rand_code: '',//图片验证码
},
verificationCode: '',
rules: {
peoplePassword: [
{required: true, message: '请输入密码'},
{pattern: /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,18}$/, message: '请输入6-18位由字母数字组成的密码'},
],
rand_code: [
{required: true, message: '请输入验证码'},
],
peoplePhone: [
{required: true, message: '请输入手机号'},
{pattern: /^[1][0-9]{10}$/, message: '请输入正确的手机号', trigger: 'blur'},
{validator: isExistsPeoplePhone, trigger: 'blur'},
],
},
}
},
methods: {
sendRandCode: function () {
var that = this;
if (that.countdown > 0) {
return;
}
var valid = false;
that.$refs.form.validateField(['peoplePhone', 'rand_code'], function(error){
if(!valid && error != ""){
valid = true;
}
});
if(!valid){
ms.http.post("/sendCode.do", {
receive: that.form.peoplePhone,
"modelCode": "sms",
"type": "sms",
"isSession": false,
rand_code: that.form.rand_code
}).then(function (data) {
if (data.result) {
that.$notify.success('验证码已发送');
}
that.countdown = 60;
that.countdownSubtract();
});
}
},
//倒计时
countdownSubtract: function () {
if (this.countdown > 0) {
setTimeout(() => {
this.countdown -= 1;
this.countdownSubtract()
},
1000
)
}
},
//验证码
code: function () {
this.verificationCode = "/code?t=" + new Date().getTime();
},
login: function () {
location.href = "/mdiyPage/pc-login.do";
},
changePassword: function () {
var that = this;
that.$refs.form.validate((valid) => {
if(valid) {
that.operation = true;
ms.http.post("/checkResetPasswordCode.do", {
rand_code: that.form.rand_code,
peopleCode: that.form.peopleCode,
}).then(function (data) {
if (data.result) {
ms.http.post("/resetPassword.do", {
rand_code: that.form.rand_code,
peopleCode: that.form.peopleCode,
peoplePassword: that.form.peoplePassword,
}).then(function (data) {
if (data.result) {
that.$notify.success('重置密码成功!');
} else {
that.operation = false;
that.$notify.error(data.resultMsg);
}
});
} else {
that.operation = false;
that.$notify.error(data.resultMsg);
}
});
}else{
that.operation = false;
}
})
;
}
},
created() {
this.code();
}
})
</script>
</html>