vue电商项目(二)——完成Home页面

thinkDeeply_

已于 2022-12-23 22:44:19 修改

阅读量1.4k

点赞数

分类专栏： vue电商项目笔记文章标签： vue.js 前端 javascript

于 2022-12-13 22:43:06 首次发布

本文链接：https://blog.csdn.net/a_bowl_rice/article/details/128305299

版权

一、项目开发逻辑

二、拆分搭建Home页面组件

1、注册使用三级联动TypeNav组件（全局组件）

五、ypeNav三级联动数据展示与业务逻辑晚膳

1、获取数据

（1）组件挂载完毕通知仓库发送数据

（2）在home仓库通过API发送请求获取数据进行保存

5、三级联动路由组件的路由跳转与传递参数（目标search组件）

（1）采用router-link进行跳转

（2）编程式导航

6、typeNav组件在search组件中的显示与隐藏

六、开发home首页当中的ListContainer与Floor组件

一、项目开发逻辑

1、完成静态页面

2、拆分静态组件

3、获取服务器的数据进行展示

4、动态业务

经分析，Home首页可以拆分为7个组件，分别是：TypeNav三级联动导航，ListContainer，Recommend，Rank，Like，Floor，Brand

二、拆分搭建Home页面组件

1、注册使用三级联动TypeNav组件（全局组件）

----由于三级联动在Home、search、Derail，都有使用，所以将三级联动注册为全局组件，方便复用

（1）注册全局组件

（2）使用全局组件

在src/pages/Home/index.vue中直接使用即可

<template>
  <!-- 使用全局组件TypeNav -->
  <TypeNav></TypeNav>
</template>

2、完成Home其余静态组件

注意1：拆分静态组件的时候注意应用资源资源地址的变动

注意2：将使用到的静态资源也一并拿过来

（1）静态组件文件夹较少

index.vue放置组件的样式结构，images放置当前组件使用到的图片资源

（2）组件构建和使用

三、请求数据准备工作

1、POSTMAN测试接口是否正常

进入网址：https://www.apifox.cn/?utm_source=baidu&utm_medium=sem&utm_term=zizhanghao&bd_vid=9773636383745084172

使用步骤：点击使用web版——》选择全部分类中的ApiFox——》点击右上角加号——》点击快捷请求即可

然后输入对应的URL和地址即可

2、Axios二次封装

二次封装是为了添加请求拦截器和相应拦截器，从而可以处理一些业务需求。

安装axios:npm instal axios

在src文件夹下创建api/request.js文件，用于对axios的二次封装

//axios二次封装
import axios from "axios";

const requests = axios.create({
    //配置对象
    //基础路径
    baseURL:"/api",
    //配置请求超时时间
    timeout:5000
});

// 配置请求拦截器
requests.interceptors.request.use((config)=>{
// config 配置对象，里面有一个很重要的属性Header请求头
return config;
});

//相应拦截器
requests.interceptors.response.use((res)=>{
    return res.data;
},(err)=>{
    //相应失败的回调函数
    //终止Promise链
    return Promise.reject(new Error('faile'));
})

//对外暴露
export default requests;

3、接口统一管理

项目很小：完全可以在组件的生命周期函数中发请求
项目大,有很多接口：axios.get(‘xxx’)

//当前这个模块Api接口进行统一管理
import request from './request'

//三级联动请求
///api/product/getBaseCategoryList method:"GET" 参数：无
export default reqCategoryList = () => {
    //AXIOS发送请求 返回的是Promise对象
    return request({
        url: '/product/getBaseCategoryList',
        method: 'GET'
    });

}

可以在main.js中进行测试

import {reqCategoryList} from '@/api'
reqCategoryList();

4、开发过程中的跨域问题

配置代理服务器即可解决开发过程中的跨域问题，但是在项目上线的时候需要直接解决这种问题，这种仅仅适用于开发中使用，在vue.config做如下配置即可

5、nprogress进度条的使用

安装：npm instal --save nprogress

进度条的结束颜色在node_modules/nprogress/nprogress.css文件下配置background即可

#nprogress .bar {
  background: rgb(221, 34, 115);

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}