小峰同学的前端小屋

原创 常见的css 实现水平垂直居中方法有哪些？（附10种）

文章目录十种方法实现水平垂直居中需要居中元素固定宽高的3种法1：absolute配合负margin法2：absolute配合上下左右0；margin auoto法3：absolute配合calc(50% - 25px)，注意calc空格不用居中元素固定宽高的7种法4.absolute配合transform translate法5:在父亲加flex布局配合justify-content、align-items法6：css新增table属性法7.linelight法8.table单元格法9.grid法10.wr

原创 Vue快速入门 巩固篇

文章目录Vue前端发展史三端统一Node.jsVue.js前端为主的MV*模式Node.js带来的全栈时代第一个Vue项目什么是MVVM为什么要使用MVVMMVVM的组成部分为什么使用Vue.jsMVVM的实现者Vue.js测试Vue数据绑定Vue基本语法v-bind指令，绑定属性v-if、v-else-if、v-elsefor循环Vue绑定事件Vue双向绑定在表单中使用双向数据绑定Vue组件component使用props属性传递参数Axios异步通信计算属性插槽slot自定义事件 内容分发 this.$

原创 nginx配置ssl证书实现https访问

需求：网站之前是http协议的，老提醒不安全，老板让加个锁，第一次配https，中间遇到的测试配置文件中的坑记录下来常见错误：[emerg] the “ssl” parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx.conf这是缺少http_ssl_module配置Permission denied，这是没有启动权限，我们在命令前加上bash当前环境：阿里云服务器、nginx思路：阿里免费买一个

原创 【工具】window自动上传图片到图床?截图Snipate+图床PicGo+阿里云存储+Markdown工具,解决复制文章中图片路径问题

文章目录1.背景 图片需要一个个手动导入图床2.必备：截图Snipate+图床PicGo+阿里云存储+Markdown工具1.背景 图片需要一个个手动导入图床作为window电脑，平时写博客本地用typora，写好复制到比如csdn,掘金，印象笔记等其他地方辛辛苦苦写的图文并茂内容发送给其他小伙伴时，对方却完全看不到那些图片。然后得找个地方把图片上传上去后，一张张替换成网络图片，实在麻烦。究其原因，还是markdown保存的只是本地路径，现在终于实现截图后，粘贴到typora中，自动转成链接，无论复制到

原创 【nuxt.js】pc端链接转成二维码 可以手机端长按或者扫扫码识别

需求：vue\nuxt.js项目 中pc端链接转成二维码 可以手机端长按或者扫扫码识别,最终效果：方法一：单纯生成带数据的二维码1）：终端安装@xkeshi/vue-qrcode.js包npm install --save @xkeshi/vue-qrcode //安装到生产环境<template> <div class="article-id"> <div class="qrcodeBox"> <qrcode :value="

原创 【点击自动复制 弹出链接】vue +element-ui 得到下一页路径

需求：为实现文章邀请分销，在文章展示页，点击复制，在本页路径上拼接下一页文章详情页id和本页的用户id效果：当前页：http://192.168.153.1:10001/article复制得到的链接：http://192.168.153.1:10001/article/1?inviterId=1302993986131300353目前页面已经固定，实际至少需要用户id接口样式使用element-ui的message全局Vue.prototype.$message = M.

原创 Nuxt.js Vue-admin-template后台管理部署和启动前报错的坑

