-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
71 lines (59 loc) · 35.3 KB
/
Copy pathindex.html
File metadata and controls
71 lines (59 loc) · 35.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="keywords" content="个人网站,个人博客,前端,HTML,CSS,JavaScript,Jquery,Ajax,ES6,Webpack,Vue,微信小程序,性能优化,打包部署,实习,面试"><meta name="description" content="一个热爱前端的在校大学生的个人博客学习生活分享网站"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta name="renderer" content="webkit|ie-stand|ie-comp"><meta name="mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="referrer" content="no-referrer-when-downgrade"><title>不见水星记</title><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/awesome/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/materialize/materialize.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/aos/aos.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/animate/animate.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/lightGallery/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/css/matery.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/css/my.css"><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/jquery/jquery-3.6.0.min.js"></script><style lang="css">#loading-container{position:fixed;top:0;left:0;min-height:100vh;width:100vw;z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff;text-align:center;-webkit-transition:opacity 1s ease;-moz-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease}.loading-image{width:120px;height:50px;transform:translate(-50%)}.loading-image div:nth-child(2){-webkit-animation:pacman-balls 1s linear 0s infinite;animation:pacman-balls 1s linear 0s infinite}.loading-image div:nth-child(3){-webkit-animation:pacman-balls 1s linear .33s infinite;animation:pacman-balls 1s linear .33s infinite}.loading-image div:nth-child(4){-webkit-animation:pacman-balls 1s linear .66s infinite;animation:pacman-balls 1s linear .66s infinite}.loading-image div:nth-child(5){-webkit-animation:pacman-balls 1s linear .99s infinite;animation:pacman-balls 1s linear .99s infinite}.loading-image div:first-of-type{width:0;height:0;border:25px solid #49b1f5;border-right-color:transparent;border-radius:25px;-webkit-animation:rotate_pacman_half_up .5s 0s infinite;animation:rotate_pacman_half_up .5s 0s infinite}.loading-image div:nth-child(2){width:0;height:0;border:25px solid #49b1f5;border-right-color:transparent;border-radius:25px;-webkit-animation:rotate_pacman_half_down .5s 0s infinite;animation:rotate_pacman_half_down .5s 0s infinite;margin-top:-50px}@-webkit-keyframes rotate_pacman_half_up{0%{transform:rotate(270deg)}50%{transform:rotate(1turn)}to{transform:rotate(270deg)}}@keyframes rotate_pacman_half_up{0%{transform:rotate(270deg)}50%{transform:rotate(1turn)}to{transform:rotate(270deg)}}@-webkit-keyframes rotate_pacman_half_down{0%{transform:rotate(90deg)}50%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes rotate_pacman_half_down{0%{transform:rotate(90deg)}50%{transform:rotate(0)}to{transform:rotate(90deg)}}@-webkit-keyframes pacman-balls{75%{opacity:.7}to{transform:translate(-100px,-6.25px)}}@keyframes pacman-balls{75%{opacity:.7}to{transform:translate(-100px,-6.25px)}}.loading-image div:nth-child(3),.loading-image div:nth-child(4),.loading-image div:nth-child(5),.loading-image div:nth-child(6){background-color:#49b1f5;width:15px;height:15px;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;transform:translateY(-6.25px);top:25px;left:100px}.loading-text{margin-bottom:20vh;text-align:center;color:#2c3e50;font-size:2rem;box-sizing:border-box;padding:0 10px;text-shadow:0 2px 10px rgba(0,0,0,.2)}@media only screen and (max-width:500px){.loading-text{font-size:1.5rem}}.fadeout{opacity:0}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0)}}</style><script>(function () {
const loaded = function(){
setTimeout(function(){
const loader = document.getElementById("loading-container");
loader.className="fadeout" ;//使用渐隐的方法淡出loading page
// document.getElementById("body-wrap").style.display="flex";
setTimeout(function(){
loader.style.display="none";
},1000);
},1000);//强制显示loading page 1s
};
loaded();
})()</script><meta name="generator" content="Hexo 6.1.0"><style>.github-emoji{position:relative;display:inline-block;width:1.2em;min-height:1.2em;overflow:hidden;vertical-align:top;color:transparent}.github-emoji>span{position:relative;z-index:10}.github-emoji .fancybox,.github-emoji img{margin:0!important;padding:0!important;border:none!important;outline:0!important;text-decoration:none!important;user-select:none!important;cursor:auto!important}.github-emoji img{height:1.2em!important;width:1.2em!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;user-select:none!important;cursor:auto!important}.github-emoji-fallback{color:inherit}.github-emoji-fallback img{opacity:0!important}</style><link rel="alternate" href="/atom.xml" title="不见水星记" type="application/atom+xml"></head><div id="loading-container"><p class="loading-text">玩命加载中 . . .</p><div class="loading-image"><div></div><div></div><div></div><div></div><div></div></div></div><body><header class="navbar-fixed"><nav id="headNav" class="bg-color nav-transparent"><div id="navContainer" class="nav-wrapper container"><div class="brand-logo"><a href="/" class="waves-effect waves-light"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/logo.gif" class="logo-img" alt="LOGO"> <span class="logo-span">不见水星记</span></a></div><a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a><ul class="right nav-menu"><li class="hide-on-med-and-down nav-item"><a href="/" class="waves-effect waves-light"><i class="fas fa-home" style="zoom:.6"></i> <span>主页</span></a></li><li class="hide-on-med-and-down nav-item"><a href="/tags" class="waves-effect waves-light"><i class="fas fa-tags" style="zoom:.6"></i> <span>标签</span></a></li><li class="hide-on-med-and-down nav-item"><a href="/categories" class="waves-effect waves-light"><i class="fas fa-bookmark" style="zoom:.6"></i> <span>分类</span></a></li><li class="hide-on-med-and-down nav-item"><a href="/archives" class="waves-effect waves-light"><i class="fas fa-archive" style="zoom:.6"></i> <span>时间轴</span></a></li><li class="hide-on-med-and-down nav-item"><a href="/about" class="waves-effect waves-light"><i class="fas fa-user-circle" style="zoom:.6"></i> <span>关于</span></a></li><li class="hide-on-med-and-down nav-item"><a href="/contact" class="waves-effect waves-light"><i class="fas fa-comments" style="zoom:.6"></i> <span>留言板</span></a></li><li class="hide-on-med-and-down nav-item"><a href="/friends" class="waves-effect waves-light"><i class="fas fa-address-book" style="zoom:.6"></i> <span>友情链接</span></a></li><li><a href="#searchModal" class="modal-trigger waves-effect waves-light"><i id="searchIcon" class="fas fa-search" title="搜索" style="zoom:.85"></i></a></li></ul><div id="mobile-nav" class="side-nav sidenav"><div class="mobile-head bg-color"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/logo.gif" class="logo-img circle responsive-img"><div class="logo-name">不见水星记</div><div class="logo-desc">一个热爱前端的在校大学生的个人博客学习生活分享网站</div></div><ul class="menu-list mobile-menu-list"><li class="m-nav-item"><a href="/" class="waves-effect waves-light"><i class="fa-fw fas fa-home"></i> 主页</a></li><li class="m-nav-item"><a href="/tags" class="waves-effect waves-light"><i class="fa-fw fas fa-tags"></i> 标签</a></li><li class="m-nav-item"><a href="/categories" class="waves-effect waves-light"><i class="fa-fw fas fa-bookmark"></i> 分类</a></li><li class="m-nav-item"><a href="/archives" class="waves-effect waves-light"><i class="fa-fw fas fa-archive"></i> 时间轴</a></li><li class="m-nav-item"><a href="/about" class="waves-effect waves-light"><i class="fa-fw fas fa-user-circle"></i> 关于</a></li><li class="m-nav-item"><a href="/contact" class="waves-effect waves-light"><i class="fa-fw fas fa-comments"></i> 留言板</a></li><li class="m-nav-item"><a href="/friends" class="waves-effect waves-light"><i class="fa-fw fas fa-address-book"></i> 友情链接</a></li><li><div class="divider"></div></li><li><a href="https://github.com/P1kaj1uu" class="waves-effect waves-light" target="_blank"><i class="fab fa-github-square fa-fw"></i> GitHub</a></li></ul></div></div><style>.nav-transparent .github-corner{display:none!important}.github-corner{position:absolute;z-index:10;top:0;right:0;border:0;transform:scale(1.1)}.github-corner svg{color:#0f9d58;fill:#fff;height:64px;width:64px}.github-corner:hover .octo-arm{animation:a .56s ease-in-out}.github-corner .octo-arm{animation:none}@keyframes a{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}</style><a href="https://github.com/P1kaj1uu" class="github-corner tooltipped hide-on-med-and-down" target="_blank" data-tooltip="GitHub" data-position="left" data-delay="50"><svg viewBox="0 0 250 250" aria-hidden="true"><path d="M0 0 115 115 130 115 142 142 250 250 250 0Z"></path><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8Z" fill="currentColor" class="octo-body"></path></svg></a></nav></header><style>.carousel-control{width:45px;height:45px;line-height:55px;border-radius:45px;background:0 0;cursor:pointer;z-index:100}#prev-cover{position:absolute;top:48%;left:8px}#next-cover{position:absolute;top:48%;right:8px}#prev-cover i{margin-right:3px}#next-cover i{margin-left:3px}.carousel-control:hover{background-color:rgba(0,0,0,.4)}.carousel-control i{color:#fff;font-size:2.4rem}</style><div class="carousel carousel-slider center index-cover" data-indicators="true" style="margin-top:-64px"><div class="carousel-item white-text bg-cover about-cover"><div class="container"><div class="row"><div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2"><div class="brand"><div class="title center-align">P1Kaj1uu</div><div class="description center-align"><span id="subtitle"></span><script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><script>var typed=new Typed("#subtitle",{strings:["慢慢来吧","Take it easy. You're great."],startDelay:300,typeSpeed:100,loop:!0,backSpeed:50,showCursor:!0})</script></div></div></div></div><script>var bannerUrl="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/banner/"+(new Date).getDay()+".jpg";$(".bg-cover").css("background-image","url("+bannerUrl+")")</script><div class="cover-btns"><a href="#indexCard" class="waves-effect waves-light btn"><i class="fa fa-angle-double-down"></i> 开始阅读</a><a href="https://github.com/P1kaj1uu" class="waves-effect waves-light btn" target="_blank"><i class="fab fa-github-alt"></i> Github</a></div><div class="cover-social-link"><a href="https://github.com/P1kaj1uu" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50"><i class="fab fa-github"></i></a><a href="mailto:[email protected]" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50"><i class="fas fa-envelope-open"></i></a><a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=891523233" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 891523233" data-position="top" data-delay="50"><i class="fab fa-qq"></i></a><a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50"><i class="fas fa-rss"></i></a></div></div></div></div><script>$(function () {
let coverSlider = $('.carousel');
//用户触摸轮播自动 restartPlay 是否生效
let initUserPressedOrDraggedActive = false
//用户触摸轮播自动 restartPlay
function initUserPressedOrDragged(instance) {
setInterval(() => {
if (instance.pressed || instance.dragged) {
// console.log('initUserPressedOrDragged: ',instance.pressed,instance.dragged)
restartPlay()
}
}, 1000)
}
coverSlider.carousel({
duration: Number('120'),
fullWidth: true,
indicators: 'true' === 'true',
onCycleTo() {
if (!initUserPressedOrDraggedActive) {
// console.log('initUserPressedOrDraggedActive')
initUserPressedOrDragged(this)
initUserPressedOrDraggedActive = true
}
},
})
let carouselIntervalId;
// Loop to call the next cover article picture.
let autoCarousel = function () {
carouselIntervalId = setInterval(function () {
coverSlider.carousel('next');
}, 5000);
};
autoCarousel();
function restartPlay() {
clearInterval(carouselIntervalId);
autoCarousel();
};
// prev and next cover post.
$('#prev-cover').click(function () {
coverSlider.carousel('prev');
restartPlay();
});
$('#next-cover').click(function () {
coverSlider.carousel('next');
restartPlay();
});
});</script><main class="content"><div id="indexCard" class="index-card"><div class="container"><div class="card"><div class="card-content"><div class="dream"><div class="row"><div class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text">听听歌吧</div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script><meting-js class="col l8 offset-l2 m10 offset-m1 s12" server="netease" type="playlist" id="7347146516" fixed="false" autoplay theme="#42b983" loop order="random" preload="auto" volume="0.7" list-folded="true" mutex="true" cover="https://rainymood.com/i/badge.jpg"></meting-js></div></div><div id="recommend-sections" class="recommend"></div></div></div></div></div><article id="articles" class="container articles"><div class="row article-row"><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/07/08/mian-shi-xin-de-san/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="面试心得三"> <span class="card-title">面试心得三</span></div></a><div class="card-content article-content"><div class="summary block-with-text">################################## ################################## ################################## ##############</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-07-08</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/%E5%AE%9E%E4%B9%A0/" class="post-category">实习</a></span></div></div><div class="card-action article-tags"><a href="/tags/%E9%9D%A2%E8%AF%95/"><span class="chip bg-color">面试</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/07/02/feng-zhuang-axios-he-day/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="封装Axios和Day"> <span class="card-title">封装Axios和Day</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一、封装axios utils文件夹下的 request.js // 基于axios封装的请求模块 import theAxios from 'axios' // 导入封装的token方法 import { getToken } from</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-07-02</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/%E9%A1%B9%E7%9B%AE%E6%80%BB%E7%BB%93/" class="post-category">项目总结</a></span></div></div><div class="card-action article-tags"><a href="/tags/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/"><span class="chip bg-color">项目笔记</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/07/02/eslint-shi-yong/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="ESLint使用"> <span class="card-title">ESLint使用</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一.ESLint介绍目标 了解ESLint的作用 能判断ESLint的错误 ESLint是什么ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范 例如: = 的前后必须有一个空格 例如: 函数名后面必须有空格 例如:</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-07-02</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/ESLint/" class="post-category">ESLint</a></span></div></div><div class="card-action article-tags"><a href="/tags/ESLint/"><span class="chip bg-color">ESLint</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/07/02/yi-bu-bian-cheng/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="异步编程"> <span class="card-title">异步编程</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一、什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？ 回调函数概念 回调函数是一个作为变量传递给另一个函数的函数，它在主体函数执行完之后再执行 回调函数特点 你定义的 你没有调用 但是最终执行了 回调函数可能的缺点</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-07-02</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/JavaScript/" class="post-category">JavaScript</a></span></div></div><div class="card-action article-tags"><a href="/tags/JS/"><span class="chip bg-color">JS</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/07/01/vue-zu-jian-tong-xin/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="Vue组件通信"> <span class="card-title">Vue组件通信</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一、Vue组件间的通信方式1.父->子组件通信 props props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。 props 可以显示定义一个或一个以上的数据</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-07-01</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/Vue/" class="post-category">Vue</a></span></div></div><div class="card-action article-tags"><a href="/tags/Vue/"><span class="chip bg-color">Vue</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/07/01/vue-sheng-ming-zhou-qi/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="Vue生命周期"> <span class="card-title">Vue生命周期</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一、Vue的生命周期 Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。 1.beforeCreate（创建前） 数</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-07-01</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/Vue/" class="post-category">Vue</a></span></div></div><div class="card-action article-tags"><a href="/tags/Vue/"><span class="chip bg-color">Vue</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/07/01/vue-lu-you/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="Vue路由"> <span class="card-title">Vue路由</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一、对前端路由的理解 路由：路由是url到函数的映射，可以根据不同的url地址展示不同的内容或页面。 服务器端路由（后端路由） 对于服务器来说，当接收到客户端发来的HTTP请求，会根据请求的URL，来找到相应的映射函数，然后执行该函数，</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-07-01</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/Vue/" class="post-category">Vue</a></span></div></div><div class="card-action article-tags"><a href="/tags/Vue/"><span class="chip bg-color">Vue</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/07/01/xu-ni-dom/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="虚拟DOM"> <span class="card-title">虚拟DOM</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一、对虚拟DOM的理解 虚拟DOM就是用来描述真实DOM的javaScript对象，可以将多次修改的DOM一次性渲染到页面上，减少页面的重排重绘，提高渲染性能 虚拟DOM就是用来描述真实DOM的javaScript对象，可以将多次修改的</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-07-01</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/Vue/" class="post-category">Vue</a></span></div></div><div class="card-action article-tags"><a href="/tags/Vue/"><span class="chip bg-color">Vue</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/06/30/mian-xiang-dui-xiang/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="面向对象"> <span class="card-title">面向对象</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一、理解面向对象 面向对象程序设计以对象为核心，该方法认为程序由一系列对象组成。类是对现实世界的抽象，包括表示静态属性的数据和对数据的操作，对象是类的实例化。面向对象有三个特点：封装性、继承性、多态性。 封装性 将描述每一个对象的属性以及其</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-06-30</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/JavaScript/" class="post-category">JavaScript</a></span></div></div><div class="card-action article-tags"><a href="/tags/JS/"><span class="chip bg-color">JS</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/06/30/yuan-xing/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="原型"> <span class="card-title">原型</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一、对原型、原型链的理解 特点：JavaScript 对象是通过引用来传递的，创建的每个新对象实体中并没有一份属于自己的原型副本。当修改原型时，与之相关的对象也会继承这一改变。 在JavaScript中是使用构造函数来初始化一个对象的</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-06-30</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/JavaScript/" class="post-category">JavaScript</a></span></div></div><div class="card-action article-tags"><a href="/tags/JS/"><span class="chip bg-color">JS</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/06/29/http-xie-yi/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="HTTP协议"> <span class="card-title">HTTP协议</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一、HTTP和HTTPS协议的概念及区别1.HTTP 概念 HTTP即超文本运输协议，是实现网络通信的一种规范，它定义了客户端和服务器之间交换报文的格式和方式，默认使用 80 端口。它使用 TCP 作为传输层协议，保证了数据传输的可靠性。</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-06-29</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/" class="post-category">计算机网络</a></span></div></div><div class="card-action article-tags"><a href="/tags/%E8%AE%A1%E7%BD%91/"><span class="chip bg-color">计网</span></a></div></div></div><div class="article col s12 m6 l4" data-aos="zoom-in"><div class="card"><a href="/2022/06/28/https-xie-yi/"><div class="card-image"><img src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/medias/14.jpg" class="responsive-img" alt="HTTPS协议"> <span class="card-title">HTTPS协议</span></div></a><div class="card-content article-content"><div class="summary block-with-text">一、HTTPS协议概念 超文本传输安全协议（Hypertext Transfer Protocol Secure，简称：HTTPS）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，利用SSL/TLS来加密数据包。</div><div class="publish-info"><span class="publish-date"><i class="far fa-clock fa-fw icon-date"></i> 2022-06-28</span><span class="publish-author"><i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/" class="post-category">计算机网络</a></span></div></div><div class="card-action article-tags"><a href="/tags/%E8%AE%A1%E7%BD%91/"><span class="chip bg-color">计网</span></a></div></div></div></div></article></main><div class="container paging"><div class="row"><div class="col s6 m4 l4"><a class="left btn-floating btn-large disabled"><i class="fas fa-angle-left"></i></a></div><div class="page-info col m4 l4 hide-on-small-only"><div class="center-align b-text-gray">1 / 4</div></div><div class="col s6 m4 l4"><a href="/page/2/" class="right btn-floating btn-large waves-effect waves-light bg-color"><i class="fas fa-angle-right"></i></a></div></div></div><footer class="page-footer bg-color"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/aplayer/APlayer.min.css"><style>.aplayer .aplayer-lrc p{display:none;font-size:12px;font-weight:700;line-height:16px!important}.aplayer .aplayer-lrc p.aplayer-lrc-current{display:none;font-size:15px;color:#42b983}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{left:-66px!important}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover{left:0!important}</style><div><div class="row"><meting-js class="col l8 offset-l2 m10 offset-m1 s12" server="netease" type="playlist" id="7347146516" fixed="true" autoplay theme="#42b983" loop order="random" preload="auto" volume="0.7" list-folded="true"></meting-js></div></div><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/aplayer/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/aplayer/Meting.min.js"></script><div class="container row center-align" style="margin-bottom:0!important"><div class="col s12 m8 l8 copy-right">Copyright © <span id="year">2022</span> <a href="/about" target="_blank">P1Kaj1uu</a> | Powered by <a href="http://igdragon.top/" target="_blank">P1Kaj1uu</a> | Source <a href="https://github.com/P1kaj1uu?tab=repositories" target="_blank">P1Kaj1uu</a><br> <i class="fas fa-chart-area"></i> 站点总字数: <span class="white-color">46.7k</span> <span id="busuanzi_container_site_pv"> | <i class="far fa-eye"></i> 总访问量: <span id="busuanzi_value_site_pv" class="white-color"></span></span> <span id="busuanzi_container_site_uv"> | <i class="fas fa-users"></i> 总访问人数: <span id="busuanzi_value_site_uv" class="white-color"></span></span><br><br></div><div class="col s12 m4 l4 social-link social-statis"><a href="https://github.com/P1kaj1uu" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50"><i class="fab fa-github"></i></a><a href="mailto:[email protected]" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50"><i class="fas fa-envelope-open"></i></a><a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=891523233" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 891523233" data-position="top" data-delay="50"><i class="fab fa-qq"></i></a><a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50"><i class="fas fa-rss"></i></a></div></div></footer><div class="progress-bar"></div><div id="searchModal" class="modal"><div class="modal-content"><div class="search-header"><span class="title"><i class="fas fa-search"></i> 搜索</span> <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字" class="search-input"></div><div id="searchResult"></div></div></div><script>$(function(){!function(t,a,s){"use strict";$.ajax({url:t,dataType:"xml",success:function(t){var e=$("entry",t).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get(),r=document.getElementById(a),n=document.getElementById(s);r.addEventListener("input",function(){var f='<ul class="search-result-list">',m=this.value.trim().toLowerCase().split(/[\s\-]+/);n.innerHTML="",this.value.trim().length<=0||(e.forEach(function(t){var r=!0,n=t.title.trim().toLowerCase(),a=t.content.trim().replace(/<[^>]+>/g,"").toLowerCase(),e=t.url;e=0===e.indexOf("/")?t.url:"/"+e;var s=-1,i=-1,l=-1;if(""!==n&&""!==a&&m.forEach(function(t,e){s=n.indexOf(t),i=a.indexOf(t),s<0&&i<0?r=!1:(i<0&&(i=0),0===e&&(l=i))}),r){f+="<li><a href='"+e+"' class='search-result-title'>"+n+"</a>";var c=t.content.trim().replace(/<[^>]+>/g,"");if(0<=l){var u=l-20,o=l+80;u<0&&(u=0),0===u&&(o=100),o>c.length&&(o=c.length);var h=c.substr(u,o);m.forEach(function(t){var e=new RegExp(t,"gi");h=h.replace(e,'<em class="search-keyword">'+t+"</em>")}),f+='<p class="search-result">'+h+"...</p>"}f+="</li>"}}),f+="</ul>",n.innerHTML=f)})}})}("/search.xml","searchInput","searchResult")})</script><div id="backTop" class="top-scroll"><a class="btn-floating btn-large waves-effect waves-light" href="#!"><i class="fas fa-arrow-up"></i></a></div><script src="/js/click_show_text.js"></script><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/materialize/materialize.min.js"></script><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/masonry/masonry.pkgd.min.js"></script><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/aos/aos.js"></script><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/scrollprogress/scrollProgress.min.js"></script><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/lightGallery/js/lightgallery-all.min.js"></script><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/js/matery.js"></script><script>var windowWidth=$(window).width();768<windowWidth&&document.write('<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/others/sakura.js"><\/script>')</script><script src="https://ssl.captcha.qq.com/TCaptcha.js"></script><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/others/TencentCaptcha.js"></script><button id="TencentCaptcha" data-appid="xxxxxxxxxx" data-cbfn="callback" type="button" hidden></button><script>!function(){var t=document.createElement("script"),e=window.location.protocol.split(":")[0];t.src="https"===e?"https://zz.bdstatic.com/linksubmit/push.js":"http://push.zhanzhang.baidu.com/push.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}()</script><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/others/clicklove.js" async></script><script async src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/others/busuanzi.pure.mini.js"></script><script src="https://cdn.jsdelivr.net/gh/P1Kaj1uu/P1Kaj1uu.github.io/libs/instantpage/instantpage.js" type="module"></script><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({pluginRootPath:"live2dw/",pluginJsPath:"lib/",pluginModelPath:"assets/",tagMode:!1,log:!1,model:{jsonPath:"/live2dw/assets/z16.model.json"},display:{position:"left",width:130,height:280},mobile:{show:!0,react:{opacity:.7}}})</script></body></html>