javascript|尚品汇个人理解笔记 html5|vue

目录
多次执行相同的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);

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

三级联动效果

文章图片

首页组件拆分组件拆分三要素：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`);

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

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这个属性
【javascript|尚品汇个人理解笔记】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, }), }, }, }