默默 – 默默的点滴

vue中router-view与父组件之间的通信

在项目当中，遇到一个问题。当父页面的某个属性变化时，需要router-view中的页面根据不同的值进行不同的操作。

仔细想一下，其实类似父子组件之间的传值。

实现过程如下：

父组件绑定属性和事件

<template>
   <router-view v-on:test="testP" v-bind:msg="msg"></router-view>
</template>
<script type="text/javascript">
   export default {
      data() {
         return {
            msg: "把我带给router-view吧！"
         }
      },
      methods: {
        testP: function (data) {
          // 从router-view返回来的数据
          console.log(data)
          // 打印出来就是
          // 把我带给父组件吧！第一次！
          // 把我带给父组件吧！第二次！
        }
      }
   }
</script>

<router-view v-on:test="testP" v-bind:msg="msg"></router-view>

</template>

export default {

data() {

return {

msg: "把我带给router-view吧！"

}

methods: {

testP: function (data) {

// 从router-view返回来的数据

console.log(data)

// 打印出来就是

// 把我带给父组件吧！第一次！

// 把我带给父组件吧！第二次！

}

</script>

router-view关联的属性和监听动作

<template>
   <div>{{msg}}</div>
</template>
<script type="text/javascript">
   export default {
      props:['msg'],
      data() {
         return {}
      },
      watch: {
        // 监听父组件的msg的变化
        msg: function() {
          console.log(this.msg)
          // 打印出来就是
          // 把我带给router-view吧！
        }
      },
      mounted() {
        // this.init()
      },
      methods: {
        init() {
          // 第一次向父组件传值
          this.$emit("test", "把我带给父组件吧！第一次！")
          // 第二次向父组件传值
          this.$emit("test", "把我带给父组件吧！第二次！")
        }
      }
   }

</template>

export default {

props:['msg'],

data() {

return {}

watch: {

// 监听父组件的msg的变化

msg: function() {

console.log(this.msg)

// 打印出来就是

// 把我带给router-view吧！

}

mounted() {

// this.init()

methods: {

init() {

// 第一次向父组件传值

this.$emit("test", "把我带给父组件吧！第一次！")

// 第二次向父组件传值

this.$emit("test", "把我带给父组件吧！第二次！")

}

参考链接

Evaluating JavaScript code via import()

The import() operator lets us dynamically load ECMAScript modules. But they can also be used to evaluate JavaScript code (as Andrea Giammarchi recently pointed out to me), as an alternative to eval(). This blog post explains how that works.

`eval()` does not support `export` and `import`

A significant limitation of eval() is that it doesn’t support module syntax such as export and import.

If we use import() instead of eval(), we can actually evaluate module code, as we will see later in this blog post.

In the future, we may get Realms which are, roughly, a more powerful eval() with support for modules.

Evaluating simple code via `import()`

Let’s start by evaluating a console.log() via import():

const js = `console.log('Hello everyone!');`;
const encodedJs = encodeURIComponent(js);
const dataUri = 'data:text/javascript;charset=utf-8,'
  + encodedJs;
import(dataUri);

// Output:
// 'Hello everyone!'

const js = `console.log('Hello everyone!');`;

const encodedJs = encodeURIComponent(js);

const dataUri = 'data:text/javascript;charset=utf-8,'

+ encodedJs;

import(dataUri);

// Output:

// 'Hello everyone!'

What is going on here?

First we create a so-called data URI. The protocol of this kind of URI is data:. The remainder of the URI encodes the full resource instead pointing to it. In this case, the data URI contains a complete ECMAScript module – whose content type is text/javascript.
Then we dynamically import this module and therefore execute it.

Warning: This code only works in web browsers. On Node.js, import() does not support data URIs.

Accessing an export of an evaluated module

The fulfillment value of the Promise returned by import() is a module namespace object. That gives us access to the default export and the named exports of the module. In the following example, we access the default export:

const js = `export default 'Returned value'`;
const dataUri = 'data:text/javascript;charset=utf-8,'
  + encodeURIComponent(js);
import(dataUri)
  .then((namespaceObject) => {
    assert.equal(namespaceObject.default, 'Returned value');
  })
  .catch((err) => {
     console.log(err.message); // "Importing a module script failed."
     // apply some logic, e.g. show a feedback for the user
   });

const js = `export default 'Returned value'`;

const dataUri = 'data:text/javascript;charset=utf-8,'

+ encodeURIComponent(js);

import(dataUri)

.then((namespaceObject) => {

assert.equal(namespaceObject.default, 'Returned value');

})

.catch((err) => {

console.log(err.message); // "Importing a module script failed."

// apply some logic, e.g. show a feedback for the user

});

Creating data URIs via tagged templates

With an appropriate function esm (whose implementation we’ll see later), we can rewrite the previous example and create the data URI via a tagged template:

const dataUri = esm`export default 'Returned value'`;
import(dataUri)
  .then((namespaceObject) => {
    assert.equal(namespaceObject.default, 'Returned value');
  })
  .catch((err) => {
     console.log(err.message); // "Importing a module script failed."
     // apply some logic, e.g. show a feedback for the user
   });

const dataUri = esm`export default 'Returned value'`;

import(dataUri)

.then((namespaceObject) => {

assert.equal(namespaceObject.default, 'Returned value');

})

.catch((err) => {

console.log(err.message); // "Importing a module script failed."

// apply some logic, e.g. show a feedback for the user

});

The implementation of esm looks as follows:

function esm(templateStrings, ...substitutions) {
  let js = templateStrings.raw[0];
  for (let i=0; i<substitutions.length; i++) {
    js += substitutions[i] + templateStrings.raw[i+1];
  }
  return 'da

function esm(templateStrings, ...substitutions) {

let js = templateStrings.raw[0];

for (let i=0; i<substitutions.length; i++) {

js += substitutions[i] + templateStrings.raw[i+1];

}

return 'da

For the encoding, we have switched from charset=utf-8 to base64. Compare:

Source code: 'a' < 'b'
Data URI 1: data:text/javascript;charset=utf-8,'a'%20%3C%20'b'
Data URI 2: data:text/javascript;base64,J2EnIDwgJ2In

Each of the two ways of encoding has different pros and cons:

Benefits of charset=utf-8 (percent-encoding):
- Much of the source code is still readable.
Benefits of base64:
- The URIs are usually shorter.
- Easier to nest because it doesn’t contain special characters such as apostrophes. We’ll see an example of nesting in the next section.

btoa() is a global utility function that encodes a string via base 64. Caveats:

It is not available on Node.js.
It should only be used for characters whose Unicode code points range from 0 to 255.

Evaluating a module that imports another module

With tagged templates, we can nest data URIs and encode a module m2 that imports another module m1:

const m1 = esm`export function f() { return 'Hello!' }`;
const m2 = esm`import {f} from '${m1}'; export default f()+f();`;
import(m2)
  .then(ns => assert.equal(ns.default, 'Hello!Hello!'))
  .catch((err) => {
     console.log(err.message); // "Importing a module script failed."
     // apply some logic, e.g. show a feedback for the user
   });

const m1 = esm`export function f() { return 'Hello!' }`;

const m2 = esm`import {f} from '${m1}'; export default f()+f();`;

import(m2)

.then(ns => assert.equal(ns.default, 'Hello!Hello!'))

.catch((err) => {

console.log(err.message); // "Importing a module script failed."

// apply some logic, e.g. show a feedback for the user

});

参考链接

增加VBox显存到256M

Virtual Box supports up to 256 MB of video RAM. This can not be set using the slider of the Virtual Box Manager.

To make full use of all supported memory we can issue the following command in a terminal:

$ VBoxManage modifyvm "Name of VM" --vram 256

1	$ VBoxManage modifyvm "Name of VM" --vram 256

Before we change settings such as the video RAM a pre-existing virtual machine has to be shut down.

Note that for 3D video hardware acceleration from the guest addition’s video driver the physical RAM of the host graphics card will be passed through. The video RAM settings of the virtual machine will not affect this.

参考链接

增加VBox显存到256M

判断网页是通过PC端还是移动终端打开的

通过判断打开设备，跳转不同页面，可以根据 User-Agent 来区分：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
} else {
    window.location.href = "";        //电脑
}

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

window.location.href = ""; //手机

} else {

window.location.href = ""; //电脑

}

也可以执行其他操作：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    alert('您正在通过手机访问');
} else {
    alert("您在PC端访问");
}

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

alert('您正在通过手机访问');

} else {

alert("您在PC端访问");

}

JS判断客户端是否是iOS或者Android手机移动端：

通过判断浏览器的 userAgent，用正则来判断手机是否是ios和Android客户端。代码如下：

<script type="text/javascript">
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    alert('是否是Android：'+isAndroid);
    alert('是否是iOS：'+isiOS);
</script>

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

alert('是否是Android：'+isAndroid);

alert('是否是iOS：'+isiOS);

</script>

下面一个比较全面的浏览器检查函数，提供更多的检查内容，你可以检查是否是移动端（Mobile）、ipad、iphone、微信、QQ等。

第一种：

<script type="text/javascript">
    //判断访问终端
    var browser={
        versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
                iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                qq: u.match(/\sQQ/i) == " qq" //是否QQ
            };
        }(),
        language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }
    //使用方法：
    //判断是否IE内核
    if(browser.versions.trident){ alert("is IE"); }
    //判断是否webKit内核
    if(browser.versions.webKit){ alert("is webKit"); }
    //判断是否移动端
    if(browser.versions.mobile||browser.versions.android||browser.versions.ios){
        alert("移动端"); 
    }
</script>

//判断访问终端

var browser={

versions:function(){

var u = navigator.userAgent, app = navigator.appVersion;

return {

trident: u.indexOf('Trident') > -1, //IE内核

presto: u.indexOf('Presto') > -1, //opera内核

webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端

iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器

iPad: u.indexOf('iPad') > -1, //是否iPad

webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部

weixin: u.indexOf('MicroMessenger') > -1, //是否微信（2015-01-22新增）

qq: u.match(/\sQQ/i) == " qq" //是否QQ

};

}(),

language:(navigator.browserLanguage || navigator.language).toLowerCase()

}

//使用方法：

//判断是否IE内核

if(browser.versions.trident){ alert("is IE"); }

//判断是否webKit内核

if(browser.versions.webKit){ alert("is webKit"); }

//判断是否移动端

if(browser.versions.mobile||browser.versions.android||browser.versions.ios){

alert("移动端");

}

</script>

检测浏览器语言

currentLang = navigator.language;   //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
    currentLang = navigator.browserLanguage;
}
alert(currentLang);

currentLang = navigator.language; //判断除IE外其他浏览器使用语言

if(!currentLang){//判断IE浏览器使用语言

currentLang = navigator.browserLanguage;

}

alert(currentLang);

第二种：

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent);  
    window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent); 
    window.location.href ="Android.html";
} else {
    window.location.href ="pc.html";
};

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

//alert(navigator.userAgent);

window.location.href ="iPhone.html";

} else if (/(Android)/i.test(navigator.userAgent)) {

//alert(navigator.userAgent);

window.location.href ="Android.html";

} else {

window.location.href ="pc.html";

};

也可以通过这样来适配，然后直接转跳到移动端页面：

function mobile_device_detect(url){
  var thisOS=navigator.platform;
  var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
  for(var i=0;i<os.length;i++){
    if(thisOS.match(os[i])){
      window.location.href=url;
    }
  }
  if(navigator.platform.indexOf('iPad') != -1){
    window.location.href=url;
  }
  var check = navigator.appVersion;
  if( check.match(/linux/i) ){
    if(check.match(/mobile/i) || check.match(/X11/i)){
      window.location.href=url;
    }
  }
}

function mobile_device_detect(url){

var thisOS=navigator.platform;

var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");

for(var i=0;i<os.length;i++){

if(thisOS.match(os[i])){

window.location.href=url;

}

if(navigator.platform.indexOf('iPad') != -1){

window.location.href=url;

}

var check = navigator.appVersion;

if( check.match(/linux/i) ){

if(check.match(/mobile/i) || check.match(/X11/i)){

window.location.href=url;

}

参考链接

判断网页是通过PC端还是移动终端打开的

CSS高度自适应铺满全屏

HTML:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>dddd</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
 
<body class="HolyGrail">
    <header>...</header>
    <div class="HolyGrail-body ">
        <main class="HolyGrail-content">...</main>
        <nav class="HolyGrail-nav">...</nav>
        <aside class="HolyGrail-ads">...</aside>
    </div>
    <footer>...</footer>
</body>

<!DOCTYPE html>

<html>

<head>

</head>

</div>

</body>

CSS:

.HolyGrail {
    display: flex;
    flex-direction: column;
    background-color: blueviolet;
}
 
header,
footer {
    height: 100px;
    background-color: aquamarine;
}
 
body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
}
 
.HolyGrail-body {
    flex: 1;
    background-color: brown;
}

.HolyGrail {

display: flex;

flex-direction: column;

background-color: blueviolet;

}

header,

footer {

height: 100px;

background-color: aquamarine;

}

body {

padding: 0;

margin: 0;

min-height: 100vh;

}

.HolyGrail-body {

flex: 1;

background-color: brown;

}

这里需要注意的是设置body的min-height: 100vh;以及margin: 0;

vw和vh

vm、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下：

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：取当前Vw和Vh中较小的那一个值
vmax：取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px，很容易实现与同屏幕等高的框。

参考链接

spring boot设置favicon，favicon不生效，不成功，不起作用

Favicon配置

默认的Favicon图标

关闭默认图标
在application.properties中添加：

spring.mvc.favicon.enabled=false

1	spring.mvc.favicon.enabled=false

或者（我这个有效果）：

spring.favicon.enabled = false

1	spring.favicon.enabled = false

效果具体原因：https://jira.spring.io/browse/SPR-12851

spring boot设置favicon，favicon不生效，不成功，不起作用

springboot显示的是一片叶子，我们如何使用自己的favicon呢？

1.将favicon.icon放到resources目录下例如：/public,/static等等

2.完成上面的步骤还不能显示，还需在你的页面的head标签添加代码

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
    <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
    <link rel="bookmark" th:href="@{/favicon.ico}" type="image/x-icon"/>
</head>

<head>

</head>

3.注意我使用的thymeleaf所以是以上代码片段如果你不是请这样添加

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <link href="/favicon.ico" rel="icon" type="image/x-icon"/>
    <link href="/favicon.ico" rel="bookmark" type="image/x-icon"/>
</head>

<head>

</head>

参考链接

spring boot设置favicon，favicon不生效，不成功，不起作用

fail2ban with OpenVPN(ubuntu 20.04)

This page describes how to set up fail2ban with OpenVPN 2.4.7 (tested on ubuntu 20.04)

Create /etc/fail2ban/filter.d/openvpn.conf containing:

# Fail2Ban filter for selected OpenVPN rejections
#
#

[Definition]

# Example messages (other matched messages not seen in the testing server's logs):
# Fri Sep 23 11:55:36 2016 TLS Error: incoming packet authentication failed from [AF_INET]59.90.146.160:51223
# Thu Aug 25 09:36:02 2016 117.207.115.143:58922 TLS Error: TLS handshake failed

failregex = ^ TLS Error: incoming packet authentication failed from \[AF_INET\]<HOST>:\d+$
            ^ <HOST>:\d+ Connection reset, restarting
            ^ <HOST>:\d+ TLS Auth Error
            ^ <HOST>:\d+ TLS Error: TLS handshake failed$
            ^ <HOST>:\d+ VERIFY ERROR

ignoreregex =

# Fail2Ban filter for selected OpenVPN rejections

[Definition]

# Example messages (other matched messages not seen in the testing server's logs):

# Fri Sep 23 11:55:36 2016 TLS Error: incoming packet authentication failed from [AF_INET]59.90.146.160:51223

# Thu Aug 25 09:36:02 2016 117.207.115.143:58922 TLS Error: TLS handshake failed

failregex = ^ TLS Error: incoming packet authentication failed from \[AF_INET\]<HOST>:\d+$

^ <HOST>:\d+ Connection reset, restarting

^ <HOST>:\d+ TLS Auth Error

^ <HOST>:\d+ TLS Error: TLS handshake failed$

^ <HOST>:\d+ VERIFY ERROR

ignoreregex =

Create /etc/fail2ban/jail.local containing:

# Fail2Ban configuration fragment for OpenVPN

[openvpn]
enabled  = true
port     = 1194
protocol = udp
filter   = openvpn
logpath  = /var/log/openvpn/openvpn.log
maxretry = 3

# Fail2Ban configuration fragment for OpenVPN

[openvpn]

enabled = true

port = 1194

protocol = udp

filter = openvpn

logpath = /var/log/openvpn/openvpn.log

maxretry = 3

To effect the configuration change:

$ service fail2ban restart

1	$ service fail2ban restart

To test the configuration change, check /var/log/fail2ban.log initially for service start messages and later for WARNING [openvpn] Ban and Unban messages.

参考链接

HOWTO fail2ban with OpenVPN

禁止macOS系统产生.DS_Store文件的方法

Mac经常会产生 .DS_Store 的隐藏文件，虽然在 Mac 上看不到，但是有时用了人家的 U 盘或把 U 盘拿到 Windows 系统上用，就会看到。

.DS_Store 是 Mac OS 保存文件夹的自定义属性的隐藏文件，如文件的图标位置或背景色，相当于Windows 的 desktop.ini。

禁止 .DS_Store 生成：
打开 “终端” ，复制黏贴下面的命令，回车执行，重启Mac即可生效。

$ defaults write com.apple.desktopservices DSDontWriteNetworkStores -bool TRUE

1

$ defaults write com.apple.desktopservices DSDontWriteNetworkStores -bool TRUE
恢复 .DS_Store 生成：

$ defaults delete com.apple.desktopservices DSDontWriteNetworkStores

1

$ defaults delete com.apple.desktopservices DSDontWriteNetworkStores

参考链接

JUnit中对Exception的判断

对于使用验证 Test Case 方法中抛出的异常，我起初想到的是一种比较简单的方法，但是显得比较繁琐：

    @Test
    public void testOldStyle() {
        try {
            double value = Math.random();
            if(value < 0.5) {
                throw new IllegalStateException("test");
            }
            Assert.fail("Expect IllegalStateException");
        } catch(IllegalStateException e) {
        }
    }

@Test

public void testOldStyle() {

try {

double value = Math.random();

if(value < 0.5) {

throw new IllegalStateException("test");

}

Assert.fail("Expect IllegalStateException");

} catch(IllegalStateException e) {

}

Google了一下，找到另外几种更加方便的方法：１，使用Test注解中的expected字段判断抛出异常的类型。2，使用ExpectedException的Rule注解。
个人偏好用Test注解中的expected字段，它先的更加简洁，不管读起来还是写起来都很方便，并且一目了然：

    @Test(expected = IllegalStateException.class)
    public void testThrowException() {
        throw new IllegalStateException("test");
    }
    
    @Test(expected = IllegalStateException.class)
    public void testNotThrowException() {
        System.out.println("No Exception throws");
    }

@Test(expected = IllegalStateException.class)

public void testThrowException() {

throw new IllegalStateException("test");

}

@Test(expected = IllegalStateException.class)

public void testNotThrowException() {

System.out.println("No Exception throws");

}

对Rule注解的使用（只有在JUnit4.7以后才有这个功能），它提供了更加强大的功能，它可以同时检查异常类型以及异常消息内容，这些内容可以只包含其中的某些字符，ExpectedException还支持使用hamcrest中的Matcher，默认使用IsInstanceOf和StringContains Matcher。在BlockJUnit4ClassRunner的实现中，每一个Test Case运行时都会重新创建Test Class的实例，因而在使用ExpectedException这个Rule时，不用担心在多个Test Case之间相互影响的问题：

    @Rule
    public final ExpectedException expectedException = ExpectedException.none();
    
    @Test
    public void testThrowExceptionWithRule() {
        expectedException.expect(IllegalStateException.class);
        
        throw new IllegalStateException("test");
    }
    
    @Test
    public void testThrowExceptionAndMessageWithRule() {
        expectedException.expect(IllegalStateException.class);
        expectedException.expectMessage("fail");
        
        throw new IllegalStateException("expect fail");
    }

@Rule

public final ExpectedException expectedException = ExpectedException.none();

@Test

public void testThrowExceptionWithRule() {

expectedException.expect(IllegalStateException.class);

throw new IllegalStateException("test");

}

@Test

public void testThrowExceptionAndMessageWithRule() {

expectedException.expect(IllegalStateException.class);

expectedException.expectMessage("fail");

throw new IllegalStateException("expect fail");

}

在stackoverflow中还有人提到了使用google-code中的catch-exception工程，今天没时间看了，回去好好研究一下。

地址是：http://code.google.com/p/catch-exception/

参考链接

JUnit中对Exception的判断

PBKDF2加密的实现

PBKDF2(Password-Based Key Derivation Function)

通过哈希算法进行加密。由于哈希算法是单向的，能够将不论什么大小的数据转化为定长的“指纹”，并且无法被反向计算。

另外，即使数据源仅仅修改了一丁点。哈希的结果也会全然不同。

这种特性使得它很适合用于保存password。由于我们须要加密后的password无法被解密，同一时候也能保证正确校验每一个用户的password。可是哈希加密能够通过字典攻击和暴力攻击破解。

password加盐。盐是一个加入到用户的password哈希过程中的一段随机序列。

这个机制可以防止通过预先计算结果的彩虹表破解。每一个用户都有自己的盐，这种结果就是即使用户的password同样。通过加盐后哈希值也将不同。

为了校验password是否正确，我们须要储存盐值。通常和password哈希值一起存放在账户数据库中。或者直接存为哈希字符串的一部分。

import java.math.BigInteger;
import java.security.NoSuchAlgorithmException;
import java.security.SecureRandom;
import java.security.spec.InvalidKeySpecException;
import java.security.spec.KeySpec;

import javax.crypto.SecretKeyFactory;
import javax.crypto.spec.PBEKeySpec;

public class PasswordEncryption {

    public static final String PBKDF2_ALGORITHM = "PBKDF2WithHmacSHA1";

    /**
     * 盐的长度
     */
    public static final int SALT_BYTE_SIZE = 32 / 2;

    /**
     * 生成密文的长度
     */
    public static final int HASH_BIT_SIZE = 128 * 4;

    /**
     * 迭代次数
     */
    public static final int PBKDF2_ITERATIONS = 1000;

    /**
     * 对输入的password进行验证
     *
     * @param attemptedPassword 待验证的password
     * @param encryptedPassword 密文
     * @param salt              盐值
     * @return 是否验证成功
     * @throws NoSuchAlgorithmException
     * @throws InvalidKeySpecException
     */
    public static boolean authenticate(String attemptedPassword, String encryptedPassword, String salt)
            throws NoSuchAlgorithmException, InvalidKeySpecException {
        // 用同样的盐值对用户输入的password进行加密
        String encryptedAttemptedPassword = getEncryptedPassword(attemptedPassword, salt);
        // 把加密后的密文和原密文进行比較，同样则验证成功。否则失败
        return encryptedAttemptedPassword.equals(encryptedPassword);
    }

    /**
     * 生成密文
     *
     * @param password 明文password
     * @param salt     盐值
     * @return
     * @throws NoSuchAlgorithmException
     * @throws InvalidKeySpecException
     */
    public static String getEncryptedPassword(String password, String salt) throws NoSuchAlgorithmException,
            InvalidKeySpecException {

        KeySpec spec = new PBEKeySpec(password.toCharArray(), fromHex(salt), PBKDF2_ITERATIONS, HASH_BIT_SIZE);
        SecretKeyFactory f = SecretKeyFactory.getInstance(PBKDF2_ALGORITHM);
        return toHex(f.generateSecret(spec).getEncoded());
    }

    /**
     * 通过提供加密的强随机数生成器 生成盐
     *
     * @return
     * @throws NoSuchAlgorithmException
     */
    public static String generateSalt() throws NoSuchAlgorithmException {
        SecureRandom random = SecureRandom.getInstance("SHA1PRNG");
        byte[] salt = new byte[SALT_BYTE_SIZE];
        random.nextBytes(salt);

        return toHex(salt);
    }

    /**
     * 十六进制字符串转二进制字符串
     *
     * @param hex the hex string
     * @return the hex string decoded into a byte array
     */
    private static byte[] fromHex(String hex) {
        byte[] binary = new byte[hex.length() / 2];
        for (int i = 0; i < binary.length; i++) {
            binary[i] = (byte) Integer.parseInt(hex.substring(2 * i, 2 * i + 2), 16);
        }
        return binary;
    }

    /**
     * 二进制字符串转十六进制字符串
     *
     * @param array the byte array to convert
     * @return a length*2 character string encoding the byte array
     */
    private static String toHex(byte[] array) {
        BigInteger bi = new BigInteger(1, array);
        String hex = bi.toString(16);
        int paddingLength = (array.length * 2) - hex.length();
        if (paddingLength > 0)
            return String.format("%0" + paddingLength + "d", 0) + hex;
        else
            return hex;
    }
}

100

101

102

103

104

105

106

107

import java.math.BigInteger;

import java.security.NoSuchAlgorithmException;

import java.security.SecureRandom;

import java.security.spec.InvalidKeySpecException;

import java.security.spec.KeySpec;

import javax.crypto.SecretKeyFactory;

import javax.crypto.spec.PBEKeySpec;

public class PasswordEncryption {

public static final String PBKDF2_ALGORITHM = "PBKDF2WithHmacSHA1";

/**

* 盐的长度

public static final int SALT_BYTE_SIZE = 32 / 2;

/**

* 生成密文的长度

public static final int HASH_BIT_SIZE = 128 * 4;

/**

* 迭代次数

public static final int PBKDF2_ITERATIONS = 1000;

/**

* 对输入的password进行验证

* @param attemptedPassword 待验证的password

* @param encryptedPassword 密文

* @param salt 盐值

* @return 是否验证成功

* @throws NoSuchAlgorithmException

* @throws InvalidKeySpecException

public static boolean authenticate(String attemptedPassword, String encryptedPassword, String salt)

throws NoSuchAlgorithmException, InvalidKeySpecException {

// 用同样的盐值对用户输入的password进行加密

String encryptedAttemptedPassword = getEncryptedPassword(attemptedPassword, salt);

// 把加密后的密文和原密文进行比較，同样则验证成功。否则失败

return encryptedAttemptedPassword.equals(encryptedPassword);

}

/**

* 生成密文

* @param password 明文password

* @param salt 盐值

* @return

* @throws NoSuchAlgorithmException

* @throws InvalidKeySpecException

public static String getEncryptedPassword(String password, String salt) throws NoSuchAlgorithmException,

InvalidKeySpecException {

KeySpec spec = new PBEKeySpec(password.toCharArray(), fromHex(salt), PBKDF2_ITERATIONS, HASH_BIT_SIZE);

SecretKeyFactory f = SecretKeyFactory.getInstance(PBKDF2_ALGORITHM);

return toHex(f.generateSecret(spec).getEncoded());

}

/**

* 通过提供加密的强随机数生成器生成盐

* @return

* @throws NoSuchAlgorithmException

public static String generateSalt() throws NoSuchAlgorithmException {

SecureRandom random = SecureRandom.getInstance("SHA1PRNG");

byte[] salt = new byte[SALT_BYTE_SIZE];

random.nextBytes(salt);

return toHex(salt);

}

/**

* 十六进制字符串转二进制字符串

* @param hex the hex string

* @return the hex string decoded into a byte array

private static byte[] fromHex(String hex) {

byte[] binary = new byte[hex.length() / 2];

for (int i = 0; i < binary.length; i++) {

binary[i] = (byte) Integer.parseInt(hex.substring(2 * i, 2 * i + 2), 16);

}

return binary;

}

/**

* 二进制字符串转十六进制字符串

* @param array the byte array to convert

* @return a length*2 character string encoding the byte array

private static String toHex(byte[] array) {

BigInteger bi = new BigInteger(1, array);

String hex = bi.toString(16);

int paddingLength = (array.length * 2) - hex.length();

if (paddingLength > 0)

return String.format("%0" + paddingLength + "d", 0) + hex;

else

return hex;

}

首先要生成一个盐值salt，再把原始password和salt加密得到密文。验证的时候，把用户输入的password和同样的盐值salt使用同样的加密算法得到一个密文，将这个密文和原密文相比較，同样则验证通过，反之则不通过。

public static void main(String[] args) {
    String password = "test";
    String salt;
    String ciphertext;
    try {
        salt = PasswordEncryption.generateSalt();
        ciphertext = PasswordEncryption.getEncryptedPassword(password, salt);
        boolean result = PasswordEncryption.authenticate(password, ciphertext, salt);

        System.out.println(password + "  " + password.length());
        System.out.println(salt + "  " + salt.length());
        System.out.println(ciphertext + "  " + ciphertext.length());
        if (result) {
            System.out.println("succeed");
        } else {
            System.out.println("failed");
        }
    } catch (NoSuchAlgorithmException e) {
        System.out.println("NoSuchAlgorithmException");
    } catch (InvalidKeySpecException e) {
        System.out.println("InvalidKeySpecException");
    }
}

public static void main(String[] args) {

String password = "test";

String salt;

String ciphertext;

try {

salt = PasswordEncryption.generateSalt();

ciphertext = PasswordEncryption.getEncryptedPassword(password, salt);

boolean result = PasswordEncryption.authenticate(password, ciphertext, salt);

System.out.println(password + " " + password.length());

System.out.println(salt + " " + salt.length());

System.out.println(ciphertext + " " + ciphertext.length());

if (result) {

System.out.println("succeed");

} else {

System.out.println("failed");

}

} catch (NoSuchAlgorithmException e) {

System.out.println("NoSuchAlgorithmException");

} catch (InvalidKeySpecException e) {

System.out.println("InvalidKeySpecException");

}

測试结果为：

test  4
3aca9ca3fa80158b765ece7d0a45f2e8  32
592cb30e95efc720c5accf425ed5f2fe46aa332d9980e6daa234797de49cda731c2c18e667b4dd71ba33797a3dcddd312ff9b03d802bf1cc09aacb2a176cf741  128
succeed

test 4

3aca9ca3fa80158b765ece7d0a45f2e8 32

592cb30e95efc720c5accf425ed5f2fe46aa332d9980e6daa234797de49cda731c2c18e667b4dd71ba33797a3dcddd312ff9b03d802bf1cc09aacb2a176cf741 128

succeed

作者：默默

vue中router-view与父组件之间的通信

参考链接

Evaluating JavaScript code via import()

`eval()` does not support `export` and `import`

Evaluating simple code via `import()`

Accessing an export of an evaluated module

Creating data URIs via tagged templates

Evaluating a module that imports another module

Further reading

参考链接

增加VBox显存到256M

参考链接

判断网页是通过PC端还是移动终端打开的

参考链接

CSS高度自适应铺满全屏

vw和vh

参考链接

spring boot设置favicon，favicon不生效，不成功，不起作用

Favicon配置

spring boot设置favicon，favicon不生效，不成功，不起作用

参考链接

fail2ban with OpenVPN(ubuntu 20.04)

参考链接

禁止macOS系统产生.DS_Store文件的方法

参考链接

JUnit中对Exception的判断

参考链接

PBKDF2加密的实现

参考链接

2021年4月
一	二	三	四	五	六	日
			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

参考链接

eval() does not support export and import

Evaluating simple code via import()

Accessing an export of an evaluated module

Creating data URIs via tagged templates

Evaluating a module that imports another module

Further reading

参考链接

参考链接

参考链接

vw和vh

参考链接

Favicon配置

spring boot设置favicon，favicon不生效，不成功，不起作用

参考链接

参考链接

参考链接

参考链接

参考链接

`eval()` does not support `export` and `import`

Evaluating simple code via `import()`