1. Http发送请求接口
关键类：net.mingsoft.people.action.web.PeopleAction.java
关键方法：sendCode(...)
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>
<script>
var isLogin = new Vue({
el: '.is-login',
data: {
isLogin: false,
peopleInfo: {
puNickname: "",
puIcon: "",
peopleMail: "",
newUser:false,
}
},
created: function () {
var that = this;
ms.http.get('/people/user/info.do').then(function (data) {
if (data.peopleId) {
that.isLogin = true;
that.peopleInfo = data;
that.peopleInfo.puNickname = data.puNickname;
}
})
}
})
</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-cloak v-if="isLogin.peopleInfo.peopleMail"
style="width: 340px;margin: 0 auto; margin-top: 30px;">
<span class="class-8 ">绑定邮箱/手机</span>
<el-input :value="showEmail" :disabled="true" style="margin-top: 30px">
<template slot="append">已绑定</template>
</el-input>
<br>
<el-button type="primary" style="width: 100%;margin-top: 20px;"
@click="location.href='/people/change-email.do'">修改邮箱/手机
</el-button>
</div>
<div class="class-7" v-cloak v-else>
<span class="class-8 ">绑定邮箱/手机</span>
<div style="margin-top: 27px;">
<!--当前是绑定邮箱-->
<el-form :model="Form" :rules="rules" ref="form">
<el-form-item prop="email">
<el-input v-model.number="Form.email" placeholder="请输入QQ账号">
<template slot="append">@qq.com</template>
</el-input>
</el-form-item>
<!--如若是绑定手机，请把以下注释打开并注释以上绑定邮箱-->
<!--<el-form-item prop="email">
<template slot="append">+86</template>
<el-input v-model.number="Form.email" placeholder="请输入手机账号">
</el-input>
</el-form-item>-->
<el-form-item prop="randCode" class="form-item-code">
<el-input style="width: 200px" v-model="Form.randCode" placeholder="请输入4位验证码">
</el-input>
<div class="rand_code">
<img :src="codeSrc" @click="switchCode" />
<div>
<span>看不清?</span>
<span class="img-code" @click="switchCode">换一张</span>
</div>
</div>
</el-form-item>
<el-form-item prop="code">
<div style="display: flex;justify-content: space-between">
<el-input v-model="Form.code" style="width: 220px;" placeholder="请输入6位验证码">
</el-input>
<el-button v-text="msg" :disabled="disabled" type="info" plain @click="getCode"
style="width: 100px; padding: 12px 0;">
</el-button>
</div>
</el-form-item>
<el-button type="primary" @click="verifier" style="width: 100%;">确认绑定</el-button>
</el-form>
</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
watch: {
},
data: {
Form: {
//邮箱号或手机号及验证码信息
//邮箱号
email: "",
//手机号
phone: "",
code: "",
randCode: "",
},
msg: "发送验证码",
i: 60,
disabled: false,
codeSrc: "/code",
rules: {
email: [{
required: true,
message: '邮箱不能为空',
trigger: 'blur'
},
{
type: 'number',
message: '请输入正确的QQ',
}
],
code: [{
required: true,
message: '验证码不能为空',
trigger: 'blur'
}, {
min: 6,
max: 6,
message: '请输入6位验证码',
trigger: 'blur'
}, ]
},
},
methods: {
//发送验证码
getCode: function () {
var that = this;
ms.http.post('/sendCode.do', {
//邮箱绑定： 在此切换邮箱
receive: that.Form.email + '@qq.com',
//手机绑定：在此切换手机
//receive: that.Form.email + '@qq.com',
modelCode: "bindEmail",
type: "mail",
isSession: true,
rand_code: that.Form.randCode
}).then(function (data) {
if (data.result) {
that.countDown();
that.disabled = true;
that.$message.success('验证码已发出，请注意查收！');
} else {
if (data.resultMsg) {
that.switchCode();
that.$message.error(data.resultMsg);
}
}
})
},
//刷新验证码
switchCode: function () {
this.codeSrc = "/code?t=" + (new Date).getTime();
},
bindEmail: function () {
var that = this;
ms.http.post('/checkSendCode.do', {
receive: that.Form.email + '@qq.com',
code: that.Form.code
}).then(function (data) {
if (data.result) {
that.updateMail();
} else {
if (data.resultMsg) {
that.switchCode();
that.$message.error(data.resultMsg);
}
}
})
},
//修改邮箱/手机号
updateMail: function () {
var that = this;
ms.http.post('/people/user/update.do', {
peopleMail: that.Form.email + '@qq.com',
peopleMailCheck: 1,
puNickname: isLogin.peopleInfo.puNickname,
}).then(function (data) {
if (data.result) {
that.$notify.success("绑定/修改邮箱成功！");
} else {
that.switchCode();
that.$message.error(data.resultMsg);
}
})
},
//校验表单
verifier: function () {
var that = this;
that.$refs.form.validate(function (valid) {
if (valid) {
that.bindEmail();
}
});
},
//发送时效
countDown: function () {
this.i--;
this.msg = "重新发送(" + this.i + ")";
if (this.i == 0) {
this.msg = "发送验证码";
this.disabled = false;
this.i = 60;
return;
}
setTimeout(this.countDown, 1000);
}
},
computed: {
showEmail: function () {
return isLogin.peopleInfo.peopleMail.substring(0, 3) + "***" + isLogin.peopleInfo.peopleMail.substring(7)
}
},
})
</script>