All Tags

WordPress 短代码 shortcode 转义为普通字符串

Tuesday, Jun 23, 2020

在使用WordPress进行创作时, 阿航碰到了需要将短代码转为普通字符展示在文章内. 本篇文章就来记录下如何将WordPress的短代码转义为普通字符串. 效果 将短代码转为普通字符串, 展示在屏幕上的 3 个方案的 2 种效果: [[epcl_box type=“information”]这是一条被短代码包住的信息![/epcl_box]] [epcl_box type="information"]这是一条被短代码包住的信息![/epcl_box] 场景 阿航的网站上有这样的提示短代码: [epcl_box type=“information”]这是一条被短代码包住的信息![/epcl_box] 在转义前, 我们是这样输入的: [epcl_box type="information"]这是一条被短代码包住的信息![/epcl_box] 很明显, 这样输入会被WordPress自动转为短代码. 需具备的条件 你掌握WordPress的基础使用 本篇文章的环境: 解决方案 方案一: 被"“包裹 此方案非常简单, 只要我们使用<code></code>标签将短代码括住, 代码将被自动转义, HTML写法 (区块编辑器直接找"代码"区块, 输入即可) : <code> [epcl_box type="information"]这是一条被短代码包住的信息![/epcl_box] 效果: [epcl_box type="information"]这是一条被短代码包住的信息![/epcl_box] [epcl_box type=“success”]顺利搞定![/epcl_box] 方案二: 被”[]“包裹 此方案也相当简单, 我们在短代码外包裹一层”[]". 写法改为: [[epcl_box type="information"][/epcl_box]] 效果: [[epcl_box type=“information”]这是一条被短代码包住的信息![/epcl_box]] [epcl_box type=“success”]搞定! 本方法相当方便![/epcl_box] 方案三: 使用转义字符串 此方法需要我们的重点就是把[和]转为转义字符串. 一张表格查看对应关系: 转义前 转义后 [ &#91; ] &#93; [shortcode] &#91;shortcode&#93; 那么, 我们上述例子的最终写法应为:

IDEA 一键部署 SpringBoot 项目到远程服务器 Docker 内

Sunday, Jun 21, 2020

Docker作为当前较为流行的微服务容器管理工具, 极大的方便了传统运维部署的工作. IDEA作为地表最强Java开发IDE, 自然提供了对Docker服务的支持. 本篇文章就来记录下如何使用IDEA 一键部署 SpringBoot 到远程服务器 Docker 内. 应用场景 先来看下传统的部署流程: 传统开发流程还好, 每个版本的间隔时间较长. 但是对于小型敏捷开发团队, 这个流程就很要命了! 阿航个人的经验, 每个项目从打包到重启Docker服务器, 预计要花费近10~20分钟! 痛不欲生. 需具备的条件 你了解服务器的基本使用. 你掌握Docker/Dockerfile的使用. 你掌握基础的Bash命令. 本篇文章的环境: 实战开始 [epcl_box type=“notice”]本篇教程小步骤较多! 只要稍有疏忽就可能导致失败! 请实践时仔细阅读教程![/epcl_box] 生成CA公钥私钥 进入安装了Docker的远程服务器, 创建目录ca, 用于存储docker ca认证文件: mkdir -p /usr/local/ca 进入该目录中: cd /usr/local/ca 执行以下命令, 生成公钥及私钥. 需要输入你自己的密码. 记住该密码, 下面会多次使用: openssl genrsa -aes256 -out ca-key.pem 4096 执行以下命令, 根据提示分别输入你的信息: openssl req -new -x509 -days 365 -key ca-key.pem -sha256 -out ca.pem 执行以下命令生成key: openssl genrsa -out server-key.pem 4096 执行以下命令, 把$HOST替换为你的远程服务器的IP地址:

Flutter 隐藏/移除导航栏的默认返回按钮

Friday, Jun 19, 2020

在实际项目开发中, 我们在进行页面跳转时, 偶尔会跳到不可返回的页面(比如退出登录后). 本篇文章就来记录下 Flutter 如何隐藏/移除导航栏的默认返回按钮. 效果 有图有真相, 先来看下实际效果: 应用场景 移除导航栏的默认返回按钮适用于: 退出登录后禁止返回 跳转至一个全新的页面, 不可返回 禁止返回的任何页面 需具备的条件 掌握Flutter基础 掌握Flutter页面跳转的基本操作 本篇文章的环境: 环境 版本 Flutter 1.19.0-2.0.pre 实战开始 准备工作 创建新文件./lib/main.dart(或者其他你想要的文件名): import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Remove back button', home: FirstPage(), ); } } class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("First Page"), ), body: Center( child: RaisedButton( child: Text("跳转到下一页"), onPressed: () { Navigator.

Stack Overflow 无法访问、访问速度慢的解决方案

Wednesday, Jun 17, 2020

因为大陆对Google进行了封锁, 所以大陆无法访问包含了Google域名的资源文件的页面, 即使能访问也过慢. Stack Overflow作为全球最大的技术问答平台, 无法访问是我们相当大的一个损失. 本篇文章就来记录几种解决方案. 问题原因 打开调试控制台(F12), 访问 https://stackoverflow.com/ . 我们会发现有关Google的请求非常慢, 甚至无法访问. 如: https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js 那么找到了原因, 我们就针对此问题进行解决即可! 解决方案 Replace Google CDN FireFox 直接安装插件即可 插件地址 Chrome/Edge等谷歌内核的浏览器: 点击下载插件 , 并解压. 找到其中的chrome目录 打开浏览器, 输入chrome://extensions/ 开启右上角的开发者模式或者Developer Mode: 紧接着点击加载已解压的扩展程序或Load unpacked extension...: 选择刚才下载的插件目录中的chrome目录. 关闭开发者模式. [epcl_box type=“success”]再次访问Stack Overflow, 感受飞一样的速度吧![/epcl_box] 感谢 justjavac / ReplaceGoogleCDN

Flutter 禁用按钮/禁止按钮点击

Tuesday, Jun 16, 2020

某些情况下我们需要禁用某个按钮的点击事件. 通过灵活的按钮禁止状态切换可以实现很多实际需求. 本篇文章就来记录下Flutter如何禁用按钮以及禁止按钮点击. 效果 有图有真相, 先来看下我们的最终效果: 应用场景 用户权限不足, 禁止某些按钮点击. 用户表单未填完, 禁止下一步. 用户阅读相关条款至少X秒, 倒数结束前锁定按钮. 需具备的条件 你了解Flutter基础 本篇文章的环境: 环境 版本 Windows 10 Android Studio 3.5 Flutter 1.19.0-2.0.pre 实战开始 准备工作 创建一个空项目. 删除./test目录. 替换./lib/main.dart为: import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Disable Button', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Disable Button'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.

Flutter为widget添加border边框、下划线

Monday, Jun 15, 2020

有时我们需要为Flutter的widget小部件添加各式各样的边框. 但是并不是所有widget都提供了边框的属性, 本篇文章就来记录下如何为Flutter 的 widget 添加border边框、下划线. 效果 有图有真相, 先来看下我们要实现的最终效果: 需具备的条件 你已经掌握Flutter基础 本篇文章的开发环境: 环境 版本 操作系统 Windows 10 Flutter 1.19.0-2.0.pre IDE Android Studio 3.5 [epcl_box type=“information”]速度快的同学直接复制下方的"全部源码"自行研究! 稳一点的同学请按照教程一步一步来! [/epcl_box] 实战开始 创建项目&清理代码 为了便于演示, 阿航在这里创建一个空项目. 创建完成后, 删除./test目录. 因为我们的demo无需测试类. 替换./lib/main.dart为: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Awesome Border', theme: ThemeData(primarySwatch: Colors.blue), home: MyHomePage(title: 'My Awesome Border'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.

MySQL JOIN MIN()/MAX() 组合使用

Tuesday, Jun 9, 2020

这次阿航在开发后端接口, 写复杂SQL查询时碰到了这个问题, 我需要将MySQL的JOIN关键字和MIN()同时使用. 本篇文章就来记录下MySQL JOIN MIN()/MAX()的组合使用. 应用场景 大家都有过淘宝网购的经历, 应该记得在搜索时, 出来的结果列表都是每个产品的最小价格. 点进去后, 选择不同的型号会有相应的价格. 阿航碰到的是我有两个表, 一个是SPU(产品表), 一个是SKU(商品表), 它们是一对多的关系(因为一款产品会有多个型号). 我需要在查询SPU的同时, 再把对应的最便宜的SKU的价格进行返回. 总结: 一对多关联查询, 并且把多的表的最大/最小值返回. 实战开始 [epcl_box type=“information”]为了方便大家理解, 阿航在这里进行相应的简化[/epcl_box] 数据关系 先来看下两个表的关系: 其中, 一个SPU对应多个SKU ( 比如一件衣服有多个颜色 ). 💡 解析 初始化数据库 进入数据库, 运行以下SQL语句定义并初始化数据表: CREATE DATABASE mysql_join_demo DEFAULT CHARACTER SET = 'utf8mb4'; USE mysql_join_demo; CREATE TABLE t_spu( id BIGINT NOT NULL AUTO_INCREMENT COMMENT '主键', name VARCHAR(32) NOT NULL COMMENT '产品名', PRIMARY KEY (id) ) COMMENT = '产品SPU表'; CREATE TABLE t_sku( id BIGINT NOT NULL AUTO_INCREMENT COMMENT '主键', spu_id BIGINT NOT NULL COMMENT '产品ID', spec VARCHAR(32) NOT NULL COMMENT '型号', price BIGINT NOT NULL COMMENT '价格', PRIMARY KEY (id) ) COMMENT = '商品表'; INSERT INTO `mysql_join_demo`.

Flutter 实现毛玻璃/磨砂效果

Monday, Jun 8, 2020

还记得之前风靡一时的Windows 7的毛玻璃效果吗? 虽然过去了好多年, 但毛玻璃效果一直没有过时👨‍🎓. 本篇文章就来记录下如何使用Flutter实现毛玻璃/磨砂效果. 效果 有图有真相, 先来看下我们要实现的最终效果: 环境&需具备的条件 本篇文章的开发环境: 若想顺利阅读本篇教程, 你需要具备: 计算机已安装Flutter开发环境 掌握Flutter基础 实战开始 创建项目, 清理代码 先来创建一个空项目, 直接用IDE创建或在终端中输入: flutter create my_frosted 删除./test目录. 并替换./lib/main.dart为: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My Frosted Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyFrosted(), ); } } class MyFrosted extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [], ), ); } } 🟢 运行项目, 可以看到白白的一片, 啥也没有:

