乐意购项目前端开发 #4

一、Home页面组件结构

结构拆分

 创建组件

在 views/Home 目录下创建component 目录, 然后在该目录下创建5个组件: 左侧分类(HomeCategory.vue)、Banner(HomeBanner.vue)、精选商品(HomeHot.vue)、低价商品(Homecheap.vue)、最新上架(HomeNew.vue)

引用组件

修改 views/Home/index.vue 的代码

二、安装Pinia

添加依赖

pinia依赖和持久化插件

npm install pinia
npm install pinia-plugin-persist

创建文件

在 stores 目录下创建 category.js 文件

import { ref } from 'vue'
import { defineStore } from 'pinia'

引入

修改 main.js 文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { createPinia } from 'pinia' 
import piniaPersist from 'pinia-plugin-persist'
import ElementPlus from 'element-plus'
import "@/assets/iconfont/iconfont.js"
import "@/assets/iconfont/iconfont.css"

// import './styles/element/index.scss'

const pinia = createPinia()
pinia.use(piniaPersist)
const app = createApp(App)

app.use(store).use(router).use(pinia).use(ElementPlus).mount('#app')

三、分类功能实现

封装接口

在 api 目录下创建 home 目录然后创建 category.js 文件

import http from '@/utils/http'

export function getCategoryAPI () {
  return http({
    url: '/home/category/list',
    method: 'get',
  })
}

前提: 后端要返回相应的数据

修改 /store/category.js

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { getCategoryAPI } from '@/api/home/category'

export const useCategoryStore = defineStore('category', () => {
    // 导航列表数据管理
    //state 导航列表数据
    const categoryList = ref([])

    // action 获取导航数据的方法
    const getCategory = async () => {
        const res = await getCategoryAPI();
        console.log(res);
        categoryList.value = res.data;
    }

    return {
        categoryList, getCategory
    }
})

代码示范

HomeCategory.vue

四、banner功能实现

接口封装

 在 api 目录下创建 home 目录然后创建 banner.js 文件

import http from '@/utils/http'

export function getBannerAPI () {
  return http({
    url: '/home/banner/list',
    method: 'get',
  })
}

代码示范

HomeBanner.vue

五、创建公共组件

创建文件

在 views/Home/components 路径下创建 HomePanel.vue 文件

六、精选商品实现

 接口封装

 在 api 目录下创建 home 目录然后创建 hot.js 文件

代码示范

HomeHot.vue

七、低价好物

 接口封装

 在 api 目录下创建 home 目录然后创建 cheap.js 文件

代码示范

HomeCheap.vue

八、最新上架

 接口封装

 在 api 目录下创建 home 目录然后创建 new.js 文件

代码示范

HomeNew.vue