因为现在运营商不给公网 IPV4 了，所以我最近在搞敲 IPV6，我这边的联通和移动都有给公网 IPV6，当然并不是固定 IP，所以需要 DDNS 软件来更新域名的 DNS 解析记录。这样我只需要使用我的域名就能访问家里面的 web 服务了。

项目地址

GitHub - timothymiller/cloudflare-ddns: Dynamic DNS (DDNS) service based on Cloudflare! Access your home network remotely via a custom domain name without a static IP!

环境要求

• Python 版本 3.5 以上

使用方法

首先从 GitHub 将源码拉取下来，不要下载 Releases 里的代码，那份代码版本太旧了运行有问题……

git clone https://github.com/timothymiller/cloudflare-ddns.git

复制一份 config-example.json 并命名为 config.json

cp config-example.json config.json

文件是长这样的：

{
  "cloudflare": [
    {
      "authentication": {
        "api_token": "api_token_here",
        "api_key": {
          "api_key": "api_key_here",
          "account_email": "your_email_here"
        }
      },
      "zone_id": "your_zone_id_here",
      "subdomains": [
        {
          "name": "",
          "proxied": false
        },
        {
          "name": "remove_or_replace_with_your_subdomain",
          "proxied": false
        }
      ]
    }
  ],
  "a": true,
  "aaaa": true,
  "purgeUnknownRecords": false,
  "ttl": 300
}

api_token 和 api_key 两种认证方式二选一，具体的 token 和 key 还有 zone_id 可以去 cloudflare 里获得。注意使用了其中一种后另一种的属性和值直接保留原样就好不用去动它，比如你填了 api_key，api_token 的值就保留 api_token_here 就好，如果直接删掉 api_token 这个属性反而会报错。

由于我只需要配置 IPV6 的 DDNS，所以 "a": true 这里设置成 false 就好。

最终的配置文件会类似这样：

{
  "cloudflare": [
    {
      "authentication": {
          "api_token": "api_token_here",
          "api_key": {
              "api_key": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
              "account_email": "xxxxxx@xxx.com"
          }
      },
      "zone_id": "xxxxxxxxxxxxxxxxxxxxxx",
      "subdomains": [
        {
          "name": "ddns",
          "proxied": false
        }
      ],
      "proxied": false
    }
  ],
  "a": false,
  "aaaa": true,
  "purgeUnknownRecords": false,
  "ttl": 300
}

配置完后运行一编试试：

./start-sync.sh

定时任务

使用 crontab 配置定时执行该脚本：

crontab -e

配置文件里加入下面内容：

*/15 * * * * /opt/cloudflare-ddns/start-sync.sh

这样就会每 15 分钟执行一次脚本，去检查公网 IPV6 地址是否有变化。

突然发现这个坑一下子就已经一个月了……赶紧更新一下以表示我还没忘记。、

新手在使用Vue的时候可能会有这么一个疑惑，那就是在Vue里要如何使用ajax去请求后端。毕竟使用jQuery的时候直接就能用方便的$.ajax()方法。

然而Vue里是没有实现ajax的，所以要么自己去实现一个，要么去使用第三方实现，而Vue官方推荐的便是axios。

Vue中使用axios

axios是一个基于promise的HTTP库，项目地址是https://github.com/axios/axios。

要在Vue中集成axios，首先我们进入Vue项目的根目录，使用npm安装：

npm install --save axios

然后，在main.js中就可以引入axios，并将其添加到Vue的原型属性中：

// main.js
import Axios from 'axios'
Vue.prototype.$axios = Axios;

然后就可以在项目中使用axios访问后端接口了！

详细的使用方式可以参考这个文档：https://www.kancloud.cn/yunye/axios/234845

这里只举几个示例代码：

// get方式
this.$axios.get('/story/getStory', {
          params: {
            storyId: this.storyId
          }
        })
          .then(response => {
            // do something
            })
          .catch(error => {
            // do something
          });
 
// post方式
this.$axios.post('/user/login',{
            username: this.username,
            password: this.password,
            captcha: this.captcha
          })
            .then(response => {
              // do something
            })
            .catch(error => {
              // do something
            })

开发环境下临时解决跨域问题

在开发的时候很可能我们的服务端程序和客户端程序不是用同一个web容器运行的，这样就会出现跨域问题，如果实际上线时并不会分开部署前后端，那么可以用下面的方法在开发环境下临时解决跨域问题。

1.修改vue.config.js文件的配置

