连接本地MySQL数据库的微信小程序开发实践

引言

微信小程序是一种轻量级的应用程序，可以在微信客户端内被用户直接使用，具有快速、便捷的特点。在开发过程中，经常需要与后端数据库进行交互来存取数据。本文将介绍如何在微信小程序中连接本地MySQL数据库，并提供一个实际问题的解决方案。

准备工作

在开始之前，需要完成以下准备工作：

  1. 确保已经安装了微信小程序开发环境，包括微信开发者工具和微信开发文档。
  2. 在本地安装MySQL数据库，并创建一个用于测试的数据库。

连接本地MySQL数据库

1. 在小程序中配置请求域名

打开微信开发者工具，在项目设置中找到“请求合法域名”，并添加本地MySQL数据库所在的域名或IP地址。

2. 创建服务器端API

在本地开发一个简单的服务器端API，用于处理小程序发送的请求，并连接本地MySQL数据库进行数据操作。以下是一个使用Node.js和Express框架的示例：

const express = require('express');
const mysql = require('mysql');

const app = express();
const port = 3000;

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'test'
});

app.get('/api/data', (req, res) => {
  connection.query('SELECT * FROM table_name', (error, results) => {
    if (error) {
      throw error;
    }
    res.json(results);
  });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

3. 在小程序中发送请求

在小程序中使用wx.request方法发送GET请求至服务器端API，并处理返回的数据。以下是一个使用Promise封装的示例：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: 'http://localhost:3000/api/data',
      method: 'GET',
      success: (res) => {
        resolve(res.data);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};

实际问题解决方案

假设我们需要在微信小程序中展示一个学生列表，并能够根据学生姓名进行搜索。下面是一个解决方案的示例代码：

数据库结构

首先，我们需要在MySQL数据库中创建一个名为"students"的表，包含id、name和age字段：

CREATE TABLE students (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(255),
  age INT
);

服务器端API

接下来，我们需要修改服务器端API，以支持根据学生姓名搜索功能：

app.get('/api/students', (req, res) => {
  const { name } = req.query;
  let query = 'SELECT * FROM students';
  if (name) {
    query += ` WHERE name LIKE '%${name}%'`;
  }
  connection.query(query, (error, results) => {
    if (error) {
      throw error;
    }
    res.json(results);
  });
});

小程序前端页面

在小程序的页面中，我们可以使用一个输入框和一个按钮来实现学生姓名搜索功能。以下是一个简单的示例：

<view class="container">
  <input class="input" bindinput="onInput" placeholder="请输入学生姓名">
  <button class="button" bindtap="onSearch">搜索</button>
  <view wx:for="{{ students }}" wx:key="id">
    <view class="student">
      <text>{{ item.name }}</text>
      <text>{{ item.age }}</text>
    </view>
  </view>
</view>

Page({
  data: {
    students: []
  },
  onInput(e) {
    this.setData({
      keyword: e.detail.value
    });
  },
  onSearch() {
    wx.showLoading({
      title: '加载中...'
    });
    fetchData(this.data.keyword)
      .then((data) => {
        this.setData({
          students: data
        });
      })
      .catch((err) => {
        console.error(err);
      })
      .finally(() => {
        wx.hideLoading();
      });
  },
  fetchData(keyword) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'http://localhost:3000