微信小程序通过Node.js连接本地Mysql，实现数据的增删改查
一、环境准备确保在本地安装了Node.js和MySQL数据库
我的版本为：
Node.js v20.18.0.
Mysql version: 8.0.39
二、创建数据库和表
这里是测试，所以创建的数据库比较简朴。
打开Navicat ，右键连接-->下令列界面，输入以下sql语句,回车
CREATE DATABASE members_db;
USE members_db;
CREATE TABLE members (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
age INT NOT NULL
); 可以看到创建了一个名为members_db的数据库，下面有一个名为member的表：
https://i-blog.csdnimg.cn/direct/d7c1813edc844b5e83a6d3c1a50a25ef.png
三、创建 Node.js 后端
在恣意位置创建一个文件夹，定名随意，但是要记得位置
https://i-blog.csdnimg.cn/direct/1eda128fb41e4379be1be18e4ce9b31c.png
右键Node.js command prompt，选择以管理员身份运行
https://i-blog.csdnimg.cn/direct/96b13e49698a43de980914c12bed7966.png
cd进入刚刚创建的文件夹：
https://i-blog.csdnimg.cn/direct/806dab730c37400185a2e8d12090a329.png
输入以下下令,创建新的 Node.js 项目：
mkdir member-management
cd member-management
npm init -y https://i-blog.csdnimg.cn/direct/c686ad4e54c5490cbe4175a0778bf2a4.png
输入以下下令，安装所需的库，包括 express 和 mysql：
npm install express mysql body-parser cors https://i-blog.csdnimg.cn/direct/d0a8904bf6d34fcfa2251943fa4f930a.png
这个时候可以看到，刚刚创建的文件夹下面多了一些文件：
https://i-blog.csdnimg.cn/direct/bdba1ee52dfd41c1a8a2f2d3c2501809.png
在此新建一个文件，名为：server.js，不会创建的可以先新建txt文件，再改拓展名为.js
https://i-blog.csdnimg.cn/direct/ed482af1496845c181a17a8fef910aab.png
打开server.js，复制以下代码(注意修改数据库用户名和密码！！！)：
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 3000;
app.use(cors());
app.use(bodyParser.json());
const db = mysql.createConnection({
host: 'localhost',
user: 'root', // 修改为你的数据库用户名
password: 'password', // 修改为你的数据库密码
database: 'members_db'
});
db.connect(err => {
if (err) {
console.error('Database connection failed: ' + err.stack);
return;
}
console.log('Connected to database.');
});
// 增加成员
app.post('/members', (req, res) => {
const { name, age } = req.body;
db.query('INSERT INTO members (name, age) VALUES (?, ?)', , (err, result) => {
if (err) throw err;
res.send({ id: result.insertId, name, age });
});
});
// 获取所有成员
app.get('/members', (req, res) => {
db.query('SELECT * FROM members', (err, results) => {
if (err) throw err;
res.send(results);
});
});
// 更新成员
app.put('/members/:id', (req, res) => {
const { id } = req.params;
const { name, age } = req.body;
db.query('UPDATE members SET name = ?, age = ? WHERE id = ?', , (err, result) => {
if (err) throw err;
res.send({ id, name, age });
});
});
// 删除成员
app.delete('/members/:id', (req, res) => {
const { id } = req.params;
db.query('DELETE FROM members WHERE id = ?', , (err, result) => {
if (err) throw err;
res.send({ id });
});
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
}); 在刚刚的终端输入node server.js,启动服务器：
node server.js https://i-blog.csdnimg.cn/direct/598d7dc27d11473193f350bfe85cf9c1.png
显示Connected to database就是乐成了。可以在浏览器输入下面的地址来验证，如果能进行跳转就是连接数据库乐成了
http://10.105.0.236:3000/members https://i-blog.csdnimg.cn/direct/c1d070f1ef144237bac4ee09bd5aaa13.png
（由于数据库是空的，所以没有数据）
四、创建微信小程序
微信小程序的项目布局如下：
/miniproject
├── /pages
│ └── index
│ ├── index.js
│ ├── index.wxml
│ ├── index.wxss
└── app.js
└── app.json
└── app.wxss pages/index/index.js
Page({
data: {
members: [],
name: '',
age: ''
},
onLoad: function () {
this.getMembers();
},
getMembers: function () {
wx.request({
url: 'http://localhost:3000/members',
method: 'GET',
success: (res) => {
this.setData({ members: res.data });
},
fail: (err) => {
console.error(err);
}
});
},
addMember: function () {
const { name, age } = this.data;
if (!name || !age) {
wx.showToast({ title: '请填写成员信息', icon: 'none' });
return;
}
wx.request({
url: 'http://localhost:3000/members',
method: 'POST',
data: { name, age: parseInt(age) },
success: () => {
this.getMembers();
this.setData({ name: '', age: '' }); // 清空输入
},
fail: (err) => {
console.error(err);
}
});
},
deleteMember: function (event) {
const { id } = event.currentTarget.dataset;
wx.request({
url: `http://localhost:3000/members/${id}`,
method: 'DELETE',
success: () => {
this.getMembers();
},
fail: (err) => {
console.error(err);
}
});
},
bindNameInput: function (event) {
this.setData({ name: event.detail.value });
},
bindAgeInput: function (event) {
this.setData({ age: event.detail.value });
}
}); pages/index/index.wxml
<view class="container">
<view class="input-area">
<input placeholder="姓名" bindinput="bindNameInput" value="{{name}}" />
<input placeholder="年龄" bindinput="bindAgeInput" value="{{age}}" type="number" />
<button bindtap="addMember">添加成员</button>
</view>
<view class="member-list">
<view wx:for="{{members}}" wx:key="id" class="member-item">
<text>{{item.name}} - {{item.age}}岁</text>
<button data-id="{{item.id}}" bindtap="deleteMember">删除</button>
</view>
</view>
</view> pages/index/index.wxss
.container {
padding: 20px;
}
.input-area {
margin-bottom: 20px;
}
.input-area input {
margin-right: 10px;
padding: 5px;
}
.member-list {
margin-top: 20px;
}
.member-item {
display: flex;
justify-content: space-between;
margin: 5px 0;
padding: 10px;
border: 1px solid #ccc;
} 点击编译：
https://i-blog.csdnimg.cn/direct/3fed0e6233f44eddb513e3dcc6b9eb78.png
输入数据，点击添加成员：
https://i-blog.csdnimg.cn/direct/3fe481088b4a4ecdb1fb1adf33de3f7d.png
可以看到小程序前端乐成渲染出刚刚的数据：
https://i-blog.csdnimg.cn/direct/4c0a916de7364b1db74934e810b1e05b.png
革新数据库，看到刚刚输入的数据已经添加进去了：
https://i-blog.csdnimg.cn/direct/15fe7fb99aa74142ad2b0f54c2bf25fe.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]