由于我司程序员太懒，生成轨迹算法直接取的随机数，导致生成的轨迹图变成了一个网状的结构，根本无法使用。
搜索以后，发现一个很有意思的轨迹生成算法，分享给大家。
算法思想
- 定义起点和终点
- 在起点和终点直接取中点
- 在起点与终点连线的垂直方向上进行变化，取得第三点
- 连接起点、中点、终点。
图示
1 定义起点和终点
2 取中间点
3 在中间点上取垂线
4 连接起点、中点、终点，形成轨迹图
这样，就完成了一条路径的生成，很简单，但是比较有效。
一种运动轨迹生成算法的思路
发表评论
分类目录归档：技术
Vue 没有办法让页面高度为 100% 怎么办？
在进行 Vue 后台开发时，一般来说，我们希望我们的应用的首页是 100% 高度，其样式大致如下
但是一开始，往往会遇到高度没有办法设置为 100%。
这是由于在 Vue 中，并没有给 html,body,#app 设置默认高度
解决方案也很简单，只需要在 App.vue 的 style 中添加如下代码
html,
body,
#app {
height: 100%;
}
Code language: CSS (css)Vue Router 应该如何实现限制用户登陆的功能？
在 Vue Router 中，并没有一个所谓的默认首页的功能，所以我一直都很好奇，应该如何实现这样的功能？如果没有这样的功能，又如何实现一个项目的默认显示页面呢？
今天，终于有了答案。
这样的功能不是内置的，不过你可以通过 router.beforeEach来实现这个功能。
具体的思路是，在跳转前，对目标路由进行检测，如果目标路由的 meta 信息中写明了需要进行鉴权，就跳转到默认的登陆页面。这样，就可以实现默认显示登陆页面的功能。
具体可以参考的代码
/// 省略引用的代码
let router = new Router({
mode:"history",
base:base,
routes: [
{
path: '/login',
name: 'login',
component: Login,
meta: { title: '登陆' }
},
{
path: '/',
name: 'home',
component: Home,
meta: { title: '首页', requireLogin:true }
}
]
})
router.beforeEach((to, from, next) => {
const { name,meta } = to;
const { requireLogin } = meta; // 提取登陆 标志
if(name === 'login'){
return next();
}
const needLogin = requireLogin;
if(needLogin){ // 如果判断需要登陆，就跳转登陆。
return next({
name:"login",
params:{
back: to
}
})
}
next();
})
Code language: JavaScript (javascript)Vue 项目引入 Normalize.css 来进行格式的初始化
以前，我们使用 reset.css 来完成 HTML 样式的初始化，借助这个 css 文件，可以将多个不同平台，不同系统下的基础组件的样式整合一致。
如今，我们可以使用 Normalize.css 来完成这个工作，也非常简单
yarn add normalize.css
Code language: CSS (css)安装完成后，在 vue 的主文件，引入即可
import 'normalize.css/normalize.css'
Code language: JavaScript (javascript)Vue Cli 3.0 创建的项目中加入 Stylus 支持
在使用了 Stylus 编写了小程序的一些样式后，我被这种显然更加简洁的工具折服了。
在新的 Vue 项目中，我希望继续使用 Stylus 来编写样式，只需执行如下代码
yarn add stylus stylus-loader
发现官方没有 plugin ，可以去做一个
使用Prettier、Husky 和 lint-staged 进行 Commit 前处理
在编写代码时，如果你的代码中配置了 ESLint， 而你自己没有运行 ESLint ，可能会导致你的 CI build 失败。因此，在 Commit 前加入格式的修正是很有必要的。
在这篇文章中，我将向你分享，如何使用 Prettier、Husky、Lint-staged 对项目进行 commit 前的格式修复，以及如何配合 Sublime Text 使用。
1. 全局安装 Prettier
想要使用 Prettier 进行格式修复，首先，你需要安装 Prettier ，在命令行中执行如下命令：
npm install --global prettier
Code language: PHP (php)2. 在 Sublime Text 中安装 JSPrettier
然后，在 Sublime Text 中使用 Package Control 来安装拓展 JSPrettier
在 Sublime Text 中唤起 Package Control ，执行 Install Pacakge ，并安装其中的 JsPrettier
3. 在项目根目录中添加 Prettier 的配置文件
你可以在项目的根目录下创建一个 .prettierrc 的文件，然后在其中加入配置项目，具体的配置项目可以参考官方的 Options 页面
比如，如下是我的配置文件
{
"singleQuote": true,
"semi": false,
"tabWidth": 2
}
Code language: JSON / JSON with Comments (json)Options 页面地址：https://prettier.io/docs/en/options.html
4. 使用 Sublime 进行格式修正
当你配置好了配置文件以后，打开 Sublime Text，找到一个 JS 文件，并打开，这时，在代码中点击右键，可以看到一个 JSPrettier Format Code ，点击这一项，就可以自动根据你所创建的配置文件，进行界面的修正了。
5. 安装 Husky 和 Lint-staged 配置 Pre-commit 检查
接下来，我们来配置 Precommit 的检查
首先，你需要安装 Husky
cnpm install lint-staged husky --dev --save
安装完成后，修改你的 packages.json 文件，在其中添加如下代码
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,json,wpy}": ["prettier --write", "git add"]
}
Code language: JavaScript (javascript)然后保存。这样，就完成了 precommit 的格式检查了。
6. 测试 commit
接下来，你可以随便修改一个文件，然后执行 git commit操作，你可以看到其会输出如下的内容
参考链接：https://prettier.io/docs/en/precommit.html
Sublime Text 3 如何配置文件后缀关联？
在使用 Sublime Text 开发 WePY 时，会遇到一个问题, 如何让 Sublime Text 识别 .wpy 文件为 Vue 格式，并进行高亮呢？
你可以这样操作
1. 安装 Vue Syntax Highlight 插件
你可以使用 Package Control 来安装 Vue Syntax Highlight 插件，安装完成后，你打开任何一个 .vue 文件，就会发现代码已经被高亮了，就说明你的你的插件安装成功了。
2. 配置 wpy 文件的关联
接下来，你需要打开任何一个 wpy 文件，然后点击菜单栏中的 View-Syntax-Open All Current Extension as…-Vue Component,这样，就可以完成了 .wpy 文件的 Vue 关联，后续，你再打开 .wpy 文件，就会自动使用 Vue 语法高亮插件了。
本站在用的一些WordPress插件
Akismet Anti-Spam
WordPress 官方出的，用于屏蔽垃圾评论的。基本上每个用 WordPress 的人都会装。
CB Change Mail Sender
一个用于修改 WordPress 自动发信时的 Sender 和 Sender Email Adress 的插件。
cos_slug_translator
将文章的 Slug 从中文转换为英文的插件。后续我会重写这个插件，更简单使用，以及发布到官方的插件市场。
Jetpack
JetPack 用于古腾堡编辑器中的新 Block
Link Share
我自己开发的插件，效果可以参考顶部菜单栏中的分享页面。
No Self Pings
用于控制自己的文章不要向内产生 PingBack
WP-Optimize
WordPress 优化插件
WP-PostViews
WordPress 访问量统计插件
在一个老旧的项目里引入 Mocha 测试
由于要做每日极漫小程序，也就需要其背后的漫画翻译组活跃起来，随之，就需要翻译组背后的工具正常使用，不过 LCTC-CLI 已经很久没有更新了，便趁这个机会，恢复这个工具的更新。
对工具的更新， 首先应当做的，自然是补全测试，这样才好确保自己的改动不至于让老项目无法正常运转。
安装 Mocha
首先，执行命令，将 Mocha 安装在开发依赖中。
npm install --save-dev mocha
随后，再修改 package.json 文件中的 scripts 部分的内容，将 test 对应的命令改为 mocha，效果如下
{
...
"scripts": {
"test": "mocha"
}
...
}
Code language: JavaScript (javascript)这样，你就可以运行 npm test 来执行测试了。
编写测试
安装完成后，你可以运行npm test 命令，来执行测试，这时，你会发现报错如下：
Warning: Could not find any test files matching pattern: test
No test files found
这是因为你并没有创建测试文件夹和测试文件，所以自然会报错。
执行如下命令，来创建一个测试目录和对应的测试文件
mkdir test
touch test/test.js
再次执行，你就可以看到，测试成功通过。
0 passing (3ms)
虽然是告诉你，你并没有通过任何的测试代码（所以是 0 passing）
接下来，编写第一个测试，打开 test/test.js，然后填入下述代码
var assert = require('assert');
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal([1,2,3].indexOf(4), -1);
});
});
});
Code language: JavaScript (javascript)然后，再次执行 npm test ，这样，就完成了第一个测试，你会看到这样的输出
Array
#indexOf()
✓ should return -1 when the value is not present
1 passing (7ms)
这样，就完成了初步的 Mocha 的引入和测试。接下来，开始继续编写实际的测试即可。
不过，我在编写测试时发现，原先的代码结构极为不合理，因此，决定直接重写了。使用 TDD 的思想，完成重写这个工具。
警惕那些让你省力的工具
作为一个 Engineer ，前「后端工程师」，我用过不少后端框架，比如 PHP 里的 ThinkPHP（3.x）时代，Laravel（5.x）时代，Python 的 Flask、Django ，Ruby 里的 Rails。
其中，近两年我用的最多的是 Laravel 和 Django ，原因是他们提供了一个很重要的 Feature ，就是 Admin Panel。只不过 Django 是官方自带的（Django Admin），而 Laravel 使用的是第三方 Pacakge （Laravel-Admin）。
借助这两个工具，可以快速的生成一个好用且效果非常不错的管理后台，让并不是很喜欢做界面的我大呼爽快（实际上我并不是不喜欢写 JS，我仅仅是不喜欢写 CSS，现在的组件化开发大大的让我解脱出来）。只需要很少的一些代码，就能够完成自己想要的效果。
不过，这样让我产生了一定的依赖，现在要做一些和 Web 相关的事情时，我都会优先考虑 Laravel 和 Django ，因为他们提供了 Admin 后台，可以让我在很长的一段时间内不去关注后台的逻辑，更加专注于前台的开发。
这很好，很敏捷。但是也让我失去了自己开发业务后台的耐性，毕竟，已经有更加简单的实现方式了，为什么还要为难自己呢？
但是，如果你想要认认真真去做一个项目的时候，会发现这种高度简化的代码，让你的拓展性非常的差，你无法更好的去做好自己应该做的事情。
所以，为什么不从一开始就自己写后台呢？虽然慢了点，但是对于你自己来说，也是足够的。随着你自己的开发项目的变多，完全可以做一套你自己的通用后台，完全符合你自己的要求、想法。那才是你真正需要的。