当前位置:   article > 正文

node.js后端+小程序前端+mongoDB(增删改查)

node.js后端+小程序前端+mongoDB(增删改查)

前言

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

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

技术栈

  1. node.js
  2. 微信小程序
  3. JavaScript
  4. mongoDB
  5. express(node.js web框架)
  6. mongoose(mongoDB管理器)

mongDB优点

  1. 灵活的数据模型:

    • MongoDB是一个文档型数据库,使用BSON(Binary JSON)格式存储数据。这种文档型结构使得存储的数据可以非常灵活,可以包含不同类型的数据和嵌套结构,适合处理复杂的数据模型。
  2. 横向扩展(水平扩展):

    • MongoDB支持横向扩展,可以通过添加更多的节点来提高性能和容量。这种能力使得MongoDB在处理大规模数据和高负载时表现出色。
  3. 高性能:

    • MongoDB采用了索引、聚合框架和内置分片等技术,以提供高性能的数据查询和检索。它还具有内置的缓存机制,能够有效地减轻数据库的负载。
  4. 自动分片(Sharding):

    • MongoDB支持自动分片,可以将大型数据集水平划分成小块,分布在多个服务器上。这有助于提高查询性能和负载均衡。
  5. 丰富的查询语言:

    • MongoDB提供强大而灵活的查询语言,支持各种条件查询、范围查询、正则表达式等。同时,它还支持索引,加速查询操作。
  6. 容易扩展和管理:

    • 安装、配置和使用MongoDB相对较简单。它提供了直观的命令行工具和管理界面,使得数据库的维护和监控变得更加容易。
  7. JSON风格的文档:

    • MongoDB的文档采用JSON风格的格式,这使得数据在应用程序和数据库之间的映射更为自然。这种文档存储的方式也使得数据更易于理解和使用。
  8. 社区支持和活跃:

    • MongoDB有一个庞大的开源社区,提供了丰富的文档、教程和问题解答。这种活跃的社区支持使得开发者能够更容易找到解决问题的方法。

node.js优点

  1. 高性能:

    • Node.js采用了非阻塞的I/O模型,使得它能够处理大量并发连接而不会造成阻塞。这使得Node.js在处理I/O密集型任务时表现出色,能够实现更高的吞吐量和更低的响应时间。
  2. 快速开发:

    • Node.js使用JavaScript作为开发语言,这使得前端和后端开发都可以使用同一种语言,简化了开发人员的学习曲线和开发工作流程。此外,Node.js的模块化设计和丰富的第三方模块库也有助于快速开发和构建应用。
  3. 轻量和高效:

    • Node.js本身是一个轻量级的运行时环境,占用资源较少,启动时间短。这使得它适用于构建高效的后端服务和微服务架构。
  4. 生态系统丰富:

    • Node.js拥有庞大而活跃的开源生态系统,包括npm(Node Package Manager)上数以万计的可重用模块。开发人员可以通过npm轻松地引入和管理依赖项,加快开发速度并提高代码质量。
  5. 支持异步编程:

    • Node.js基于事件驱动和非阻塞I/O模型,支持异步编程风格。这使得开发人员能够编写高效的、非阻塞的代码,从而更好地利用系统资源并提高应用的响应能力。
  6. 跨平台:

    • Node.js可以在多个平台上运行,包括Windows、macOS和各种Linux发行版。这使得开发人员能够轻松地在不同的操作系统上开发和部署应用。
  7. 社区支持和活跃:

    • Node.js拥有一个庞大而活跃的社区,提供了丰富的文档、教程和问题解答。这使得开发人员能够更容易地获取帮助、分享经验并解决问题。
  8. 可伸缩性:

    • 由于Node.js采用了事件驱动和非阻塞I/O模型,它非常适合构建高性能、可伸缩的应用。开发人员可以根据需要轻松地扩展应用,满足不断增长的用户需求。

mongoDB下载

Install MongoDB Community Kubernetes Operator | MongoDB

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

安装指令

1. 下载node.js框架

npm install express --save

2. 下载nodemon解决node代码更新的痛点

npm install nodemon -g

3. node.js连接mongodb数据库

npm install mongoose --save

后端目录