Git统计指定时间日期范围内代码量、代码行数

Saturday, Jun 6, 2020

因为要写周工作报告, 自己希望将本周的工作量化出来. 所以想到: “能不能统计一下本周我的代码总行数呢?”. 本篇文章就来记录下Git统计代码量、代码行数. 应用场景 量化工作报告(就像阿航的需求) 项目统计 小组工作占比统计 环境&需具备的条件 本篇博客环境: 环境 版本 操作系统 Windows 10 家庭版 Git 2.25.0.windows.1 本篇博客假定你具备以下条件: 计算机已部署git环境 熟悉git基本命令 实战开始 本篇教程相当简单. 几步搞定. 打开git终端 首先, 进入你的项目目录, 右键打开git bash: 会出现一个比较可爱的窗口: 输入统计命令 重点来了! 输入git统计时间段内命令: [epcl_box type=“notice”]这里不能使用Windows的CMD替代git bash进行操作. 会报各种奇葩的错误![/epcl_box] git log --since="2020-06-01" --before="2020-06-05" --author="阿航" \ --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "新增行数: %s, 移除行数: %s, 总行数: %s\n", add, subs, loc }' 参数 含义 --since=“2020-06-01” 统计起始日期 --before=“2020-06-05” 统计结束日期 --author=“阿航” 需要统计的开发者 将以上参数替换为自己的!

