BugFrog1024-CSDN博客

原创【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决

前后端对接必出bug，最近连续对接了两个项目，对解决跨域有点感觉了，跟大家分享一下经验，都是血的教训…两个项目都是Springboot+Vue（axios网络请求）。本人主要负责前端，所以前端会分享具体的代码，后端就大致分享一下相应的解决思路。（如果你是后端，应该都懂；如果你是前端，就把思路告诉你的后端，他应该都懂~）第一个坑：No ‘Access-Control-Allow-Origin’ header首先，最初也是最常见的情况。在浏览器直接输入网址可以访问到后端，但是前端无法请求到。跨域报错信息：

2022-01-28 12:59:43 4776

原创【Ant Design Vue】Notification/Message没有反应、$notification/$message undefined 已解决

先上官方文档：Ant Design Vue Notification（通知提醒框）光把官方文档里的代码粘贴过来是无法直接使用的，这里的处理方式和使用Ant Design Vue的普通组件也不一样，需要在Vue的原型链中增加notification属性，这样在其他组件中才可以通过$notification使用。在main.js中修改Vue原型链：import Vue from 'vue'import App from './App'//从Ant Design Vue导入notification，注

2022-01-21 15:12:39 4624

原创【Vue学习笔记系列】从入门到掌握，看完68h硬核课程整理的笔记

终于整理完啦！之前在B站上看完了coderwhy老师的vue课程，68h全程硬核…看完课程不能说精通吧，但应该算掌握了，距离精通还需要再多几个实战项目。最近把当时的学习笔记翻出来复习了一遍，顺便整理成了【Vue学习笔记系列】博客，分享给想学习vue但又没有时间看视频课程的朋友。附18章Vue学习笔记的超链接：【Vue学习笔记_01】Vue初识【Vue学习笔记_02】Mustache及v- 插值操作【Vue学习笔记_03】v-bind动态绑定属性【Vue学习笔记_04】computed计算属性

2021-11-28 22:51:53 301

原创【Vue学习笔记_18】axios网络请求

【Vue学习笔记_18】axios网络请求Vue中网络请求的方式axios功能特点axios基本使用axios并发请求axios配置信息axios实例axios模块封装axios拦截器配套可执行代码示例 => GitHubVue中网络请求的方式传统的Ajax：配置和调用方式非常混乱，真实开发中很少直接使用jQuery-Ajax：在Vue的整个开发中是不需要使用jQuery的，因此没有必要为了网络请求引入这个重量级框架（Vue和jQuery的源码均1w+行）vue-resource：官方在V

2021-11-28 22:34:52 520

原创【Vue学习笔记_17】Vuex状态管理

【Vue学习笔记_17】Vuex状态管理Vuex初识Vuex基本使用Vuex-StateVuex-GettersVuex-MutationsMutations传递参数Mutations提交风格Mutations响应规则Mutations类型常量Vuex-ActionsVuex-ModulesVuex-store目录结构配套可执行代码示例 => GitHubVuex初识Vuex：一个专为Vuejs应用程序开发的状态管理模式，应用于多界面状态管理。它采用集中式存储管理应用的所有组件的状态，并以相应的

2021-11-28 20:00:32 260

原创【Vue学习笔记_16】案例-Tabbar导航栏

【Vue学习笔记_16】案例-Tabbar导航栏项目文件结构效果展示&组件结构封装TabBarTabBarItem.vueTabBar.vue使用封装的TabBarMainTabBar.vueApp.vue配置路由router/index.js文件目录配置别名这个案例结合了前面介绍的slot插槽、vue-router前端路由等知识点，最重要的是体现了组件封装的思想。配套可执行代码示例 => GitHub项目文件结构assets/：静态资源，css、img等components/：公

2021-11-28 17:48:50 344

原创【Vue学习笔记_15】Vue Router前端路由

【Vue学习笔记_15】Vue Router前端路由前端路由发展历史后端渲染后端路由前端渲染（前后端分离）前端路由（单页面富应用）vue-router基本使用默认路由使用HTML5的history模式router-link属性补充通过js代码跳转路由vue-router动态路由路由的懒加载嵌套路由vue-router参数传递paramsquery导航守卫keep-alive配套可执行代码示例 => GitHub前端路由发展历史路由：通过互联的网络把信息从源地址传输到目的地址的活动路由器提供了两

2021-11-28 12:50:54 260

原创【Vue学习笔记_14】Vue CLI 2&3 脚手架

【Vue学习笔记_14】Vue CLI 2&3 脚手架Vue CLI 初识Vue CLI 2初始化项目ESLint规范Runtime-only和Runtime+Compiler的区别目录结构解析Vue CLI 3Vue CLI3与Vue CLI2的区别初始化项目目录结构解析Vue CLI3配置文件的查看和修改配套可执行代码示例 => GitHubVue CLI 初识需求：使用Vue开发大型项目时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情，如果每个项目都要手动完

