Vue3+Pinia+Koa+Three.js 全栈电商项目总结复盘

news2024/9/25 23:17:52

前言

前几天一个朋友去义乌旅游，带回来很多小商品，就是一整个物美价廉，但是为什么线下购物和网购有的时候差别这么大（网购经常要退换货啊😭😭😭），为此我萌生了一个想法，3D是不是就可以实现在线看商品的细节了，退换货这么麻烦是不是可以省省了😏

一、项目概述

这个项目是对义务购app的一个模仿，相对于其官方app，我新增的亮点如下：

  • 商品排列布局使用瀑布流布局

  • 实现3D看商品功能

  • 实现3D看义乌商贸城
    同时，基础功能如下：

  • 使用 MySQL 实现登录注册的功能

  • 使用 MySQL 实现商品搜索功能

  • 使用 MySQL 实现对用户的购物车及收货地址的增删改查功能

  • 技术栈：Vue3 + Pinia + Three.js + Koa

二、项目展示

  1. 首页
    在这里插入图片描述

  2. 商品展示
    在这里插入图片描述

  3. 圈子
    在这里插入图片描述

  4. 商品搜索
    在这里插入图片描述

  5. 购物车+地址管理
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/917ac781c6b645b2a0e92c7ac029e6c3.png

三、项目思路

  1. 登录采用 sessionStorage 做数据持久化，保存当前账号的登录状态，在登录的时候向后端发起接口请求，将当前账号的数据返回给前端。
  2. 商品搜索历史采用 localStorage 做数据持久化，保存当前账号的搜索历史，在搜索的时候向后端发起接口请求，将当前账号的数据返回给前端。
  3. 对于官方的商品展示以及商城的内部，增加一个3D 预览模块。
  4. 将不同的页面封装成一个组件，然后通过 Vue-router 对路由进行集中管理，实现不同商品页面展示不同商品。
  5. 借助 Pinia 保存横向导航栏（商品种类）的 id ，购物车数量角标，glb文件的路径。

四、项目主体结构

客户端目录结构：

  • client
    • public //商品3D模型
      • draco
      • model
    • src
      • api //自己封装的axios用于响应拦截
      • assets //图片及基本css的初始化
      • components //组件
      • router //路由配置
      • store //仓库
      • views //页面

服务端目录结构：

  • server
    • config //mysql配置文件
    • controllers //控制器
    • data //商品数据
    • routes //路由客户端目录结构：
  • client
    • public //商品3D模型
      • draco
      • model
    • src
      • api //自己封装的axios用于响应拦截
      • assets //图片及基本css的初始化
      • components //组件
      • router //路由配置
      • store //仓库
      • views //页面

服务端目录结构：

  • server
    • config //mysql配置文件
    • controllers //控制器
    • data //商品数据
    • routes //路由客户端目录结构：
  • client
    • public //商品3D模型
      • draco
      • model
    • src
      • api //自己封装的axios用于响应拦截
      • assets //图片及基本css的初始化
      • components //组件
      • router //路由配置
      • store //仓库
      • views //页面

服务端目录结构：

  • server
    • config //mysql配置文件
    • controllers //控制器
    • data //商品数据
    • routes //路由

五、前端实现

  • UI组件库：Vant
  • 移动端适配：lib-flexible
  • CSS预处理器：less
  • 滚动：BetterScroll

1. 组件

众所周知，组件可以省去很多代码的编写，这个项目中我将头部导航栏，底部导航栏，商品瀑布流布局做成组件便于引用。这里我主要介绍下头部导航栏及商品瀑布流布局的实现。

(1) 头部导航栏（对不同类别的商品的展示）
实现过程：后端数据中每个类别的商品数据都包含id这个字段，我将导航栏的每个类别的id和后端给的id对应起来，并将这个id存储在pinia仓库中，这样只要在页面用watch监听仓库id的变化去向后端请求相应类别的数据即可。
在这里插入图片描述
(2) 商品瀑布流布局（提供更好的用户体验）
实现过程：利用flex布局，它可以实现两栏以上的瀑布流布局，我这里是两栏瀑布流布局，故将父容器设置为弹性容器，子容器为两个弹性容器，将这两个子容器的排列方向设置为垂直排列，并用flex:1;两列平分区域占满整个视窗。
在这里插入图片描述

