Vue购物商城项目(二) 数据请求&使用

本文详细介绍了Vue购物商城项目中如何使用axios进行数据请求和数据使用。首先在request.js中封装request函数,然后在home.js中通过不同配置调用此函数获取数据,最终在Home.vue中集中处理数据并传递给各组件。文章还展示了Home.vue中如何在methods中定义函数以在适当生命周期中获取数据,并通过v-for指令展示数据。
摘要由CSDN通过智能技术生成

Vue购物商城项目(二)


前言

1.这里面包含了大量的、我的个人理解与看法;

2.这是一个购物商城项目,目前阶段牵扯到路由, 插槽, axios数据请求, 数据存储与使用;

3.这篇只牵扯数据请求(axios), 数据使用;

4.现在这个项目已经全部完成;


一、请求数据

思路是在network文件夹的request.js和home.js请求到所有组件的数据传递到Home.vue,拆分数据后再由集中在此的组件模板将对应数据传至各个组件;

在request.js中封装一个request函数构成request.js的主体部分,这个request函数会在home.js里调用并传入axios配置对象,request()在拿到配置对象后会将其与自身内部axios.create()里的baseURL等公用配置进行拼合组成一个完整的配置对象,如此一来request函数就可以从服务器请求到一份数据,返回给Home.js;

request.js

全部代码:

import axios from 'axios'

export function request(config) {
   
    //创建axios示例;
    const instance = axios.create({
   
        baseURL: 'http://152.136.185.210:7878/api/m5',
        timeout: 5000
    })

    //axios拦截器;
    //请求拦截
         instance.interceptors.request.use(config => {
   
            return config
        }, error => {
   
            console.log(error);
        })
        //
        instance.interceptors.response.use(response => {
   
            return response.data
        }, error => {
   
            console.log(error);
        }) 

    return instance(config);
}

部分代码,说说我的一些认识

//此处为request.js
import axios from 'axios'
//引入axios;
export function request(config) {
   
//request()接收从home.js传入的config配置对象;
    const instance = axios.create({
   
        //创建axios实例instance,现在可以instance()传入配置来进行请求;
        baseURL: 'http://152.136.185.210:7878/api/m5',
        timeout: 5000
    })
    return instance(config);
    //向instance中传入config配置对象;
    //以供instance内部进行对配置对象的组合;
}

request()中声明了一个axios实例,实例instance中可以包括众多axios全局配置用于拼接url和完善配置对象,
配置对象的可包含内容见此,您当然可以声明多个instance实例对象,来定制多套axios配置,以备您接下来所要进行的各种不同请求,向不同的instance实例对象传入您所需要的配置对象来组成合适的请求方法,请求不同的数据;

home.js

home.js中通过给request函数传入不同的配置对象,构建了两个方法:getHomeMultidata()和getHomeGoods(),因为这俩方法内置了request,传参进去能拿到数据,所以后面会被Home.vue调用:

//此处为home.js
import {
    request } from "./request"
//引入request.js里的request方法;
export function getHomeMultidata() {
   
//暴露getHomeMultidata();
    return request({
   
        url: '/home/multidata',
    })
    //向request传参一个配置对象config,把request请求到的数据返回
    //存储到getHomeMultidata()中
}

export
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
基于Vue购物商城项目可以分为以下几个模块: 1. 首页:展示商品列表、轮播图等信息,可以通过搜索框搜索商品。 2. 分类:展示商品分类列表,可以通过点击分类查看对应的商品列表。 3. 购物车:展示用户已选中的商品列表,可以对商品进行增删改操作。 4. 个人中心:展示用户个人信息,包括订单信息、收货地址等。 以下是一个简单的基于Vue购物商城项目的实现步骤: 1. 使用Vue CLI 4生成项目,安装Vue Router和Vuex等必要的依赖。 2. 配置路由,分别对应首页、分类、购物车和个人中心等页面。 3. 制作TabBar组件,包括TabBarItem组件和MainTabBar组件,实现底部导航栏的功能。 4. 制作商品列表组件和轮播图组件,展示首页信息。 5. 制作分类列表组件和商品列表组件,展示分类信息。 6. 制作购物车列表组件和商品详情组件,实现购物车功能。 7. 制作个人中心组件,展示用户个人信息。 8. 使用Vuex管理购物车状态,实现购物车数据的增删改查。 9. 使用axios发送请求获取商品列表、分类列表、用户信息等数据。 10. 使用localStorage存储用户信息和购物车数据,实现数据的持久化。 以下是一个简单的基于Vue购物商城项目的代码示例: ```vue <template> <div> <main-tab-bar :tabs="tabs" /> <router-view /> </div> </template> <script> import MainTabBar from '@/components/MainTabBar' export default { name: 'App', components: { MainTabBar }, data () { return { tabs: [ { name: '首页', icon: 'home', path: '/' }, { name: '分类', icon: 'category', path: '/category' }, { name: '购物车', icon: 'cart', path: '/cart' }, { name: '个人中心', icon: 'user', path: '/user' } ] } } } </script> ```
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值