尚品汇个人理解笔记

目录

多次执行相同的push或者replace问题

全局组件

首页组件拆分

axios的二次封装

跨域问题

接口请求统一管理

nprogress进度条的使用

使用vuex仓库

---

多次执行相同的push或者replace问题

多次执行相同的push问题，控制台会出现警告
例如：使用this.$router.push({name:‘Search’,params:{keyword:"…"||undefined}})时，如果多次执行相同的push，控制台会出现警告。

let result = this.$router.push({name:"Search",query:{keyword:this.keyword}})
console.log(result)

push和replace是VueRouter.prototype的方法

所以需要我们重写push | replace

//需要重写VueRouter.prototype原型对象身上的push|replace方法
//先把VueRouter.prototype身上的push|replace方法进行保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
//第一个形参：路由跳转的配置对象（query|params）
//第二个参数：undefined|箭头函数（成功的回调）
//第三个参数:undefined|箭头函数（失败的回调）

//重写VueRouter.prototype身上的push方法了
VueRouter.prototype.push = function(location, resolve, reject) {
    if (resolve && reject) {
        //originPush：利用call修改上下文，变为(路由组件.$router)这个对象，
        //第二参数：配置对象、第三、第四个参数：成功和失败回调函数
        originPush.call(this, location, resolve, reject);
    } else {
        originPush.call(
            this,location, () => {},() => {}
        );
    }
};

//重写VueRouter.prototype身上的replace方法了
VueRouter.prototype.replace = function(location, resolve, reject) {
    if (resolve && reject) {
        originReplace.call(this, location, resolve, reject);
    } else {
        originReplace.call(
            this,location, () => {},() => {}
        );
    }
};

---

全局组件

我们的三级联动组件是全局组件，全局的配置都需要在main.js中配置

//定义全局组件：在入口文件注册一次之后，在任何组件当中都可以使用
import typeNav from "@/components/TypeNav";

//全局组件：第一个参数 组件名字  第二个参数：那个组件
Vue.component(typeNav.name, typeNav);

 在项目中任何一个位置都可以直接使用，不用再导入、注册

<template>
  <div>
    <!-- 全局的三级菜单 -->
    <typeNav />
  </div>
</template>

 三级联动效果

---

首页组件拆分

组件拆分三要素：HTML + CSS + 图片资源   

信息【结构、样式、图片资源】

---

axios的二次封装

axios参考文档：Axios 中文说明 · 看云

二次封装缘由：

请求拦截器：可以在发请求之前可以处理一些业务

响应拦截器：当服务器数据返回以后，可以处理一些事情

import axios from "axios";

// 1.利用axios对象的方法create，去创建一个axios实例
// 2.request就是axios
const requests = axios.create({
    // 配置对象
    // 基础路径，发请求的时候，路径当中会出现的api
    baseURL: "/api",
    // 代表请求的时间
    timeout: 5000
})

// 请求拦截器：在发请求之前,请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
    //config:配置对象，对象里面有一个属性很重要，headers请求头
    return config;
})

//响应拦截器
requests.interceptors.response.use((res) => {
    // 成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data;
}, (error) => {

})

//对外暴露
export default requests;

---

跨域问题

什么是跨域？协议、域名、端口号不同请求，称之为跨域

举例：(协议相同，域名、端口号都不同)

前端项目本地服务器：http://localhost:8080/#/home

后台服务器：http://139.98.123.211

传统解决方案：JSONP，CROS，代理

该项目通过代理解决跨域问题：

在vue.config.js中进行配置(如果项目初始化没有vue.config.js文件，手动创建)

module.exports = {
    //配置代理跨域
    devServer: {
        proxy: {
            "/api": {
                target: "http://39.98.123.211",
            },
        },
    },
};

---

接口请求统一管理

// 引入axios
import requests from "./request"

//三级联动请求接口
export const reqGetCategoryList = () => requests.get(`/product/getBaseCategoryList`);

在需要获取三级联动数据的组建中直接使用这个方法

<template>
  <div>三级联动组件数据</div>
</template>

<script>
import { reqGetCategoryList } from "@/api/api";

export default {
  data() {
    return {};
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取三级联动数据
    getList() {
      reqGetCategoryList().then((res) => {
        //   查看接口数据格式
          console.log(res)
      });
    },
  },
};
</script>

<style scoped></style>

---

nprogress进度条的使用

第一步：项目中安装nprogress

npm install --save nprogress

第二步：使用nprogress进度条

在request.js中引入和使用

import axios from "axios";

//第一步：引入进度条
import nprogress from "nprogress";

//第二步：引入进度条样式
import "nprogress/nprogress.css";

// 1.利用axios对象的方法create，去创建一个axios实例
// 2.request就是axios
const requests = axios.create({
    // 配置对象
    // 基础路径，发请求的时候，路径当中会出现的api
    baseURL: "/api",
    // 代表请求的时间
    timeout: 5000
})

// 请求拦截器：在发请求之前,请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
    //config:配置对象，对象里面有一个属性很重要，headers请求头
    // 第三步：使用进度条-进度条开始
    nprogress.start();
    return config;
})

//响应拦截器
requests.interceptors.response.use((res) => {
    // 成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    // 第四步：使用进度条-进度条结束
    nprogress.done();
    return res.data;
}, (error) => {

})


//对外暴露
export default requests;

---

使用vuex仓库

1.安装vuex --- npm install vuex --save 

2.引入和使用vuex --- store/index.js

//引入Vuex
import Vuex from "vuex";
//引入Vue
import Vue from "vue";
//使用插件
Vue.use(Vuex);

3.在main.js中全局注册

//引入仓库进行注册
import store from "@/store";

new Vue({
    render: (h) => h(App),
    store,
}).$mount("#app");

全局注册之后，每一个组件的身上都拥有一个$store这个属性

4.进行模块化开发，每个模块都有单独的state、mutations、actions、getters

import { reqGetCategoryList } from "@/api";
//home模块的仓库
const state = {
  //home仓库中存储三级菜单的数据
  categoryList: [],
};
//mutions是唯一修改state的地方
const mutations = {
    GETCATEGORYLIST(state, categoryList) {
        state.categoryList = categoryList;
    },
};
//action|用户处理派发action地方的，可以书写异步语句、自己逻辑地方
const actions = {
    async getCategoryList({ commit }) {
        //用await接收返回的数据，为一个promise对象
        let result = await reqGetCategoryList();
        if (result.code == 200) {
            commit("GETCATEGORYLIST", result.data);
        }
    },
};
//计算属性
const getters = {};
export default {
  state,
  mutations,
  actions,
  getters,
};

5.在store/index.js中引入各个模块的小仓库(如home,search)

//引入home|search模块的仓库
import home from "./home";
import search from "./search";

6.暴露Vuex.Store类的实例,把小仓库进行合并变为大仓库

export default new Vuex.Store({
  modules: {
    home,
    search,
    detail,
    shopcart,
    user,
    trade,
  },
});

7.在需要用到vuex的组件中使用

//导入vuex
import { mapState } from "vuex";

export default {
    computed: {
        //state:他是咱们大仓库中的state（包含home|search）
        ...mapState({
          categoryList: (state) => state.home.categoryList,
        }),
      },
  },
}