IT评测·应用市场-qidao123.com

标题: 微信小程序通过Node.js连接本地Mysql，实现数据的增删改查 [打印本页]

---

作者: 渣渣兔    时间: 2024-11-17 10:14
标题: 微信小程序通过Node.js连接本地Mysql，实现数据的增删改查
一、环境准备

确保在本地安装了Node.js和MySQL数据库
我的版本为：
Node.js v20.18.0.
Mysql version: 8.0.39
二、创建数据库和表

这里是测试，所以创建的数据库比较简朴。
打开Navicat ，右键连接-->下令列界面，输入以下sql语句,回车

1. CREATE DATABASE members_db;
2. ​
3. USE members_db;
4. ​
5. CREATE TABLE members (
6.    id INT AUTO_INCREMENT PRIMARY KEY,
7.    name VARCHAR(100) NOT NULL,
8.    age INT NOT NULL
9. );

复制代码

可以看到创建了一个名为members_db的数据库，下面有一个名为member的表：

三、创建 Node.js 后端

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

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

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

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

1. mkdir member-management
2. ​
3. cd member-management
4. ​
5. npm init -y

复制代码

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

1. npm install express mysql body-parser cors

复制代码

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

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

打开server.js，复制以下代码(注意修改数据库用户名和密码！！！)：

1. const express = require('express');
2. const mysql = require('mysql');
3. const bodyParser = require('body-parser');
4. const cors = require('cors');
5. ​
6. const app = express();
7. const port = 3000;
8. ​
9. app.use(cors());
10. app.use(bodyParser.json());
11. ​
12. const db = mysql.createConnection({
13.    host: 'localhost',
14.    user: 'root', // 修改为你的数据库用户名
15.    password: 'password', // 修改为你的数据库密码
16.    database: 'members_db'
17. });
18. ​
19. db.connect(err => {
20.    if (err) {
21.        console.error('Database connection failed: ' + err.stack);
22.        return;
23.    }
24.    console.log('Connected to database.');
25. });
26. ​
27. // 增加成员
28. app.post('/members', (req, res) => {
29.    const { name, age } = req.body;
30.    db.query('INSERT INTO members (name, age) VALUES (?, ?)', [name, age], (err, result) => {
31.        if (err) throw err;
32.        res.send({ id: result.insertId, name, age });
33.    });
34. });
35. ​
36. // 获取所有成员
37. app.get('/members', (req, res) => {
38.    db.query('SELECT * FROM members', (err, results) => {
39.        if (err) throw err;
40.        res.send(results);
41.    });
42. });
43. ​
44. // 更新成员
45. app.put('/members/:id', (req, res) => {
46.    const { id } = req.params;
47.    const { name, age } = req.body;
48.    db.query('UPDATE members SET name = ?, age = ? WHERE id = ?', [name, age, id], (err, result) => {
49.        if (err) throw err;
50.        res.send({ id, name, age });
51.    });
52. });
53. ​
54. // 删除成员
55. app.delete('/members/:id', (req, res) => {
56.    const { id } = req.params;
57.    db.query('DELETE FROM members WHERE id = ?', [id], (err, result) => {
58.        if (err) throw err;
59.        res.send({ id });
60.    });
61. });
62. ​
63. app.listen(port, () => {
64.    console.log(`Server running at http://localhost:${port}`);
65. });

复制代码

在刚刚的终端输入node server.js,启动服务器：

1. node server.js

复制代码

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

1. http://10.105.0.236:3000/members

复制代码

（由于数据库是空的，所以没有数据）
四、创建微信小程序

微信小程序的项目布局如下：

1. /miniproject
2.   ├── /pages
3.   │   └── index
4.   │       ├── index.js
5.   │       ├── index.wxml
6.   │       ├── index.wxss
7.   └── app.js
8.   └── app.json
9.   └── app.wxss

复制代码

pages/index/index.js

1. Page({
2.    data: {
3.        members: [],
4.        name: '',
5.        age: ''
6.    },
7. ​
8.    onLoad: function () {
9.        this.getMembers();
10.    },
11.    
12.    getMembers: function () {
13.        wx.request({
14.            url: 'http://localhost:3000/members',
15.            method: 'GET',
16.            success: (res) => {
17.                this.setData({ members: res.data });
18.            },
19.            fail: (err) => {
20.                console.error(err);
21.            }
22.        });
23.    },
24. ​
25.    addMember: function () {
26.        const { name, age } = this.data;
27.        if (!name || !age) {
28.            wx.showToast({ title: '请填写成员信息', icon: 'none' });
29.            return;
30.        }
31. ​
32.        wx.request({
33.            url: 'http://localhost:3000/members',
34.            method: 'POST',
35.            data: { name, age: parseInt(age) },
36.            success: () => {
37.                this.getMembers();
38.                this.setData({ name: '', age: '' }); // 清空输入
39.            },
40.            fail: (err) => {
41.                console.error(err);
42.            }
43.        });
44.    },
45. ​
46.    deleteMember: function (event) {
47.        const { id } = event.currentTarget.dataset;
48.        wx.request({
49.            url: `http://localhost:3000/members/${id}`,
50.            method: 'DELETE',
51.            success: () => {
52.                this.getMembers();
53.            },
54.            fail: (err) => {
55.                console.error(err);
56.            }
57.        });
58.    },
59. ​
60.    bindNameInput: function (event) {
61.        this.setData({ name: event.detail.value });
62.    },
63.    
64.    bindAgeInput: function (event) {
65.        this.setData({ age: event.detail.value });
66.    }
67. });

复制代码

pages/index/index.wxml

1. <view class="container">
2.     <view class="input-area">
3.         <input placeholder="姓名" bindinput="bindNameInput" value="{{name}}" />
4.         <input placeholder="年龄" bindinput="bindAgeInput" value="{{age}}" type="number" />
5.         <button bindtap="addMember">添加成员</button>
6.     </view>
8.     <view class="member-list">
9.         <view wx:for="{{members}}" wx:key="id" class="member-item">
10.             <text>{{item.name}} - {{item.age}}岁</text>
11.             <button data-id="{{item.id}}" bindtap="deleteMember">删除</button>
12.         </view>
13.     </view>
14. </view>

复制代码

pages/index/index.wxss

1. .container {
2.     padding: 20px;
3. }
5. .input-area {
6.     margin-bottom: 20px;
7. }
9. .input-area input {
10.     margin-right: 10px;
11.     padding: 5px;
12. }
14. .member-list {
15.     margin-top: 20px;
16. }
18. .member-item {
19.     display: flex;
20.     justify-content: space-between;
21.     margin: 5px 0;
22.     padding: 10px;
23.     border: 1px solid #ccc;
24. }

复制代码

点击编译：

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

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4