2. 仓库

仓库的出现让我们可以在不同的页面进行数据共享，简直不要太爽，再也不用担心跨组件通信了！

这里简单介绍一下购物车角标的实现:
因为添加或删除商品，购物车角标将立即更新，不管是在主页还是购物车页面还是商品详情页面，角标都得实时更新它的数值，我们将变量值、更新角标重新获取购物车数据的方法定义在仓库中，这样在页面就可以直接引入并使用就好啦~

import {defineStore} from 'pinia'
import axios from 'axios'

const useCartStore=defineStore('cart',{
  state:()=>{  
    return{
      badge:0   //响应式数据badge
    }
  },
  actions:{
    async changeBadge(){
      const res =await axios.post('/cartList', {  //获取购物车数据
        username: JSON.parse(sessionStorage.getItem('userInfo')).username
      })
      this.badge=res.data.length
    }
  }
})

export default useCartStore

3. 搜索模块

实现过程：利用localStorage对搜索的词进行数据持久化，这样就能方便的从localStorage中拿到搜索的历史词段，并将其传给后端使用mysql检索相应的数据，并可以对其进行删除（也就是清除历史记录）

后面发现的一个小优化：逛淘宝发现我啥都不输入点击搜索可以搜索默认的字段，那还不简单？这只需要发一次接口请求将默认字段传给后端即可啦~

4. 3D商品预览

使用 Three.js 将引入的商品模型放入页面中，项目中模型来源于此：sketchfab.com[1]

由于模型的展示是通过点击商品图片后，以 遮罩层 + 动画 的形式呈现出来，不同商品展示不同模型，我们将其做成一个组件便于引用。部分代码如下：

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { ref, onMounted } from 'vue';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { useRoute } from 'vue-router';

const route = useRoute()
const { id } = route.params

const canvasDom = ref(null)

//场景
const scene = new THREE.Scene()
//渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true, setAlpha: true })  //setAlpha让其可设置透明度
renderer.setSize(window.innerWidth, window.innerHeight)
//镜头
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(10, 10, 10)
camera.lookAt(0, 0, 0)
const controls = new OrbitControls(camera, renderer.domElement)

// 渲染函数
const render = () => {
  renderer.render(scene, camera)
  controls.update()
  requestAnimationFrame(render)
}

onMounted(() => {
  //渲染
  canvasDom.value.appendChild(renderer.domElement)

  // 设置背景颜色并启用透明度
  renderer.setClearColor(0x000000, 0.2);
  render()

  //网格地面
  const gridHelper = new THREE.GridHelper(80)
  gridHelper.material.transparent = true
  gridHelper.material.opacity = 0
  scene.add(gridHelper)

  //加载gltf模型
  const loader = new GLTFLoader()
  const dracoLoader = new DRACOLoader()
  dracoLoader.setDecoderPath('../../public/draco/gltf/')
  loader.setDRACOLoader(dracoLoader)

  loader.load(`../../public/model/${id}.glb`, (gltf) => {  //传id让其点击不同商品展示不同模型 id对应商品的id
    // console.log(gltf.scene);
    const bmw = gltf.scene
    bmw.scale.set(0.2, 0.2, 0.2); //模型缩放
    scene.add(bmw) //将整个模型组添加到场景中
  })

});

//洒满灯光
const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(0, 0, 10)
scene.add(light)
const light2 = new THREE.DirectionalLight(0xffffff, 1);
light2.position.set(0, 0, -10);
scene.add(light2);
const light3 = new THREE.DirectionalLight(0xffffff, 1);
light3.position.set(10, 0, 0);
scene.add(light3);
const light4 = new THREE.DirectionalLight(0xffffff, 1);
light4.position.set(-10, 0, 0);
scene.add(light4);
const light5 = new THREE.DirectionalLight(0xffffff, 1);
light5.position.set(0, 10, 0);
scene.add(light5);
const light6 = new THREE.DirectionalLight(0xffffff, 0.3);
light6.position.set(5, 10, 0);
scene.add(light6);
const light7 = new THREE.DirectionalLight(0xffffff, 0.3);
light7.position.set(0, 10, 5);
scene.add(light7);
const light8 = new THREE.DirectionalLight(0xffffff, 0.3);
light8.position.set(0, 10, -5);
scene.add(light8);
const light9 = new THREE.DirectionalLight(0xffffff, 0.3);
light9.position.set(-5, 10, 0);
scene.add(light9);