// vue.config.js
module.exports = {
    lintOnSave: false,
    devServer: {
        port: 8181,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

主要关注的是devServer配置项下的proxy一项，这里的配置意为将所有/api的地址代理到http://localhost:8080，这个target地址就填写服务端的对应地址。

这样，运行Vue-Cli测试时，访问http://localhost:8181/api/user/login就相当于访问http://localhost:8080/user/login。

2.修改axios的配置

之前我们并没有修改axios的默认配置，现在创建一个http.js用于管理axios的配置：

// http.js
import axios from "axios";
 
// 此处可添加axios配置
axios.defaults.baseURL = '/api';
 
export default axios;

这样我们用axios访问后端时就不需要一个个加上/api，并且部署测试的时候也可以直接修改这里的baseURL的值即可。

然后main.js就改为从http.js中获得axios对象。

// main.js
import axios from "./http";
Vue.prototype.$axios = axios;
 
// ...
 
new Vue({
  router,
  store,
  axios,
  render: h => h(App)
}).$mount("#app");

这样配置完毕之后，在开发环境下应该就没有跨域问题了。

至于想要在前后端分开部署的情况下解决跨域问题，就不在这篇文章的讨论范围内。（明目张胆的坑掉233）

尾巴

axios还有很多可以配置的东西，不过我现在都还没用到233，总的来说习惯之后用axios来做请求还是写的很舒服的~

最近几天学习了Vue全家桶，对于我这个主后端的程序员来说，Vue确实相对于Angular更容易上手，各种插件和中文文档十分齐全，而且如果使用Vue-Cli脚手架的话真的可以说是达到“开箱即用”的效果~

有了Vue，就可以彻底告别以前jQuery那一套了，双向绑定简直不能太好用，整个前端开发变得流畅起来。所以各位想要走前端路线的程序员，或者是像我这样主要关心后端但自己开发项目想用一个方便的前端框架，那么我强烈推荐学习Vue。

官方的教程已经很清晰明了，在里面可以了解Vue的基本使用方法：

https://cn.vuejs.org/v2/guide/

所以我们这里就不抄文档了233，下面的内容偏向实战踩坑，不过注意这系列文章严格来说不是教程，只能说是我自己学习和使用时遇到问题的记录吧。

Vue-Cli3脚手架

虽然完全可以通过引入js文件到页面的方式来快速使用Vue的功能，但如果想要构建大型单页应用（SPA）的话，推荐使用官方提供的Vue-Cli工具来快速搭建项目。

SPA

什么是SPA？单页应用和传统多页面Web应用最大的区别就是页面跳转全部由前端控制，所以能够达到无刷新的流畅体验。

传统的Web项目，在页面跳转时，是由前端去请求后端地址，然后由后端返回要显示的页面；而在SPA项目里，公共资源会在第一次载入时加载一次，之后前端仅仅从后端获取必要的数据，然后局部刷新页面内容，而不需要重新载入整个页面。

使用Vue-Cli3搭建项目

要实现SPA需要前端框架的支持，对于Vue来说有Vue-Router这个项目来实现前端路由，这种开发方式下前端项目也需要相对工程化的结构，而Vue-Cli脚手架可以一键生成前端工程并完成配置，即便不懂webpack也可以开心使用，因为Vue-Cli都已经配置好了~

首先我们需要有nodeJs环境，然后就可以使用npm来安装Vue-Cli，这里我们选择全局安装，现在Vue-Cli的最新版本是3，这系列文章也都是以Vue-Cli3为基础来进行讲解的。

# 安装vue-cli
npm install -g @vue/cli
 
# 查看vue-cli版本看看是否安装成功
vue -V
# 3.2.1

安装完毕后，我们切到工作目录来新建项目：

# 新建项目
vue create my-app

执行之后，Vue-Cli会提示选择一个预设，刚刚安装完毕的话应该只有一个叫做default的预设（default上面两个是我自己加的），这个预设里是没有集成Vue-Router的，所以我们选择最后一个选项来自定义预设。

然后就列出了Vue-Cli可以自动集成的插件，按空格键选择需要的，比如前端路由Router、状态管理Vuex，最后按下回车。

如果有选择集成Router的话，这里会询问要不要使用history模式，关于history模式的优劣可以查看Vue-Router的官方文档，当然，如果以后有机会可能我也会讲讲233。

总只，一般来说我是推荐使用history模式的。

如果有选择集成Linter/Formatter的话，这里需要选择默认配置，根据自己的需求选择吧，我是选的ESLint + Prettier。

什么时候进行拼写检查。

最后，选择这些配置是分别放在独立的文件中还是一起挤在package.json里面。

是否保存预设，保存的话下次就可以在第一步的时候选择这个预设而不用上面一步步配置了。一切就绪后，Vue-Cli就开始自动工作了。略微等待它跑完，会是这个样子：

好了，现在我们就得到了一个Vue单页应用项目了！

目录结构

打开项目后的目录结构大概是这个样子的，十分清晰明了。main.js 便是程序的入口，.vue文件则是Vue组件的一种文件格式，需要webpack来进行编译，所幸这方面的配置Vue-Cli已经帮我们做好了~

运行和编译

运行和编译打包相当简单，运行以下命令即可：

# 运行
npm run serve
 
# 编译打包
npm run build

默认的端口是8080，运行后访问的效果就是这个样子啦~

配置文件

Vue-Cli提供了一个叫做vue.config.js的配置文件，不过这个文件在搭建项目时并不会被创建出来，所以需要自己手动在和package.json同级目录下新建这个文件。

可用配置项可以参考官方文档：https://cli.vuejs.org/zh/config/

比如，如果想要更改默认端口，就可以这么配置：

module.exports = {
    devServer: {
        port: 8181
    }
}

漂亮的MD风格UI框架：Vuetify

有非常多支持Vue的前端UI框架，这次我选用的是近年的一个后起之秀：Vuetify。

Vuetify实现了Google的Material Design设计规范，可以在PC和手机上获得不错的用户体验，并且还提供了Vue-Cli一键集成的插件：

# 加入vuetify组件
vue add vuetify

只要跑一下这个命令，vuetify便集成到项目中了，注意要在一个新项目里这么做，因为它会替换一些文件。

然后我们用npm run build方法运行一下项目看看效果：

关于Vuetify的各种特性，可以去看官方文档，有中文哦：

https://vuetifyjs.com/zh-Hans/

尾巴

这篇的内容就到这了，下次会讲讲正式开发里遇到的坑，虽然我也不知道自己什么时候会更新就是了233

Java 11版本Oracle将计划对企业收费，Java 8版本也将于2019年1月停止提供免费支持。

不过Oracle提供了的官方的OpenJDK 11编译版本，这个版本和Oracle Java 11在功能上没有区别，并且由OpenJDK社区维护，所以可以考虑安装这个。

下载地址：https://jdk.java.net/11/

下面我们主要介绍如何在Ubuntu系统下安装和设置OpenJDK 11，测试环境是Ubuntu Server 16.04。

# 下载和解压
sudo wget https://download.java.net/java/GA/jdk11/13/GPL/openjdk-11.0.1_linux-x64_bin.tar.gz
sudo tar xvf openjdk-11.0.1_linux-x64_bin.tar.gz
 
# 设置环境变量，编辑~/.bashrc文件，加入下面内容
JAVA_HOME=/usr/java/jdk-11.0.1
JRE_HOME=$JAVA_HOME/jre
JAVA_BIN=$JAVA_HOME/bin
CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib
PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin
export JAVA_HOME JRE_HOME PATH CLASSPATH
 
# 让设置起效
source ~/.bashrc

# 证实设置已起效
java -version

如果一切顺利，会输出当前Java的版本：

openjdk version "11.0.1" 2018-10-16
OpenJDK Runtime Environment 18.9 (build 11.0.1+13)
OpenJDK 64-Bit Server VM 18.9 (build 11.0.1+13, mixed mode)

网上看了很多关于申请Let's Encrypt野卡（wildcard）证书的教程，但很多感觉各种复杂，在我服务器上也没能正常运作，最后还是去看了官方推荐的certbot工具的文档终于找到了相对简单可靠的申请方式，在这里分享一下。

测试环境是Ubuntu Server 16.04 x64。

安装Certbot

sudo apt-get install software-properties-common
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install certbot python-certbot-nginx

安装certbot-dns-cloudflare插件

野卡（wildcard）证书需要进行dns-01挑战，certbot官方提供了主流DNS服务商的插件，但是我没有找到单独的下载地址，所以只能直接去certbot的源码里找了。

注意：可能需要python3版本。

git clone https://github.com/certbot/certbot.git
cd certbot/certbot-dns-cloudflare
python setup.py build
python setup.py install

获取API Key

登录CloudFlare

如图所示找到API Key

创建一个cloudflare.ini文件用于配置API Key信息。

# Cloudflare API credentials used by Certbot
dns_cloudflare_email = cloudflare@example.com
dns_cloudflare_api_key = 0123456789abcdef0123456789abcdef01234567

上面的邮箱和API Key要替换成自己的。

申请证书

certbot certonly --dns-cloudflare --dns-cloudflare-credentials ~/.secrets/certbot/cloudflare.ini -d *.example.com

--dns-cloudflare-credentials后面是前文创建的cloudflare.ini的路径，-d后面就是要申请证书的域名，申请野卡证书记得在域名前加*号。

如果顺利申请成功的话，会看到下面输出信息：

IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/luxnk.xyz-0001/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/luxnk.xyz-0001/privkey.pem
   Your cert will expire on 2018-10-14. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot
   again. To non-interactively renew *all* of your certificates, run
   "certbot renew"
- If you like Certbot, please consider supporting our work by:
 
   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

这里面的两个文件路径就是证书的路径了，之后将它配置到相应Web服务器中就可以了~

证书的有效期是90天，到期后需要续签证书，续签使用下面的命令即可：

certbot renew

也可以通过创建crontab任务实现自动续签证书。

crontab -e
 
# 打开crontab文件后加入此行
0 3 */7 * * /bin/certbot renew --renew-hook "/etc/init.d/nginx reload"
 
# 重启cron服务
service cron restart

另外，通过下面指令可以查看当前用certbot申请的证书以及剩余有效时间：

certbot certificates

可能遇见的问题

在执行申请证书的命令时，certbot可能会出现警告：

Unsafe permissions on credentials configuration file: ~/certbot/cloudflare.ini

这是因为保存了API Key的cloudflare.ini文件访问权限不安全，将该文件权限设置为600就不会再出现这个警告。

chmod 600 cloudflare.ini

参考

• certbot官方文档：https://certbot.eff.org/docs/
• certbot-dns-cloudflare插件主页：https://certbot-dns-cloudflare.readthedocs.io/en/latest/
• Certbot对免费Let’s Encrypt证书的自动续期