index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 引入清除默认的样式 -->
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3451235_xv5vmac8oe.css">
  </head>
  <body>
 
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

api文件夹

ajax.js

//对axios进行二次封装(主要是用到它的请求拦截器)
import axios from "axios"
import store from "@/store"
//引入进度条
import nprogress from "nprogress"
/* console.log(nprogress);
其中是start方法，是进度条开始,done:进度条结束
*/
//引入进度条的样式
import "nprogress/nprogress.css"
/*1.利用axios对象的方法create，去创建一个axios实例
2.request就是axios,只不过稍微配置一下
*/
const requests = axios.create({
    
    
    //配置对象
    //基础路径，发请求的时候，路径中会出现api
    baseURL: "/api",
    //代表请求超时的时间5s
    timeout: 5000,
});
//请求拦截器:在请求发出去之前，可以检测到，在发出去之前做一些事情
requests.interceptors.request.use((config) => {
    
    
    //config：配置对象，对象里面有一个属性很重要,headers请求头
//请求头添加一个字段(userTempId),和后台一致
    config.headers.userTempId=store.state.detail.uuid_token;
    
    //需要携带token带给服务器
    if(store.state.user.token){
    
    
        config.headers.token=store.state.user.token;
    }
    //进度条开始动
    nprogress.start();
    return config;
});

//响应拦截器
requests.interceptors.response.use((res) => {
    
    
    //成功的回调函数:服务器响应数据回来之后，相应拦截器可以检测到，可以做一些事情
    nprogress.done();//进度条结束
    return res.data;
}, (error) => {
    
    
    //响应失败的回调函数
    return Promise.reject(new Error('faile'));
});


export default requests;

index.js

//当前这个模块，API进行统一管理
import axios from "axios";
import requests from "./ajax";
import mockRequests from "./mockAjax";
//三级联动接口 /api/product/getBaseCategoryList get  无参数
//发请求:axios发请求返回结果Promise结果
export const reqCategoryList=()=>{
    
    
    //发请求(baseURL中包含了apil,这个地方就不用写了)
    return requests({
    
    url:'/product/getBaseCategoryList',method:'get'});
}


//获取banner(Home首页轮播图接口)
export const reqGetBannerList=()=>{
    
    
   return mockRequests.get('/banner');
}

//获取floor数据
export const reqGetFloorList=()=>{
    
       return mockRequests.get('/floor');}

//获取搜索模块数据  地址:/api/list  请求方式 Post 请求带参数
/*{
  "category3Id": "61",
  "categoryName": "手机",
  "keyword": "小米",
  "order": "1:desc",
  "pageNo": 1,
  "pageSize": 10,
  "props": ["1:1700-2799:价格", "2:6.65-6.74英寸:屏幕尺寸"],
  "trademark": "4:小米"
}
 */
//当前这个接口，给服务器传递的参数，至少是一个空对象
export  const reqGetSearchInfo=(params)=>requests({
    
    url:"/list",method:"post",data:params})
//  api/item/{skuId}
export const reqGetDetailInfo=(id)=>requests({
    
    url:`/item/${
    
    id}`,methods:"get"})
//添加购物车（更新购物车数据）/api/cart/addToCart/{ skuId }/{ skuNum }
export const reqAddorUpdateShopCart=(skuId,skuNum)=>requests({
    
    url:`/cart/addToCart/${
    
    skuId}/${
    
    skuNum}`,method:"post"})
//获取购物车列表数据接口
export const reqGetCartList=()=>requests({
    
    url:"/cart/cartList",method:"get"})
//删除购物车的接口
export const reqDeleteCartById=(skuId)=>requests({
    
    url:`/cart/deleteCart/${
    
    skuId}`,method:"delete"})
//修改产品状态的接口
export const reqCheckedById=(skuId,isChecked)=>requests({
    
    url:`/cart/checkCart/${
    
    skuId}/${
    
    isChecked}`,method:"get"})

//获取验证码
export const reqGetCode=(phone)=>requests({
    
    url:`/user/passport/sendCode/${
    
    phone}`,method:"get"});
//注册 参数：phone,code,password
export const reqUserRegister=(data)=>requests({
    
    url:"/user/passport/register",data,method:"post"})

//登录
export const reqUserLogin=(data)=>requests({
    
    url:"/user/passport/login",data,method:"post"})
//获取用户信息（需要带着用户的token向服务器要用户信息）
export const reqUSerInfo=()=>requests({
    
    url:"/user/passport/auth/getUserInfo",method:"get"});
// 退出登录
export const reqLogout=()=>requests({
    
    url:"/user/passport/logout",method:'get'})

//获取用户地址信息
export const  reqAddressInfo=()=>requests({
    
    url:'/user/userAddress/auth/findUserAddressList',method:"get"})