5. 商贸城3D预览

实现过程与3D商品预览类似，我们只需用这段代码将全景图作为场景的背景图即可（全景图的资源路径存在仓库中）：

cubeTextureLoader.load(store.loadUrl, (texture) => {
    const crt = new THREE.WebGLCubeRenderTarget(texture.image.height)
    crt.fromEquirectangularTexture(renderer, texture)  //把全景图转换为纹理格式
    scene.background = crt.texture
  })

六、后端实现

使用 Koa 框架搭建后端开发环境，后端分为四块：

  • 配置文件：对mysql的配置
  • 路由：定义接口请求路径及响应体
  • 控制器：当接口被请求时，需要向前端响应的操作，即数据库的增删改查
  • 数据：后端提供给前端的数据

数据库中创建了三个表：

  • users表：存储用户账号密码
  • cart表: 存储用户的购物车信息
  • address表: 存储用户的地址信息

这里以登录注册模块为例，路由代码如下：

const router = require('koa-router')()
//引入抛出的对象里的方法
const userService = require('../controllers/mySqlController.js')

router.prefix('/users')

//登录接口
router.post('/login', async (ctx, next) => {
  console.log(ctx.request.body);
  const { username, password } = ctx.request.body
  //去读取数据库中的users表，判断读取到的值和前端传过来的值是否匹配
  try {
    const result = await userService.userLogin(username, password)
    console.log(result);
    if (result.length) {
      let data = {
        id: result[0].id,
        username: result[0].username
      }
      ctx.body = {
        code: '80000',
        data: data,
        msg: '登陆成功'
      }
    } else {
      ctx.body = {
        code: '80004',
        data: 'error',
        msg: '账号或密码错误'
      }
    }
  } catch (error) {
    ctx.body = {
      code: '80002',
      data: error,
      msg: '服务器异常'
    }
  }
})

//注册接口
router.post('/register', async (ctx, next) => {
  const { username, password } = ctx.request.body
  //判断账号或密码是否为空
  if (!username || !password) {
    ctx.body = {
      code: '80001',
      msg: '账号或密码不能为空'
    }
    return
  }
  //判断该账号是否在数据库中存在
  try {
    let findres = await userService.userfind(username)
    if (findres.length) {  //如找到数据则向前端报错
      ctx.body = {
        code: '80003',
        data: 'error',
        msg: '用户名已存在！'
      }
    } else {  //如没找到则注册成功，往数据库添加这条数据
      await userService.userRegister([username, password])
        .then(res => {
          // console.log(res);
          if (res.affectedRows !== 0) {
            ctx.body = {
              code: '80000',
              data: 'success',
              msg: '注册成功！'
            }
          } else {
            ctx.body = {
              code: '80004',
              data: 'error',
              msg: '注册失败！'
            }
          }
        })
    }
  } catch (error) {
    ctx.body = {
      code: '80002',
      data: error,
      msg: '服务器异常'
    }
  }
})
module.exports = router

七、总结

这个项目让我对Vue3这个框架的使用更熟练了，整个过程中也遇到了很多bug及问题，以前我是一个很怕代码出bug的小白，一遇到问题就问别人哈哈哈，这个项目让我学会了怎样一步一步寻找错误并分析原因，现在自己能够解决大多数的bug，也回顾了很多基础的js知识，体验了一把理论联系实践了。不过，这个项目还是有需要改进完善的地方，后续再见！

注意

自己维护会有点累，暂时先到者，喜欢的同学可以一起合作把他做成一个完整项目哈~

github:https://gitee.com/chao-diangen/vue3-pinia-koa-three.js

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/921700.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SQL注入之宽字节注入

SQL注入之宽字节注入

文章目录 宽字节注入是什么？注入练习让转义符失效联合查询 代码审计 宽字节注入是什么？ 宽字节注入准确来说不是注入手法，而是另外一种比较特殊的情况。宽字节注入的目的是绕过单双引号转义。 宽字节注入是一种绕过单双引号转义的手段&#x…
阅读更多...
数学——七桥问题——图论