MyBatis-Plus 读写 Mysql的Json类型字段数据

Friday, Jun 5, 2020

Mybatis-Plus是一款相当优秀的开源框架, 为单表操作提供了极大的便利. 这次阿航在写服务端时, 需要对MySQL的json类型字段进行操作, 忙活了一阵, 终于找到了解决方案, 并在本篇文章进行记录. 需具备的条件 本篇文章环境: 环境 版本号 Mybatis-Plus 3.3.2 本篇文章假定: 你掌握Java/Kotlin基础(注解) 你掌握Mybatis以及Mybatis-Plus的基本使用 你了解FastJSON或Gson [epcl_box type=“notice”]如果还不具备以上的条件, 阅读本篇文章可能会有阻碍! 建议先满足条件后再尝试阅读![/epcl_box] [epcl_box type=“information”]老规矩, 速度快的同学直接向下拉. 看核心代码.[/epcl_box] 场景 我们拥有一个json类型的数据库字段, 我们在进行写操作时, 不希望将对象转为json字符串再存数据库. 读数据也是一样. 我们希望这一切自动完成. 准备工作 我们先来创建一个数据库表: CREATE TABLE `mybatis_json_test` ( `id` int(10) NOT NULL AUTO_INCREMENT PRIMARY KEY, `extra_object` json NULL, `extra_list` json NULL, `extra_array` json NULL ); INSERT INTO `mybatis_json_test` VALUES ( 1, '{\"id\": 1, \"name\": \"2\"}', '[{\"id\": 1, \"name\": \"2\"}]', '[{\"id\": 1, \"name\": \"2\"}]' ); 实战开始 创建表对应实体类 首先创建实体类MybatisJsonTest: