校园二手小程序-基于Node.js + Express + MongoDB（一）

油柑裹糖

已于 2024-04-14 22:04:53 修改

阅读量474

点赞数 7

文章标签：微信小程序 node.js express mongodb

于 2024-04-14 17:05:46 首次发布

本文链接：https://blog.csdn.net/weixin_56097487/article/details/137748492

版权

哈喽，大家好！我是油柑，是一个编程学习者，本次带来的是校园二手小程序，可用于期末大作业，写这个小程序的目的是想学习一下node,仅供参考！

本次完成的模块是首页的一些资源包括接口的编写：(效果如下)

一、环境的搭建

1、首先确保微信小程序开发者工具下载并进行注册（默认大家都会这一步哈！）

官网下载网址:微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)

2、下载node.js

官方下载网址:Node.js — Run JavaScript Everywhere (nodejs.org)
然后下一步下一步下一步，如果需要切换安装目录，记得切换一下
配置（环境变量）：

然后打开cmd，看一下安装成功了没有

3、安装MongoDB

官方下载网址:MongoDB：应用程序数据平台 | MongoDB

老规矩：安装完配置一下环境变量

二、技术栈

1、微信小程序 + vant-ui（这里记得先npm一下）

2、后端:node.js + express（新建servlet文件夹，包括控制层，用户层，业务层）

3、数据库：MongoDB

三、编码环节

1、首页轮播（前端代码）

<view class="index-container">
    <view class="swiper-container">
        <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}">
            <block wx:for="{{slides}}" wx:key="index">
                <swiper-item>
                    <image class="carousel-image" src="{{item.imageUrl}}" mode="aspectFill"></image>
                </swiper-item>
            </block>
        </swiper>
    </view>
    <van-search value="{{ value }}" placeholder="请输入搜索关键词" />
    <van-grid clickable column-num="{{4}}">
        <block wx:for="{{categories}}" wx:key="index">
            <van-grid-item text="{{item.name}}" icon="{{item.icon}}" bindtap="gotoCategoryPage" data-id="{{item._id}}" />
        </block>
    </van-grid>
    <view class="recommend">
        <text class="title">猜你喜欢</text>
        <block wx:for="{{recommendedItems}}" wx:key="id">
            <view class="item" bindtap="gotoDetail">
                <image src="{{item.img}}" class="item-img" />
                <text class="price">价格: {{item.price}}</text>
                <text class="description">描述: {{item.description}}</text>
            </view>
        </block>
    </view>
    <footer-tabbar></footer-tabbar>
</view>

2、首页代码（样式）

/* 在对应的 wxss 文件中 */
swiper {
    width: 100%;
    height: calc(100vw*9/16);
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: con;
}

.recommend {
    background-color: #f5f5f5; 
    padding: 20rpx; 
    border-radius: 10rpx; 
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); 
}

.title {
    font-size: 40rpx; 
    font-weight: bold; 
    color: #333333; 
}

.item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20rpx;
    padding: 20rpx;
}

.item-img {
    width: 100%; 
    height: 200px; 
    border-radius: 10rpx; 
    object-fit: cover; 
    aspect-ratio: 16 / 9; 
}


.item-text {
    margin-top: 10rpx;
    font-size: 16rpx;
    color: #666666;
}

.price {
    font-size: 30rpx;
    font-weight: bold;
    color: #ff9900;
}

.description {
    font-size:24rpx;
    color: #999999;
}

3、首页业务代码

// pages/index/index.js
Page({
    data: {
      slides: [], // 用于存放轮播图片数据
      recommendedItems: [] 
    }, 
    
    onLoad: function () {
      // 页面加载时从后端获取数据
      this.getSlides();
      this.getAllCategories();
      this.getRecommendedItems();
    },
  
    // 从后端获取轮播图片数据
    getSlides: function () {
      wx.request({
        url:'http://127.0.0.1:3000/slides',
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200) {
            // 将获取到的轮播图片数据更新到页面数据中
            this.setData({
              slides: res.data
            });
          } else {
            console.error('获取轮播图片数据失败:', res.statusCode);
          }
        },
        fail: (error) => {
          console.error('获取轮播图片数据失败:', error);
        }
      });
    },
    getAllCategories: function () {
        wx.request({
          url: 'http://127.0.0.1:3000/categories',
          method: 'GET',
          success: (res) => {
              console.log(this.data)
            this.setData({
                categories: res.data,
            })
           
          },
          fail: (error) => {
            console.error('获取热门分类数据失败:', error);
          }
        });
      },
      gotoCategoryPage: function(event) {
        const categoryId = event.currentTarget.dataset.id;
        const categoryMap = {
            "661ab83f342238bb8e099493": '/pages/secondlist/booklist/booklist',
            "661ab86e342238bb8e099495": '/pages/secondlist/phonelist/phonelist',
            "661ab892342238bb8e099497":'/pages/secondlist/idlelist/idlelist',
            "661ab8b1342238bb8e099499":"/pages/secondlist/skincarelist/skincarelist"
          // 其他分类的映射
        };
      
        const url = categoryMap[categoryId];
        if (url) {
          wx.navigateTo({ url });
        } else {
          console.error('未找到对应的分类 ID:', categoryId);
        }
      },
      getRecommendedItems: function () {
        wx.request({
          url: 'http://127.0.0.1:3000/recommended-items', // 替换为你的后端接口地址
          method: 'GET',
          success: (res) => {
            if (res.statusCode === 200) {
              // 将获取到的猜你喜欢的商品数据更新到页面数据中
              this.setData({
                recommendedItems: res.data
              });
            } else {
              console.error('获取猜你喜欢的商品数据失败:', res.statusCode);
            }
          },
          fail: (error) => {
            console.error('获取猜你喜欢的商品数据失败:', error);
          }
        });
      }
      
  });

