1. Http发送请求接口
关键类：net.mingsoft.people.action.web.PeopleActon.java
关键方法：PeopleActon.register(...)
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 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-16">
<el-form-item class="class-17" prop="peopleName">
<el-input v-model="form.peopleName"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请输入用户名3-30字符">
</el-input>
</el-form-item>
</div>
<div class="class-18">
<el-form-item class="class-19 " prop="peoplePassword">
<el-input type="password" v-model="form.peoplePassword"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
show-password
placeholder="请输入设置6-18位字母数字组成的密码">
</el-input>
</el-form-item>
</div>
<div class="class-20">
<el-form-item class="class-21 " prop="rePeoplePassword">
<el-input type="password" v-model="form.rePeoplePassword"
:disabled="false"
show-password
: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-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-29">
<el-form-item class="class-30 " prop="peopleMail">
<el-input v-model="form.peopleMail"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请输入邮箱号">
</el-input>
</el-form-item>
</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>-->
</el-form>
<div class="class-38">
<div @click="register"
class="class-39 ">
<el-button class="class-39" type="primary" :loading="operation"
:disabled="form.peopleName && form.peoplePassword && form.rePeoplePassword && form.rand_code ? false:true ">
注册
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
watch: {},
data() {
let isExistsName = (rule, value, callback) => {
var that = this;
ms.http.post("/isExists.do", {
peopleName: that.form.peopleName,
}).then(function (data) {
if (data.result) {
return callback("用户名已存在")
}
callback()
});
// 在此处将callback传到验证方法中
}
return {
operation: false,
countdown: 0,//验证码计时
form: {
peopleName: '',//用户名
peoplePassword: '',//密码
rePeoplePassword: '',//确认密码
peoplePhone: '',//手机号
peopleMail: '',//手机号
peopleCode: '',//验证码
rand_code: '',//图片验证码
},
registerDisabled: false,
verificationCode: '',
rules: {
peopleName: [
{required: true, message: '请输入用户名'},
{validator: isExistsName, trigger: 'blur'},
{min: 6, max: 12, message: '用户名由6至12个字符组成！', trigger: 'blur'},
{
validator: function (rule, value, callback) {
if (/[@#\$%\^&\*]+/g.test(value)) {
callback('不能含有特殊字符')
}
callback();
},
trigger: ['blur']
}
],
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: '请输入验证码'},
],
peoplePhone:
[
{required: true, message: '请输入手机号'},
{
pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
message: '请输入正确的手机号',
trigger: 'blur'
}
],
},
}
},
methods: {
//注册
register: function () {
var target = this;
target.$refs.form.validate((valid) => {
if(valid) {
target.operation = true;
ms.http.post("/register.do", target.form).then(function (data) {
if (data.result != true) {
target.operation = false;
target.$notify.error(data.resultMsg);
} else {
target.$notify.success("注册成功！");
}
}).catch(function (err) {
console.log(err);
});
}else {
target.operation = false;
target.$notify(fields[0].message);
}
})
;
},
//发送手机/邮箱验证码
sendRandCode: function () {
var that = this;
that.$refs.form.validate((valid) => {
if(valid) {
if (that.countdown > 0) {
return;
}
ms.http.post("/isExists.do", {
peoplePhone: that.form.peoplePhone,
}).then(function (data) {
if (data.result) {
that.$notify.error("该手机号已绑定");
} else {
ms.http.post("/sendCode.do", {
"modelCode": "sms",
"type": "sms",
//手机号注册时把以下注释打开
//receive: that.form.peoplePhone,
//邮箱注册时把以下注释打开
//receive: that.form.peopleMail,
"isSession": true,
rand_code: that.form.rand_code,
}).then(function (data) {
if (data.result) {
that.$notify.success('验证码已发送');
that.countdown = 60;
that.countdownSubtract();
that.registerDisabled = true;
} else {
that.$notify.error(data.resultMsg);
}
});
}
});
}else{
that.$notify.error(fields[0].message);
}
})
;
},
//倒计时
countdownSubtract: function () {
if (this.countdown > 0) {
setTimeout(() => {
this.countdown -= 1;
this.countdownSubtract()
},
1000
)
}
},
//验证码
code: function () {
this.verificationCode = "/code?t=" + new Date().getTime();
}
},
created() {
this.code();
}
})
</script>