给我写一个登录注册页面,只能用html+css+js和koa框架以及ajax
时间: 2024-01-22 15:20:11 浏览: 27
好的,下面是一个简单的登录注册页面的示例代码:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录/注册</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1>欢迎登录/注册</h1>
<div class="form-container">
<form class="login-form">
<h2>登录</h2>
<div class="form-group">
<label for="login-email">邮箱</label>
<input type="email" id="login-email" name="email" required>
</div>
<div class="form-group">
<label for="login-password">密码</label>
<input type="password" id="login-password" name="password" required>
</div>
<button type="submit">登录</button>
</form>
<form class="register-form">
<h2>注册</h2>
<div class="form-group">
<label for="register-email">邮箱</label>
<input type="email" id="register-email" name="email" required>
</div>
<div class="form-group">
<label for="register-password">密码</label>
<input type="password" id="register-password" name="password" required>
</div>
<button type="submit">注册</button>
</form>
</div>
<div class="message-container"></div>
</div>
<script src="./main.js"></script>
</body>
</html>
```
CSS部分:
```css
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form-container {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
}
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
width: 40%;
}
form h2 {
margin-top: 0;
}
form .form-group {
margin-bottom: 10px;
}
form label {
display: block;
margin-bottom: 5px;
}
form input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
margin-bottom: 10px;
}
form button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.message-container {
margin-top: 20px;
text-align: center;
color: red;
}
```
JavaScript部分:
```js
const loginForm = document.querySelector('.login-form');
const registerForm = document.querySelector('.register-form');
const messageContainer = document.querySelector('.message-container');
// 提交登录表单
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
const email = loginForm.email.value;
const password = loginForm.password.value;
try {
const response = await axios.post('/api/login', {
email,
password
});
messageContainer.innerHTML = '登录成功';
} catch (error) {
messageContainer.innerHTML = '登录失败,请检查邮箱和密码是否正确';
}
});
// 提交注册表单
registerForm.addEventListener('submit', async (e) => {
e.preventDefault();
const email = registerForm.email.value;
const password = registerForm.password.value;
try {
const response = await axios.post('/api/register', {
email,
password
});
messageContainer.innerHTML = '注册成功';
} catch (error) {
messageContainer.innerHTML = '注册失败,请检查邮箱和密码是否符合要求或者邮箱已被使用';
}
});
```
Koa部分:
```js
const Koa = require('koa');
const app = new Koa();
// 解析请求体
const bodyParser = require('koa-bodyparser');
app.use(bodyParser());
// 登录接口
app.use(async (ctx, next) => {
if (ctx.url === '/api/login' && ctx.method === 'POST') {
const { email, password } = ctx.request.body;
// 在此处添加验证逻辑,验证通过则返回用户信息
// 否则返回状态码401和错误信息
ctx.body = { message: '登录成功' };
}
await next();
});
// 注册接口
app.use(async (ctx, next) => {
if (ctx.url === '/api/register' && ctx.method === 'POST') {
const { email, password } = ctx.request.body;
// 在此处添加注册逻辑,注册成功则返回用户信息
// 否则返回状态码400和错误信息
ctx.body = { message: '注册成功' };
}
await next();
});
app.listen(3000);
```
这个示例代码只是一个简单的示例,实际的登录注册页面可能需要更复杂的逻辑和验证,但这个示例可以作为一个基础的框架来构建。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)