1.启动经常报错： E:/IdeaProjects/guli-vue-admin/index.html:17257:11 - index.html:17262 Q3Bv.module.exports E:/IdeaProjects/guli-vue-admin/index.html:17262:3 - index.js:286 HtmlWebpackPlugin.executeTemplate [guli-vue-admin]/[html-webpack-plugi

原创 62-【框架】虚拟DOM和DOM diff

谣言：DOM操作慢相对于原生js慢但是任何基于虚拟DOM的库都不可能在操作DOM时比DOM快DOM操作并不慢，相当于js执行时间，但是浏览器渲染页面时，并无法进行交互，而是页面渲染时长较长当节点较小时，默认是Reac快，但是太大还是DOM更稳定，vue是比较稳定都较快，vue省心1.虚拟 DOM 是什么（见4.）一个可以代表DOM树的对象，通常含有标签名、标签上属性，事件监听和子元素们，以及他的属性2.虚拟 DOM 的优点 减少DOM操作次数和范围 次数..

原创 SpringCloud使用 Nacos做注册中心 客户端启动报错java.lang.IllegalArgumentException: no server available的解决方案

困扰我很多天的问题了，报错no server availableError watching Nacos Service changejava.lang.IllegalArgumentException: no server available at com.alibaba.nacos.client.naming.net.NamingProxy.reqAPI(NamingProxy.java:354) ~[nacos-client-1.0.0.jar:na] at com.alibab

原创 pm2部署2个vue项目时，npm run dev有效,pm2 start npm -- run dev无效解决办法

pm进程查看：ps -ux | grep pm2按照端口杀死： kill -9 pid （pid是显示的程序端口号）pm2 start npm – run dev

原创 【阿里云视频点播加密视频播放报错】：网络错误加载数据失败(fragLoadError)或者403

1、首先视频id正确2、视频播放凭证生成正确(未失效)3、但是网页点播出现错误解决方案：阿里云存储权限问题！在这里插入图片描述设为公共问题解决，可点播加密视频！

原创 idea不显示target

原创 【idea的meavn踩坑】新建的application.properies不显示小绿叶

解决方法：创建一个Springboot的启动项，不然无法识别成Springboot项目样例代码：package com.atguigu.msmservice;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.boot.autoconfigure.jdbc.

原创 2020谷粒学院项目 【防坑知识点总结】

首先在线教育这个是个好项目，本文主要按照B站评论整理大家说的坑，有点乱见谅，做项目先了解坑能省很多时间，前任踩坑，后人乘凉。印象笔记有重点标注，更加方便保存印象笔记地址：https://app.yinxiang.com/fx/5dff0a54-4c01-4437-ad67-847688e87964edu_course表中的subject_parent_id字段需要改为允许为空用为知笔记打开，右上角导入笔记文件夹GitHub地址：后台–：https://github.com/leikui/k_onli

原创 idea提示【执行了全局异常处理】：Field ‘gmt_create‘ doesn‘t have a default value 或者courseId

遇到几次全局异常，添加不进去解决办法：@ApiModelProperty(value = "创建时间")@TableField(fill= FieldFill.INSERT)private Date gmtCreate;@ApiModelProperty(value = "更新时间")@TableField(fill= FieldFill.INSERT)private Date gmtModified;有句话很重要： @TableField(fill= FieldFill.INS

原创 Vue 中的 .sync 修饰符有什么用

Vue 本身是数据驱动渲染，所以数据（包括属性、计算属性等）变化可以触发界面数据呈现，但是界面的输入要反馈给组件，就需要用触发事件的方式来反馈。双向绑定是用于更新属性事件的语法糖，使用 :属性名.sync="..." 绑定。子组件中通过触发 update:属性名 事件来更新父组件中绑定的数据。比如：代码<my-comp :foo.sync="bar"></my-comp>会被扩展成<comp :foo="bar" @update:foo="val => bar =

原创 vue完整版和非完整版的区别和使用

文章目录两个版本对应的文件名template 和 render 怎么用如何用 codesandbox.io 写 Vue 代码官网最全：https://cn.vuejs.org/v2/guide/installation.html两个版本对应的文件名完整版：vue.js内含compiler，编译器可以把试图上的html转成DOM节点，转成html中的内容，所以体积大，不建议用，是从HTML获得视图。非完整版：vue.runtime.js非完整版中的html只是字符串，且不能从html中获取视图

原创 webpack工具知多少（下篇）

文章目录1.loader VS Plugin区别2.loader VS Plugin3.webpack引入scss(dart-sass)4.webpack引入less和stylus5.webpack引入图片6.懒加载webpack import()7.webpack一键部署到github1.loader VS Plugin区别2.loader VS Pluginloader是加载器，用于加载loder文件的；plugin是插件，用于拓展webpack功能的，loader比如js通过bable loa

原创 webpack工具知多少（上篇）

1.安装webpack终端查看版本：npm info webpack命令安装：npm i -g webpack@4 webpack-cli@3本地预览：webpack -dev -server2.webpack转译成jsnpm init -ynpm install webpack webpack-cli --save-dev新建src/index.js 放上console.log(‘hi’)./node_modules/.bin/webpack --versionnpx webpack

原创 MVC知多少

文章目录1.MVC 三个对象分别做什么，给出伪代码示例2.EventBus 有哪些 API，是做什么用的，给出伪代码示例3.表驱动编程是做什么的4.我是如何理解模块化的1.MVC 三个对象分别做什么，给出伪代码示例M:model（模型） 负责操作数据与服务器的交互，将请求到的数据传给controlV:View （视图） 负责所有UI界面，比如el,templete，renderC:controller（控制器）负责其他,比如初始化和事件,负责监听和处理View事件，并更新和调用

原创 48-【前后分离】跨域、CORS、JSONP

文章目录代码使用方法同源策略创建两个server修改hosts演示跨域被阻止 跨域AJAX实现跨域方法一：CORS方法二：JSONPJSONP通过referer来指定网站访问优化JSONP,用functionName封装JSONPJSONP是什么？查看github源码代码使用方法安装 node-devyarn global add node-dev下载代码https://github.com/FrankFang/kuayu-1.git进入 qq-com 运行 server.jsc

原创 47-【前后分离】异步与Promise

异步、同步同步：可以直接拿到结果 比如医院挂号异步：不能直接拿到结果 比如：网红餐厅 两种方式：自己问（轮询） 微信提醒（回调)其实AJAX的请求与响应就是异步，send()后无法打出console.log(request.response)js提供onreadystatechange()构造函数，只有当request.readystate值为4时，浏览器才回调这个函数，这个函数是js提供给浏览器用的，request.send()console.log(request.respon

原创 44-【前后分离】AJAX 的原理

AJAX技术 是 asyns异步 Javascript And XML作用：js发请求和收响应AJAX是浏览器提供的功能，浏览器可以发送请求和收响应，所以浏览器给window上加一个全局函数，XMLHttpRequest构造函数，实现js发请求和收响应window.XMLHttpRequestƒ XMLHttpRequest() { [native code] }window.Objectƒ Object() { [native code] }下载server.jsgithub里快速复

原创 41-【JS编程接口】DOM事件与事件委托

文章目录DOM事件模型W3C事件模型实现冒泡实现捕获实现先捕获、再冒泡简化代码 removeX和addXtarget与currentTarget区别一个特例 关于冒泡捕获顺序取消冒泡API不可取消冒泡的事件阻止滚动 手机和pc端自定义事件事件委托如何实现事件委托封装事件委托JS支持事件不？DOM事件模型分为冒泡和捕获，一个事件发生后，会在子元素和父元素之间传播（propagation），分为三个阶段：（1）捕获阶段，从window对象自上而下向目标节点传播（2）目标阶段：真正的目标节点正在处理事情的

原创 遇到chrome（google）浏览器自动degbug怎么解决？ 重置控制台

遇到好多次自动degbug 无法解决 按下面一键解决重置控制台f12->设置->setting->restore defalts and reload

原创 38-【JS编程接口】jQuery 中的设计模式

文章目录一、jQuery 如何获取元素二、jQuery是构造函数吗？三、jQuery元素实现find函数五、jQuery实现end函数六、jQuery实现each()函数七、jQuery实现parent函数八、jQuery实现children()函数八、jQuery命名九、jQuery 如何创建、删除、清空元素十、jQuery 如何修改元素的属性JQuery原型JQuery涉及的设计模式参考文章...

原创 37-【js编程接口】自己封装DOM库

这是自己封装的一个简单的DOM操作API，具有以下功能：调用时，请采用dom.option来进行操作，如：dom.create(‘div’)封装DOM:像笔记本这样把功能封装起来用户通过接口便可操作接口API：被封装的东西要暴露一些功能、属性、或者函数与外部，就是接口封装自己的库：呈现create,get接口，支持直接调用函数库：提供给别人的工具代码，里面主要是一些函数框架：一些特别...

原创 36- 【JS编程接口】DOM 编程的增删改查

文章目录js怎么操作网页？如何获取任意元素? Element 元素/标签Tagwindow.id/iddocument.getElementById('id')document.getElement**s**By**TagName**('标签名')[0]document.getElement**s**By**ClassName**('类名')[0]document.querySelector('#...

原创 32-【算法与数据结构】伪代码与流程图

一.对代码的热爱简洁之美，用简单的东西解决复杂的问题电影是一门艺术，编程也是一丝不苟，态度等价值观二.逻辑也叫算法采用三段论逻辑，比如所有的函数都是由Function构造的Function,Array，Object都是函数推论出Function、Array、Object都是由Function构造的3种结构化编程 三种语句解决逻辑顺序执行语句语句1语句2判断执行...

原创 31-【JS全解】JS总结

文章目录1.js公式2.根公理3.函数公理1.乱一2.乱二3.乱三总结构造函数对象1.js公式任意函数.__proto__===其构造函数.prototype比如：let a=[]a.__proto__===Array.prototypetruelet a={}a.__proto__===Object.prototypetrue2.根公理Object.prototy...

原创 30-【JS全解】JS运算符

1.number运算加减乘除：9/0 Infinity -5/0 -Infinity余数：-1%7 -1指数：**自增自减：表达式a++的值是加之前的值，++a是加之后的值**（a在前，值为前，a在后，值为后)**少用自增和自减，用a+=1,只在for循环里用a++let a=1++a2a++2a3求值运算符： + +(-8)//-8负数运算符：- ...

原创 29-【JS全解】JS 实战，会动的代码

效果预览源代码思路：1.先配置环境 parcel终端检测 yarn global add parcel2.通过js获取id的内容：document.querySelector(’#demo’)let demo = document.querySelector(’#demo’);console.log(demo.innerHTML)3.实现文字从1到2，用setTimeoutlet ...

原创 JS 函数的执行时机

JS函数的调用时机不同，得到的结果不同。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式；其意思就是尽快，而不是马上。1、解释为什么如下代码会打印 6 个 6let i = 0for(i = 0; i<6; i++){ setTimeout(()=>{ console.log(i) },0)}解释： 因为setTimeout是一个异步...

原创 28-【JS全解】JS 函数

文章目录四种方式定义js函数对象1.具名函数2.匿名函数具名和匿名函数结合,具名不可调用3.箭头函数4.构造函数函数自身fn和函数调用fn()函数的要素：1.调用时机得到6个6，执行完for循环后才开始打印出来的**let在for循环中，解决了setTimeout的尽快的问题**2.就近原则局部变量全局变量2种作用域规则：就近原则3.闭包4.形式参数5.返回值return6.调用栈递归函数 阶乘爆...

原创 27-【JS 全解】JS 数组

文章目录js的数组不是典型的数组数组的新建新建转化伪数组合并一个数组截取一个数组一部分数组元素删除查看数组元素查看数组所有元素查看数组单个元素查找某个元素是否在数组中条件查询数组符合的第一个元素增加数组元素修改数组中元素1.arr[100]=92.arr.splice(8,1,'xxx')3.反转顺序：arr.reverse()4.如何把一个字符串倒叙排列？5.定义顺序：arr.sort()数组变...

原创 26-【JS全解】JS 对象分类

计算正方形周长面积代码优化for循环里分号连接，letwidth:widthList[i]是分号，属性：属性值，等于号赋值内存浪费分析：for循环里i一直在变,在栈里改变对于空数组，从第0->11个，必须新生成一块内存，其中的两个函数每次需要新生成，造成let squareList=[];let widthList=[1,2,5,7,9];for(let i=0;i &lt...

原创 25-【JS全解】JS 对象

文章目录对象定义声明对象的两种语法常量字符串作属性名变量作属性名对象隐藏属性symbol也可作属性名如何删除对象的属性如何查看对象的属性查看自身属性查看自身属性+共有属性判断属性是自身还是共有原型查看1个属性如何修改或增加对象的属性修改自身属性修改原型的属性即共有属性修改对象原型（隐藏属性）'name' in obj和obj.hasOwnProperty('name') 的区别对象定义无序的数...

原创 24-【JS全解】JS 数据类型 对象下篇更

数字与字符串功能不同：数字能加减乘 字符串只能加字符串表示手机号码，数字不行，0开头没有意义存储方式不同js中，数字是转成2进制即64位浮点数形式存js中，字符串经过编码再转换成数字存储的数字以0/1存，所以转二进制10转2：31=？*2……2转10：=2的n次方16进制转2进制：1-9 A-F以8 4 2 1表示xxxx把二进制数对应四个四个一份,...

原创 23-【JS全解】JS语法

文章目录什么是表达式和语句变量提升标识符的规则注释if语句while for 语句短路逻辑for循环break continuelable语句：标签什么是表达式和语句表达式一般有值，语句一般改变环境如声明、赋值只有函数有返回值 返回值为他的值但是console.log(3)表达式的值为函数返回值underfined 打印出的东西为3表达式不需要分号结尾。一旦在表达式后面添加分号，则 ...

原创 20-【JS全解】JavaScript 的诞生

开始于网景公司1993年，最早流行接口浏览器NCSA Mosaic1994年，第一个版本的网页浏览器Mosaic Netscape0.9发布，四个月占据3/4的市场1995年，此时sun公司大力宣传Java,网景公司招募布兰登·艾克，目标是把Scheme语言嵌入到Netscape Navigator浏览器当中，1995年5月，布兰登·艾克花了十天时间把原型设计出来最初命名Mocha...