更新
This commit is contained in:
dengtongyu committed
1 parent
5cd551a08e
commit
40cde540d6
33 files changed
+335
-107
No files matched your search
@@ -1,9 +1,12 @@
|
||||
---
|
||||
title: Angular CLI 之初体验
|
||||
tags: []
|
||||
id: '143'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- Angular
|
||||
- CLI
|
||||
- angular/cli
|
||||
date: 2017-09-20 17:13:04
|
||||
---
|
||||
|
||||
@@ -14,38 +17,70 @@ date: 2017-09-20 17:13:04
|
||||
1. 安装最新版本的node，angular官方要求**node `6.9.x` 和 npm `3.x.x` 以上的版本。** 具体安装请参考 [node官网](http://nodejs.cn/) , 安装过程不再赘述。
|
||||
2. 全局安装 [**Angular CLI**](https://cli.angular.io/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
npm install -g @angular/cli
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 创建新项目
|
||||
|
||||
1. 打开终端窗口 运行下列命令来生成一个新项目以及应用的骨架代码：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
ng new myapp
|
||||
```
|
||||
|
||||
|
||||
|
||||
2. 进入项目目录，并启动服务器。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
cd myapp
|
||||
ng serve --open
|
||||
```
|
||||
|
||||
|
||||
|
||||
ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。 使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 设置代理
|
||||
|
||||
1. 我们开发的时候，有时需要对接口做代理，**[Angular CLI](https://cli.angular.io/)**同样给我们提供了设置代理的方式
|
||||
|
||||
|
||||
|
||||
首先在项目的根目录下创建一个**proxy.conf.json** 文件
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
{
|
||||
"/data": {
|
||||
"target": "http://xxx.xxx.xxx.xxx:8080",
|
||||
@@ -55,60 +90,103 @@ date: 2017-09-20 17:13:04
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
"/data"是接口所包含的字符，target则是代理的ip和端口号
|
||||
|
||||
|
||||
|
||||
2. 然后在项目的根目录打开终端，运行下面的指令：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
ng serve --proxy-config proxy.conf.json
|
||||
```
|
||||
|
||||
|
||||
|
||||
这样代理的设置就完成了。
|
||||
|
||||
|
||||
|
||||
## 样式编译
|
||||
|
||||
**[Angular CLI](https://cli.angular.io/)** 支持sass、less、stylus等方式编译样式
|
||||
|
||||
1. 在创建项目时可以设置编译方式：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
ng new myapp --style=sass
|
||||
ng new myapp --style=less
|
||||
ng new myapp --style=stylus
|
||||
```
|
||||
|
||||
|
||||
|
||||
上面分别是创建项目时设定的样式编译方式：sass、less、stylus
|
||||
|
||||
|
||||
|
||||
2. 当然，你也可以在手动修改，在项目根目录下找到 **.angular-cli.json**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
"defaults": {
|
||||
"styleExt": "styl",
|
||||
"component": {}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
defaults下面的styleExt就是你要设定的编译方式，这里采用了stylus，stylus的后缀为styl，其他的方式设置对应的后缀名。
|
||||
|
||||
|
||||
|
||||
然后继续在该文件中找到
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
"styles": [
|
||||
"styles.styl"
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
|
||||
全改完了之后，不要忘了把项目**根目录**里的css文件和**src/app**里的css文件也改成相应的后缀
|
||||
|
||||
|
||||
|
||||
## 打包编译后资源引入根目录
|
||||
|
||||
**[Angular CLI](https://cli.angular.io/)** 打包编译后，引入的资源都是"/"根目录引入，但有时候我们的项目可能并不是存放在域名的根目录，所以这种情况就需要我们设置一下引入资源的根目录了
|
||||
|
||||
1. 打开src目录下面的**index.html**文件，在<head>标签里面有个base标签
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
@@ -123,11 +201,20 @@ date: 2017-09-20 17:13:04
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
base标签默认是"/"根目录
|
||||
|
||||
|
||||
|
||||
2. 然后我们回到整项目的根目录下面找到**package.json**文件,打开文件，找到"scripts"，修改"build"的值
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --proxy-config proxy.conf.json",
|
||||
@@ -138,17 +225,33 @@ date: 2017-09-20 17:13:04
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
|
||||
然后在命令行中输入
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
npm run build
|
||||
```
|
||||
|
||||
|
||||
|
||||
等待编译完成后，在dist目录下的**index.html**文件中的base标签的值就变成你之前设置的目录了，引入的资源放到正式环境也可以正常访问。
|
||||
|
||||
|
||||
|
||||
当然，你也可以不设置**package.json**文件，直接在命令行输入
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
ng build --prod --bh /pages/myapp/
|
||||
或者
|
||||
ng build --prod --base-href /pages/myapp/
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
---
|
||||
title: browser-sync代理接口在IE8下返回406问题
|
||||
tags: []
|
||||
id: '64'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- browser-sync
|
||||
- 代理
|
||||
- IE8
|
||||
- 406
|
||||
date: 2016-06-28 10:15:34
|
||||
---
|
||||
|
||||
正常情况下，代理返回的头信息为： HTTP/1.1 200 OK server?? ? Apache-Coyote/1.1 content-type?? ?application/json; charset=UTF-8 transfer-encoding?? ?chunked date?? ? Tue, 28 Jun 2016 02:07:39 GMT connection?? ?close 然而在IE8下面却返回了下面的头信息： HTTP/1.1 406 Not Acceptable server: Apache-Coyote/1.1 set-cookie: JSESSIONID=7F367B9EB53FDC8306D807E0A7BD4201; Path=/; HttpOnly content-type: text/html; charset=utf-8 date: Tue, 28 Jun 2016 02:01:31 GMT connection: close Transfer-Encoding: chunked 通过对比头信息，在代理设置里做了一下判断，在低版本IE浏览器重新设置一下头信息。
|
||||
|
||||
``` js
|
||||
|
||||
var browserSync = require('browser-sync');
|
||||
|
||||
var proxyMiddleware = require('http-proxy-middleware');
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
---
|
||||
title: egret 练手 《围住神经猫》
|
||||
tags: []
|
||||
id: '115'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- egret
|
||||
- 围住神经猫
|
||||
- 小游戏
|
||||
date: 2017-09-04 11:42:10
|
||||
---
|
||||
|
||||
@@ -81,7 +84,11 @@ class LoadingUI extends egret.Sprite {
|
||||
}
|
||||
```
|
||||
|
||||
效果如图：  **3.开始画面** 进度条弄好之后，我们开始做游戏开始的画面。如图：  可以看出，开始画面由背景、网格地图和开始按钮的图片组成，这个实现起来很简单。
|
||||
效果如图：
|
||||
|
||||
 **3. 开始画面** 进度条弄好之后，我们开始做游戏开始的画面。如图： 
|
||||
|
||||
可以看出，开始画面由背景、网格地图和开始按钮的图片组成，这个实现起来很简单。
|
||||
|
||||
```
|
||||
|
||||
@@ -134,8 +141,6 @@ class LoadingUI extends egret.Sprite {
|
||||
this.btnStart.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
然后在createGameScene方法里面执行this.init()就可以了。
|
||||
|
||||
但是我们还要绘制围住神经猫的9X9的网格地图。
|
||||
@@ -249,4 +254,8 @@ let childY:number = row * (layoutElement.height + gapY);
|
||||
}
|
||||
```
|
||||
|
||||
然后在init方法里面执行this.creatMap()就可以完成绘制了  后面的操作逻辑就不赘述了，有机会再跟大家分享。
|
||||
然后在init方法里面执行this.creatMap()就可以完成绘制了
|
||||
|
||||
|
||||
|
||||
后面的操作逻辑就不赘述了，有机会再跟大家分享。
|
||||
@@ -1,15 +1,20 @@
|
||||
---
|
||||
title: egret 获取设备陀螺仪信息以及运动状态信息
|
||||
tags: []
|
||||
id: '217'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- egret
|
||||
- 陀螺仪
|
||||
- DeviceOrientation
|
||||
- Motion
|
||||
date: 2017-11-22 15:55:55
|
||||
---
|
||||
|
||||
在最新版本的egret（5.0.12）中，已经支持了移动设备陀螺仪和运动状态的相关API。 **egret. DeviceOrientation** 可以监听设备方向的变化。 **egret. Motion**从用户设备读取运动状态信息并派发 CHANGE 事件。当设备移动时，传感器会检测到此移动并返回设备加速度，重力和旋转数据。 废话不多说，直接上代码：
|
||||
|
||||
```
|
||||
|
||||
class Main extends egret.DisplayObjectContainer {
|
||||
|
||||
private orientationLabel: egret.TextField;
|
||||
@@ -81,4 +86,6 @@ date: 2017-11-22 15:55:55
|
||||
}
|
||||
```
|
||||
|
||||
首先创建了DeviceOrientation的实例orientation。并给他添加了一个事件侦听器，监听它的CHANGE事件。然后调用了他的start()方法来开始监听设备方向的变化。 当系统监听到了方向的变化后，将回调函数 onOrientation。然后通过egret.OrientationEvent事件的三个属性来获取设备的方向变化信息。 OrientationEvent的三个属性：alpha,beta和gamma。 alpha表示设备绕 Z 轴的角度，单位是 角度 beta 表示设备绕 X 轴的角度，单位是 角度 gamma 表示设备绕 Y 轴的角度，单位是 角度 同样，创建了Motion的实例motion。并给他添加了一个事件侦听器，监听它的CHANGE事件。然后调用了他的start()方法来开始监听设备方向的变化。 当系统监听到了方向的变化后，将回调函数 onMotion。然后通过egret.MotionEvent事件的三个属性来获取设备运动的具体信息。 acceleration 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，不包含重力。 acceleration 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，包含重力。 rotationRate 表示设备在 alpha、 beta 和 gamma 三个轴向的角速度信息，单位是 角度每秒。 最终的效果demo->[传送门](https://demo.dengtongyu.com/pages/orientation/) 或者手机扫一扫： 
|
||||
首先创建了DeviceOrientation的实例orientation。并给他添加了一个事件侦听器，监听它的CHANGE事件。然后调用了他的start()方法来开始监听设备方向的变化。 当系统监听到了方向的变化后，将回调函数 onOrientation。然后通过egret. OrientationEvent事件的三个属性来获取设备的方向变化信息。 OrientationEvent的三个属性：alpha, beta和gamma。 alpha表示设备绕 Z 轴的角度，单位是 角度 beta 表示设备绕 X 轴的角度，单位是 角度 gamma 表示设备绕 Y 轴的角度，单位是 角度 同样，创建了Motion的实例motion。并给他添加了一个事件侦听器，监听它的CHANGE事件。然后调用了他的start()方法来开始监听设备方向的变化。 当系统监听到了方向的变化后，将回调函数 onMotion。然后通过egret. MotionEvent事件的三个属性来获取设备运动的具体信息。 acceleration 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，不包含重力。 acceleration 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，包含重力。 rotationRate 表示设备在 alpha、 beta 和 gamma 三个轴向的角速度信息，单位是 角度每秒。 最终的效果demo->[传送门](https://demo.dengtongyu.com/pages/orientation/) 或者手机扫一扫：
|
||||
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
---
|
||||
title: egret3d 用视频video做纹理贴图
|
||||
tags: []
|
||||
id: '267'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- egret
|
||||
- video
|
||||
- 纹理贴图
|
||||
- Texture
|
||||
date: 2018-01-29 17:50:02
|
||||
---
|
||||
|
||||
@@ -12,6 +16,7 @@ date: 2018-01-29 17:50:02
|
||||
思路也很简单，创建一个立方体，然后把立方的纹理设置成一个视频video，主要代码如下
|
||||
|
||||
```
|
||||
|
||||
public createGameScene() {
|
||||
|
||||
this.createVideoTexture();
|
||||
|
||||
@@ -1,13 +1,21 @@
|
||||
---
|
||||
title: egret天空盒子浅尝
|
||||
tags: []
|
||||
id: '238'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- egret
|
||||
- 天空盒子
|
||||
- QueueLoader
|
||||
- LoaderEvent3D
|
||||
date: 2017-11-22 18:35:36
|
||||
---
|
||||
|
||||
现在移动端越来越多类VR的推广H5页面需求，egret恰好也有相关的API可以方便我们使用，这就是egret的天空盒子-**egret3d.Sky** 在 Egret 3D 所创建的空间中最外层是由天空盒子来包裹起来的。我们通常使用天空盒子来展现风景，地平线，天空，星空等等空间的“大背景”。天空盒子由一组无缝的贴图包裹起来的盒状空间。当我们的 3D 场景中包含有物体时，天空盒子总是充当其背景。  环境：egret 5.0.12 IDE：egret wing 3
|
||||
现在移动端越来越多类VR的推广H5页面需求，egret恰好也有相关的API可以方便我们使用，这就是egret的天空盒子-**egret3d. Sky** 在 Egret 3D 所创建的空间中最外层是由天空盒子来包裹起来的。我们通常使用天空盒子来展现风景，地平线，天空，星空等等空间的“大背景”。天空盒子由一组无缝的贴图包裹起来的盒状空间。当我们的 3D 场景中包含有物体时，天空盒子总是充当其背景。
|
||||
|
||||
|
||||
|
||||
环境：egret 5.0.12 IDE：egret wing 3
|
||||
|
||||
# 加载天空盒子素材资源
|
||||
|
||||
@@ -90,4 +98,6 @@ date: 2017-11-22 18:35:36
|
||||
}
|
||||
```
|
||||
|
||||
最终效果->[传送门](https://demo.dengtongyu.com/pages/boxsky/) 手机扫一扫 
|
||||
最终效果->[传送门](https://demo.dengtongyu.com/pages/boxsky/) 手机扫一扫
|
||||
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
---
|
||||
title: egret引用Animate CC发布的HTML5 Canvas
|
||||
tags: []
|
||||
id: '252'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- egret
|
||||
- Animate CC
|
||||
- Canvas
|
||||
- swf
|
||||
date: 2017-12-15 18:04:34
|
||||
---
|
||||
|
||||
@@ -32,6 +36,7 @@ date: 2017-12-15 18:04:34
|
||||
新创建一个类，命名为CollectAnimation.ts
|
||||
|
||||
```
|
||||
|
||||
class CollectAnimation extends egret.DisplayObjectContainer {
|
||||
|
||||
private _iframe:any;
|
||||
@@ -149,6 +154,7 @@ this.parent.removeChild(this);
|
||||
在Main.ts中使用我们刚刚创建的类
|
||||
|
||||
```
|
||||
|
||||
class Main extends egret.DisplayObjectContainer {
|
||||
|
||||
public constructor() {
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
---
|
||||
title: egret粒子系统官方文档的那些坑
|
||||
tags: []
|
||||
id: '200'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- egret
|
||||
- 粒子系统
|
||||
- RES
|
||||
date: 2017-10-20 16:33:15
|
||||
---
|
||||
|
||||
@@ -24,12 +27,14 @@ date: 2017-10-20 16:33:15
|
||||
按照示例的代码在egret 4.0.3版本中，编译就会报错
|
||||
|
||||
```
|
||||
|
||||
error TS2339: Property 'system' does not exist on type 'Main'.
|
||||
```
|
||||
|
||||
'system'这个属性不属于'Main'，新人们在这里会懵逼一会儿，但是代码是死的，人是活的，我直接用个变量来保存particle对象嘛。我把代码改一下
|
||||
|
||||
```
|
||||
|
||||
let texture = RES.getRes("funny");
|
||||
let config = RES.getRes("funny_json");
|
||||
let funny = new particle.GravityParticleSystem(texture, config);
|
||||
@@ -40,12 +45,14 @@ error TS2339: Property 'system' does not exist on type 'Main'.
|
||||
我用个变量funny来保存particle对象，然后我再编译一下，没有报错，但是刷新浏览器的时候报错了
|
||||
|
||||
```
|
||||
|
||||
Uncaught TypeError: Cannot read property 'textureWidth' of null
|
||||
```
|
||||
|
||||
无法读取纹理的宽度，其值为null。出现这种报错一般就是纹理加载不成功，所以要看看加载素材的地方
|
||||
|
||||
```
|
||||
|
||||
let texture = RES.getRes("funny");
|
||||
let config = RES.getRes("funny_json");
|
||||
```
|
||||
@@ -53,6 +60,7 @@ Uncaught TypeError: Cannot read property 'textureWidth' of null
|
||||
上面的纹理加载很明显与egret的素材加载方式有点不一样，不知道官方文档为什么会这样写，所以我改了一下，把纹理的后缀加上
|
||||
|
||||
```
|
||||
|
||||
let texture = RES.getRes("funny_png");
|
||||
let config = RES.getRes("funny_json");
|
||||
```
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
---
|
||||
title: ES6 下定义变量，let大法好！
|
||||
tags: []
|
||||
id: '52'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- ES6
|
||||
- let
|
||||
- 作用域
|
||||
date: 2016-06-16 22:37:51
|
||||
---
|
||||
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
---
|
||||
title: https实践，Let's Encrypt 免费泛域名 SSL 证书申请
|
||||
tags: []
|
||||
id: '304'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- https
|
||||
- Let's Encrypt
|
||||
- SSL证书
|
||||
- 免费泛域名
|
||||
date: 2018-07-12 11:26:42
|
||||
---
|
||||
|
||||
@@ -36,12 +40,14 @@ ACME v2 是 ACME 协议的更新版本，泛域名证书只能通过 ACME v2 获
|
||||
如果没有下载安装过Certbot，先下载Certbot客户端
|
||||
|
||||
```
|
||||
|
||||
wget https://dl.eff.org/certbot-auto
|
||||
```
|
||||
|
||||
然后把certbot-auto设为可执行权限
|
||||
|
||||
```
|
||||
|
||||
chmod a+x certbot-auto
|
||||
```
|
||||
|
||||
@@ -50,6 +56,7 @@ chmod a+x certbot-auto
|
||||
如果已经安装了Certbot，查看下自己的Certbot客户端是不是支持 ACME v2 版本，官方介绍 Certbot 0.22.0 版本支持新的协议版本
|
||||
|
||||
```
|
||||
|
||||
./certbot-auto --version
|
||||
Upgrading certbot-auto 0.21.1 to 0.25.1...
|
||||
Replacing certbot-auto...
|
||||
@@ -71,6 +78,7 @@ certbot 0.22.0
|
||||
使用 Certbot 客户端申请证书方法比较的简单，输入以下命令：
|
||||
|
||||
```
|
||||
|
||||
./certbot-auto certonly -d domain.com -d *.domain.com --manual --preferred-challenges dns --server https://acme-v02.api.letsencrypt.org/directory
|
||||
```
|
||||
|
||||
@@ -89,6 +97,7 @@ _2、\*.domain.com可作用于所有子域名，但好像不能作用于domain.c
|
||||
执行完这一步之后，就是命令行的输出，请根据提示输入相应内容：
|
||||
|
||||
```
|
||||
|
||||
Saving debug log to /var/log/letsencrypt/letsencrypt.log
|
||||
Plugins selected: Authenticator manual, Installer None
|
||||
Cert is due for renewal, auto-renewing...
|
||||
@@ -117,6 +126,7 @@ Are you OK with your IP being logged?
|
||||
继续查看命令行的输出，非常关键：
|
||||
|
||||
```
|
||||
|
||||
-------------------------------------------------------------------------------
|
||||
Please deploy a DNS TXT record under the name
|
||||
_acme-challenge.xxxxx.com with the following value:
|
||||
@@ -139,6 +149,7 @@ Press Enter to Continue
|
||||
如上图所示，有两条DNS TXT，因为我们申请的时候就有两个域名，domain.com 和 \*.domain.com，所以我们在阿里云的后台添加一条DNS TXT后，我们回到命令行，按回车继续，然后会输出第二条DNS TXT
|
||||
|
||||
```
|
||||
|
||||
-------------------------------------------------------------------------------
|
||||
Please deploy a DNS TXT record under the name
|
||||
_acme-challenge.xxxxx.com with the following value:
|
||||
@@ -153,6 +164,7 @@ Press Enter to Continue
|
||||
同样，按照上面的步骤在阿里云的后台多加一条DNS TXT解析就好。加完稍等几分钟后，回到命令行，按回车
|
||||
|
||||
```
|
||||
|
||||
Waiting for verification...
|
||||
Cleaning up challenges
|
||||
|
||||
@@ -177,6 +189,7 @@ Press Enter to Continue
|
||||
你也可以输入以下命令确认 TXT 记录是否生效：
|
||||
|
||||
```
|
||||
|
||||
dig -t txt _acme-challenge.XXXXXX.com @8.8.8.8
|
||||
|
||||
; <<>> DiG 9.10.6 <<>> -t txt _acme-challenge.XXXXXX.com @8.8.8.8
|
||||
@@ -203,6 +216,7 @@ _acme-challenge.dengtongyu.com.599 INTXT"XQOqY8npyso******ovtudA3zMd_C1dh9bjMEkb
|
||||
到了这一步后，恭喜您，证书申请成功。 证书和密钥保存在下列目录：
|
||||
|
||||
```
|
||||
|
||||
/etc/letsencrypt/live/xxx.com/
|
||||
|
||||
├── cert.pem
|
||||
@@ -214,6 +228,7 @@ _acme-challenge.dengtongyu.com.599 INTXT"XQOqY8npyso******ovtudA3zMd_C1dh9bjMEkb
|
||||
然后校验证书信息，输入如下命令：
|
||||
|
||||
```
|
||||
|
||||
openssl x509 -in /etc/letsencrypt/live/xxx.com/cert.pem -noout -text
|
||||
...
|
||||
Authority Information Access:
|
||||
@@ -232,6 +247,7 @@ X509v3 Subject Alternative Name:
|
||||
Nginx 配置文件片断：
|
||||
|
||||
```
|
||||
|
||||
server {
|
||||
server_name xxx.com;
|
||||
listen 443 http2 ssl;
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
---
|
||||
title: navigator.mediaDevices.getUserMedia调用本地摄像头
|
||||
tags: []
|
||||
id: '94'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- 摄像头
|
||||
- navigator
|
||||
- mediaDevices
|
||||
- getUserMedia
|
||||
date: 2017-04-28 15:20:27
|
||||
---
|
||||
|
||||
@@ -18,7 +22,6 @@ MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一
|
||||
然后在js部分如下
|
||||
|
||||
``` js
|
||||
|
||||
//获取video标签
|
||||
var vedio = document.querySelector('#video');
|
||||
|
||||
@@ -28,12 +31,19 @@ var constraints = {
|
||||
audio: true,
|
||||
video: {
|
||||
//帧率
|
||||
frameRate: { ideal: 10,max: 15,min: 8 }
|
||||
frameRate: {
|
||||
ideal: 10,
|
||||
max: 15,
|
||||
min: 8
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//获取设备（摄像头或者麦克风）
|
||||
navigator.mediaDevices.getUserMedia({ audio: false, video: true })
|
||||
navigator.mediaDevices.getUserMedia({
|
||||
audio: false,
|
||||
video: true
|
||||
})
|
||||
.then(function(mediaStream) {
|
||||
console.log(mediaStream);
|
||||
video.src = window.URL.createObjectURL(mediaStream);
|
||||
@@ -45,7 +55,6 @@ video.onloadedmetadata = function(e) {
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
_注意：调取本地视频或音频设备的接口，出于安全的考虑，只能在localhost或者https下使用！_
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
---
|
||||
title: react native for ios 下的一个小坑
|
||||
tags: []
|
||||
id: '84'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- react
|
||||
- native
|
||||
- ios
|
||||
date: 2016-12-09 18:07:07
|
||||
---
|
||||
|
||||
最近在尝试学习一下react native，然后就按照官网的教程一步步配置环境，一切都很顺利，但是在xcode下run的时候就报错了。
|
||||
|
||||
``` js
|
||||
|
||||
Error: ** * Terminating app due to uncaught exception 'NSInternalInconsistencyException',
|
||||
reason: 'bundleURL must be non-nil when not implementing loadSourceForBridge'
|
||||
```
|
||||
@@ -18,7 +20,6 @@ reason: 'bundleURL must be non-nil when not implementing loadSourceForBridge'
|
||||
谷歌百度一系列之后，仍然无法解决，然后加了react native中文的官方群提问，有人说是开启了VPN导致，然而我的Mac并没有配置VPN，一切又回到原点。 然而受到这个启发，把之前写web dom时配置的 127.0.0.1 localhost 还原。神奇的事情发生了，Xcode里的项目跑起来了！喜大普奔，然而我也没搞懂这是为什么。
|
||||
|
||||
``` js
|
||||
|
||||
#host文件一定要有这个
|
||||
127.0 .0 .1 localhost
|
||||
```
|
||||
@@ -1,9 +1,12 @@
|
||||
---
|
||||
title: vue CLI 代理设置以及打包引入配置
|
||||
tags: []
|
||||
id: '173'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- vue
|
||||
- CLI
|
||||
- 代理
|
||||
date: 2017-10-17 15:25:49
|
||||
---
|
||||
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
---
|
||||
title: vue-resource http请求在ios浏览器下的一个小坑
|
||||
tags: []
|
||||
id: '69'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- vue-resource
|
||||
- http请求
|
||||
- ios
|
||||
date: 2016-07-05 18:41:00
|
||||
---
|
||||
|
||||
``` js
|
||||
|
||||
new Vue({
|
||||
el: 'body',
|
||||
ready: function() {
|
||||
@@ -26,7 +28,6 @@ console.log( typeof json.data ) //谷歌返回的是string，ios返回的是obj
|
||||
以上代码，在谷歌返回的是string，ios浏览器返回的是object， 所以通过JSON.parse()格式化json.data的时候，在ios浏览器下就报错了 通过使用vue-resource提供的json()方法解决 具体代码如下
|
||||
|
||||
``` js
|
||||
|
||||
new Vue({
|
||||
el: 'body',
|
||||
ready: function() {
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
---
|
||||
title: 一个星期一早晨感慨
|
||||
tags: []
|
||||
id: '22'
|
||||
categories:
|
||||
- - 生活
|
||||
- 生活
|
||||
tags:
|
||||
- 星期一
|
||||
- 感慨
|
||||
date: 2016-05-30 09:59:06
|
||||
---
|
||||
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
---
|
||||
title: 人应该要学会生活
|
||||
tags: []
|
||||
id: '20'
|
||||
categories:
|
||||
- - 生活
|
||||
- 生活
|
||||
tags:
|
||||
- 亦舒
|
||||
- 此一时也彼一时也
|
||||
- 生活
|
||||
date: 2016-05-26 23:27:30
|
||||
---
|
||||
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
---
|
||||
title: 你也可以成为鉴黄师，nsfwjs鉴黄库初探
|
||||
tags: []
|
||||
id: '361'
|
||||
categories:
|
||||
|
||||
+ - 分享
|
||||
|
||||
- 分享
|
||||
tags:
|
||||
- 鉴黄
|
||||
- nsfwjs
|
||||
- tensorflow
|
||||
date: 2020-06-20 12:11:46
|
||||
---
|
||||
|
||||
@@ -22,6 +23,7 @@ date: 2020-06-20 12:11:46
|
||||
最终结果输出一个数组，每个分类都会输出一个概率，按概率从高到低排，所有分类的概率总和是1
|
||||
|
||||
```
|
||||
|
||||
[
|
||||
{
|
||||
"className": "Sexy",
|
||||
@@ -53,6 +55,7 @@ date: 2020-06-20 12:11:46
|
||||
NSFW JS是由TensorFlow.js作为对等依赖项提供支持。 所以我们要先安装TensorFlow.js。
|
||||
|
||||
```
|
||||
|
||||
yarn add @tensorflow/tfjs
|
||||
yarn add nsfwjs
|
||||
// or
|
||||
@@ -73,6 +76,7 @@ npm i nsfwjs
|
||||
### 使用
|
||||
|
||||
```
|
||||
|
||||
// 导入模块
|
||||
import * as nsfwjs from "nsfwjs";
|
||||
// 图片dom节点
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
---
|
||||
title: 使用acme.sh 申请 Let's Encrypt 泛域名SSL证书
|
||||
tags: []
|
||||
id: '333'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- SSL证书
|
||||
- acme.sh
|
||||
- Let's Encrypt
|
||||
- 泛域名
|
||||
date: 2018-07-23 18:25:45
|
||||
---
|
||||
|
||||
@@ -14,6 +18,7 @@ date: 2018-07-23 18:25:45
|
||||
### 安装acme.sh
|
||||
|
||||
```
|
||||
|
||||
curl https://get.acme.sh sh
|
||||
```
|
||||
|
||||
@@ -26,6 +31,7 @@ curl https://get.acme.sh sh
|
||||
先前往阿里云后台获取App\_Key跟App\_Secret, 在【用户信息管理】-【安全信息管理】创建SecretKey [传送门](https://ak-console.aliyun.com/#/accesskey)，然后执行以下脚本
|
||||
|
||||
```
|
||||
|
||||
# 替换成从阿里云后台获取的密钥
|
||||
export Ali_Key="LTA*********uV6"
|
||||
export Ali_Secret="QKmsZgo*************8Htr6"
|
||||
@@ -36,6 +42,7 @@ export Ali_Secret="QKmsZgo*************8Htr6"
|
||||
### 获取证书
|
||||
|
||||
```
|
||||
|
||||
# 换成自己的域名
|
||||
acme.sh --issue --dns dns_ali -d dengtongyu.com -d *.dengtongyu.com
|
||||
```
|
||||
@@ -43,6 +50,7 @@ acme.sh --issue --dns dns_ali -d dengtongyu.com -d *.dengtongyu.com
|
||||
如果acme.sh，提示命令没找到，那就请再执行以下指令：
|
||||
|
||||
```
|
||||
|
||||
source ~/.bashrc
|
||||
acme.sh --issue --dns dns_ali -d dengtongyu.com -d *.dengtongyu.com
|
||||
```
|
||||
@@ -50,6 +58,7 @@ acme.sh --issue --dns dns_ali -d dengtongyu.com -d *.dengtongyu.com
|
||||
或者先cd到acme.sh目录下，再执行文件
|
||||
|
||||
```
|
||||
|
||||
cd ~/.acme.sh
|
||||
./acme.sh --issue --dns dns_ali -d dengtongyu.com -d *.dengtongyu.com
|
||||
```
|
||||
@@ -69,6 +78,7 @@ cd ~/.acme.sh
|
||||
正确的使用方法是使用 --installcert 命令, 并指定目标位置, 然后证书文件会被copy到相应的位置:
|
||||
|
||||
```
|
||||
|
||||
acme.sh --installcert -d dengtongyu.com \
|
||||
--key-file /etc/nginx/ssl/dengtongyu.key \
|
||||
--fullchain-file /etc/nginx/ssl/fullchain.cer \
|
||||
@@ -82,6 +92,7 @@ acme.sh --installcert -d dengtongyu.com \
|
||||
Nginx 配置文件片断：
|
||||
|
||||
```
|
||||
|
||||
server {
|
||||
server_name xxx.com;
|
||||
listen 443 http2 ssl;
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
---
|
||||
title: 吾日三省吾身
|
||||
tags: []
|
||||
id: '61'
|
||||
categories:
|
||||
- - 生活
|
||||
- 生活
|
||||
tags:
|
||||
- 人生
|
||||
- 自省
|
||||
date: 2016-06-23 23:13:16
|
||||
---
|
||||
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
---
|
||||
title: 咸鱼需要冷藏
|
||||
tags: []
|
||||
id: '29'
|
||||
categories:
|
||||
- - 生活
|
||||
- 生活
|
||||
tags:
|
||||
- 咸鱼
|
||||
- 空调
|
||||
date: 2016-06-02 21:22:10
|
||||
---
|
||||
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
---
|
||||
title: 奇妙能力歌
|
||||
tags: []
|
||||
id: '8'
|
||||
categories:
|
||||
- - 生活
|
||||
- 生活
|
||||
tags:
|
||||
- 音乐
|
||||
- 奇妙能力歌
|
||||
date: 2016-05-24 22:59:20
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
---
|
||||
title: 如果有来生
|
||||
tags: []
|
||||
id: '24'
|
||||
categories:
|
||||
- - 生活
|
||||
- 生活
|
||||
tags:
|
||||
- 蜡笔小新
|
||||
- 被子
|
||||
date: 2016-06-01 09:31:05
|
||||
---
|
||||
|
||||
 如果有来生，我要当条被子，不是躺在床上就是在晒太阳！ ——野原新之助
|
||||
|
||||
|
||||
如果有来生，我要当条被子，不是躺在床上就是在晒太阳！ ——野原新之助
|
||||
@@ -1,16 +1,19 @@
|
||||
---
|
||||
title: 字符html创建DOM节点
|
||||
tags: []
|
||||
id: '76'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- JavaScript
|
||||
- html
|
||||
- 创建
|
||||
- DOM节点
|
||||
date: 2016-08-25 09:58:05
|
||||
---
|
||||
|
||||
jQuery的创建节点的方式非常方便，$('<div></div>') 只要这样就可以创建一个div的节点。 我们也可以通过JavaScript简单实现一下这种方式。
|
||||
|
||||
``` js
|
||||
|
||||
function createDom(html) {
|
||||
var tempDom = document.createElement('div');
|
||||
tempDom.innerHTML = html;
|
||||
@@ -18,7 +21,6 @@ function createDom(html) {
|
||||
};
|
||||
var div = createDom('<div>新创建的div</div>')[0];
|
||||
document.getElementsByTagName('body').appendChild(div);
|
||||
|
||||
```
|
||||
|
||||
不过值得注意的是，childNodes返回的是一个DOM节点的列表，记得处理一下
|
||||
+4
-2
@@ -1,9 +1,11 @@
|
||||
---
|
||||
title: 小悟
|
||||
tags: []
|
||||
id: '110'
|
||||
categories:
|
||||
- - 生活
|
||||
- 生活
|
||||
tags:
|
||||
- 人生
|
||||
- 生和死
|
||||
date: 2017-08-01 09:12:01
|
||||
---
|
||||
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: 忙碌的工作日，潮流的朋友圈
|
||||
tags: []
|
||||
id: '14'
|
||||
categories:
|
||||
- - 生活
|
||||
- 生活
|
||||
date: 2016-05-25 23:17:50
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
---
|
||||
title: 我脑中的橡皮擦
|
||||
tags: []
|
||||
id: '34'
|
||||
categories:
|
||||
- - 生活
|
||||
- 生活
|
||||
tags:
|
||||
- 橡皮擦
|
||||
date: 2016-06-12 21:52:59
|
||||
---
|
||||
|
||||
 最近感觉自己容易忘记一些东西，重要的、琐碎的、又或者无关紧要的。 它犹如一块橡皮擦，偷偷的抹掉你一个字，一个词，甚至一句话，而你却浑然不觉。 待你回顾这些篇章的时候，你才发现记忆的空白。 于是你努力回想，企图找回只字片语，但看到的只是一片模糊的掠影。
|
||||
|
||||
|
||||
最近感觉自己容易忘记一些东西，重要的、琐碎的、又或者无关紧要的。 它犹如一块橡皮擦，偷偷的抹掉你一个字，一个词，甚至一句话，而你却浑然不觉。 待你回顾这些篇章的时候，你才发现记忆的空白。 于是你努力回想，企图找回只字片语，但看到的只是一片模糊的掠影。
|
||||
@@ -1,9 +1,11 @@
|
||||
---
|
||||
title: 条件注释判断浏览器
|
||||
tags: []
|
||||
id: '38'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- 判断浏览器
|
||||
- IE
|
||||
date: 2016-06-14 10:03:23
|
||||
---
|
||||
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
---
|
||||
title: 浅尝 HTML 5 input 新属性
|
||||
tags: []
|
||||
id: '276'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- HTML5
|
||||
- input
|
||||
- 属性
|
||||
date: 2018-02-07 18:16:11
|
||||
---
|
||||
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
---
|
||||
title: 演唱会随机选座解题思路
|
||||
tags: []
|
||||
id: '346'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- 随机选座
|
||||
- 解题
|
||||
- 思路
|
||||
date: 2018-12-16 14:07:46
|
||||
---
|
||||
|
||||
@@ -18,6 +21,7 @@ date: 2018-12-16 14:07:46
|
||||
首先定义座位信息
|
||||
|
||||
```
|
||||
|
||||
let item = {
|
||||
index: 0, //下标（索引）
|
||||
group: 0, //分组
|
||||
@@ -31,6 +35,7 @@ let item = {
|
||||
把座位和排数用数组保存起来
|
||||
|
||||
```
|
||||
|
||||
let front = 2; //前排座位数
|
||||
let back = 10; //后排座位数
|
||||
let .gap = 2; //每行座位数差
|
||||
@@ -62,6 +67,7 @@ for (let g = 0; g < this.group; g++) {
|
||||
把符合条件的座位排数筛选出来（即有足够连号的空位的排数）
|
||||
|
||||
```
|
||||
|
||||
suitableRows(length) {//length为买票的张数
|
||||
let haveSeatRows = [];
|
||||
this.rows.forEach((list) => {
|
||||
@@ -87,6 +93,7 @@ suitableRows(length) {//length为买票的张数
|
||||
最后把从筛选出来的排数中选出座位
|
||||
|
||||
```
|
||||
|
||||
let index = Math.floor(Math.random() * haveSeats.length);
|
||||
let places = this.selectPlace(haveSeats[index], length);
|
||||
selectPlace(list, length) {
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
---
|
||||
title: 用Node+express搭建本地https服务
|
||||
tags: []
|
||||
id: '90'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- Node
|
||||
- express
|
||||
- https
|
||||
date: 2017-01-24 15:21:05
|
||||
---
|
||||
|
||||
1. 安装node环境（自行谷歌百度，不赘述） 2. 安装express（自行谷歌百度，不赘述） 3. 打开命令行，利用openssl生成证书文件
|
||||
|
||||
``` js
|
||||
|
||||
//生成私钥key文件
|
||||
openssl genrsa 1024 > /keys/private.pem
|
||||
|
||||
@@ -24,7 +26,6 @@ openssl x509 -req -days 365 -in /keys/csr.pem -signkey /keys/private.pem -out /k
|
||||
4. 编写server文件
|
||||
|
||||
``` js
|
||||
|
||||
var app = require('express')();
|
||||
var fs = require('fs');
|
||||
var http = require('http');
|
||||
@@ -33,7 +34,10 @@ var https = require('https');
|
||||
//引入私钥、证书
|
||||
var privateKey = fs.readFileSync('./keys/private.pem', 'utf8');
|
||||
var certificate = fs.readFileSync('./keys/file.crt', 'utf8');
|
||||
var credentials = {key: privateKey, cert: certificate};
|
||||
var credentials = {
|
||||
key: privateKey,
|
||||
cert: certificate
|
||||
};
|
||||
|
||||
//创建服务，设置端口号
|
||||
var httpServer = http.createServer(app);
|
||||
@@ -53,17 +57,14 @@ httpsServer.listen(SSLPORT, function() {
|
||||
app.get('/', function(req, res) {
|
||||
if (req.protocol === 'https') {
|
||||
res.status(200).send('这是一个经过加密的https请求！');
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
res.status(200).send('这是一个普通的http请求！');
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
5. 启动服务
|
||||
|
||||
``` js
|
||||
|
||||
node server.js
|
||||
```
|
||||
@@ -1,10 +1,13 @@
|
||||
---
|
||||
title: 第一条写些什么呢？
|
||||
tags: []
|
||||
id: '4'
|
||||
categories:
|
||||
- - 生活
|
||||
- 生活
|
||||
tags:
|
||||
- 生活
|
||||
date: 2016-05-24 18:30:10
|
||||
---
|
||||
|
||||
 以后的生活会更精彩吧···嗯嗯···
|
||||
|
||||
|
||||
以后的生活会更精彩吧···嗯嗯···
|
||||
@@ -1,9 +0,0 @@
|
||||
---
|
||||
title: 首页
|
||||
tags: []
|
||||
id: '18'
|
||||
categories:
|
||||
- - uncategorized
|
||||
comments: false
|
||||
date: 2016-05-26 16:57:35
|
||||
---
|
||||
@@ -123,15 +123,16 @@ cover:
|
||||
position: both
|
||||
# When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
|
||||
default_cover:
|
||||
# - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
|
||||
- /images/v2-0dff7a84fe57e0d911f6efd2ba445db5_720w.jpg
|
||||
- /images/v2-5d580945ed25ce42f2fa5bea4cb0d278_r.jpg
|
||||
- /images/v2-71c2d3e28a607d4732580d5fa8fcbac7_r.jpg
|
||||
# - /images/v2-94c8508fb5f0acc59dd3616512a6cf47_720w.jpg
|
||||
# - /images/v2-8336cecd23d2a4134033791a8e5211fa_720w.jpg
|
||||
# - /images/v2-be9ee0a7eef1372e6ff9891436c61389_hd.gif
|
||||
# - /images/v2-d1ccc3ef1cec99e3ae06d300c5ca0f7c_720w.jpg
|
||||
# - /images/v2-e6df90886acf0bfc934f2902cec54143_720w.jpg
|
||||
# - /images/v2-f119c1dab2d95d62b0808f3b334dd8a1_720w.jpg
|
||||
- /images/v2-94c8508fb5f0acc59dd3616512a6cf47_720w.jpg
|
||||
- /images/v2-8336cecd23d2a4134033791a8e5211fa_720w.jpg
|
||||
- /images/v2-be9ee0a7eef1372e6ff9891436c61389_hd.gif
|
||||
- /images/v2-d1ccc3ef1cec99e3ae06d300c5ca0f7c_720w.jpg
|
||||
- /images/v2-e6df90886acf0bfc934f2902cec54143_720w.jpg
|
||||
- /images/v2-f119c1dab2d95d62b0808f3b334dd8a1_720w.jpg
|
||||
|
||||
# Replace Broken Images (替換無法顯示的圖片)
|
||||
error_img:
|
||||
|
||||
Reference in new issue
Block a user