当前位置：首页 > news >正文

使用vue2 开发一个纯静态的校园二手交易平台-前端项目练习

news 来源：原创 2025/6/8 20:53:27

这篇文章给大家分享一个适合练习学习前端技术的项目：校园二手交易平台系统。
因为最近在学习vue相关的技术，所以就根据学习的前端技术，来写一些纯前端的项目来练习，这篇文章主要是分享一下我做的这个项目的一些功能，如果最近你也在学习前端，希望这篇文章能帮助到你，大家也可以仿照这个项目，自己尝试着写一些完整的功能，从而提高自己的编程能力。
先给大家介绍一下这个校园二手交易平台系统主要实现了哪些功能：
首页：展示平台的主要功能，提供快速导航入口，让用户能够迅速找到自己感兴趣的内容，如商品、圈子、个人中心等。
商品：用户可以浏览和发布商品信息，查看商品详情、价格、图片等，进行二手商品的买卖。
以物易物：提供交换物品的功能，用户可以发布自己想交换的物品，并与其他用户进行交换，促进物品的循环利用。
校园圈子：创建和加入兴趣小组或讨论区，学生可以在圈子内讨论二手交易、分享心得、交流经验等，增强平台的社交功能。
私信：用户可以通过私信功能与其他用户进行沟通和交易洽谈，方便快捷地进行交易和交流。
登录：提供用户注册和登录功能，用户需要注册账户才能发布商品、加入圈子或与他人私信互动。
注册：新用户可以通过注册账户来创建个人资料，进行登录和交易。
个人中心：用户可以在个人中心查看自己的交易记录、发布的商品、参与的圈子、个人信息等，便于管理账户和交易信息。
再截图一些网站的一些页面效果
在这里插入图片描述

这个项目使用的技术是vue2 做的。ui组件时：Element-UI，node的版本是：16.20。
如果看到这个项目的你，是一个刚刚学习前端的新人，对于node 的安装不是很熟悉的话，分享给大家一个 node 安装的文章：
https://blog.csdn.net/Drug_/article/details/144364506
接下来给大家看一下项目的整体结构：
在这里插入图片描述
最后给大家分享一下这个项目的运行的操作说明：

1. node环境 ：16.202.安装依赖： npm i3.运行项目：npm run serve4.打包项目：npm run build

对于刚刚开始学习编程的小伙伴，可以多找一些项目进行练习，这样可以很快的熟练学习到的知识点。
对于这个项目，开发完整后，也部署了一个演示站，有兴趣的小伙伴可以去看一下：

https://wwwoop.com/home/Index/projectInfo?goodsId=78&typeParam=2&subKey=1

