node.js后端+小程序前端+mongoDB（增删改查）

前言

今天我对比了以下node.js的express与python的fastAPI，我决定我还是出一期关于node.js+mangoDB+小程序的小案例吧。

不是python的fastAPI不好用，因为fastAPI是python较新的技术，我不敢果断发出教学文章（这件事情还是留着给python大佬们叭~）

技术栈

node.js
微信小程序
JavaScript
mongoDB
express（node.js web框架）
mongoose（mongoDB管理器）

mongDB优点

node.js优点

mongoDB下载

Install MongoDB Community Kubernetes Operator | MongoDB

新的mongoDB版本自带可视化工具

安装指令

后端目录

node.js后端+小程序前端+mongoDB（增删改查）-LMLPHP

db.js

const mongoose = require('mongoose')

//连接mongodb数据库
mongoose.connect("mongodb://localhost:27017/node_one")
    .then(() => {
        console.log("数据库连接成功！")
    })
    .catch((err) => {
        console.log("数据库连接失败！", err)
    })

// 创建表
const LoseSchema = new mongoose.Schema({
    name: {
        type: String,
    },
    nianling: {
        type: String
    },
})

const Lose = mongoose.model("LoseSchema", LoseSchema);
module.exports = {
    Lose
}

index.js

const express = require('express');
const app = express();
const { Lose } = require('./db');

app.use(express.urlencoded({ extended: true }));
app.use(express.json())

// 增加数据
app.post("/publish", async (req, res) => {
    try {
        const { name, nianling } = req.body;
        await Lose.create({
            name, nianling
        });
        res.send("success")
    } catch (error) {
        res.send(error, "error")
    }
})
// 删除指定数据
app.post("/del", async (req, res) => {
    console.log(req.body.name)
    try {
        const { name } = req.body;

        // 使用 deleteOne 删除指定 name 的数据
        const result = await Lose.deleteOne({ name });

        if (result.deletedCount === 1) {
            res.send("success");
        } else {
            res.send("未找到匹配的记录");
        }
    } catch (error) {
        res.send(error, "error");
    }
})
// 修改指定数据
app.post("/upd", async (req, res) => {
    try {
        const { name, newNianling } = req.body;

        // 使用 updateOne 更新指定 name 的数据记录的 nianling 字段
        const result = await Lose.updateOne({ name }, { $set: { nianling: newNianling } });

        if (result.nModified === 1) {
            res.send("success");
        } else {
            res.send("未找到匹配的记录或未进行任何修改");
        }
    } catch (error) {
        res.send(error, "error");
    }
});

// 查询指定数据
app.get("/find/:name", async (req, res) => {
    try {
        const name = req.params.name;

        // 使用 find 查询所有匹配指定 name 的数据记录
        const results = await Lose.find({ name });

        if (results.length > 0) {
            // 如果找到匹配的记录，则返回所有匹配的记录
            res.json(results);
        } else {
            res.send("未找到匹配的记录");
        }
    } catch (error) {
        res.send(error, "error");
    }
});


app.listen(3000, () => {
    console.log('server running')
})

小程序

index1.js

// pages/index1/index1.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  },
  // 增加

  // 输入框1的输入事件(姓名)
  input1Change(e) {
    this.setData({
      inputValue1: e.detail.value,
    });
  },

  // 输入框2的输入事件（年龄）
  input2Change(e) {
    this.setData({
      inputValue2: e.detail.value,
    });
  },
  tijiao(){
    wx.request({
      url: 'http://localhost:3000/publish',
      method:'POST',
      data:{
        name:this.data.inputValue1,
        nianling:this.data.inputValue2
      },
    })
  },
  // 删除
  input1Change_del(e){
    this.setData({
      inputValue_del: e.detail.value,
    });
  },
  shanchu(){
    wx.request({
      url: 'http://localhost:3000/del',
      method:'POST',
      data:{
        name:this.data.inputValue_del,
      },
    })
  },
  // 修改
  input1Change_upd(e){
    this.setData({
      inputValue1_upda: e.detail.value,
    });
  },
  input2Change_upd(e){
    this.setData({
      inputValue2_upda: e.detail.value,
    });
  },
  xiugai(){
    wx.request({
      url: 'http://localhost:3000/upd',
      method:'POST',
      data:{
        // 名字
        name:this.data.inputValue1_upda,
        // 修改后的年龄
        newNianling:this.data.inputValue2_upda,
      },
    })
  },
  // 查询
  input1Change_find(e){
    this.setData({
      inputValue1_find: e.detail.value,
    });
  },
  find(){
    wx.request({
      url: 'http://localhost:3000/find/' + this.data.inputValue1_find,
      method: 'GET',
      success: function(res) {
        // 请求成功，处理从服务器返回的数据
        console.log('服务器返回的数据：', res.data);
  
        // 检查是否找到匹配的记录
        if (res.data && res.data.length > 0) {
          // 处理返回的记录数据
          const records = res.data;
          records.forEach(record => {
            console.log('记录:', record);
            // 在这里进行您的处理逻辑，例如显示在界面上
          });
        } else {
          console.log('未找到匹配的记录');
          // 在界面上显示相应的消息，告知用户未找到匹配的记录
        }
      },
      fail: function(error) {
        // 请求失败，处理错误
        console.error('请求失败:', error);
        // 在界面上显示错误信息，告知用户请求失败
      }
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

index1.wxml

<!-- 添加姓名与年龄 -->
<view class="container">
  <view>
    <text>请输入第一个值：</text>
    <input placeholder="输入框1" bindinput="input1Change" />
  </view>
  <view>
    <text>请输入第二个值：</text>
    <input placeholder="输入框2" bindinput="input2Change" />
  </view>
  <button bindtap="tijiao">增加</button>
</view>

<!-- 根据指定字段（姓名）删除数据记录 -->
<view class="container">
  <view>
    <text>请输入第一个值：</text>
    <input placeholder="输入框1" bindinput="input1Change_del" />
  </view>

  <button bindtap="shanchu">删除</button>
</view>

<!-- 根据指定字段（姓名）修改数据记录 -->
<view class="container">
  <view>
    <text>请输入第一个值：</text>
    <input placeholder="名字" bindinput="input1Change_upd" />
  </view>
  <view>
    <text>请输入第一个值：</text>
    <input placeholder="修改后的年龄" bindinput="input2Change_upd" />
  </view>

  <button bindtap="xiugai">修改</button>
</view>

<!-- 根据指定字段（姓名）修改数据记录 -->
<view class="container">
  <view>
    <text>请输入第一个值：</text>
    <input placeholder="名字" bindinput="input1Change_find" />
  </view>
  <button bindtap="find">查询</button>
</view>

index1.wxss

/* inputPage.wxss */

.container {
  padding: 20rpx;
}

text {
  font-size: 16rpx;
  margin-right: 10rpx;
}

input {
  height: 30rpx;
  border: 1rpx solid #ccc;
  padding: 5rpx;
  margin-bottom: 10rpx;
}

button {
  width: 200rpx;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 5rpx;
}

lqj_本人