服务器端：
在服务器端得先安装nodejs这个工具，包括一系列的文件，然后在下载express框架和mysql
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');//引入mysql
const cors = require('cors');//解决跨域问题
const app = express();//引入express框架
app.use(cors());
// 创建MySQL连接池
const db = mysql.createPool({
host: '***',//这是大家数据库的地址
user: '***',//数据库的用户名
password: '***',//数据库密码
database: '***'//数据库名称
});
// 处理 xianyu.html 页面请求
app.get('/xianyu', (req, res) => {
res.sendFile(__dirname + '/xianyu.html');
});
// 处理我的订单.html 页面请求
app.get('/myorder', (req, res) => {
res.sendFile(__dirname + '/myorder.html');
});
// 处理图片请求
app.get('/images/:imageName', (req, res) => {
res.sendFile(__dirname + `/images/${req.params.imageName}`);
});
// 解析请求体中的JSON数据
app.use(bodyParser.json());
app.use((req, res, next) => {
res.setHeader('Content-Security-Policy', "default-src 'self' 'unsafe-inline' data:;");
next();
});
// 静态文件目录
app.use(express.static('public'));
// 注册界面路由，一定要创建路由，不然的话前端代码接受不到消息
app.get('/register', (req, res) => {
res.sendFile(__dirname + '/register.html');
});
// 登录界面路由
app.get('/login', (req, res) => {
res.sendFile(__dirname + '/login.html');
});
app.get('/xianyu', (req, res) => {
res.sendFile(__dirname + '/xianyu.html');
});
// 注册新用户
app.post('/register', (req, res) => {
const { username, password } = req.body;
const sql = 'INSERT INTO users (username, password) VALUES (?, ?)';
db.query(sql, [username, password], (err, result) => {
if (err) {
const response = {
warn: 'error',
message: '注册失败'
};
res.send(JSON.stringify(response));
} else {
const response = {
warn: 'success',
message: '注册成功',
redirectUrl: 'http://localhost:3000/login'//注册成功重定向到登录界面
};
res.send(JSON.stringify(response));
}
});
});
app.post('/login', (req, res) => {
const { username, password } = req.body;
const sql = 'SELECT * FROM users WHERE username = ? AND password = ?';
db.query(sql, [username, password], (err, result) => {
if (err) {
const response = {
warn: 'error',
message: '数据库查询失败'
};
res.send(JSON.stringify(response));
} else {
if (result.length > 0) {
const response = {
warn: 'success',
message: '登录成功',
redirectUrl: 'http://localhost:3000/xianyu' //登录成功直接重定向到xianyu这个界面
};
res.send(JSON.stringify(response));
} else {
const response = {
warn: 'error',
message: '用户名或密码不正确'
};
res.send(JSON.stringify(response));
}
}
});
});
app.listen(3000, () => {
console.log('服务器已启动，监听端口3000');
});
利用html，JavaScript和css制作的一个简单的前端界面（登录界面）
我把三个写成一个文件里面了，后续可以分开
<!DOCTYPE html>
<html>
<head>
<title>登录窗口</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
form {
width: 400px;
margin: 0 auto;
}
input {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 5px;
}
button {
width: 100%;
padding: 10px 0;
background: #09f;
color: #fff;
border: 0;
}
</style>
</head>
<body>
<h1 style="text-align: center;">用户登录</h1>
<form id="loginForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<button type="button" id="loginButton">登录</button>
</form>
<button id="backButton" style="background: #ff0000;">返回注册页</button>
<script>
document.getElementById('loginButton').addEventListener('click', function() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const data = {
username: username,
password: password
};
fetch('http://localhost:3000/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
if (result.warn === 'success') {
alert(result.message);
window.location.href = 'http://localhost:3000/xianyu';//前端登录成功进入xianyu界面
} else {
alert(result.message);
}
})
.catch(error => {
console.error('Error:', error);
});
});
document.getElementById('backButton').addEventListener('click', function() {
window.location.href = 'http://localhost:3000/register';//可以返回注册界面
});
</script>
</body>
</html>
启动本地服务器：
数据库存在对象：
登录界面进入：
然后进入界面：
进行页面之间的跳转：
总结：
1.在写代码的时候最好用英语来命名项目名称，不然有时会报编码问题，很难改，同时本地部署服务器要调用本地其他文件的话需要解决同源跨域的问题。
2.对于前端代码，刚开始设计得有点丑，慢慢加油设计，完善界面的功能，逐渐提高对前端设计的理解和认识（ps:是比算法简单好多，算法太烧脑了，该死的动态规划和哈夫曼树）。
3.利用前端知识确实好用，比javaswing框架灵活很多，可以设计很多前端风格，后续学会vue前段框架希望能更美观一些，加油