<template><div class="home"><Header /><div class="main-content"><div class="banner"><h1>校园二手交易平台</h1><p>让闲置物品流转起来，让校园生活更美好</p><div class="search-box"><input type="text" v-model="searchQuery" placeholder="搜索你想要的商品..." /><button @click="handleSearch">搜索</button></div></div><div class="section"><h2>热门推荐</h2><div class="product-grid"><div class="product-card" v-for="(item, index) in hotProducts" :key="index" @click="goToProductDetail(item)"><div class="product-image"><img :src="item.image" :alt="item.name" /></div><div class="product-info"><h3>{{ item.name }}</h3><p class="price">¥{{ item.price }}</p><p class="description">{{ item.description }}</p></div></div></div></div><div class="section"><h2>最新发布</h2><div class="product-grid"><div class="product-card" v-for="(item, index) in newProducts" :key="index" @click="goToProductDetail(item)"><div class="product-image"><img :src="item.image" :alt="item.name" /></div><div class="product-info"><h3>{{ item.name }}</h3><p class="price">¥{{ item.price }}</p><p class="description">{{ item.description }}</p></div></div></div></div></div><Footer /></div>
</template><script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
// 使用require动态导入图片
const product1 = require('@/assets/images/1.jpg')
const product2 = require('@/assets/images/2.jpg')
const product3 = require('@/assets/images/3.jpg')
const product4 = require('@/assets/images/4.jpg')export default {name: 'Home',components: {Header,Footer},data() {return {searchQuery: '',hotProducts: [{ name: '笔记本电脑', price: 2999, description: '九成新笔记本电脑，性能良好', image: product1 },{ name: '自行车', price: 399, description: '轻便实用的通勤自行车', image: product2 },{ name: '课本教材', price: 20, description: '专业课程教材，有笔记', image: product3 },{ name: '篮球', price: 50, description: '室内外通用篮球', image: product4 },{ name: '平板电脑', price: 1599, description: '全新平板电脑，性能强劲', image: require('@/assets/images/7.jpg') },{ name: '专业相机', price: 3999, description: '专业级单反相机，成色新', image: require('@/assets/images/8.jpg') },{ name: '运动手环', price: 199, description: '智能运动手环，功能齐全', image: require('@/assets/images/1.jpg') },{ name: '蓝牙音箱', price: 299, description: '便携式蓝牙音箱，音质好', image: require('@/assets/images/2.jpg') }],newProducts: [{ name: '电子词典', price: 499, description: '英语学习必备电子词典', image: require('@/assets/images/1.jpg') },{ name: '瑜伽垫', price: 89, description: '环保材质瑜伽垫，防滑耐用', image: require('@/assets/images/2.jpg') },{ name: '台式显示器', price: 899, description: '27寸显示器，高清护眼', image: require('@/assets/images/3.jpg') },{ name: '机械键盘', price: 399, description: '机械青轴键盘，手感好', image: require('@/assets/images/4.jpg') },{ name: '课本教材', price: 20, description: '专业课程教材，有笔记', image: product3 },{ name: '篮球', price: 50, description: '室内外通用篮球', image: product4 },{ name: '笔记本电脑', price: 2999, description: '九成新笔记本电脑，性能良好', image: product1 },{ name: '自行车', price: 399, description: '轻便实用的通勤自行车', image: product2 }]}},methods: {goToProductDetail(item) {this.$router.push({name: 'ProductDetail',params: { id: item.id || 1 }})},handleSearch() {if (this.searchQuery.trim()) {this.$router.push({name: 'Products',query: { keyword: this.searchQuery }})}}}
}
</script><style scoped>
.home {min-height: 100vh;background: #f5f5f5;
}.main-content {padding-top: 60px;
}.banner {background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);padding: 60px 20px;text-align: center;color: white;
}.banner h1 {font-size: 2.5em;margin-bottom: 20px;
}.banner p {font-size: 1.2em;margin-bottom: 30px;
}.search-box {max-width: 600px;margin: 0 auto;display: flex;gap: 10px;
}.search-box input {flex: 1;padding: 12px 20px;border: none;border-radius: 4px;font-size: 16px;
}.search-box button {padding: 12px 30px;background: #fff;border: none;border-radius: 4px;color: #1890ff;font-weight: bold;cursor: pointer;transition: background 0.3s;
}.search-box button:hover {background: #f0f0f0;
}.section {max-width: 1200px;margin: 40px auto;padding: 0 20px;
}.section h2 {font-size: 24px;margin-bottom: 20px;color: #333;
}.product-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 20px;
}.product-card {background: white;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0,0,0,0.1);transition: transform 0.3s;
}.product-card:hover {transform: translateY(-5px);
}.product-image {height: 200px;background: #f5f5f5;display: flex;align-items: center;justify-content: center;overflow: hidden;
}.product-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s;
}.product-card:hover .product-image img {transform: scale(1.05);
}.product-info {padding: 15px;
}.product-info h3 {margin: 0 0 10px;font-size: 16px;color: #333;
}.price {color: #f5222d;font-weight: bold;margin: 0 0 10px;
}.description {color: #666;font-size: 14px;margin: 0;line-height: 1.5;
}
</style>

相关文章：