//获取商品清单
export const reqOrderInfo=()=>requests({
    
    url:"/order/auth/trade",method:"get"});

//提交订单的接口
export const reqSubmitOrder=(tradeNo,data)=>requests({
    
    url:`/order/auth/submitOrder?tradeNo=${
    
    tradeNo}`,data,method:"post"})
//获取支付信息
export const reqPayInfo=(orderId)=>requests({
    
    url:`/payment/weixin/createNative/${
    
    orderId}`,method:'get'});
//获取指出订单状态
export const reqPayStatus=(orderId)=>requests({
    
    url:`/payment/weixin/queryPayStatus/${
    
    orderId}`,method:"get"})
//获取个人中心的数据
export const reqMyOrderList=(page,limit)=>requests({
    
    url:`order/auth/${
    
    page}/${
    
    limit}`,method:"get"})

mockAjax.js

//对axios进行二次封装(主要是用到它的请求拦截器)
import axios from "axios"
//引入进度条
import nprogress from "nprogress"
/* console.log(nprogress);
其中是start方法，是进度条开始,done:进度条结束
*/
//引入进度条的样式
import "nprogress/nprogress.css"
/*1.利用axios对象的方法create，去创建一个axios实例
2.request就是axios,只不过稍微配置一下
*/
const requests = axios.create({
    
    
    //配置对象
    //基础路径，发请求的时候，路径中会出现api
    baseURL: "/mock",
    //代表请求超时的时间5s
    timeout: 5000,
});
//请求拦截器:在请求发出去之前，可以检测到，在发出去之前做一些事情
requests.interceptors.request.use((config) => {
    
    
    //config：配置对象，对象里面有一个属性很重要,headers请求头
    //进度条开始动
    nprogress.start();
    return config;
});

//相应拦截器
requests.interceptors.response.use((res) => {
    
    
    //成功的回调函数:服务器响应数据回来之后，相应拦截器可以检测到，可以做一些事情
    nprogress.done();//进度条结束
    return res.data;
}, (error) => {
    
    
    //响应失败的回调函数
    return Promise.reject(new Error('faile'));
});

export default requests;

mock文件夹

banner.json

[
    {
    
    
        "id": "1",
        "imgUrl": "/images/banner1.jpg"
    },
    {
    
    
        "id": "2",
        "imgUrl": "/images/banner2.jpg"
    },
    {
    
    
        "id": "3",
        "imgUrl": "/images/banner3.jpg"
    },
    {
    
    
        "id": "4",
        "imgUrl": "/images/banner4.jpg"
    }
]

floor.json

[
    {
    
    
        "id": "001",
        "name": "家用电器",
        "keywords": [
            "节能补贴",
            "4K电视",
            "空气净化器",
            "IH电饭煲",
            "滚筒洗衣机",
            "电热水器"
        ],
        "imgUrl": "/images/floor-1-1.png",
        "navList": [
            {
    
    
                "url": "#",
                "text": "热门"
            },
            {
    
    
                "url": "#",
                "text": "大家电"
            },
            {
    
    
                "url": "#",
                "text": "生活电器"
            },
            {
    
    
                "url": "#",
                "text": "厨房电器"
            },
            {
    
    
                "url": "#",
                "text": "应季电器"
            },
            {
    
    
                "url": "#",
                "text": "空气/净水"
            },
            {
    
    
                "url": "#",
                "text": "高端电器"
            }
        ],
        "carouselList": [
            {
    
    
                "id": "0011",
                "imgUrl": "/images/floor-1-b01.png"
            },
            {
    
    
                "id": "0012",
                "imgUrl": "/images/floor-1-b02.png"
            },
            {
    
    
                "id": "0013",
                "imgUrl": "/images/floor-1-b03.png"
            }
        ],
        "recommendList": [
            "/images/floor-1-2.png",
            "/images/floor-1-3.png",
            "/images/floor-1-5.png",
            "/images/floor-1-6.png"
        ],
        "bigImg": "/images/floor-1-4.png"
    },
    {
    
    
        "id": "002",
        "name": "手机通讯",
        "keywords": [
            "节能补贴2",
            "4K电视2",
            "空气净化器2",
            "IH电饭煲2",
            "滚筒洗衣机2",
            "电热水器2"
        ],
        "imgUrl": "/images/floor-1-1.png",
        "navList": [
            {
    
    
                "url": "#",
                "text": "热门2"
            },
            {
    
    
                "url": "#",
                "text": "大家电2"
            },
            {
    
    
                "url": "#",
                "text": "生活电器2"
            },
            {
    
    
                "url": "#",
                "text": "厨房电器2"
            },
            {
    
    
                "url": "#",
                "text": "应季电器2"
            },
            {
    
    
                "url": "#",
                "text": "空气/净水2"
            },
            {
    
    
                "url": "#",
                "text": "高端电器2"
            }
        ],
        "carouselList": [
            {
    
    
                "id": "0011",
                "imgUrl": "/images/floor-1-b01.png"
            },
            {
    
    
                "id": "0012",
                "imgUrl": "/images/floor-1-b02.png"
            },
            {
    
    
                "id": "0013",
                "imgUrl": "/images/floor-1-b03.png"
            }
        ],
        "recommendList": [
            "/images/floor-1-2.png",
            "/images/floor-1-3.png",
            "/images/floor-1-5.png",
            "/images/floor-1-6.png"
        ],
        "bigImg": "/images/floor-1-4.png"
    }
]

