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

    文章目录

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    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;



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    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"})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70

    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;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    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"
    }
]



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    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"
    }
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130

    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})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

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

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    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')


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74

    babel.config.js

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    jsconfig.json

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    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':''}
       }
     }
   }
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    jsconfig.json

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
  • 相关阅读:
    基于QTGUI图像界面的空战游戏设计
    JS截取url上面的参数
    MySQL 字段的基本操作：添加、修改和删除字段（详解）
    【配电网重构】基于粒子群算法求解配电网重构问题附matlab代码
    李沐深度学习记录4：12.权重衰减/L2正则化
    了解比特币分叉：演变与分歧
    Fastbot——基于model-based testing的APP 稳定性测试工具
    Vue 源码解读（3）—— 响应式原理
    开启个推和关闭个推--SharePreferences使用
    docker 基础
  • 原文地址：https://blog.csdn.net/Kerryliuyue/article/details/125470796