分类目录归档：技术

macOS 安装 Rust 开发环境

发表评论

安装 Rust

Rust 在 macOS 上的安装非常的简单，只需要在终端执行如下代码

curl https://sh.rustup.rs -sSf | sh
Code language: JavaScript (javascript)

会自动进入到安装的状态，脚本会检测你的操作系统，然后提示你是否安装，作为初学者，直接用默认的安装吧。

zsh4o
提示

稍等片刻，就安装完成了。

e4po0
安装完成的提示

你可以重启终端来应用 Rust 的环境变量，或者直接执行如下命令来使环境变量生效。

source $HOME/.cargo/env
Code language: PHP (php)

执行命令 rustc --version 可以看到版本号信息：

wrl6o

这时，就说明你的安装完成了。

创建测试项目

接下来，在终端里执行如下命令，来创建一个测试项目。

cargo new hello-world
Code language: JavaScript (javascript)

并使用 cd 命令进入该目录，编译，并运行代码

cd hello-world
cargo run

你可以看到这样的输出，就说明你的 Rust 环境已经配置好了。

jkivy

Rust With VSCode

安装 Rust 代码支持

我一般习惯用 VSCode 写代码，所以依然这次继续使用 VSCode 来写 Rust。

在 VSCode 中的拓展管理器中搜索 Rust，可以看到一个名为 Rust(rls) 的拓展，安装这个拓展。

raqc5
Rust(rls)

此时使用 VSCode 打开刚刚创建的 Hello World 项目，就可以看到如下的效果。

84029

然后，打开终端，执行如下命令，来安装 Rust 拓展所需的一些 Rust 组件

rustup component add rls rust-analysis rust-src

安装 crates.io 的拓展支持

Crates.io 类似于我们在 Node.js 世界的 NPM，PHP 世界的 Composer。crates.io 的拓展可以帮助我们更好的管理我们的项目拓展。

在 VSCode 的拓展界面搜索 crates ，就可以看到由 Seray Uzgur 提交的 crates 插件，安装这个插件。

u2ru4

安装完成后，打开项目根目录的 cargo.toml 文件，然后你可以看到，在你的依赖项目后会提示你最新的版本。

a56cs

把你的鼠标放在"0.2.0"的后面，还会提示你所有的更新的版本，你可以通过一下点击，来升级依赖的版本。


或者执行命令来升级所有的依赖

7raj1

安装 TOML 的高亮

Toml 是 cargo 用来存储项目信息的文件格式，VSCode 本身不提供高亮，不过我们可以通过安装一些拓展来实现。

在 VSCode 的拓展管理器搜索 TOML，并安装由 bungcip 开发的 Better TOML，即可实现 toml 文件的高亮。

fqr13

安装完成后，重新打开 cargo.toml 文件，你就会发现其内容被语法高亮了。

ig8h9

这样，我们就完成了 Rust 开发环境的基本配置。后续可以根据你自己的需要，去配置其他拓展和依赖。

一种运动轨迹生成算法的思路

发表评论
kn76p
网状

由于我司程序员太懒，生成轨迹算法直接取的随机数，导致生成的轨迹图变成了一个网状的结构，根本无法使用。

搜索以后，发现一个很有意思的轨迹生成算法，分享给大家。

算法思想

  1. 定义起点和终点
  2. 在起点和终点直接取中点
  3. 在起点与终点连线的垂直方向上进行变化，取得第三点
  4. 连接起点、中点、终点。

图示

1 定义起点和终点

a2o6r

2 取中间点

eazsz

3 在中间点上取垂线

qni4g

4 连接起点、中点、终点，形成轨迹图

yd53k

这样，就完成了一条路径的生成，很简单，但是比较有效。

Vue 没有办法让页面高度为 100% 怎么办？

发表评论

在进行 Vue 后台开发时，一般来说，我们希望我们的应用的首页是 100% 高度，其样式大致如下

sfk1o
效果图

但是一开始，往往会遇到高度没有办法设置为 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)

使用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

5c67d5882ddd5

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 ，点击这一项，就可以自动根据你所创建的配置文件，进行界面的修正了。

5c67d567e0b54

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操作，你可以看到其会输出如下的内容

5c67d51dae560
可以看到进入 husky 执行 precommit 的修复

参考链接：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 语法高亮插件了。

5c67d5e150b87
配置图

本站在用的一些WordPress插件

1 条回复

Akismet Anti-Spam

WordPress 官方出的，用于屏蔽垃圾评论的。基本上每个用 WordPress 的人都会装。

CB Change Mail Sender

一个用于修改 WordPress 自动发信时的 Sender 和 Sender Email Adress 的插件。

cos_slug_translator

将文章的 Slug 从中文转换为英文的插件。后续我会重写这个插件，更简单使用，以及发布到官方的插件市场。

Jetpack

JetPack 用于古腾堡编辑器中的新 Block

Link Share

我自己开发的插件，效果可以参考顶部菜单栏中的分享页面。

LinkShare

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 的思想，完成重写这个工具。