哈喽,大家好!我是油柑,是一个编程学习者,本次带来的是校园二手小程序,可用于期末大作业,写这个小程序的目的是想学习一下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上
那么,我们下次再见!!!!