你貌似开启了广告屏蔽插件... 写博客不容易,希望能将广告过滤去掉,谢谢!

CSS3动画学习,用纯CSS来开发自己想要的动画效果

2019-04-04   朋也   css学习笔记   css  

上一篇 文章整理了11个开源的加载动画,这一篇来学习一下动画属性的意思跟用法

知其然知其所以然

动画属性

css3中动画属性有

  • animate-name 动画名
  • animate-duration 动画持续时间
  • animate-delay 延时执行动画时间
  • animate-direction 动画执行方向
  • animation-fill-mode 动画填充模式
  • animation-iteration-count 动画执行次数
  • animation-play-state 动画播放状态,指定动画播放还是暂停 [paused, running]
  • animation-timing-function 指定动画的播放时从一个状态过滤到另一个状态的速度曲线

简洁好看的纯css实现的加载动画,来自SpinKit

2019-04-04   朋也   css学习笔记   css  

声明:本篇博客源码来自 SpinKit

效果图

源码

<div class="spinner"></div>

create-react-app创建的项目部署在github pages上的方法,顺便绑定个人域名,增加https支持

2019-04-04   朋也   杂项   github-pages  

去年把自己折腾的一些项目整理了一下,然后用react开发了一个页面展示,一直都是打包好后,用nginx部署在自己的小水管服务器上的,今天弄了一下github pages, 还真让我折腾成功了,目前访问上没有变化,只是服务器从我个人服务器转到了github pages服务,折腾过程分享给大家

GraphQL入门,在Spring-Boot项目中使用GraphQL风格的接口

2019-04-03   朋也   spring-boot学习笔记   spring-boot graphql  

一直对graphql挺好奇的,都说这货是前端使用json来查询数据,后端只要把graphql风格的接口开发好了,schema定义的没问题,后面前端想怎么改数据结构就怎么改,完全不用后端操心了,今天折腾了一下,算是入门了,分享给大家

几个问题

graphql是什么框架?

它不是框架,而是一种风格,类似于 restful 风格的接口一样,所以它有各种语言版本的实现,本篇文章用的就是java语言实现的

graphql接口的数据哪来的?

数据还是通过数据库查询的,无论你用的是hibernate还是mybatis,跟graphql都没有关系,该怎么查数据还怎么查就行

为什么在调用graphql接口的时候,定义的schema里有其它对象,那其它对象里数据是怎么来的?

比如Book对象里有Author对象,显示书的作者信息,那么前端在调用时定义了Book对象里也要显示Author的信息,这个数据的嵌套加载是在后端通过代码实现的

首先查询出Book对象,然后根据Book对象里的authorId再查询一次Author数据,然后封装到Book对象里,这样前端拿到的json对象里就有两个对象的数据了

说白了,数据还是要通过orm框架查询的,只是将不同数据封装到一个对象里的这步被graphql-java这个框架做了

使用Github授权登录个人网站步骤整理(备忘)

2019-03-14   朋也   nodejs学习笔记   koa  

开发网站时懒得写登录注册那堆东西就会想到用Github授权登录,为啥会选择Github呢?因为它不需要审核呀,到Github上申请完就可以用了

如果用微博,QQ这种授权登录,首先也是要申请,但它们都要审核,如果接入的是网站,那网站还要备案才能通过,审核时间还很长

申请

地址:https://github.com/settings/developers

具体操作可以参见pybbs的文档:https://tomoya92.github.io/pybbs/#/zh-cn/oauth

使用koa2创建web项目

2019-03-11   朋也   nodejs学习笔记   koa  

Github上有一个express风格的koa脚手架,用着挺方便,一直以来使用koa开发web项目用的也都是那个脚手架,今天想自己从头搭一个web项目,就折腾了一下

脚手架地址:https://github.com/17koa/koa-generator

初始化

使用 npm init 初始化一个nodejs项目

mkdir koa-demo
cd koa-demo
npm init

一直回车即可,创建好之后目录里会有一个package.json文件

Java11新特性总结

2019-02-21   朋也   java学习笔记   java  

首先感谢尚硅谷录制的Java11视频教程,可以免费下载观看

之前在ytb上看了个java9的新特性,里面提到了两个主要更新,jshell和module

现在java11又发布很久了,再不学真要过时了

java8是个官方长期支持版本,java11也是,9,10只是过渡版本,所以完全可以路过9,10直接学习11,这一篇博客也是根据视频内容整理出来的,我觉得文字看的方便些,如果你觉得视频好看,也可以去尚硅谷官方下载视频查看

jshell

jshell在java9里被提出来的,就是可以直接在终端里写java程序了,回车就可以执行,不用先创建java文件,然后编译成class文件,最后再执行了,它把这些步骤都省了,打开终端,输入jshell,回车之后会进入jshell的环境,然后就可以直接写你要测试的代码了

类似于nodejs中直接在终端里输入 node 和python中直接在终端里输入 python 回车是一样的

如果不会用可以通过 /help 查看里面都有哪些命令

jshell默认会导入一些包,如下

Javascript异步执行结果获取的三种解决方案

2019-02-18   朋也   javascript学习笔记   javascript promise rxjs  

js里的异步有时候很方便,有时候却很让人恼火,下面来总结一下异步执行结果获取的方法

回调

这是最传统的方法了,也是最简单的,如下代码

function foo(cb) {
  setTimeout(function() {
    cb(1); // 通过参数把结果返回
  }, 2000);
}

foo(function(result) { // 调用foo方法的时候,通过回调把方法返回的数据取出来
  console.log(result);
})

Angular7创建项目、组件、服务以及服务、路由的使用和父子组件间传值总结

2019-02-18   朋也   javascript学习笔记   Angular  

三大前端项目就剩angular没学了,在网上找了几个教程,这里总结一下,方便以后用到时查阅

创建项目

首先安装cli工具

npm install -g @angular/cli

创建一个空项目, 有两处要选择的,一个是路由,我这里是要路由的,还有一个开发css的语言,我这里选择scss,就不截图了,选完后会自动通过yarn安装依赖,稍等一会就好了

ng new pybbs-front-angular

ES5里类的创建和继承

2019-01-28   朋也   javascript学习笔记   javascript  

JS里类的创建

JS里类就是方法,创建一个类其实就是定义一个方法,比如:

function Person() {
    this.name = 'tomcat';
    this.age = 20;
}

这就定义了一个Person类,要使用的话,需要new一个实例,如下

var p = new Person();
console.log(p.name);
console.log(p.age);