用JavaScript登陆注册和主页,注册成功、登录成功和登录失败有弹窗提示。美化一下主页
时间: 2024-02-06 14:11:54 浏览: 39
好的,我会尽力回答您的问题。
首先,您需要使用前端框架(如Vue、React等)和后端框架(如Node.js、Django等)来实现登录注册功能。下面是一个简单的示例:
1. 登录页面
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1>登录</h1>
<form id="login-form">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<button type="submit">登录</button>
</form>
<p id="msg"></p>
</div>
<script src="./login.js"></script>
</body>
</html>
```
2. 注册页面
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1>注册</h1>
<form id="register-form">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<button type="submit">注册</button>
</form>
<p id="msg"></p>
</div>
<script src="./register.js"></script>
</body>
</html>
```
3. 登录和注册的JS代码
```javascript
// login.js
const loginForm = document.querySelector('#login-form');
const msg = document.querySelector('#msg');
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
const username = loginForm.elements.username.value;
const password = loginForm.elements.password.value;
const res = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
});
const data = await res.json();
if (data.success) {
window.location.href = '/dashboard.html';
} else {
msg.textContent = data.message;
}
});
// register.js
const registerForm = document.querySelector('#register-form');
const msg = document.querySelector('#msg');
registerForm.addEventListener('submit', async (e) => {
e.preventDefault();
const username = registerForm.elements.username.value;
const password = registerForm.elements.password.value;
const res = await fetch('/api/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
});
const data = await res.json();
if (data.success) {
window.location.href = '/dashboard.html';
} else {
msg.textContent = data.message;
}
});
```
4. 后端API
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
let users = [
{ username: 'admin', password: 'admin' }
];
app.post('/api/login', (req, res) => {
const { username, password } = req.body;
const user = users.find(user => user.username === username && user.password === password);
if (user) {
res.json({ success: true });
} else {
res.json({ success: false, message: '用户名或密码错误' });
}
});
app.post('/api/register', (req, res) => {
const { username, password } = req.body;
if (users.find(user => user.username === username)) {
res.json({ success: false, message: '用户名已存在' });
} else {
users.push({ username, password });
res.json({ success: true });
}
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```
5. 主页美化
您可以使用CSS和JavaScript来实现主页的美化。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1>欢迎来到我的网站!</h1>
<p>这是一个简单的网站,用于演示登录注册和主页美化。</p>
<button id="logout">退出</button>
</div>
<script src="./dashboard.js"></script>
</body>
</html>
```
```css
/* style.css */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f8f8f8;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
p {
font-size: 18px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 18px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
```
```javascript
// dashboard.js
const logoutBtn = document.querySelector('#logout');
logoutBtn.addEventListener('click', () => {
fetch('/api/logout')
.then(() => {
window.location.href = '/login.html';
});
});
```
以上示例仅供参考,具体实现细节可能会有所不同。