db.js

  1. const mongoose = require('mongoose')
  2. //连接mongodb数据库
  3. mongoose.connect("mongodb://localhost:27017/node_one")
  4. .then(() => {
  5. console.log("数据库连接成功!")
  6. })
  7. .catch((err) => {
  8. console.log("数据库连接失败!", err)
  9. })
  10. // 创建表
  11. const LoseSchema = new mongoose.Schema({
  12. name: {
  13. type: String,
  14. },
  15. nianling: {
  16. type: String
  17. },
  18. })
  19. const Lose = mongoose.model("LoseSchema", LoseSchema);
  20. module.exports = {
  21. Lose
  22. }

index.js

  1. const express = require('express');
  2. const app = express();
  3. const { Lose } = require('./db');
  4. app.use(express.urlencoded({ extended: true }));
  5. app.use(express.json())
  6. // 增加数据
  7. app.post("/publish", async (req, res) => {
  8. try {
  9. const { name, nianling } = req.body;
  10. await Lose.create({
  11. name, nianling
  12. });
  13. res.send("success")
  14. } catch (error) {
  15. res.send(error, "error")
  16. }
  17. })
  18. // 删除指定数据
  19. app.post("/del", async (req, res) => {
  20. console.log(req.body.name)
  21. try {
  22. const { name } = req.body;
  23. // 使用 deleteOne 删除指定 name 的数据
  24. const result = await Lose.deleteOne({ name });
  25. if (result.deletedCount === 1) {
  26. res.send("success");
  27. } else {
  28. res.send("未找到匹配的记录");
  29. }
  30. } catch (error) {
  31. res.send(error, "error");
  32. }
  33. })
  34. // 修改指定数据
  35. app.post("/upd", async (req, res) => {
  36. try {
  37. const { name, newNianling } = req.body;
  38. // 使用 updateOne 更新指定 name 的数据记录的 nianling 字段
  39. const result = await Lose.updateOne({ name }, { $set: { nianling: newNianling } });
  40. if (result.nModified === 1) {
  41. res.send("success");
  42. } else {
  43. res.send("未找到匹配的记录或未进行任何修改");
  44. }
  45. } catch (error) {
  46. res.send(error, "error");
  47. }
  48. });
  49. // 查询指定数据
  50. app.get("/find/:name", async (req, res) => {
  51. try {
  52. const name = req.params.name;
  53. // 使用 find 查询所有匹配指定 name 的数据记录
  54. const results = await Lose.find({ name });
  55. if (results.length > 0) {
  56. // 如果找到匹配的记录,则返回所有匹配的记录
  57. res.json(results);
  58. } else {
  59. res.send("未找到匹配的记录");
  60. }
  61. } catch (error) {
  62. res.send(error, "error");
  63. }
  64. });
  65. app.listen(3000, () => {
  66. console.log('server running')
  67. })

小程序