4、后端代码（连接数据库）:

// 数据库连接配置累
const mongoose = require('mongoose');


// 连接 MongoDB 数据库
async function connectDB(){
    try{
        await mongoose.connect('mongodb://127.0.0.1:27017/user',{
            useUnifiedTopology:true
        });
        console.log('数据库连接成功!')
    }catch(error){
        console.log("数据库连接错误",error)
        process.exit(1)
    }
}

module.exports = connectDB;

5、后端代码模型类(这里注意一下，我都放在一起了，是几个文件的):

const mongoose = require('mongoose')

const CategorySchema = new mongoose.Schema({
    name:String,
    icon:String
})

const Category = mongoose.model('Category',CategorySchema)

module.exports = Category;


// models/Item.js

const mongoose = require('mongoose');

const ItemSchema = new mongoose.Schema({
    img: String,
    price: Number,
    description:String
});

const Item = mongoose.model('Item', ItemSchema);

module.exports = Item;


// 在 slide.js 文件中定义轮播图模型
const mongoose = require('mongoose');

const SlideSchema = new mongoose.Schema({
    imageUrl: String,
    title: String
});

const Slide = mongoose.model('Slide', SlideSchema);

module.exports = Slide;


// models/User.js
const mongoose = require('mongoose');

// 建立User模型
const UserSchema = new mongoose.Schema({
    username:String,
    password:String
});

const User = mongoose.model('User', UserSchema);

module.exports = User;

6、后端代码控制类(这里注意一下，我都放在一起了，是几个文件的):

const Category = require('../models/Category')

// 获取所有热门分类数据
exports.getAllCategories = async (req,res) =>{
    try{
        const categories = await Category.find()
        res.json(categories);
    }catch(error){
        res.status(500).json({ message: error.message });
    }
}

// 添加热门分类数据
exports.createCategory = async (req, res) => {
    const { name, icon } = req.body;
    try {
      // 创建新的热门分类对象
      const newCategory = new Category({ name, icon });
      // 将新的热门分类保存到数据库
      await newCategory.save();
      res.status(201).json({ message: '热门分类添加成功' });
    } catch (error) {
      res.status(400).json({ message: error.message });
    }
  };


// controllers/itemController.js

const Item = require('../models/Item');

// 获取猜你喜欢的商品列表
exports.getRecommendedItems = async (req, res) => {
    try {
        const recommendedItems = await Item.find();
        res.json(recommendedItems);
    } catch (error) {
        res.status(500).json({ message: error.message });
    }
};

exports.addRecommendedItem = async (req, res) => {
    const { img, price, description } = req.body;
    const newItem = new Item({ img, price, description });
    try {
        const savedItem = await newItem.save();
        res.status(201).json(savedItem);
    } catch (error) {
        res.status(400).json({ message: error.message });
    }
};

// controllers/slideController.js
const Slide = require('../models/Slide');

// 获取所有轮播图数据
exports.getAllSlides = async (req, res) => {
  try {
    const slides = await Slide.find();
    res.json(slides);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

// 创建新的轮播图
exports.createSlide = async (req, res) => {
    const { imageUrl, title } = req.body;
    
    try {
      // 创建轮播图对象
      const newSlide = new Slide({ imageUrl, title });
      
      // 将轮播图保存到数据库
      await newSlide.save();
  
      res.status(201).json(newSlide);
    } catch (error) {
      res.status(400).json({ message: error.message });
    }
  };

7、后端代码业务类(这里注意一下，我都放在一起了，是几个文件的):

// routes/categoryRoutes.js
const express = require('express');
const router = express.Router();
const categoryController = require('../controllers/categoryController');

// 获取所有热门分类数据
router.get('/categories', categoryController.getAllCategories);

// 添加新的热门分类数据
router.post('/categories', categoryController.createCategory);

module.exports = router;


// routes/itemRoutes.js

const express = require('express');
const router = express.Router();
const itemController = require('../controllers/itemController');

// 获取猜你喜欢的商品列表
router.get('/recommended-items', itemController.getRecommendedItems);

router.post('/recommended-items', itemController.addRecommendedItem);

module.exports = router;


// routes/slideRoutes.js
const express = require('express');
const router = express.Router();
const slideController = require('../controller/slideController');

// 获取所有轮播图数据
router.get('/slides', slideController.getAllSlides);

// 创建新的轮播图
router.post('/slides', slideController.createSlide);

module.exports = router;

那么本次，咱们的首页就完成啦，喜欢的麻烦关注一下！！！

需要源码的麻烦关注私聊我一下，或者等我后面其他写完一起发在gitee上

那么，我们下次再见！！！！