啵啵怪_-CSDN博客

点击按钮，切换高亮背景<button @click="btnClick(1)" :class="{ active: btnNum === 1 }">日</button><button @click="btnClick(2)" :class="{ active: btnNum === 2 }">日累计</button><button @click="btnClick(3)" :class="{ active: btnNum === 3 }">

2022-04-08 18:02:25 1181

原创 Echarts自定义tooltip展示内容

tooltip: { formatter: function (params) { //console.log(params);//如下图所示 if (params.dataIndex == 1) { //高亮部分展示tooltip，阴影部分不展示 if ( params.seriesName == "生产份额" || params.seriesName == "优质会员占比" || param..

2022-04-08 17:51:39 1749 1

原创 Vue获取url链接中的参数

浏览器地址：http://localhost:8080/#/loginmis?ticket=12341. window.location.href获取完整路径：http://localhost:8080/#/loginmis?ticket=12342. this.$ route.path获取路由路径："/loginmis"3. this.$ route.params路由路径参数: {}4. this.$route.query路由查询参数: { ticket: ‘1234’ }cons

2022-03-14 11:13:51 7235

原创笔试题目合集

1. Number()和new Number()var a = 3;var b = new Number(3);var c = 3;console.log(a == b);console.log(a === b);console.log(b === c);上面代码的输出结果是什么true false falseNumber(1)，将 1 转换成数字类型 1===Number(1)new Number(1),将 1 转换成一个对象console.log(new Number(1));.

2022-03-14 10:54:05 1052

原创 2.26 笔试

一、toString将数字转换为字符串toString()语法number.toString(radix)radix：可选。规定表示数字的基数，是 2 ~ 36 之间的整数。默认：10。原因：JavaScript解析器将 . 和 3 连在一起解决：" 3. " 看成3，后面再加个 .给3加个括号二、盒模型标准盒模型， box-sizing: content-box（默认值）;width = content + border + padding;width

2022-02-27 14:13:27 128

原创导出：“export ‘Demo‘ was not found in ‘./components/Demo.vue‘

导出；一直页面不显示，找半天错误引入组件时不需要加"{}"，方法引用才需要加上"{}"

2022-02-25 17:17:30 1479 1

原创创建Vue3项目两种方式

一、vue-cli创建vue create vue3_testDefault (Vue 3) ([Vue 3] babel, eslint) √二、vite创建npm init vite-app vue3_test_vitecd vue3_test_vitenpm inpm run dev（运行）

2022-02-24 09:23:40 2674

原创 VUE项目--封装组件分页器

一、封装分页器组件的时候：需要知道哪些条件？分页器组件需要知道我一共展示多少条数据 ----total【100条数据】每一个需要展示几条数据------pageSize【每一页3条数据】需要知道当前在第几页-------pageNo[当前在第几页]需要知道连续页码数【起始数字、结束数字：连续页码数市场当中一般5、7、9】奇数，对称好看 continues二、实现在@/components/Pagination/index.vue：<template> <div cla

2022-02-23 17:37:39 1156

原创 VUE项目--Search组件

一、拆分组件二、写api，获取后台数据// 获取搜索模块数据地址：/api/list 请求方式：post 参数：需要带参数// 当前接口（获取搜索模块数据），给服务器传递一个默认参数【至少是一个空对象】export const reqGetSearchInfo = (params) => requests({ url: "/list", method: "post", data: params})三、Vuex存储数据，模块化管理import { reqG

2022-02-23 17:23:24 2010

转载 CORS预检查

在跨域请求中，下列请求头中哪种content-type一定会触发cors预检查A. text/plainB. multipart/form-dataC. application/x-www-form-unlencodedD. application/json √CORS概念CORS（Cross-origin resource sharing）：跨域资源共享，是W3C标准。它允许浏览器向跨源服务器，发出XMLHTTPRequest请求，从而克服AJAX只能同源使用的限制。CORS请求.

2022-02-18 14:59:34 514

转载 HTTP与HTTPS

一、基本概念HTTP：超文本传输协议，是一种用于分布式、协作式和超媒体信息系统的应用层协议。被用于在 Web 浏览器和网站服务器之间传递信息。HTTP：基于TCP/IP 通信协议；默认端口号：80；以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此HTTP不适合传输敏感信息（银行卡号，密码等支付信息）；HTTPS：超文本传输安全协议，通过HTTP进行通信，但是利用SSL/TLS来加密数据包工作流程：

2022-02-18 14:38:06 188

原创笔试题——splice()与slice()

结果为: [2,3] 和 [2]array.splice(start[, deleteCount[, item1[, item2[, …]]]])splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。start: 指定修改的开始位置（从0计数）if start > array.length,则在数组末尾添加元素if start < 0，则表示从数组末位开始的第几位（从-1计数）if start的绝对值 &.

2022-02-18 10:03:35 166

原创 VUE项目--抽取公共组件之轮播图

Floor与listContainer组件中轮播图功能一样，可以抽取成公共组件在components文件夹下创建/Carousel/index.vueListContainer组件中的swiper在watch中，Floor组件中的swiper在mounted中，需要统一，抽取组件需要代码一样将Floor组件中的swiper放在watch中，但是Floor组件中的数据没有发生变化，watch监听不到———— 使用 immediate: true, //立即监听 watch: { l

2022-01-28 17:54:53 656

原创 VUE项目--Floor组件

开发Floor组件Floor组件它被复用的1. Floor组件获取mock数据，发请求的action书写在哪里?派发action应该是在父组件的组件中的mounted（挂载完毕生命周期函数）中书写，因为父组件需要通知Vuex发请求，父组件获取到mock数据，通过v-for 遍历生成多个floor组件，因此达到复用作用。在父组件（home文件夹下的index.vue）中： //Floor组件内部没有发请求，数据是父组件传递过来的 <Floor v-for="(floor

2022-01-28 17:37:17 1018

原创 VUE项目--轮播图

1. 安装（版本5较稳定）npm install swiper@5 2.1 引入在需要用到轮播图的组件（ListContainer）中引入swiper import Swiper from 'swiper'2.2 引入样式因为其他地方也需要轮播图，也需要swiper的样式，所以在入口文件main.js中统一引入 import 'swiper/css/swiper.css'3. 初始化swiper实例3.1 在哪里初始化？初始化swiper实例之前，页面中的节点（结构）必须完整

2022-01-28 17:17:03 1936

原创 VUE项目--mock数据

1. 安装依赖包mockjsnpm install --save mockjs2. 在src文件夹下创建mock文件夹3. 模拟步骤准备JSON数据——banner.json把mock数据需要的图片放置于public文件夹中在mock文件夹中创建一个server.js文件import Mock from 'mockjs'// webpack默认对外暴露：图片、JSON数据格式import banner from './banner.json'Mock.mock("/mock/ba

2022-01-28 16:52:23 1023

原创 VUE项目--TypeNav三级联动性能优化

项目中：home切换到search或者search切换到home，会发现组件在频繁的向服务器发请求，获取三级联动的数据进行展示。项目中如果频繁的向服务器发请求，很耗性能的，因此需要进行优化。为什么会频繁的向服务器发请求获取三级联动的数据？？？因为路由跳转的时候，组件会进行销毁的【home组件的created：再向vuex派发action，因此频繁的获取三级联动的数据】，切换页面要重新进行挂载，重新请求数据。解决把原来页面中的请求放在App中 // 组件挂载完毕，向服务器发请求 .

2022-01-23 15:59:22 602

原创 VUE项目--路由的跳转与传参

路由跳转有两种方式：声明式导航 <router-link to="/home">News</router-link>编程式导航 this.$router.push({ name: 'xiangqing', params: { id: xxx, title: xxx } })第一种声明式导航: 在本项目中为什么使用router-link组件的时候，会出

2022-01-23 15:50:57 268

原创 VUE项目--防抖与节流

正常情况下事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）防抖前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次节流在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发如何实现？在创建项目时，modules里包含了loadshlodash插件：里面封装函数的防抖与节流的业务【闭包+延迟器】lodash函数库对

2022-01-23 15:16:28 497

原创 VUE项目--Vuex模块化状态管理组件

Vuex原理图1. 概念在Vue中实现集中式状态（数据）的管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信2. 何时使用多个组件需要共享数据时；或者由于项目体积比较大，你向服务器发请求的接口过多，服务器返回的数据也会很多，如果还用以前的方式存储数据，导致vuex中的state数据格式比较复杂。采用vuex模块式管理数据本项目中home、search等四个组件需要模块化管理，创建如图所示目录：3.

2022-01-22 22:04:41 464

原创 VUE项目--nprogress进度条

安装npm install --save nprogress引入在src/api/requests.js文件中引入// 引入进度条import nprogress from 'nprogress'// 引入进度条的样式import 'nprogress/nprogress.css'基本用法nprogress.start(); //开始nprogress.done(); //结束在requests.js中–——在请求拦截器和响应拦截器中使用：// 请求拦截器：在发送请求之前，

2022-01-22 21:01:42 465

原创 VUE项目--axios二次封装、接口统一管理、跨域

1. axios二次封装为什么需要进行二次封装axios ？请求拦截器：可以在发送请求之前处理一些事情；响应拦截器：当服务器返回数据以后可以处理一些事情；在src/api下创建requests.js文件（请求网络数据）：// 对axios进行二次封装import axios from 'axios'// 1. 利用axios对象的方法create，去创建一个axios案例// 2. requests就是axiosconst requests = axios.create({

2022-01-22 20:53:05 1045

第二章：面向对象.md

第一章：快速入门.md

空空如也