将Hexo博客部署到阿里云服务器
将Hexo博客部署到阿里云服务器 前言疫情期间,阿里云推出了学生“在家实践”计划,可以免费领取6个月的服务器,本着学习(白嫖)的目的,咱也得领啊,第一天没有抢到,主要不知道要先答题,答案网上都有,当然,大佬忽略我这句话,第二天答题过后很容易就抢到了,配置也还可以,链接在这( https://developer.aliyun.com/adc/student/ ),于是乎搭建了这个博客,期间也踩了不少坑,希望给有相关想法的同学提供一些帮助。 一.原理搭建之前咱先得明白怎么回事才行啊,这里我们得先了解以下我们的博客采用的框架—Hexo,这是一个快速、简洁且高效的博客框架,关于这个框架的使用我会单独写一篇,这里主要讲部署相关的东西,敬请关注网站后续。 Hexo框架的大致架构为我们在自己的计算机上写好文章将它保存在source文件夹中,然后hexo会将我们的写好的文章转化为静态的HTML文件,之后push到git仓库,服务器中配置好git-hooks,就可以自动将我们仓库中的东西更新到网站的根目录,于是乎就能看到整个页面了(需要一点git相关的知识,最好能够学习一下,看不懂也没关系 照着敲就行) ...
JavaScript高级程序设计笔记(更新中...)
十一章——期约与异步函数一、异步编程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核心语法一(更新中...)
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开发(更新中...)
01-邂逅React开发前言特别喜欢coderwhy老师的讲课风格,每接触一个新技术第一节课教学的时候都喜欢用”邂逅“这个词,一开始看它Vue视频的时候还觉得没什么,但是在看它的React视频的时候,发现也是用的邂逅,感慨良多,希望自己能够保持学习的热情,爱上前端工程师这份工作。 React是什么 官网描述:用于构建用户界面的JavaScript库 原生HTML、CSS、JS存在的问题 操作DOM兼容性问题 过多兼容性代码的冗余问题 代码组织和规范的问题 所以在很长时间以来用的都是jQuery这个库 直到angular、react、vue这些框架的出现 这里拓展一下这些框架和jQuery库的区别 个人感觉之所以将angular、react、vue叫做框架,将jQuery称为库,一定程度上两者还是有较大的不同,库更倾向于是一种扩展,实在原有的基础上的一种扩展,所以数据和视图是没有分离的,杂糅在一起的 另外数据和视图的杂糅就容易造成代码后期维护不便利,逐渐的就慢慢衍生出将数据与视图相分离的方式,但是相较原生而言,已经是有了较大的不同,所以把它们叫做框架,让数据去驱动视图的变化 R ...
ThinkPHP+Vue的单页面的部署经历
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源码的话,还是比较痛苦的,这里采用的是另一种方式,先对后面出现的相关知识点进行整理,最后再来看源代码部分,这样会好很多,视频也是按照这样的流程走的,还是比较易于理解的。(Vue版本:2.6.12) 第一部分 如何将模板与数据相结合首先我们回顾一下Vue的使用方式 123456789101112131415161718<!-- 1. 写模板 --><div id="root"> <p>`{{name}}`</p> &l ...
Vue.js学习汇总(一)
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学习汇总(三)
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学习汇总(二)
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 使开发人员对整个过程可控。 •实现步骤 创建Ajax对象var xhr = new XMLHttpRequest(); 告诉Ajax请求地址及请求方式xhr.open('get','http://www.example.com'); 发送请求xhr.send(); 获取服务器端给与客户端的响应数据xhr.onload=function(){ console.log(xhr.responseText); ...