TrumanDu's Blog

发表于 更新于 分类于 本文字数： 299 阅读时长 ≈ 1 分钟

百度地图调用问题解决方案

背景

做地图可视化，我们经常使用百度地图，如果是纯js,在html 中调用，一般没什么问题，可以很好的融合，但是放在node.js(vue/angularjs/react)中经常会出现

1
Bmap is not defined

问题原因

产生上面的问题是因为百度地图api 会异步加载，在该js 还未加载完毕，即调用，即会产生该问题。这个问题发现许多人遇到，但是网上的回答特别少，有几个有帮助的也是提供思路，基本都是异步加载再调用。也就是等资源加载完毕再调用。

解决方案

新建map.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export function MP() {
  return new Promise(function (resolve, reject) {
    // 如果已加载直接返回
    if(typeof BMap !== 'undefined') {
      resolve(BMap);
      return true;
    }
    // 百度地图异步加载回调处理
    window.onBMapCallback = function () {
      console.log('百度地图脚本初始化成功...');
      resolve(BMap);
    };
    const script = document.createElement('script');
    script.type = 'text/javascript';
    //script.src = 'http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM';
    script.src = 'http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM&s=1&callback=onBMapCallback';
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

使用

1
2
3
4
5
6
7
import { MP } from './map.js';

MP().then(BMap => {
     //调用
    }).catch(error =>{
      console.log('error');
    });

相关项目

  • Bmap kibana 插件，开发该项目遇到这个问题

发表于 更新于 分类于 本文字数： 1.2k 阅读时长 ≈ 4 分钟

nginx 教程之 nginx 配置学习

1.location配置

语法规则： 

1
2
3
4
5
6
7
8
9
10
11
12
13
location [=|~|~*|^~] /uri/ { … }

= 表示精确匹配,这个优先级也是最高的

~  表示区分大小写的正则匹配

~* 表示不区分大小写的正则匹配(和上面的唯一区别就是大小写)

^~ 表示uri以某个常规字符串开头，理解为匹配 url路径即可。nginx不对url做编码，因此请求为/static/20%/aa，可以被规则^~ /static/ /aa匹配到（注意是空格）。

!~和!~* 分别为区分大小写不匹配及不区分大小写不匹配的正则

/ 通用匹配，任何请求都会匹配到，默认匹配.

优先级=>^~>

首先匹配 =，其次匹配^~, 其次是按文件中顺序的正则匹配，最后是交给 / 通用匹配。当有匹配成功时候，停止匹配，按当前匹配规则处理请求

一般线上的配置

1
2
3
4
5
6
7
8
9
10
11
location ~* .*\.(js|css)?$
{
        expires 7d; //7天过期,后续讲解
        access_log off; //不保存日志
}
 
location ~* .*\.(png|jpg|gif|jpeg|bmp|ico)?$
{        
        expires 7d;
        access_log off;
}

2.nginx 逻辑运算

nginx的配置中不支持if条件的逻辑与&& 逻辑或|| 运算 ，而且不支持if的嵌套语法，否则会报下面的错误：nginx: [emerg] invalid condition。
我们可以用变量的方式来间接实现。
要实现的语句：

1
2
3
if ($arg_unitid = 42012 && $uri ~/thumb/){
 echo "www.baidu.com";
}

可以这么来实现，如下所示：

1
2
3
4
5
6
7
8
9
10
set $flag 0;
if ($uri ~ ^/thumb/[0-9]+_160.jpg$){
 set $flag "${flag}1";
}
if ($arg_unitid = 42012){
 set $flag "${flag}1";
}
if ($flag = "011"){
 echo "www.baidu.com";
}

3.ngx_http_core_module模块提供的变量

参数名称 注释

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
$arg_PARAMETER HTTP 请求中某个参数的值，如/index.php?site=www.ttlsa.com，可以用$arg_site取得www.ttlsa.com这个值.
$args HTTP 请求中的完整参数。例如，在请求/index.php?width=400&height=200 中，$args表示字符串width=400&height=200.
$binary_remote_addr 二进制格式的客户端地址。例如：\x0A\xE0B\x0E
$body_bytes_sent 表示在向客户端发送的http响应中，包体部分的字节数
$content_length 表示客户端请求头部中的Content-Length 字段
$content_type 表示客户端请求头部中的Content-Type 字段
$cookie_COOKIE 表示在客户端请求头部中的cookie 字段
$document_root 表示当前请求所使用的root 配置项的值
$uri 表示当前请求的URI，不带任何参数
$document_uri 与$uri 含义相同
$request_uri 表示客户端发来的原始请求URI，带完整的参数。$uri和$document_uri未必是用户的原始请求，在内部重定向后可能是重定向后的URI，而$request_uri 永远不会改变，始终是客户端的原始URI.
$host 表示客户端请求头部中的Host字段。如果Host字段不存在，则以实际处理的server（虚拟主机）名称代替。如果Host字段中带有端口，如IP:PORT，那么$host是去掉端口的，它的值为IP。$host 是全小写的。这些特性与http_HEADER中的http_host不同，http_host只取出Host头部对应的值。 
$hostname 表示 Nginx所在机器的名称，与 gethostbyname调用返回的值相同 
$http_HEADER 表示当前 HTTP请求中相应头部的值。HEADER名称全小写。例如，示请求中 Host头部对应的值 用 $http_host表 
$sent_http_HEADER 表示返回客户端的 HTTP响应中相应头部的值。HEADER名称全小写。例如，用 $sent_ http_content_type表示响应中 Content-Type头部对应的值 
$is_args 表示请求中的 URI是否带参数，如果带参数，$is_args值为 ?，如果不带参数，则是空字符串 
$limit_rate 表示当前连接的限速是多少，0表示无限速 
$nginx_version 表示当前 Nginx的版本号 
$query_string 请求 URI中的参数，与 $args相同，然而 $query_string是只读的不会改变 
$remote_addr 表示客户端的地址 
$remote_port 表示客户端连接使用的端口 
$remote_user 表示使用 Auth Basic Module时定义的用户名 
$request_filename 表示用户请求中的 URI经过 root或 alias转换后的文件路径 
$request_body 表示 HTTP请求中的包体，该参数只在 proxy_pass或 fastcgi_pass中有意义 
$request_body_file 表示 HTTP请求中的包体存储的临时文件名 
$request_completion 当请求已经全部完成时，其值为 “ok”。若没有完成，就要返回客户端，则其值为空字符串；或者在断点续传等情况下使用 HTTP range访问的并不是文件的最后一块，那么其值也是空字符串。
$request_method 表示 HTTP请求的方法名，如 GET、PUT、POST等 
$scheme 表示 HTTP scheme，如在请求 https://nginx.com/中表示 https 
$server_addr 表示服务器地址 
$server_name 表示服务器名称 
$server_port 表示服务器端口 
$server_protocol 表示服务器向客户端发送响应的协议，如 HTTP/1.1或 HTTP/1.0

发表于 更新于 分类于 本文字数： 241 阅读时长 ≈ 1 分钟

nginx 教程之 docker 化安装

1.Why docker

因为要依赖很多lib,安装复杂，提高了学习和使用的难度，所以推荐使用docker 部署，可以快速迁移，快速部署，更多优点详见docker官网

2.部署

这里我们选择官方镜像,使用文档也可以在这个页面内找到。

使用完整nginx配置文件替换默认配置信息

1
docker run --name=nginx --net=host -v /host/path/nginx.conf:/etc/nginx/nginx.conf -d nginx:1.13.7-alpine

当然还可以继承默认配置，这样使用

1
docker run --name=nginx --net=host -v /host/path/nginx.conf:/etc/nginx/nginx.conf:ro -d nginx:1.13.7-alpine

3.nginx image默认配置

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

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

4.相关学习资源

发表于 更新于 分类于 本文字数： 512 阅读时长 ≈ 2 分钟

node.js模块学习总结

简介

主要是记录node.js模块学习总结，对于不是专业前端开发人员，往往不清楚到底nodejs比传统javascript多了哪些内容，针对自己自我学习，做个总结。

正文

首先推荐一个学习网站，觉得挺不错的

1
http://nqdeng.github.io/7-days-nodejs/

常识性

在开始学习之前，有三个新增关键字需要理解一下：

  1. require

    require函数用于在当前模块中加载和使用别的模块，传入一个模块名，返回一个模块导出对象

  2. exports

    exports对象是当前模块的导出对象，用于导出模块公有方法和属性。别的模块通过require函数使用当前模块时得到的就是当前模块的exports对象

  3. module

    通过module对象可以访问到当前模块的一些相关信息，但最多的用途是替换当前模块的导出对象

看到以上信息有个疑问，我们经常使用的是

code1

1
2
3
4
module.exports = function(){
     console.log('Hello World!');
}

和

code1

1
2
3
exports.hello = function () {
    console.log('Hello World!');
};

区别在哪里？

两点主要区别是在在于require在不同模块获取时，只是能获取该模块中的默认导出对象，即exports，只有通过exports.hello这种方式，即可获取该模块暴露的方法或者属性。而module.exports则是将默认的导出对象修改为一个函数。

内置对象

  • assert - 断言
  • Buffer - 缓冲器
  • child_process - 子进程
  • cluster - 集群
  • console - 控制台
  • crypto - 加密
  • dgram - 数据报
  • dns - 域名服务器
  • Error - 异常
  • events - 事件
  • fs - 文件系统
  • global - 全局变量
  • http - HTTP
  • https - HTTPS
  • module - 模块
  • net - 网络
  • os - 操作系统
  • path - 路径
  • process - 进程
  • querystring - 查询字符串
  • readline - 逐行读取
  • repl - 交互式解释器
  • stream - 流
  • string_decoder - 字符串解码器
  • timer - 定时器
  • tls - 安全传输层
  • tty - 终端
  • url - 网址
  • util - 实用工具
  • v8 - V8引擎
  • vm - 虚拟机
  • zlib - 压缩

试验的API

  • async_hooks
  • http2
  • inspector
  • napi
  • perf_hooks

详细使用 详见网址

发表于 更新于 分类于 本文字数： 194 阅读时长 ≈ 1 分钟

eclipse marketplace无法安装解决

问题简介

最近看到eclipse发布了oxygen,心里就痒痒了，想着升级一下新版本，体验一下新功能，下载以后想着安装一些生产力工具，但是发现竟然无法安装，要求我配置代理信息，并且报以下错误：

1
Proxy Authentication Required Error

心里一下子就有一千万个草泥马，再返回之前4.6版本，发现，这个版本竟然可以安装。。。。

解决方案

经过千辛万苦的google，别问我问啥没用baidu,因为没有卵用。

终于在程序员神器网站stackoverflow找到解决方案。
在eclipse.ini中增加以下内容：

1
-Dorg.eclipse.ecf.provider.filetransfer.excludeContributors=org.eclipse.ecf.provider.filetransfer.httpclient4

然后就可以欢快的下载各种插件了。

参考

stackoverflow

发表于 更新于 分类于 本文字数： 216 阅读时长 ≈ 1 分钟

Git remote 同步远程仓库

在正常开发过程中，我们会fork别人的项目，然后在本地开发，随着时间推移，fork源代码会更新，但是就出现了问题，怎么和源项目保持更新？

Git更新fork项目代码

1.添加远程仓库

添加：

1
git remote add source_respository_name https://github.com/TrumanDu/nav-dashboad.git

查看项目所有remote仓库名称：

1
2
3
$ git remote  
   origin  
   source_respository_name

2.同步源仓库信息到本地

1
$ git remote update source_repository_name

3.将源仓库信息merge到本地分支

1
2
$ git checkout branch_name  
$ git rebase source_repository_name/branch_name

GitHub开发协同流程

GitHub常用的开发协同流程为：

将别人的仓库fork成自己的origin仓库 → git clone origin仓库到本地 → 本地添加fork源仓库 → 工作前先git remote update下fork源保持代码较新 → coding → push回自己 → github上提出Push Request即可

发表于 更新于 分类于 本文字数： 159 阅读时长 ≈ 1 分钟

Git Commant Summary

1.git checkout

  • 撤销

使用– filte 可以撤销文件修改到上一次commit或者add状态

1
git checkout -- readme.md
  • 切换分支

直接跟分支名称，可以切换到指定分支上

1
git checkout master

2.git rebase

将指定分支合并到当前分支

1
git rebase origin

3.git remote

添加远程仓库

1
git add origin https://github.com/TrumanDu/nav-dashboad.git

4.git fetch

1
git fetch origin

丢弃本地改动与提交，从指定地方获取最新版代码到本地主分支

5.git reset

1
git reset --hard origin/master

丢弃本地改动与提交，从指定地方获取最新版代码到本地主分支

发表于 更新于 分类于 本文字数： 100 阅读时长 ≈ 1 分钟

在express站点中使用ejs模板引擎

选择ejs 是因为使用类似jsp技术，使用方式很像，页面可读性要比jade要好，个人习惯使用ejs。

配置模板

1
2
3
4
5
6
7
var express = require('express');

var app = express();
app.set('views', './views')
app.engine('.html', require('ejs').__express);
app.set('view engine', 'html');

后台代码

1
2
3
app.use('/demo', function (req, res, next) {
   res.render('demo', {'template':"ejs});
 });

模板代码

demo.html

1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="en">
<body>
      hello <%=template %>
</body>
</html>

发表于 更新于 分类于 本文字数： 147 阅读时长 ≈ 1 分钟

node.js读取json文件

目的

在node.js项目中如何获取json文件，本篇文章主要讲述两个方面：1.客户端 2.服务端。

实践

本次采用web框架为express

1.客户端
目录结构为：

1
2
3
4
5
/
/public/conf/demo.json
/index.js
/package.json
/index.html

index.js内容如下：

1
2
3
4
5
6
var express = require('express');
var app = express();
app.use(express.static('public'));
app.listen(80, function () {
  console.log('Example app listening on port 80!');
});

在index.html中获取如下：

1
2
3
$.getJSON('conf/demo.json', function (data) {
			console.log(data);
	})

2.服务端
index.js内容如下：

1
2
3
4
5
6
7
8
9
var express = require('express');
var app = express();
var CONFPATH = "./public/conf/demo.json";
var fs = require('fs');
var result = JSON.parse(fs.readFileSync(CONFPATH));
	console.log(result);
app.listen(80, function () {
  console.log('Example app listening on port 80!');
});

发表于 更新于 分类于 本文字数： 204 阅读时长 ≈ 1 分钟

Kibana之sentinl slack使用教程

简介

Slack是一个团队协作沟通平台，至于它的强大，就不在这里多说了，sentinl 集成slack,可以将监控告警发送至其中，这个平台支持PC和APP，可以让开发运维人员实时获取监控服务状态。

申请slack

  1. 注册账户
  2. 点击右上方按钮创建workspace
  3. 新建channel ,进入创建好的workspace，在左侧菜单栏创建，将该chanel设置成public
  4. 集成incoming-webhook,获取Webhook URL。详细步骤详见此处

kibana配置

在kibana.yml配置文件中增加以下内容

1
2
3
4
5
6
7
8
sentinl:
  settings:
     slack:
       active: true
       username: truman
       hook: 'https://hooks.slack.com/services/******/*****/*****'
       channel: '#messagesend'

其中hook配置项为Webhook URL

sentinl 配置slack action

在sentinl中增加slack action

1
2
3
4
5
6
7
"slack action": {
        "throttle_period": "0h0m1s",
        "slack": {
          "channel": "#messagesend",
          "message": "payload.hits.total:{{payload.hits.total}}",
          "stateless": false
        }
0%