mockServer.js

//陷入mockjs模块
import Mock from 'mockjs'

//把json数据引入进来（为什么json数据没有对外暴露，但是可以引入）
//webpack默认对外暴露的，图片，json数据格式
import banner from "./banner.json"
import floor from "./floor.json"


//mock数据(第一个参数请求地址，第二个参数，请求数据)
Mock.mock("/mock/banner",{
    
    code:200,data:banner});//模拟首页大的轮播图数据
Mock.mock("/mock/floor",{
    
    code:200,data:floor})

------------------------

App.vue

<template>
  <div>
    <h1 v-upper="msg"></h1>
    <Header></Header>
    <router-view></router-view>
    <!-- 在home，search是显示的，在登录，注册是隐藏的 -->
    <!-- <Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer> -->

    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

<script>
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
    
    
  name: "App",
  data() {
    
    
    return {
    
    
      msg: "abc",
    };
  },
  components: {
    
    
    Header,
    Footer,
  },
  mounted() {
    
    
    //通知Vuex发请求，获取数据，存储与仓库中
    this.$store.dispatch("categoryList");
  },
};
</script>

<style>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

//三级联动组件，祖册为全局组件
import TypeNav from "@/components/TypeNav"
import Carousel from "@/components/Carousel"
import Pagination from "@/components/Pagination"
//第一个参数全局组件的名字，第二个参数是哪一个组件
Vue.component(TypeNav.name, TypeNav)
Vue.component(Carousel.name, Carousel)
Vue.component(Pagination.name, Pagination)
//引入路由
import router from "@/router"
Vue.config.productionTip = false
//引入仓库
import store from './store'

//测试
// import {reqCategoryList} from "@/api"
// reqCategoryList();

import {
    
     reqGetSearchInfo } from './api'
reqGetSearchInfo({
    
    })
import '@/mock/mockServe.js';

//引入包
import "swiper/css/swiper.css"


//统一接口api文件夹里面全部请求函数
//
import * as API from "@/api";
// console.log(API);


import {
    
     Button, MessageBox } from "element-ui"
//全局注册
Vue.component(Button.name, Button);
//另一种方法，挂在原型上
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;

//图片懒加载
import VueLazyload from 'vue-lazyload'
//引入图片
import atm from "@/assets/1.gif"

Vue.use(VueLazyload,{
    
    
  loading:atm
})


//引入自定义的插件
import myPlugins from "@/plugins/myPlugins"
Vue.use(myPlugins,{
    
    
  name:'upper',
});

//引入表单验证插件
import "@/plugins/validate";
new Vue({
    
    
  render: h => h(App),
  //注册路由，相同的KV一直省略V
  // 在main.js注册完路由，所有的路由和非路由组件身上都会拥有$router $route属性
  router,
  //注册仓库，组件实例的身上会多一个$store的属性
  store,
  //全局事件总线
  beforeCreate() {
    
    
    Vue.prototype.$bus = this;
    Vue.prototype.$API = API;
  }
}).$mount('#app')

babel.config.js

module.exports = {
    
    
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
    
    
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

jsconfig.json

{
    
    
  "compilerOptions": {
    
    
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
    
    
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

vue.config.js

const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  productionSourceMap:false,
  transpileDependencies: true,
   //关闭eslint(不按规范会报错)
   lintOnSave:false,
   //代理跨域
   devServer:{
    
    
     proxy:{
    
    
       'api':{
    
    
         //数据来自于哪台服务器
         target:"http://gmall-h5-api.atguigu.cn",
        //  pathRewrite:{'^/api':''}
       }
     }
   }
})

jsconfig.json

{
    
    
    "compilerOptions": {
    
    
        "baseUrl": "./",
        "paths": {
    
    
            "@/*":[
                "src/*"
            ]
        }
    },
    "exclude": [
        //@不能使用的地方
        "node_modules",
        "dist"
    ]
}

html/APP/main/api文件夹 mock文件夹

文章目录

index.html

api文件夹

ajax.js

index.js

mockAjax.js

mock文件夹

banner.json

floor.json

mockServer.js

------------------------

App.vue

main.js

babel.config.js

jsconfig.json

vue.config.js

jsconfig.json

猜你喜欢