2021-11-28 11:45:15 241

原创【Vue学习笔记_13】webpack前端模块化打包

【Vue学习笔记_13】webpack前端模块化打包webpack初识与grunt/gulp的对比webpack安装webpack基本使用webpack配置webpack.config.jspackage.jsonwebpack-loadercss文件的处理less文件的处理图片文件的处理ES6转ES5webpack配置vueSPA单页面富应用.vue文件webpack-pluginBannerPluginHtmlWebpackPluginUglifyjsWebpackPluginWebpackDevSer

2021-11-28 11:10:56 392

原创【Vue学习笔记_12】模块化开发

【Vue学习笔记_12】模块化开发CommonJS导出：exports导入：requireES6的模块化导出：export导入：importdefault配套可执行代码示例 => GitHub为什么要有模块化？多人开发，维护多个js文件，一方面会产生全局变量命名冲突等问题，另一方面这种代码编写方式对js文件的依赖顺序几乎是强制性的。将整个js文件作为匿名函数闭包可以解决变量命名冲突的问题，但是会导致两个js文件之间的东西无法相互使用，代码复用性降低。解决方法：将需要暴露给外面的变量和方法，封

2021-11-27 22:15:59 314

原创【Vue学习笔记_11】slot插槽

【Vue学习笔记_11】slot插槽插槽的基本使用具名插槽作用域插槽插槽（slot）：预留空间，让封装的组件更具扩展性，让使用者可以根据需求决定组件内部的一些地方展示什么。配套可执行代码示例 => GitHub插槽的基本使用应用场景：导航栏。几乎每个页面都有导航栏，但它们之间又有所区别。最好的封装方式：将共性抽取到组件中，将不同暴露为插槽。基本使用：子组件中使用<slot>标签定义插槽，可以指定默认元素。接着父组件在使用子组件时传入替换元素，如果没有传则显示默认元素，如果传入了

2021-11-27 22:05:29 255

原创【Vue学习笔记_10】组件化开发

【Vue学习笔记_10】组件化开发组件的基本使用全局组件和局部组件父组件和子组件注册组件的语法糖组件HTML模板的分离写法组件中的data属性组件通信-父传子(props)组件通信-子传父(自定义事件)修改props传入的数据（可跳过）组件访问-父访问子组件访问-子访问父配套可执行代码示例 => GitHub终于到了Vue最核心的组件化开发！组件化：我们将一个页面拆分成很多个组件，每个组件都用于实现页面的一个功能块，而每一个组件又可以进行细分。这样会让代码更加方便组织和管理，而且扩展性也更强。

2021-11-27 19:13:59 314

原创 Vue响应式原理简述

Vue响应式原理简述依赖技术图解过程依赖技术问题：Vue如何监听data的改变？=> 技术：Object.defineProperty函数。在其中的set方法中监听对象属性的改变。问题：当data发生改变时，Vue如何知道要通知哪些元素，刷新界面？=> 技术：发布-订阅模式（观察者模式）。凡通过Object.defineProperty的get方法获取对象属性的元素，在get方法中将其添加为该属性的订阅者，当该属性发生改变时，发布者调用notify方法通知所有订阅者调用upda

2021-11-27 12:46:27 216

原创【Vue学习笔记_09】v-model绑定表单元素

【Vue学习笔记_09】v-model绑定表单元素v-model基本使用和原理v-model绑定radio元素v-model绑定checkbox元素checkbox单选框checkbox复选框v-model绑定select元素select单选select多选v-bind绑定input初始值v-model修饰符.lazy.number.trimVue使用v-model指令实现表单元素和数据的双向绑定配套可执行代码示例 => GitHubv-model基本使用和原理<input>、&l

2021-11-27 12:17:48 1286

原创【Vue学习笔记_08】案例-图书购物车 (filters过滤器)

【Vue学习笔记_08】案例-图书购物车效果展示filters代码技巧总结这个案例结合了前面介绍的很多知识点，Mustache语法、v-if、v-else、v-for、v-bind、v-on、computed等等，以及新增知识点filters。配套可执行代码示例 => GitHub效果展示filtersfilters：过滤器，和methods、computed是并列的，有点像函数，接受参数并返回值，一般用于对数据进行一些格式转换或过滤处理操作。filters使用格式：变量|过滤器在下面

2021-11-27 11:39:22 525

原创【Vue学习笔记_07】v-for循环遍历

【Vue学习笔记_07】v-for循环遍历v-for遍历数组:key属性提高性能响应式的数组方法v-for遍历对象配套可执行代码示例 => GitHubv-for遍历数组遍历item遍历item、index<div id="app">  <ul> <li v-for="item in names">{{item}}</li> </ul> <!--获取索引值--&g

