微信小程序通过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;
}

点击编译：

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

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

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