自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(29)
  • 收藏
  • 关注

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

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

2022-01-28 12:59:43 4843

原创 【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 4693

原创 【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 309

原创 【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 530

原创 【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 264

原创 【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 308

原创 【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 248

原创 【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 397

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

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

2021-11-27 22:15:59 321

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

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

2021-11-27 22:05:29 258

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

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

2021-11-27 19:13:59 317

原创 Vue响应式原理简述

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

2021-11-27 12:46:27 220

原创 【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 1312

原创 【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 538

原创 【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 367

原创 【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 1371

原创 【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 417

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

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

2021-11-25 22:04:43 324

原创 【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 758

原创 【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 257

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

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

2021-11-21 22:16:24 569

原创 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 459

原创 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 511

原创 vue前端框架快速入门,看完就会简单使用了

vue前端框架快速入门,看完就会简单使用了vue是什么MVVM模式(了解)MVC(Model-View-Controller)MVVM(Model-View-ViewModel)三步使用vue导入vue.js在自己的js中创建Vue实例对象使用模板语法把数据渲染到页面上data可以是基本数据类型、数组、对象vue指令v-textv-htmlv-on事件处理函数传递参数事件修饰符v-showv-if...

2020-04-10 23:10:58 616

原创 js键盘事件再也不用搜keycode键码对照表了,直接用key属性获取按键string

以前使用键盘事件,总要搜一下keycode键码对照表,最近前端换了个IDE,从sublime换成WebStorm,无意间发现keyCode方法已经弃用了,虽然现在还是可以使用的,但以后就说不准了不用keyCode,但是发现有一个key方法key方法的输出类型为string字符串onkeydown = function (event) { alert(typeof event.ke...

2020-03-08 23:36:56 3586 2

原创 cookie和session的入门介绍+简单案例(基于python的django框架)

cookie和session的入门介绍+简单案例(基于python的django框架)cookie和session是干什么的cookie认识cookiecookie的简单使用登录案例:cookie记住用户名session认识sessionsession的简单使用登录案例:session记住登录状态cookie和session的对比及应用场景cookie和session是干什么的浏览器访问页面基...

2020-02-06 00:04:35 255

原创 【Python】*args和**kwargs参数的理解和应用示例

【Python】*args和**kwargs参数的理解和应用示例分开看*args参数**kwargs参数综合看拓展:用 * 和 ** 拆包分开看首先理解*args和**kwargs参数的用途:定义函数时作为形参,让函数可以接受任意数量的实参*args参数用途:*args参数能让一个函数接受任意数量的位置参数,并将这些参数以元组(tuple)的形式保存args中举个例子:#定义求平均数的...

2019-09-12 00:48:34 605

原创 【CSS】CSS里的那些水平垂直居中

CSS里的那些水平垂直居中文字的居中对齐水平居中垂直居中水平垂直居中盒子的居中对齐水平居中垂直居中水平垂直居中如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入文...

2019-08-31 23:51:42 197

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除