2021-11-26 23:11:57 363

原创【Vue学习笔记_06】v-if/v-show条件判断

【Vue学习笔记_06】v-if/v-show条件判断v-if指令v-else指令v-else-if指令案例-用户登录切换v-show指令配套可执行代码示例 => GitHubv-if指令当v-if绑定的条件满足，即boolean值为true时才渲染该元素及其子元素。<div id="app"> <h2 v-if="isShow">{{msg}}</h2></div><script> const app = new Vu

2021-11-26 22:18:11 1340

原创【Vue学习笔记_05】v-on事件监听

【Vue学习笔记_05】v-on事件监听v-on方法参数v-on修饰符案例-点击切换选中目标配套可执行代码示例 => GitHubv-on指令：绑定事件处理方法，可以简写为@v-on方法参数情况一：事件处理方法没有参数。v-on为事件绑定方法时小括号可以省略，也可以不省略。情况二：事件处理方法需要参考，且v-on绑定方法时传递了相应的参数。这种情况是最常见的。情况三：事件处理方法本身需要参数，但v-on绑定方法时省略了小括号，这时Vue会默认将浏览器生成的event事件对象作为第一个参数传

2021-11-25 23:07:46 407

原创【Vue学习笔记_04】computed计算属性

【Vue学习笔记_04】computed计算属性基本使用案例-计算总价格setter和getter配套可执行代码示例 => GitHub计算属性：对数据进行一些操作后再显示，本质是属性。基本使用下面这个例子比较了对数据进行一些操作后再展示的三种方法。直接拼接语法繁琐，通过methods性能较低，因此这个时候使用computed最为合适。computed与methods的区别：computed有缓存，在多次使用时，只会调用一次；而methods没有缓存，使用几次调用几次，因此性能较低。&lt

2021-11-25 22:04:43 323

原创【Vue学习笔记_03】v-bind动态绑定属性

【Vue学习笔记_03】v-bind动态绑定属性v-bind基本使用v-bind动态绑定class对象语法（很常用）数组语法v-bind动态绑定style对象语法数组语法配套可执行代码示例 => GitHub在标签的属性前加v-bind:，可以简写为:，属性值就不再是固定值，而是动态绑定的了。v-bind基本使用<div id="app"> <img v-bind:src="imgUrl">  <a :href="aUrl

2021-11-25 19:16:53 752

原创【Vue学习笔记_02】Mustache及v- 插值操作

【Vue学习笔记_02】Mustache及v- 插值操作Mustache语法v-once指令v-html指令v-text指令v-pre指令v-cloak指令配套可执行代码示例 => GitHub插值操作：将data中的文本数据插入到HTML中Mustache语法Mustache语法：双大括号变量简单的表达式<div id="app"> <h2>{{message}}, Vue!</h2> <h2>{{firstName + '

2021-11-22 23:25:49 255

原创【Vue学习笔记_01】Vue初识

ES6常用语法总结Vue初识渐进式框架声明式编程响应式特点及功能MVVM模式安装Vue使用创建Vue实例案例-计数器Vue生命周期配套可执行代码示例 => GitHubVue初识渐进式框架既可以把Vue作为应用的一部分嵌入其中（比如一个项目的三个页面原本都是jQuery开发的，可以依次逐步替换成Vue）也可以用Vue的核心库及其生态系统从零开始搭建一个项目声明式编程以前的js是命令式编程：从数据到显示需要执行命令Vue是声明式编程：在显示中声明变量，后只需修改变量值；数据和显示分

2021-11-21 22:16:24 567

原创 JavaScript数组高阶函数 (filter/map/reduce)

JavaScript数组高阶函数filtermapreduce函数式编程所谓高阶函数，就是函数本身需要的参数也是一个函数filter过滤出数组中符合条件的元素。回调函数必须返回一个boolean值。//newNums：过滤出nums中小于100的元素let newNums = nums.filter(function (n) { return n < 100})map依次将数组中每个元素放入回调函数中处理。//new2Nums：将nums中的元素*2let new2Nums

2021-11-21 21:51:28 451

原创 ES6常用语法总结

ES6常用语法总结let 块级作用域const 常量对象字面量的增强写法箭头函数Promise 异步Promise的基本使用Promise的链式调用Promise的all方法数组遍历其他语法ES6（ECMAScript 6）是 JavaScript 的下一代标准。当前版本的 ES6 是在2015年6月发布的，所以又称 ECMAScript 2015。也就是说，ES6 就是 ES2015。ES6 是 ECMAScript 标准十余年来变动最大的一个版本，新增了许多新的语法特性。虽然目前并不是所有浏览器都能兼

2021-11-21 21:36:18 496

weixin_44752429的博客