index1.js

  1. // pages/index1/index1.js
  2. Page({
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. },
  8. // 增加
  9. // 输入框1的输入事件(姓名)
  10. input1Change(e) {
  11. this.setData({
  12. inputValue1: e.detail.value,
  13. });
  14. },
  15. // 输入框2的输入事件(年龄)
  16. input2Change(e) {
  17. this.setData({
  18. inputValue2: e.detail.value,
  19. });
  20. },
  21. tijiao(){
  22. wx.request({
  23. url: 'http://localhost:3000/publish',
  24. method:'POST',
  25. data:{
  26. name:this.data.inputValue1,
  27. nianling:this.data.inputValue2
  28. },
  29. })
  30. },
  31. // 删除
  32. input1Change_del(e){
  33. this.setData({
  34. inputValue_del: e.detail.value,
  35. });
  36. },
  37. shanchu(){
  38. wx.request({
  39. url: 'http://localhost:3000/del',
  40. method:'POST',
  41. data:{
  42. name:this.data.inputValue_del,
  43. },
  44. })
  45. },
  46. // 修改
  47. input1Change_upd(e){
  48. this.setData({
  49. inputValue1_upda: e.detail.value,
  50. });
  51. },
  52. input2Change_upd(e){
  53. this.setData({
  54. inputValue2_upda: e.detail.value,
  55. });
  56. },
  57. xiugai(){
  58. wx.request({
  59. url: 'http://localhost:3000/upd',
  60. method:'POST',
  61. data:{
  62. // 名字
  63. name:this.data.inputValue1_upda,
  64. // 修改后的年龄
  65. newNianling:this.data.inputValue2_upda,
  66. },
  67. })
  68. },
  69. // 查询
  70. input1Change_find(e){
  71. this.setData({
  72. inputValue1_find: e.detail.value,
  73. });
  74. },
  75. find(){
  76. wx.request({
  77. url: 'http://localhost:3000/find/' + this.data.inputValue1_find,
  78. method: 'GET',
  79. success: function(res) {
  80. // 请求成功,处理从服务器返回的数据
  81. console.log('服务器返回的数据:', res.data);
  82. // 检查是否找到匹配的记录
  83. if (res.data && res.data.length > 0) {
  84. // 处理返回的记录数据
  85. const records = res.data;
  86. records.forEach(record => {
  87. console.log('记录:', record);
  88. // 在这里进行您的处理逻辑,例如显示在界面上
  89. });
  90. } else {
  91. console.log('未找到匹配的记录');
  92. // 在界面上显示相应的消息,告知用户未找到匹配的记录
  93. }
  94. },
  95. fail: function(error) {
  96. // 请求失败,处理错误
  97. console.error('请求失败:', error);
  98. // 在界面上显示错误信息,告知用户请求失败
  99. }
  100. });
  101. },
  102. /**
  103. * 生命周期函数--监听页面加载
  104. */
  105. onLoad(options) {
  106. },
  107. /**
  108. * 生命周期函数--监听页面初次渲染完成
  109. */
  110. onReady() {
  111. },
  112. /**
  113. * 生命周期函数--监听页面显示
  114. */
  115. onShow() {
  116. },
  117. /**
  118. * 生命周期函数--监听页面隐藏
  119. */
  120. onHide() {
  121. },
  122. /**
  123. * 生命周期函数--监听页面卸载
  124. */
  125. onUnload() {
  126. },
  127. /**
  128. * 页面相关事件处理函数--监听用户下拉动作
  129. */
  130. onPullDownRefresh() {
  131. },
  132. /**
  133. * 页面上拉触底事件的处理函数
  134. */
  135. onReachBottom() {
  136. },
  137. /**
  138. * 用户点击右上角分享
  139. */
  140. onShareAppMessage() {
  141. }
  142. })

index1.wxml

  1. <!-- 添加姓名与年龄 -->
  2. <view class="container">
  3. <view>
  4. <text>请输入第一个值:</text>
  5. <input placeholder="输入框1" bindinput="input1Change" />
  6. </view>
  7. <view>
  8. <text>请输入第二个值:</text>
  9. <input placeholder="输入框2" bindinput="input2Change" />
  10. </view>
  11. <button bindtap="tijiao">增加</button>
  12. </view>
  13. <!-- 根据指定字段(姓名)删除数据记录 -->
  14. <view class="container">
  15. <view>
  16. <text>请输入第一个值:</text>
  17. <input placeholder="输入框1" bindinput="input1Change_del" />
  18. </view>
  19. <button bindtap="shanchu">删除</button>
  20. </view>
  21. <!-- 根据指定字段(姓名)修改数据记录 -->
  22. <view class="container">
  23. <view>
  24. <text>请输入第一个值:</text>
  25. <input placeholder="名字" bindinput="input1Change_upd" />
  26. </view>
  27. <view>
  28. <text>请输入第一个值:</text>
  29. <input placeholder="修改后的年龄" bindinput="input2Change_upd" />
  30. </view>
  31. <button bindtap="xiugai">修改</button>
  32. </view>
  33. <!-- 根据指定字段(姓名)修改数据记录 -->
  34. <view class="container">
  35. <view>
  36. <text>请输入第一个值:</text>
  37. <input placeholder="名字" bindinput="input1Change_find" />
  38. </view>
  39. <button bindtap="find">查询</button>
  40. </view>

index1.wxss

  1. /* inputPage.wxss */
  2. .container {
  3. padding: 20rpx;
  4. }
  5. text {
  6. font-size: 16rpx;
  7. margin-right: 10rpx;
  8. }
  9. input {
  10. height: 30rpx;
  11. border: 1rpx solid #ccc;
  12. padding: 5rpx;
  13. margin-bottom: 10rpx;
  14. }
  15. button {
  16. width: 200rpx;
  17. background-color: #4CAF50;
  18. color: #fff;
  19. border: none;
  20. border-radius: 5rpx;
  21. }
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/104401
推荐阅读
相关标签
  

闽ICP备14008679号