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

这篇文章给大家分享一个适合练习学习前端技术的项目：校园二手交易平台系统。

因为最近在学习vue相关的技术，所以就根据学习的前端技术，来写一些纯前端的项目来练习，这篇文章主要是分享一下我做的这个项目的一些功能，如果最近你也在学习前端，希望这篇文章能帮助到你，大家也可以仿照这个项目，自己尝试着写一些完整的功能，从而提高自己的编程能力。

先给大家介绍一下这个校园二手交易平台系统主要实现了哪些功能：
首页：展示平台的主要功能，提供快速导航入口，让用户能够迅速找到自己感兴趣的内容，如商品、圈子、个人中心等。
商品：用户可以浏览和发布商品信息，查看商品详情、价格、图片等，进行二手商品的买卖。
以物易物 ：提供交换物品的功能，用户可以发布自己想交换的物品，并与其他用户进行交换，促进物品的循环利用。
校园圈子 ：创建和加入兴趣小组或讨论区，学生可以在圈子内讨论二手交易、分享心得、交流经验等，增强平台的社交功能。
私信：用户可以通过私信功能与其他用户进行沟通和交易洽谈，方便快捷地进行交易和交流。
登录：提供用户注册和登录功能，用户需要注册账户才能发布商品、加入圈子或与他人私信互动。
注册：新用户可以通过注册账户来创建个人资料，进行登录和交易。
个人中心 ：用户可以在个人中心查看自己的交易记录、发布的商品、参与的圈子、个人信息等，便于管理账户和交易信息。

再截图一些网站的一些页面效果

这个项目使用的技术是vue2 做的。ui组件时：Element-UI，node的版本是：16.20。

如果看到这个项目的你，是一个刚刚学习前端的新人，对于node 的安装不是很熟悉的话，分享给大家一个 node 安装的文章：
https://blog.csdn.net/Drug_/article/details/144364506

接下来给大家看一下项目的整体结构：

最后给大家分享一下这个项目的运行的操作说明：

复制代码

1. node环境 ：16.20

2.安装依赖： npm i

3.运行项目：npm run serve

4.打包项目：npm run build

对于刚刚开始学习编程的小伙伴，可以多找一些项目进行练习，这样可以很快的熟练学习到的知识点。

对于这个项目，开发完整后，也部署了一个演示站，有兴趣的小伙伴可以去看一下：

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

bash 复制代码

<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>