Vue3全家桶带你仿写网易严选

2023-12-18 22:37:05

网易严选是一款深受消费者喜爱的购物APP，其简洁大方的UI设计和优质的商品深受广大用户的喜爱。本文将使用Vue全家桶、Vant、Koa和MySQL，一步步教你仿写一款移动端的网易严选。

在开始之前，我们需要准备好必要的技术栈：

Node.js
Vue.js 3
Vant UI
Koa
MySQL

搭建项目脚手架

首先，使用Vue CLI搭建项目脚手架：

vue create vue3-nezha-yanxuan

安装依赖

安装必要的依赖项：

pnpm install vant koa koa2-cors mysql2

数据库设计

创建数据库表，用于存储商品信息：

CREATE TABLE products (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  price DECIMAL(10, 2) NOT NULL,
  description TEXT,
  PRIMARY KEY (id)
);

后端接口开发

使用Koa定义接口，并使用koa2-cors解决跨域问题：

const Koa = require('koa');
const Router = require('koa-router');
const cors = require('koa2-cors');
const mysql = require('mysql2/promise');

const app = new Koa();
const router = new Router();

app.use(cors());

const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'vue3-nezha-yanxuan'
});

router.get('/products', async (ctx) => {
  const [products] = await pool.query('SELECT * FROM products');
  ctx.body = products;
});

app.use(router.routes());

app.listen(3000);

前端开发

安装Vant UI

在main.js中安装Vant UI：

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

编写组件

创建Product.vue组件，用于展示单个商品：

<template>
  <div class="product">
    <img :src="product.image" alt="">
    <div class="product-info">
      <h3>{{ product.name }}</h3>
      <p>{{ product.description }}</p>
      <span class="product-price">¥{{ product.price }}</span>
    </div>
  </div>
</template>

<script>
import { useFetch } from '@vueuse/core'
export default {
  props: ['product'],
}
</script>

<style>
.product {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
}

.product-info {
  margin-left: 10px;
}

.product-price {
  color: #f00;
  font-size: 18px;
}
</style>

编写页面

创建ProductList.vue页面，用于展示商品列表：

<template>
  <div>
    <van-list
      v-model="products"
      :finished="finished"
      :loading="loading"
      @load="loadMore"
    >
      <van-cell v-for="product in products" :key="product.id">
        <Product :product="product" />
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { useFetch } from '@vueuse/core'
export default {
  data() {
    return {
      products: [],
      loading: false,
      finished: false,
      page: 1,
      pageSize: 10,
    }
  },
  created() {
    this.loadMore()
  },
  methods: {
    async loadMore() {
      if (this.loading || this.finished) return
      this.loading = true
      const products = await useFetch(`/products?page=${this.page}&pageSize=${this.pageSize}`)
      this.products.push(...products.data)
      this.page++
      this.loading = false
      if (products.data.length < this.pageSize) {
        this.finished = true
      }
    },
  }
}
</script>