前端（十七）——gitee上开源一个移动端礼盒商城项目（前端+后台）

在这里插入图片描述
🤗博主：小猫娃来啦
🤗文章核心：gitee上开源一个移动端礼盒商城项目

文章目录

前言

项目样式老旧，ui设计较low，虽说现在大众的商城app都使用的是瀑布流布局，且功能更丰富。但本项目仅作为开源学习和技术交流，仅此而已。

前端采用搭建vue脚手架处理，使用JavaScript语言，后台采用laravel框架处理，使用php语言。
后台开发人员：bug丶小狼人

开源地址

前端：gitee资源下载：点击此处传送门
前端：csdn资源下载：点击此处传送门

后台：gitee资源下载：点击此处传送门

项目运行命令

安装依赖：

yarn

运行项目：

yarn dev

登录账密：

账号：  123456
密码：  123456

项目基本展示

在这里插入图片描述

前端效果细节展示视频

在这里插入图片描述

前端代码细节展示视频

在这里插入图片描述
部分代码展示，样式为less编写：

import{ reactive }from'vue'// 导入reactive函数，从'vue'库中import{ useRouter }from'vue-router'// 导入useRouter函数，从'vue-router'库中import{ useIntegrallist }from'@/stores/integralList.js'// 导入名为useIntegrallist的函数，从'@/stores/integralList.js'文件中import{ useUserInfoStore }from'@/stores/user.js'// 导入名为useUserInfoStore的函数，从'@/stores/user.js'文件中import{ storeToRefs }from'pinia'// 导入storeToRefs函数，从'pinia'库中import{ closeToast, showLoadingToast}from'vant'// 导入closeToast和showLoadingToast函数，从'vant'库中import{ watch }from'vue'// 导入watch函数，从'vue'库中import{ baseURL, homeIndex }from'../../api'// 导入baseURL和homeIndex函数，从'../../api'文件中const userInfoStore =useUserInfoStore()// 使用useUserInfoStore函数创建userInfoStore对象const{ loading, curStudent, classFormat, thisCount }=storeToRefs(userInfoStore)// 使用storeToRefs函数将userInfoStore对象的loading、curStudent、classFormat和thisCount属性解构为响应式对象const integrallist =useIntegrallist()// 使用useIntegrallist函数创建integrallist对象const all =reactive({// 创建一个响应式对象allloading:true,// 属性loading，初始值为truetabs:[{name:`所有商品`}],// 属性tabs，值为一个包含一个对象元素的数组list:[]// 属性list，初始值为空数组});(asyncfunction(){// 定义一个异步函数并立即调用try{
    all.loading =true// 将all的loading属性设为trueconst res =awaithomeIndex()// 调用homeIndex函数，并将返回结果赋值给res
    all.banner = res.banner.map((item)=>{// 将res的banner属性映射为一个新数组
      item.banner = baseURL + item.banner  // 将item的banner属性拼接baseURL，赋值给item.bannerreturn item  // 返回item})
    all.list = res.list.map((item)=>{// 将res的list属性映射为一个新数组
      item.image = baseURL + item.image  // 将item的image属性拼接baseURL，赋值给item.imagereturn item  // 返回item})
    all.loading =false// 将all的loading属性设为false}catch(error){
    all.loading =false// 将all的loading属性设为false}})()watch(
  loading,(newLoading)=>{if(newLoading){showLoadingToast({message:'加载中...',forbidClick:true})}else{closeToast()}},{immediate:true})

在这里插入图片描述