beanBag

将Hexo博客部署到阿里云服务器 前言疫情期间，阿里云推出了学生“在家实践”计划，可以免费领取6个月的服务器，本着学习(白嫖)的目的，咱也得领啊，第一天没有抢到，主要不知道要先答题，答案网上都有，当然，大佬忽略我这句话，第二天答题过后很容易就抢到了，配置也还可以，链接在这( https://developer.aliyun.com/adc/student/ ),于是乎搭建了这个博客，期间也踩了不少坑，希望给有相关想法的同学提供一些帮助。 一.原理搭建之前咱先得明白怎么回事才行啊，这里我们得先了解以下我们的博客采用的框架—Hexo，这是一个快速、简洁且高效的博客框架，关于这个框架的使用我会单独写一篇，这里主要讲部署相关的东西，敬请关注网站后续。 Hexo框架的大致架构为我们在自己的计算机上写好文章将它保存在source文件夹中，然后hexo会将我们的写好的文章转化为静态的HTML文件，之后push到git仓库，服务器中配置好git-hooks，就可以自动将我们仓库中的东西更新到网站的根目录，于是乎就能看到整个页面了(需要一点git相关的知识，最好能够学习一下，看不懂也没关系 照着敲就行) ...

十一章——期约与异步函数一、异步编程1. 同步与异步 同步行为对应内存中顺序执行的处理器指令 异步行为类似于系统中断，即当前进程外部的实体可以触发代码执行 2. 以往的异步编程模式 早期的JavaScript中，只支持定义回调函数来表明异步操作完成 业务简单 不需要使用到异步操作的返回值 123456function double(value){ setTimeout(() => { console.log(value * 2); }, 1000); } double(3) 需要用到异步操作的返回值如何处理？ 传入一个回调函数 12345678function double(value,callback){ setTimeout(()=>{ callback(value * 2); },1000)}double(3, x => { console.log(`I was given: $&# ...

02-JSX核心语法一前言本节课以两个案例展开，主要还是对React有一个具体的认识，具体讲解JSX的一些知识点，并且在讲这些知识点的同时有对ES6中类的定义、类的继承以及高阶函数的使用做了补充。文章的相关代码放在GitHub仓库，有需要的小伙伴看这里( https://github.com/hqchqc/FrontendLearningIntegration/tree/master/React%E5%AD%A6%E4%B9%A0 )，多多 star 哦！ 另外博客也会同步更新的，感兴趣的小伙伴可以多多留言哦! ( https://www.bagbean.cn/ ) 语法补充类的定义 在ES5中定义类 ES5中我们是使用函数的方式来定义一个类的，并且把类的方法定义在原型上，这样就不会每次创建一个对象都要重新生成类中的方法，占用空间 但其实读了小黄书(你不知道的JacaScript)之后，会认识到JS中本就没有类的概念，因为本质上来说，父类与子类的联系在面向对象中是有一种复制的关系，但是JS中并不是采用复制的方式，而是采用了原型将父类和子类联系起来，并没有复制，所以我们把JavaScr ...

01-邂逅React开发前言特别喜欢coderwhy老师的讲课风格，每接触一个新技术第一节课教学的时候都喜欢用”邂逅“这个词，一开始看它Vue视频的时候还觉得没什么，但是在看它的React视频的时候，发现也是用的邂逅，感慨良多，希望自己能够保持学习的热情，爱上前端工程师这份工作。 React是什么 官网描述：用于构建用户界面的JavaScript库 原生HTML、CSS、JS存在的问题 操作DOM兼容性问题 过多兼容性代码的冗余问题 代码组织和规范的问题 所以在很长时间以来用的都是jQuery这个库 直到angular、react、vue这些框架的出现 这里拓展一下这些框架和jQuery库的区别 个人感觉之所以将angular、react、vue叫做框架，将jQuery称为库，一定程度上两者还是有较大的不同，库更倾向于是一种扩展，实在原有的基础上的一种扩展，所以数据和视图是没有分离的，杂糅在一起的 另外数据和视图的杂糅就容易造成代码后期维护不便利，逐渐的就慢慢衍生出将数据与视图相分离的方式，但是相较原生而言，已经是有了较大的不同，所以把它们叫做框架，让数据去驱动视图的变化 R ...

ThinkPHP+Vue的单页面的部署经历背景上个学期在学校有个类似于课程设计吧，老师让我们做一个网站嘛，然后当时那个项目就用原生的php实现了一下，然后就没管它了，后来上个星期吧，老师找到我，希望我把那个项目完善一下，恰好当时在做一个Vue的项目练手，然后想着能不能用Vue把项目重构一下，这个项目期间做起来还好，就是部署的时候，那叫一个懵逼啊，记一下这次的经历吧! 前言这个项目分析了一下，好像不需要后台，是个单页面应用，THinkPHP框架提供接口，前端用Vue实现，怎么简单怎么来吧，再网上找了一圈的Think PHP+vue如何部署，无果，遂自己钻研，期间无数碰壁，留下了没有技术的泪水，因为本身是没有了解过ThinkPHP这个框架的，再加上用的版本是5.0的，坑有点多，大家小心，实在解决不了，可以给我留言，大家一起解决 部署流程 这里我为了省时省力(鬼知道我反反复复安装了多少遍)装了宝塔面板，安装命令可以见官网，我也贴一下吧 Centos：yum install -y wget && wget -O install.sh http://download.bt.cn/ ...

初探Vue源码(一)前言        这段时间因为忙着秋招，好像很久都没有更新过了，现在秋招也没个着落，花了几天的时间看了一下Vue的源码，当然是跟着视频教程走的，但是视频有几节没有，所以还是挺遗憾的，知识点还是比较多的，这里做个总结，希望能够帮助到后面的面试。        一上手就直接翻Vue源码的话，还是比较痛苦的，这里采用的是另一种方式，先对后面出现的相关知识点进行整理，最后再来看源代码部分，这样会好很多，视频也是按照这样的流程走的，还是比较易于理解的。(Vue版本：2.6.12) 第一部分 如何将模板与数据相结合首先我们回顾一下Vue的使用方式 123456789101112131415161718<!-- 1. 写模板 --><div id="root"> <p>`{{name}}`</p> &l ...

Vue.js学习第一天初体验 学完了Ajax，再来学习一下前端的三大框架吧，第一个就是Vue.js 💪 1. 认识 Vue.js Vue是一个渐进式的框架，什么是渐进式呢？简单来说，就是它可以做到一点一点把原本使用的技术替换成Vue的，两种技术可以共存，例如从jQuery慢慢地过渡到Vue.js。它意味着你可以将Vue作为你应用地一部分嵌入其中，带来更丰富地交互体验，或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统，比如Core+Vue-router+Vuex也可以满足你的各种需求。Vue有很多特点和Web开发中常见的高级功能： 解耦试图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM 2. 安装 Vue.js 安装这里就不赘述了，详情可以见官网 3. 一些注意事项 老师说接下来会使用ES6的语法，我之前接触的很少，所以以后每天我都会把今天用到的ES6记录下来 var => let(变量) / const(常量) 然后是最简单的一个Vue大概的样子 12345678910111213141516171819202122232425 ...

Vue.js学习第十五天Vuex中各个属性的使用 今天的学习围绕一张图片展开(图片引用自Vuex官方文档)，当我们的项目比较大时，Vuex为我们在可以在组件外部管理状态提供了条件一、 State      【解释】状态的意思，顾名思义，这里就是存放状态的地方，简单来说，就是存放你需要共享的某些变量的地方      【使用】当我们在state中设置了相应的变量后，我们就可以来引用它们了，之前说过，当我们安装了Vuex后，会在全局生成一个store对象，我们可以使用，我们就可以使用这个store对象来访问我们的变量，如<h2>{{$store.state.counter}}</h2>,couter我已经在state中添加了它的值      【相关知识】 State单一状态树(Single Source of Truth)又叫做单一数据源，也就是说Vu ...

Vue.js学习第八天webpack中的loader、配置vue及插件使用 - webpack中的loader 昨天我们学习了webpack中的css-loader和style-loader，今天我们来学习剩下常用的几个loader 1. less-loader顾名思义，这个loader模块是用来加载less文件的，安装命令为npm install --save-dev less-loader less 前一个less-loader是用来加载less文件，后一个less是为加载less提供的支持文件，用来转化less成css，安装完成后进行相应的配置即可，配置在webpack中的loader里都有，不过这里我还是贴一下好了 12345678910{ test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // tr ...

Ajax学习第一天•传统网站中存在的问题 网速慢导致的页面加载时间过长 表单重填问题 页面的跳转问题(有时候页面中只需要某个特定部分实现改变而使整个页面发生跳转)以上的问题导致用户体验不佳，故提出Ajax解决方案，它是浏览器提供的一套方法，实现页面无刷新更新数据，它是运行在客户端上的。 •应用场景 页面上拉加载更多数据 列表分页 表单验证 搜索框提示文字下拉列表 •运行环境 Ajax技术需要运行在网络环境中才能生效(以域名的方式进行访问) •运行原理 在传统的浏览器端与服务器端直接进行交互之间增加Ajax 使开发人员对整个过程可控。 •实现步骤 创建Ajax对象var xhr = new XMLHttpRequest(); 告诉Ajax请求地址及请求方式xhr.open('get','http://www.example.com'); 发送请求xhr.send(); 获取服务器端给与客户端的响应数据xhr.onload=function(){ console.log(xhr.responseText);
...