前言
前面学习了mysql2 express mysql等相关语法,今天开始学习如何写一个注册接口。
安装依赖
express 框架 js-yaml 读取数据库配置文件 mysql2 数据库驱动 body-parser 请求体解析中间件 cors 解决跨域
npm i express js-yaml mysql2 body-parser cors
链接数据库
这里跟上一篇文章一样
const express = require('express');
const app = express();
const port = 3000;
const yaml = require('js-yaml')
const mysql = require("mysql2/promise");
const fs = require('fs')
const bodyParser = require('body-parser');
const cors = require('cors');
// 解释一下这里要用mysql2 的promise语法所以这里这么写
(async()=>{
const db = yaml.load(fs.readFileSync('./db.yaml', 'utf8'))
// 使用 body-parser 中间件解析 JSON 请求体
app.use(bodyParser.json());
// // 解决跨域
app.use(cors());
// 创建连接
const connection = await mysql.createConnection({
host:db.host, // 主机地址
port:db.port, // 端口 默认为 3306
database:db.database, // 数据库名称
user:db.user, // 用户名
password:db.password // 密码
});
app.listen(port, () => {
console.log(`Server running on http://localhost:${port}`);
});
})()
实际业务
实际业务流程为
// 注册账户接口
app.post('/register', async (req, res) => {
const { username, password } = req.body;
// 验证请求体
if (!username || !password) {
res.status(400)
return res.json({
message: '缺少参数'
});
}
try {
// 检查用户名是否已存在
const [rows, fields] = await connection.execute('SELECT * FROM users WHERE username = ?', [username]);
if (rows.length > 0) {
res.status(409)
return res.json({
message: '用户名已存在'
});
}
// // 插入新用户
await connection.execute('INSERT INTO users (username, password ) VALUES (?, ?)', [username, password]);
res.status(201)
return res.json({ message: '注册成功' });
} catch (error) {
console.error(error);
res.status(500).json({ message: '服务器内部错误' });
}
});
写个前端验证一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="name">
<input type="text" name="" id="pwd">
<button>注册</button>
<script>
document.querySelector('button').onclick = function(){
let name = document.querySelector('#name').value;
let pwd = document.querySelector('#pwd').value;
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.打开连接
xhr.open('post', 'http://127.0.0.1:3000/register');
xhr.setRequestHeader('Content-Type','application/json');
// 3.发送请求
xhr.send(JSON.stringify({
username:name,
password:pwd
}));
// 4.接收响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
let res = xhr.responseText;
if(res == 1){
alert('注册成功');
}else{
alert('注册失败');
}
}
}
}
</script>
</body>
</html>
邮箱验证用户注册
由于qq注册未满15天暂时略后面补充
