在这个系列的第三部分，我们将会使用AJAX来实现用户的注册和登录功能，并且将数据保存到数据库中。我们将使用Node.js和Express框架来创建一个简单的API服务器，并使用Webpack来构建我们的前端代码。
目标：
- 使用AJAX发送POST请求
- 使用Node.js和Express创建API服务器
- 使用Webpack构建前端资源
- 使用Git进行版本控制
技术要求：
- 基本的JavaScript和HTML知识
- 了解Node.js和Express框架
- 了解Webpack的基本使用
- 了解Git的基本操作
实践中的关键点：
- 创建Express服务器并设置路由处理POST请求
- 使用cors中间件处理跨域请求
- 使用body-parser中间件解析请求体
- 连接数据库并执行数据库操作
- 使用Webpack处理前端资源并配置开发服务器
- 使用Git进行版本控制
具体步骤：
- 初始化Node.js项目并安装Express和Webpack等依赖。
- 创建Express服务器并配置必要的中间件。
- 设置路由处理注册和登录的POST请求。
- 使用Webpack配置前端资源的加载和构建。
- 使用Git进行版本控制。
示例代码：
// 安装依赖
npm install express cors body-parser mongoose
// server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
// 配置中间件
app.use(bodyParser.json());
app.use(cors());
// 连接数据库
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true });
// 用户模型
const User = mongoose.model('User', new mongoose.Schema({
username: String,
password: String
}));
// 注册接口
app.post('/register', async (req, res) => {
const user = new User(req.body);
await user.save();
res.send('注册成功');
});
// 登录接口
app.post('/login', async (req, res) => {
const user = await User.findOne(req.body);
if (user) {
res.send('登录成功');
} else {
res.status(401).send('用户名或密码错误');
}
});
// 启动服务器
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
});
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 其他配置...
};
// index.js (前端代码)
// 使用fetch发送AJAX请求
document.getElementById('registerForm').onsubmit = async (e) => {
e.preventDefault();
const user = {
username: document.getElementById('username').value,
password: document.getElementById('password').value
};
const response = await fetch('/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(user)
});
alert(await response.text());
};
document.getElementById('login