微信小程序通过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的表：

三、创建 Node.js 后端

在任意位置创建一个文件夹，命名随意，但是要记得位置

右键Node.js command prompt，选择以管理员身份运行

cd进入刚刚创建的文件夹：

输入以下命令,创建新的 Node.js 项目：

mkdir member-management

cd member-management

npm init -y

输入以下命令，安装所需的库，包括 express 和 mysql：

npm install express mysql body-parser cors

这个时候可以看到，刚刚创建的文件夹下面多了一些文件：

在此新建一个文件，名为：server.js，不会创建的可以先新建txt文件，再改拓展名为.js

打开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 (?, ?)', [name, age], (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 = ?', [name, age, 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 = ?', [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

显示Connected to database就是成功了。可以在浏览器输入下面的地址来验证，如果能进行跳转就是连接数据库成功了

http://10.105.0.236:3000/members

（因为数据库是空的，所以没有数据）

四、创建微信小程序

微信小程序的项目结构如下：

/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;
}

点击编译：

输入数据，点击添加成员：

可以看到小程序前端成功渲染出刚刚的数据：

刷新数据库，看到刚刚输入的数据已经添加进去了：