<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[小峰同学的前端小屋]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/abc465200</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; abc465200]]></copyright><item><title><![CDATA[常见的css 实现水平垂直居中方法有哪些？（附10种）]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/116096530</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/116096530</guid><author>abc465200</author><pubDate>Sat, 24 Apr 2021 17:16:09 +0800</pubDate><description><![CDATA[文章目录十种方法实现水平垂直居中需要居中元素固定宽高的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]]></description><category></category></item><item><title><![CDATA[Vue快速入门 巩固篇]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/115245995</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/115245995</guid><author>abc465200</author><pubDate>Fri, 26 Mar 2021 15:14:06 +0800</pubDate><description><![CDATA[文章目录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.$]]></description><category></category></item><item><title><![CDATA[nginx配置ssl证书实现https访问]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/112241690</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/112241690</guid><author>abc465200</author><pubDate>Tue, 05 Jan 2021 16:20:54 +0800</pubDate><description><![CDATA[需求：网站之前是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
思路：阿里免费买一个]]></description><category></category></item><item><title><![CDATA[【工具】window自动上传图片到图床?截图Snipate+图床PicGo+阿里云存储+Markdown工具,解决复制文章中图片路径问题]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/111806242</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/111806242</guid><author>abc465200</author><pubDate>Sun, 27 Dec 2020 15:13:12 +0800</pubDate><description><![CDATA[文章目录1.背景 图片需要一个个手动导入图床2.必备：截图Snipate+图床PicGo+阿里云存储+Markdown工具
1.背景 图片需要一个个手动导入图床
作为window电脑，平时写博客本地用typora，写好复制到比如csdn,掘金，印象笔记等其他地方辛辛苦苦写的图文并茂内容发送给其他小伙伴时，对方却完全看不到那些图片。然后得找个地方把图片上传上去后，一张张替换成网络图片，实在麻烦。究其原因，还是markdown保存的只是本地路径，现在终于实现截图后，粘贴到typora中，自动转成链接，无论复制到]]></description><category></category></item><item><title><![CDATA[【nuxt.js】pc端链接转成二维码 可以手机端长按或者扫扫码识别]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/109930347</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/109930347</guid><author>abc465200</author><pubDate>Sun, 22 Nov 2020 12:13:52 +0800</pubDate><description><![CDATA[需求：
vue\nuxt.js项目 中pc端链接转成二维码 可以手机端长按或者扫扫码识别,最终效果：
方法一：单纯生成带数据的二维码
1）：终端安装@xkeshi/vue-qrcode.js包
npm install --save @xkeshi/vue-qrcode //安装到生产环境

&lt;template&gt;
  &lt;div class="article-id"&gt;
    &lt;div class="qrcodeBox"&gt;
      &lt;qrcode  :value="]]></description><category></category></item><item><title><![CDATA[【点击自动复制 弹出链接】vue +element-ui 得到下一页路径]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/109821955</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/109821955</guid><author>abc465200</author><pubDate>Thu, 19 Nov 2020 19:18:21 +0800</pubDate><description><![CDATA[需求：为实现文章邀请分销，在文章展示页，点击复制，在本页路径上拼接下一页文章详情页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.]]></description><category></category></item><item><title><![CDATA[Nuxt.js   Vue-admin-template后台管理部署和启动前报错的坑]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/109311949</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/109311949</guid><author>abc465200</author><pubDate>Tue, 27 Oct 2020 15:30:35 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[62-【框架】虚拟DOM和DOM diff]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/108649926</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/108649926</guid><author>abc465200</author><pubDate>Thu, 17 Sep 2020 19:39:54 +0800</pubDate><description><![CDATA[谣言：DOM操作慢

相对于原生js慢

但是任何基于虚拟DOM的库都不可能在操作DOM时比DOM快



DOM操作并不慢，相当于js执行时间，但是浏览器渲染页面时，并无法进行交互，而是页面渲染时长较长

当节点较小时，默认是Reac快，但是太大还是DOM更稳定，vue是比较稳定都较快，vue省心



1.虚拟 DOM 是什么（见4.）

一个可以代表DOM树的对象，通常含有标签名、标签上属性，事件监听和子元素们，以及他的属性



2.虚拟 DOM 的优点


	减少DOM操作次数和范围
	
次数..]]></description><category></category></item><item><title><![CDATA[SpringCloud使用 Nacos做注册中心 客户端启动报错java.lang.IllegalArgumentException: no server available的解决方案]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/108315098</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/108315098</guid><author>abc465200</author><pubDate>Mon, 31 Aug 2020 09:30:19 +0800</pubDate><description><![CDATA[困扰我很多天的问题了，报错
no server available
Error watching Nacos Service change
java.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]]></description><category></category></item><item><title><![CDATA[pm2部署2个vue项目时，npm run dev有效,pm2 start npm -- run dev无效解决办法]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/107982080</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/107982080</guid><author>abc465200</author><pubDate>Thu, 13 Aug 2020 16:05:13 +0800</pubDate><description><![CDATA[pm进程查看：ps -ux | grep pm2
按照端口杀死： kill -9 pid   （pid是显示的程序端口号）
pm2 start npm – run dev



]]></description><category></category></item><item><title><![CDATA[【阿里云视频点播加密视频播放报错】：网络错误加载数据失败(fragLoadError)或者403]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/107633956</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/107633956</guid><author>abc465200</author><pubDate>Tue, 28 Jul 2020 13:23:17 +0800</pubDate><description><![CDATA[1、首先视频id正确
2、视频播放凭证生成正确(未失效)
3、但是网页点播出现错误

解决方案：
阿里云存储权限问题！
在这里插入图片描述
设为公共问题解决，可点播加密视频！

]]></description><category></category></item><item><title><![CDATA[idea不显示target]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/107580552</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/107580552</guid><author>abc465200</author><pubDate>Sat, 25 Jul 2020 16:23:19 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[【idea的meavn踩坑】新建的application.properies不显示小绿叶]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/107578002</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/107578002</guid><author>abc465200</author><pubDate>Sat, 25 Jul 2020 14:17:07 +0800</pubDate><description><![CDATA[解决方法：
创建一个Springboot的启动项，不然无法识别成Springboot项目

样例代码：
package com.atguigu.msmservice;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.]]></description><category></category></item><item><title><![CDATA[2020谷粒学院项目 【防坑知识点总结】]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/107493629</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/107493629</guid><author>abc465200</author><pubDate>Tue, 21 Jul 2020 17:23:21 +0800</pubDate><description><![CDATA[首先在线教育这个是个好项目，本文主要按照B站评论整理大家说的坑，有点乱见谅，做项目先了解坑能省很多时间，前任踩坑，后人乘凉。印象笔记有重点标注，更加方便保存
印象笔记地址：https://app.yinxiang.com/fx/5dff0a54-4c01-4437-ad67-847688e87964
edu_course表中的subject_parent_id字段需要改为允许为空
用为知笔记打开，右上角导入笔记文件夹
GitHub地址：后台–：https://github.com/leikui/k_onli]]></description><category></category></item><item><title><![CDATA[idea提示【执行了全局异常处理】：Field ‘gmt_create‘ doesn‘t have a default value  或者courseId]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/107413889</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/107413889</guid><author>abc465200</author><pubDate>Fri, 17 Jul 2020 17:43:14 +0800</pubDate><description><![CDATA[遇到几次全局异常，添加不进去

解决办法：
@ApiModelProperty(value = "创建时间")
@TableField(fill= FieldFill.INSERT)
private Date gmtCreate;

@ApiModelProperty(value = "更新时间")
@TableField(fill= FieldFill.INSERT)
private Date gmtModified;

有句话很重要：    @TableField(fill= FieldFill.INS]]></description><category></category></item><item><title><![CDATA[Vue 中的 .sync 修饰符有什么用]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/106939664</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/106939664</guid><author>abc465200</author><pubDate>Wed, 24 Jun 2020 11:03:14 +0800</pubDate><description><![CDATA[Vue 本身是数据驱动渲染，所以数据（包括属性、计算属性等）变化可以触发界面数据呈现，但是界面的输入要反馈给组件，就需要用触发事件的方式来反馈。双向绑定是用于更新属性事件的语法糖，使用 :属性名.sync="..." 绑定。子组件中通过触发 update:属性名 事件来更新父组件中绑定的数据。
比如：
代码&lt;my-comp :foo.sync="bar"&gt;&lt;/my-comp&gt;
会被扩展成&lt;comp :foo="bar" @update:foo="val =&gt; bar = ]]></description><category></category></item><item><title><![CDATA[vue完整版和非完整版的区别和使用]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/106848805</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/106848805</guid><author>abc465200</author><pubDate>Fri, 19 Jun 2020 08:29:00 +0800</pubDate><description><![CDATA[文章目录两个版本对应的文件名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中获取视图]]></description><category></category></item><item><title><![CDATA[webpack工具知多少（下篇）]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/106750985</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/106750985</guid><author>abc465200</author><pubDate>Sun, 14 Jun 2020 20:18:25 +0800</pubDate><description><![CDATA[文章目录1.loader VS Plugin区别2.loader VS Plugin3.webpack引入scss(dart-sass)4.webpack引入less和stylus5.webpack引入图片6.懒加载webpack import()7.webpack一键部署到github
1.loader VS Plugin区别

2.loader VS Plugin
loader是加载器，用于加载loder文件的；plugin是插件，用于拓展webpack功能的，loader比如js通过bable loa]]></description><category></category></item><item><title><![CDATA[webpack工具知多少（上篇）]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/106750848</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/106750848</guid><author>abc465200</author><pubDate>Sun, 14 Jun 2020 20:11:41 +0800</pubDate><description><![CDATA[1.安装webpack
终端查看版本：npm info webpack
命令安装：npm i -g webpack@4 webpack-cli@3
本地预览：webpack -dev -server
2.webpack转译成js
npm init -y
npm install webpack webpack-cli --save-dev

新建src/index.js 放上console.log(‘hi’)
./node_modules/.bin/webpack --version
npx webpack ]]></description><category></category></item><item><title><![CDATA[MVC知多少]]></title><link>https://blog.youkuaiyun.com/abc465200/article/details/106731890</link><guid>https://blog.youkuaiyun.com/abc465200/article/details/106731890</guid><author>abc465200</author><pubDate>Sat, 13 Jun 2020 14:29:10 +0800</pubDate><description><![CDATA[文章目录1.MVC 三个对象分别做什么，给出伪代码示例2.EventBus 有哪些 API，是做什么用的，给出伪代码示例3.表驱动编程是做什么的4.我是如何理解模块化的
1.MVC 三个对象分别做什么，给出伪代码示例

M:model（模型） 负责操作数据与服务器的交互，将请求到的数据传给control
V:View （视图）     负责所有UI界面，比如el,templete，render
C:controller（控制器）负责其他,比如初始化和事件,负责监听和处理View事件，并更新和调用      ]]></description><category></category></item></channel></rss>