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

文章目录

- index.html
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

相关阅读:
奇迹MU架设常见问题解决
 RPA实施前的7个问题
 在linux操作系统ubuntu上安装ssh服务器和samba服务器教程，实现共享编译服务
 Redis03:Redis基础知识以及数据类型
 ultralytics yolo 参数说明(含翻译)
想学设计模式、想搞架构设计，先学学 UML 系统建模吧
 【Python】使用 Python 中的 aioredis 实现后进先出队列
 一、CSS弹性布局[弹性盒子、弹性元素]
API(3) StringBuffer类和StringBulider类
 Android studio2022.3项目，禁止页面左右
原文地址：https://blog.csdn.net/Kerryliuyue/article/details/125470796