写一个时候手机号验证登录的前后端分离页面
时间: 2023-12-19 13:06:43 浏览: 23
前端页面:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手机号验证登录</title>
</head>
<body>
<h1>手机号验证登录</h1>
<form>
<label for="phone">手机号:</label>
<input type="text" id="phone" name="phone"><br><br>
<label for="code">验证码:</label>
<input type="text" id="code" name="code"><br><br>
<button id="sendCodeBtn">发送验证码</button>
<button id="loginBtn">登录</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
// 发送验证码按钮点击事件
$('#sendCodeBtn').on('click', function() {
var phone = $('#phone').val();
if (phone === '') {
alert('请输入手机号');
return;
}
$.ajax({
url: '/sendCode',
type: 'POST',
data: {phone: phone},
success: function(data) {
if (data.code === 200) {
alert('验证码已发送,请注意查收');
} else {
alert('发送失败,请稍后重试');
}
}
});
});
// 登录按钮点击事件
$('#loginBtn').on('click', function() {
var phone = $('#phone').val();
var code = $('#code').val();
if (phone === '' || code === '') {
alert('请输入手机号和验证码');
return;
}
$.ajax({
url: '/login',
type: 'POST',
data: {phone: phone, code: code},
success: function(data) {
if (data.code === 200) {
alert('登录成功');
} else {
alert('登录失败,请检查手机号和验证码是否正确');
}
}
});
});
});
</script>
</body>
</html>
```
后端代码:
```
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// 发送验证码接口
app.post('/sendCode', function(req, res) {
var phone = req.body.phone;
// TODO:调用第三方短信平台发送验证码
// 返回结果
res.json({code: 200, message: '验证码已发送'});
});
// 登录接口
app.post('/login', function(req, res) {
var phone = req.body.phone;
var code = req.body.code;
// TODO:验证手机号和验证码是否匹配
// 返回结果
if (match) {
res.json({code: 200, message: '登录成功'});
} else {
res.json({code: 400, message: '手机号或验证码不正确'});
}
});
app.listen(3000, function() {
console.log('App listening on port 3000');
});
```
说明:
1. 前端页面使用表单的方式提交手机号和验证码。
2. 发送验证码按钮点击事件会向后端发送一个 POST 请求,传递手机号。
3. 后端接收到请求后,调用第三方短信平台发送验证码,并返回结果。
4. 登录按钮点击事件会向后端发送一个 POST 请求,传递手机号和验证码。
5. 后端接收到请求后,验证手机号和验证码是否匹配,并返回结果。