前端（十七）——gitee上开源一个移动端礼盒商城项目（前端+后台）-阿里云开发者社区

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

2023-09-26 188

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

前言

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

前端采用搭建vue脚手架处理，使用JavaScript语言，后台采用laravel框架处理，使用php语言。

后台开发人员：bug丶小狼人

项目运行命令

安装依赖：

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({  // 创建一个响应式对象all
  loading: true,  // 属性loading，初始值为true
  tabs: [{ name: `所有商品` }],  // 属性tabs，值为一个包含一个对象元素的数组
  list: []  // 属性list，初始值为空数组
})
;(async function () {  // 定义一个异步函数并立即调用
  try {
    all.loading = true  // 将all的loading属性设为true
    const res = await homeIndex()  // 调用homeIndex函数，并将返回结果赋值给res
    all.banner = res.banner.map((item) => {  // 将res的banner属性映射为一个新数组
      item.banner = baseURL + item.banner  // 将item的banner属性拼接baseURL，赋值给item.banner
      return item  // 返回item
    })
    all.list = res.list.map((item) => {  // 将res的list属性映射为一个新数组
      item.image = baseURL + item.image  // 将item的image属性拼接baseURL，赋值给item.image
      return 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 }
)