数学——七桥问题——图论

当涉及数学，有很多不同的话题可以讨论。你是否有特定的数学领域、概念或问题想要了解更多？以下是一些常见的数学领域和主题，你可以选择一个或者告诉我你感兴趣的具体内容，我将很乐意为你提供更多信息： 代数学&#xff…
阅读更多...
嵌入式Linux开发实操（十）：ADC接口开发

嵌入式Linux开发实操（十）：ADC接口开发

#前言 ADC就是模数转换，可以用来接一些模拟量设备，所谓模拟量就是波形不是方波而是各种包络形状的波形的信号，比如电压、电流等电信号或压力、温度、湿度、位移、声音等非电信号，ADC就是将这些信号转换为数字方波信号，以便于信息传递的。 #ADC硬件设计 key按键连接了AD…
阅读更多...
高学历就不会“造假”？

高学历就不会“造假”？

一直以来，学历都是职场的敲门砖，也是一个门槛。对企业的雇佣决策而言，学历有着重要的参考价值。 但是总有一小部分求职者，存在侥幸心理，想凭借假学历升职加薪、牟取利益，给企业带来不少的潜在用工风险。倒…
阅读更多...
Flask html模板章节，模板中有中文汉字 UnicodeDecodeError报错

Flask html模板章节，模板中有中文汉字 UnicodeDecodeError报错

报错代码 修改后
阅读更多...
服务器Linux系统配置mysql数据库主从自动备份

服务器Linux系统配置mysql数据库主从自动备份

服务器Linux系统配置mysql数据库主从自动备份 当数据内容越来越多的时候，数据库也变得越来越大了。如果不小心误删了，或者被黑主机了，那就什么都没有了。所以数据库的数据怎么能让它不丢失做到万无一失变得尤为重要！ 我是艾西&a…
阅读更多...
(动态规划) 剑指 Offer 47. 礼物的最大价值 ——【Leetcode每日一题】

(动态规划) 剑指 Offer 47. 礼物的最大价值 ——【Leetcode每日一题】

❓ 剑指 Offer 47. 礼物的最大价值 难度：中等 在一个 m * n 的棋盘的每一格都放有一个礼物，每个礼物都有一定的价值（价值大于 0）。 你可以从棋盘的左上角开始拿格子里的礼物，并每次向右或者向下移动一格、直到到达棋…
阅读更多...
【应用层】网络基础 -- HTTP协议

【应用层】网络基础 -- HTTP协议

再谈协议HTTP协议认识URLurlencode和urldecodeHTTP协议格式HTTP的方法HTTP的状态码HTTP常见HeaderHTTP周边会话保持 再谈协议 协议是一种 “约定”. socket api的接口，在读写数据时，都是按 “字符串” 的方式来发送接收的(tcp是以字节流的方式发送的&am…
阅读更多...
排序—数据结构

排序—数据结构

文章目录 1.前置知识1.1稳定性1.2内部排序和外部排序1.3是不是比较的排序 2.直接插入排序2.1思想2.2实现2.3时间复杂度和空间复杂度、稳定性 3.希尔排序3.1思想3.2实现3.3时间复杂度和空间复杂度、稳定性 4.选择排序4.1思想4.2实现4.3时间复杂度和空间复杂度、稳定性 5.堆排序5…
阅读更多...
基于卷积神经网络的种子等级识别

基于卷积神经网络的种子等级识别

目录 背影 卷积神经网络CNN的原理 卷积神经网络CNN的定义 卷积神经网络CNN的神经元 卷积神经网络CNN的激活函数 卷积神经网络CNN的传递函数 基于GUI的卷积神经网络和长短期神经网络的语音识别系统 代码下载链接：基于MATLABGUI编程的卷积神经网络和长短期神经网络语音识别系统…
阅读更多...
【python零基础入门学习】python基础篇（一）

【python零基础入门学习】python基础篇（一）

python基础学习 官方: www.python.org，自行安装，linux上有自带python，win自行安装。 [studentroom9pc01 05]$ python --version Python 2.7.5 #创建虚拟环境： [rootroom9pc01 bin]# pwd /root/nsd1907/bin [rootroom9pc01 bin]…
阅读更多...
高质量编程与性能调优实践 性能分析工具pprof

高质量编程与性能调优实践 性能分析工具pprof

01 高质量编程 1.1 简介 什么是高质量 ——编写的代码能够达到正确可靠、简洁清晰的目标可称之为高质量代码 • 各种边界条件是否考虑完备 • 异常情况处理，稳定性保证 • 易读易维护 编程原则 实际应用场景千变万化，各种语言的特性和语法各不相同 但是高…
阅读更多...
1267. 统计参与通信的服务器

1267. 统计参与通信的服务器

这里有一幅服务器分布图，服务器的位置标识在 m * n 的整数矩阵网格 grid 中，1 表示单元格上有服务器，0 表示没有。 如果两台服务器位于同一行或者同一列，我们就认为它们之间可以进行通信。 请你统计并返回能够与至少一台其他服务…
阅读更多...
浪涌保护器防雷应用的行业解决方案

浪涌保护器防雷应用的行业解决方案

浪涌保护器SPD是一种用于防止电力系统或电子设备受到雷击或其他暂态过电压的损坏的装置。它可以有效地限制或分流过电压，保护被保护设备的安全和正常运行。浪涌保护器在各个行业领域都有广泛的应用，地凯科技将介绍浪涌保护器的主要应用领域，以…
阅读更多...
threejs纹理加载（二）

threejs纹理加载（二）

通过threejs提供的加载器我们去加载一些贴图作为几何体的纹理&#xff0c;非常方便。我们以本地一张图片作为例子来实现这个效果&#xff1a; <template><div></div> </template> <script setup> import { ref } from "vue";import …
阅读更多...
C++ 编译报错“jump to label”

C++ 编译报错“jump to label”

C 编译报错“jump to label” 分析解决方法如何在Eclipse中添加编译选项 分析 void func() {int a 0;a;goto label; label:int b 0;return; }这样的代码是有问题的&#xff0c;因为C编译规则中&#xff0c;不允许goto后面还有新的变量声明。 解决方法 将所有变量声明放到第…
阅读更多...
LTD240次升级 | 栏目介绍可在官微中心管理 • 移动分享页可显示产品图文参数

LTD240次升级 | 栏目介绍可在官微中心管理 • 移动分享页可显示产品图文参数

1、新增一种自定义内容数据类型&#xff0c;可用于服务特色等版块展示 2、Android版App优化首页内容排序 3、新增一款导航模块和一款轮播模块 4、移动分享页支持产品图文参数 5、已知问题修复与优化 01 官微中心 1) 新增自定义内容类型数据管理功能 本次升级中&#xff0c;新…
阅读更多...
卡尔曼滤波学习笔记

卡尔曼滤波学习笔记

Kalman Filter Ⅰ、直观理解1、描述2、例子 Ⅱ、适用范围1、线性系统2、噪声服从高斯分布 Ⅲ、相关公式1、原始公式2、预测公式3、更新公式4、初值赋予5、总结 Ⅳ、应用例子Ⅴ、代码实现Ⅵ、公式理解1、协方差矩阵的理解1.1 协方差1.2 协方差矩阵1.3、相关数学公式 2、状态方程…
阅读更多...
实例043 如何实现Office助手

实例043 如何实现Office助手

实例说明 用过Office的人都知道&#xff0c;Office助手是一个非常漂亮的小工具&#xff0c;有了它&#xff0c;即使对Office不太熟悉的用户也可以操作自如。本实例使用C#制作了一个类似Office助手的程序&#xff0c;实例效果如图1.44所示。 技术要点 要实现Office助手效果&a…
阅读更多...
2023年Java毕业设计题目推荐，怎样选题？500道毕业设计题目推荐

2023年Java毕业设计题目推荐，怎样选题？500道毕业设计题目推荐

大家好&#xff0c;我是程序员徐师兄&#xff0c;最近有很多同学咨询&#xff0c;说毕业设计了&#xff0c;不知道选怎么题目好&#xff0c;有哪些是想需要注意的。 今天&#xff0c;我整理了一些Java毕业设计的题目,可以参考一下&#xff0c;希望对大家有所帮助 文章目录 一、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023