📌 前言
随着移动互联网的发展，微信小程序因其便捷性和高效性受到了广泛欢迎。本教程将带你从零开始，利用 Node.js 和 MySQL 构建一个完整的微信小程序后台服务，实现用户注册、登录以及数据可视化功能。
🧩 技术栈
- Node.js：用于构建后端服务
- Express：轻量级框架，简化了路由和中间件管理
- MySQL：关系型数据库管理系统
- ECharts：用于数据可视化展示
- 微信小程序：作为前端展示平台
🛠️ 环境准备
✅ 安装 Node.js 和 MySQL
确保你已经安装了以下环境：
- Node.js (建议版本 v14+)
- MySQL (建议版本 5.7+)
可以通过命令行验证是否安装成功：
css
Bash
深色版本
node -v
npm -v
mysql --version💾 数据库设计
根据需求文档要求，我们需要创建两个表：
- users 表用于存储用户注册信息。
- tool 表用于存储数据可视化所需的数据。
sql
Sql
深色版本
CREATE DATABASE IF NOT EXISTS weapp_db CHARACTER SET utf8 COLLATE utf8_general_ci;
USE weapp_db;
CREATE TABLE IF NOT EXISTS users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL
);
CREATE TABLE IF NOT EXISTS tool (
id INT PRIMARY KEY,
content_field VARCHAR(255) NOT NULL,
data_value_field VARCHAR(255) NOT NULL
);
-- 插入测试数据到 tool 表
INSERT INTO tool (id, content_field, data_value_field) VALUES
(1, '内容1', '值1'),
(2, '内容2', '值2'),
(3, '内容3', '值3'),
(4, '内容4', '值4');📦 后端服务搭建
✅ 初始化项目
首先，在你的工作目录下初始化一个新的 Node.js 项目，并安装必要的依赖包：
bash
Bash
深色版本
mkdir weapp_backend && cd weapp_backend
npm init -y
npm install express mysql2 cors body-parser✅ 创建 server.js 文件
在项目根目录下创建一个名为 server.js 的文件，编写如下代码：
javascript
Js
深色版本
const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');
const bodyParser = require('body-parser');
// 创建连接池
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: 'your_password', // 替换为你的MySQL root密码
database: 'weapp_db'
});
const app = express();
app.use(bodyParser.json());
app.use(cors());
// 用户注册接口
app.post('/register', (req, res) => {
const { username, password } = req.body;
pool.query(
'INSERT INTO users (username, password) VALUES (?, ?)',
[username, password],
(err, results) => {
if (err) return res.status(500).json({ error: err.message });
res.json({ message: '注册成功' });
}
);
});
// 用户登录接口
app.post('/login', (req, res) => {
const { username, password } = req.body;
pool.query(
'SELECT * FROM users WHERE username = ? AND password = ?',
[username, password],
(err, results) => {
if (err) return res.status(500).json({ error: err.message });
if (results.length > 0) {
res.json({ message: '登录成功', user: results[0] });
} else {
res.status(401).json({ message: '用户名或密码错误' });
}
}
);
});
// 数据可视化接口
app.get('/data', (req, res) => {
pool.query(
'SELECT * FROM tool',
(err, results) => {
if (err) return res.status(500).json({ error: err.message });
res.json(results);
}
);
});
// 监听端口
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});📱 微信小程序前端开发
✅ 注册页面示例
在微信小程序中，你可以通过调用 wx.request 来与后端进行交互。以下是简单的注册页面示例代码：
javascript
Js
深色版本
Page({
data: {
username: '',
password: ''
},
handleRegister() {
const { username, password } = this.data;
wx.request({
url: 'http://localhost:3000/register',
method: 'POST',
data: { username, password },
success(res) {
console.log('注册结果:', res.data);
if (res.data.message === '注册成功') {
wx.showToast({
title: '注册成功',
icon: 'success'
});
}
},
fail(err) {
console.error('注册失败:', err);
}
});
}
});✅ 登录页面示例
javascript
Js
深色版本
Page({
data: {
username: '',
password: ''
},
handleLogin() {
const { username, password } = this.data;
wx.request({
url: 'http://localhost:3000/login',
method: 'POST',
data: { username, password },
success(res) {
console.log('登录结果:', res.data);
if (res.data.message === '登录成功') {
wx.navigateTo({
url: '/pages/home/home'
});
} else {
wx.showToast({
title: '用户名或密码错误',
icon: 'none'
});
}
},
fail(err) {
console.error('登录失败:', err);
}
});
}
});✅ 数据可视化页面示例
你可以使用 ECharts 进行数据可视化展示：
xml
Html
深色版本
<view>
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
css
Js
深色版本
import * as echarts from '../../components/ec-canvas/echarts';
let chart = null;
function initChart(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
wx.request({
url: 'http://localhost:3000/data',
success(res) {
const data = res.data.map(item => ({
name: item.content_field,
value: item.data_value_field
}));
const option = {
title: {
text: '数据可视化',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option);
}
});
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});🚀 总结
通过这篇教程，我们学习了如何使用 Node.js 和 MySQL 搭建一个支持用户注册、登录及数据可视化的微信小程序后台服务。这个过程不仅涵盖了基本的 CRUD 操作，还包括了前后端交互的最佳实践。
希望本文能帮助你在实际项目中更好地应用这些技术。如果你有任何疑问或需要进一步的帮助，请随时留言讨论！