前端html+css+js+mysql 注册+登录案例
时间: 2023-07-25 22:31:24 浏览: 63
好的,以下是一个简单的前端注册和登录案例,使用了 HTML、CSS、JavaScript 和 MySQL。
首先是注册页面的 HTML 和 CSS 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.container {
width: 500px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
}
h2 {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
form {
margin: 0 auto;
width: 300px;
}
input[type="text"], input[type="password"] {
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px #ccc;
}
input[type="submit"] {
display: block;
margin: 10px auto;
padding: 10px 20px;
background-color: #0099ff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>注册页面</h2>
<form id="registerForm">
<input type="text" placeholder="用户名" id="username">
<input type="password" placeholder="密码" id="password">
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
```
这个页面包含一个表单,用户可以输入用户名和密码进行注册。
接下来是注册页面的 JavaScript 代码,它使用 Ajax 技术将用户名和密码发送给后端进行注册:
```javascript
var registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function(event) {
event.preventDefault();
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/register');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
alert(xhr.responseText);
window.location.href = '/login.html';
} else {
alert('注册失败');
}
};
xhr.send(JSON.stringify({username: username, password: password}));
};
```
这个 JavaScript 代码使用了 XMLHttpRequest 对象,将用户名和密码打包成 JSON 格式并发送给后端进行注册。如果注册成功,会弹出一个提示框,然后跳转到登录页面;如果注册失败,也会弹出一个提示框。
下面是后端使用 Node.js 和 Express 框架实现的注册功能的代码:
```javascript
var express = require('express');
var bodyParser = require('body-parser');
var mysql = require('mysql');
var app = express();
app.use(bodyParser.json());
app.use(express.static('public'));
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'test'
});
app.post('/register', function(req, res) {
var username = req.body.username;
var password = req.body.password;
connection.query('INSERT INTO users SET ?', {username: username, password: password}, function(error, results) {
if (error) {
console.log(error);
res.status(500).send('注册失败');
} else {
console.log(results);
res.status(200).send('注册成功');
}
});
});
var server = app.listen(3000, function() {
console.log('Server listening on port 3000');
});
```
这个代码使用了 Express 框架和 MySQL 模块,监听了 3000 端口。当接收到注册请求时,会将用户名和密码插入到数据库中,如果插入成功,返回 200 状态码和注册成功的信息;否则,返回 500 状态码和注册失败的信息。
接下来是登录页面的 HTML 和 CSS 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.container {
width: 500px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
}
h2 {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
form {
margin: 0 auto;
width: 300px;
}
input[type="text"], input[type="password"] {
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px #ccc;
}
input[type="submit"] {
display: block;
margin: 10px auto;
padding: 10px 20px;
background-color: #0099ff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>登录页面</h2>
<form id="loginForm">
<input type="text" placeholder="用户名" id="username">
<input type="password" placeholder="密码" id="password">
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
```
这个页面包含一个表单,用户可以输入用户名和密码进行登录。
接下来是登录页面的 JavaScript 代码,它使用 Ajax 技术将用户名和密码发送给后端进行登录:
```javascript
var loginForm = document.getElementById('loginForm');
loginForm.onsubmit = function(event) {
event.preventDefault();
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/login');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
alert(xhr.responseText);
window.location.href = '/index.html';
} else {
alert('登录失败');
}
};
xhr.send(JSON.stringify({username: username, password: password}));
};
```
这个 JavaScript 代码使用了 XMLHttpRequest 对象,将用户名和密码打包成 JSON 格式并发送给后端进行登录。如果登录成功,会弹出一个提示框,然后跳转到主页;如果登录失败,也会弹出一个提示框。
下面是后端使用 Node.js 和 Express 框架实现的登录功能的代码:
```javascript
app.post('/login', function(req, res) {
var username = req.body.username;
var password = req.body.password;
connection.query('SELECT * FROM users WHERE username = ?', [username], function(error, results) {
if (error) {
console.log(error);
res.status(500).send('登录失败');
} else {
if (results.length > 0 && results[0].password === password) {
console.log(results);
res.status(200).send('登录成功');
} else {
console.log('用户名或密码错误');
res.status(500).send('登录失败');
}
}
});
});
```
这个代码使用了 Express 框架和 MySQL 模块,当接收到登录请求时,会查询数据库中是否存在该用户名和密码。如果存在并且密码正确,返回 200 状态码和登录成功的信息;否则,返回 500 状态码和登录失败的信息。
以上就是一个简单的前端注册和登录案例的代码。由于这只是一个示例,可能存在安全和性能等方面的问题,实际应用时需要根据实际情况进行修改和优化。