服务器前后端开发简单案例
本案例展示了一个简单的前后端交互过程，包括封装数据库连接、创建后台服务器API接口、使用Postman测试接口，以及创建HTML表单页面提交数据，在用户提交表单信息后，数据被存储到数据库中，实现了数据的前后端交互，以下是具体步骤：
1. 封装数据库连接
需要导入MySQL模块并创建数据库连接对象：
// 导入mysql模块
const mysql = require('mysql2');
// 创建数据库连接对象
const connection = mysql.createConnection({
host: 'localhost', // 数据库地址
port: 3306, // 端口号
user: 'root', // 数据库用户名
password: '123456', // 数据库密码
database: 'dbms' // 要连接的数据库
});
// 使数据库连接的对象对外可见
module.exports = connection;
2. 创建后台服务器API接口
导入所需模块并创建HTTP服务：
const http = require('http');
const querystring = require('querystring');
const connection = require('../db/dbconfig'); // 刚才封装的数据库地址
// 创建http服务服务器：对应的请求地址是http://localhost:3000/index
var server = http.createServer((req, res) => {
// 获取客户端请求的地址
let clientUrl = req.url;
if (clientUrl === '/index') {
let body = ''; // 用来保存客户端提交的请求数据
// 给请求对象绑定'data'事件，获取客户端的请求数据，并将数据保存到body中
req.on('data', chunk => {
body += chunk;
});
// 给请求对象req绑定end事件，解析用户的请求数据
req.on('end', () => {
let params = querystring.parse(body); // 使用querystring的属性parse将数据转化为键值对格式，方便解析
res.writeHead(200, {'Content-Type': 'text/plain;charset=utf8'}); // 设置服务器端的头部信息，响应到页面
// 拼接相应字符串
let res_str = `姓名：${params.name}
性别：${params.gender}
生日：${params.birthday}
电话：${params.phone}
地址：${params.address}`;
save(params); // 先存入再响应数据插入成功了
res.end(res_str); // 将响应字符串发送给客户端
});
}
});
server.listen(3000); // 绑定端口号
// 创建将数据保存到数据库的方法
function save(params) {
connection.query('INSERT INTO employee (name, gender, birthday, phone, address) VALUES (?, ?, ?, ?, ?)', [params.name, params.gender, params.birthday, params.phone, params.address], (err, result) => {
if (err) {
console.log(err);
return;
}
console.log('插入数据成功！');
connection.end(); // 断开数据库连接
});
}
3. 使用Postman测试接口
启动服务器后，可以使用Postman等工具测试API接口是否可用，通过发送POST请求，携带必要的参数（如name,gender,birthday,phone,address），检查数据是否正确插入数据库。
4. 创建HTML表单页面提交数据
创建一个简易的HTML表单页面，用于提交数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的前后端的交互</title>
</head>
<body>
<form action="http://localhost:3000/index" method="post">
姓名：<input type="text" name="name"><br><br>
性别：<input type="text" name="gender"><br><br>
生日：<input type="date" name="birthday"><br><br>
电话：<input type="text" name="phone"><br><br>
住址：<input type="text" name="address"><br><br>
<button type="submit">提交</button>
</form>
</body>
</html>
5. 归纳与验证
完成上述步骤后，通过浏览器访问HTML页面，填写表单并提交，观察后端控制台输出及数据库中的数据变化，确保数据正确存储，如果一切正常，这个简单的前后端交互案例就完成了。
小伙伴们，上文介绍了“服务器前后端开发简单案例”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/663138.html
微信扫一扫 