好的，下面是一个简单的注册和登录页面的示例代码，使用了
Hbuilder提供的
mui框架：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册和登录页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/
mui/3.7.1/css/
mui.min.css">
<script src="https://cdn.bootcss.com/
mui/3.7.1/js/
mui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<!-- 注册页面 -->
<div id="register" class="
mui-content">
<form class="
mui-input-group">
<div class="
mui-input-row">
<label>用户名</label>
<input id="reg-username" type="text" placeholder="请输入用户名">
</div>
<div class="
mui-input-row">
<label>密码</label>
<input id="reg-password" type="password" placeholder="请输入密码">
</div>
<div class="
mui-input-row">
<label>确认密码</label>
<input id="reg-confirm-password" type="password" placeholder="请再次输入密码">
</div>
<div class="
mui-button-row">
<button id="btn-register" type="button" class="
mui-btn
mui-btn-primary">注册</button>
</div>
</form>
</div>
<!-- 登录页面 -->
<div id="login" class="
mui-content">
<form class="
mui-input-group">
<div class="
mui-input-row">
<label>用户名</label>
<input id="login-username" type="text" placeholder="请输入用户名">
</div>
<div class="
mui-input-row">
<label>密码</label>
<input id="login-password" type="password" placeholder="请输入密码">
</div>
<div class="
mui-button-row">
<button id="btn-login" type="button" class="
mui-btn
mui-btn-primary">登录</button>
</div>
</form>
</div>
<script>
mui.init();
// 注册按钮点击事件
$('#btn-register').click(function() {
var username = $('#reg-username').val();
var password = $('#reg-password').val();
var confirmPassword = $('#reg-confirm-password').val();
if (username == '' || password == '' || confirmPassword == '') {
mui.alert('用户名和密码不能为空');
return;
}
if (password != confirmPassword) {
mui.alert('两次输入的密码不一致');
return;
}
// 发送注册请求
$.ajax({
url: '/register',
type: 'POST',
data: {
username: username,
password: password
},
success: function(data) {
if (data.code == 0) {
mui.alert('注册成功');
// 注册成功后跳转到登录页面
mui.openWindow({
url: '#login',
id: 'login'
});
} else {
mui.alert(data.message);
}
},
error: function(xhr, textStatus, errorThrown) {
mui.alert('注册失败：' + errorThrown);
}
});
});
// 登录按钮点击事件
$('#btn-login').click(function() {
var username = $('#login-username').val();
var password = $('#login-password').val();
if (username == '' || password == '') {
mui.alert('用户名和密码不能为空');
return;
}
// 发送登录请求
$.ajax({
url: '/login',
type: 'POST',
data: {
username: username,
password: password
},
success: function(data) {
if (data.code == 0) {
mui.alert('登录成功');
// 登录成功后跳转到首页
mui.openWindow({
url: '/index',
id: 'index'
});
} else {
mui.alert(data.message);
}
},
error: function(xhr, textStatus, errorThrown) {
mui.alert('登录失败：' + errorThrown);
}
});
});
</script>
</body>
</html>
```
解释一下代码：
1. 页面使用了
mui框架，包含了一个注册页面和一个登录页面；
2. 注册页面包括用户名、密码和确认密码三个输入框和一个注册按钮，点击注册按钮后会发送POST请求到服务器的/register接口；
3. 登录页面包括用户名、密码两个输入框和一个登录按钮，点击登录按钮后会发送POST请求到服务器的/login接口；
4. 注册和登录请求都是用jQuery的$.ajax方法发送的，成功后会弹出提示框，失败后也会弹出提示框；
5. 注册成功后会自动跳转到登录页面，登录成功后会自动跳转到首页。
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
