Chuwen 发布的文章

解决 GitHub Connect: kex_exchange_identification: Connection closed by remote host

作者: Chuwen
时间: 2022-07-30
分类: Linux
评论

# 背景

想要克隆项目/推送代码到 GitHub 老实错误，检查发现：
```shell
➜  ~ ssh -vvv git@github.com
OpenSSH_8.1p1, LibreSSL 2.7.3
debug1: Reading configuration data /Users/chuwen/.ssh/config
debug1: /Users/chuwen/.ssh/config line 1: Applying options for *
debug1: /Users/chuwen/.ssh/config line 6: Applying options for github.com
debug1: Reading configuration data /etc/ssh/ssh_config
debug1: /etc/ssh/ssh_config line 47: Applying options for *
debug1: Executing proxy command: exec nc -v -x 127.0.0.1:7890 github.com 443
debug1: identity file /Users/chuwen/.ssh/id_rsa type 0
debug1: identity file /Users/chuwen/.ssh/id_rsa-cert type -1
debug1: identity file /Users/chuwen/.ssh/id_dsa type -1
debug1: identity file /Users/chuwen/.ssh/id_dsa-cert type -1
debug1: identity file /Users/chuwen/.ssh/id_ecdsa type -1
debug1: identity file /Users/chuwen/.ssh/id_ecdsa-cert type -1
debug1: identity file /Users/chuwen/.ssh/id_ed25519 type -1
debug1: identity file /Users/chuwen/.ssh/id_ed25519-cert type -1
debug1: identity file /Users/chuwen/.ssh/id_xmss type -1
debug1: identity file /Users/chuwen/.ssh/id_xmss-cert type -1
debug1: Local version string SSH-2.0-OpenSSH_8.1
Connection to github.com port 443 [tcp/https] succeeded!
kex_exchange_identification: Connection closed by remote host
```

# 解决方案

最后找到[一篇文章](https://idreamshen.github.io/posts/github-connection-closed/ "一篇文章")解决了这个问题。
只需要在 `~/.ssh/config` 配置以下项目即可

```config
Host github.com
   HostName ssh.github.com
   User git
   Port 443
```

如果想要配置代理可以这样：

```config
Host github.com
   HostName ssh.github.com
   User git
   Port 443
   # 走 HTTP 代理
   # ProxyCommand socat - PROXY:127.0.0.1:%h:%p,proxyport=8080
   # 走 socks5 代理（如 Shadowsocks）
   ProxyCommand nc -v -x 127.0.0.1:7890 %h %p
```

## 最终解决了问题

```shell
➜  ~ ssh -T git@github.com
Connection to ssh.github.com port 443 [tcp/https] succeeded!
Hi PrintNow/react-i18next-base-usage! You've successfully authenticated, but GitHub does not provide shell access
```

Laravel Middleware(中间件) 设置登录信息(User Model)

作者: Chuwen
时间: 2022-06-29
分类: Laravel,PHP
评论

Laravel  Middleware(中间件) 设置登录信息(User Model)，然后在其它地方使用如 Controller(控制器)

### UserAdminAuthGuard 中间件
```php
<?php

namespace App\Http\Middleware;

use Auth;
use Closure;
use App\Models\User;
use Firebase\JWT\JWT;
use Firebase\JWT\Key;
use App\Libs\ResponseTool;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redis;

class UserAdminAuthGuard
{
    /**
     * Handle an incoming request.
     *
     * @param \Illuminate\Http\Request $request
     * @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next)
    {
		// 这里写你处理的相关逻辑
		// $token = 0;
		// 这里写你处理的相关逻辑

// 保存 用户模型
        Auth::login(User::where('token', $token)->firstOrFail());

return $next($request);
    }
}
```

### UserController - HTTP 控制器

```php
<?php

class UserContoller
{
	public function index(Request $request)
	{
		// 拿到用户模型信息
		dump(Auth::user());
	}
}
```

Laravel 控制器测试

作者: Chuwen
时间: 2022-06-02
分类: Laravel,PHP
评论

## 新建控制器名字为 ForExampleController.php

```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ForExampleController extends Controller
{
    public function index(Request $request)
    {
        if ('nowtime.cc' !== $request->get('domain')) {
            return response([
                'code' => 400,
                'msg' => '错误的参数',
            ]);
        }

return response([
            'code' => 200,
            'msg' => '验证通过',
        ]);
    }
}

```

## 新建测试文件名字为 ForExampleControllerTest.php

```php
<?php

namespace Tests\Feature;

use Tests\TestCase;
use Illuminate\Foundation\Testing\WithFaker;
use App\Http\Controllers\ForExampleController;
use Illuminate\Foundation\Testing\RefreshDatabase;

class ForExampleControllerTest extends TestCase
{
    public function testIndex()
    {
        $request = \Request::create('/', 'GET', [
            'domain' => 'nowtime.cc',
        ]);

$forExampleController = new ForExampleController();

$res = json_decode($forExampleController->index($request)->getContent(), true);

self::assertEquals(200, $res['code']);
    }
}

```

运行测试结果：
![](https://cdn.nowtime.cc/2022/06/02/2598889823.png)

Laravel mix + TailwindCSS 运行 npm run watch 无限重新编译 CSS

作者: Chuwen
时间: 2022-05-21
分类: JavaScript
评论

先说答案，参考的是：https://github.com/laravel-mix/laravel-mix/issues/1942

## 序言

最近在筹划着本博客新主题设计，想运用现代化前端技术，再加之对 Laravel mix 有一定的使用经验，所以选择了 Laravel mix 作为脚手架

## 问题

`webpack.mix.js` 配置：

```js
const mix         = require('laravel-mix');
require('mix-tailwindcss');

mix.disableSuccessNotifications()
    .ts('src/app.ts', 'theme/assets')
    .setPublicPath('theme/assets')
    .sass("src/assets/sass/app.scss", "theme/assets")
    .tailwind('./tailwind.config.js')
    .webpackConfig({
      module: {
        rules: [
          {
            test:    /\.tsx?$/,
            loader:  "ts-loader",
            exclude: /node_modules/
          }
        ]
      }
    })

mix.browserSync({
  proxy: '127.0.0.1:3792',
  files: ["theme/**/*.php", "src/*.js", "src/*.css"],
  open:  false
})
```

`tailwind.config.js` 配置：
```js
module.exports = {
  content: require('fast-glob').sync([
    './src/**/*.{html,js,ts}',
    './node_modules/tw-elements/dist/js/**/*.js',
    './theme/**/*.php'
  ]),
  theme:   {
    extend: {},
  },
  plugins: [
    require('tw-elements/dist/plugin')
  ],
}
```

使用上述的配置，然后运行 `npm run watch`，就看到终端一直闪烁着编译结果，然后电脑风扇呼呼狂啸：
![](https://cdn.nowtime.cc/2022/05/21/912061657.png)

## 解决方案

还好我用 Google + 英文搜索（用的蹩脚英文 ?），然后找到了这个 **issues**：
https://github.com/laravel-mix/laravel-mix/issues/1942

翻啊翻，发现这个人给出的解决方案是可行的：https://github.com/laravel-mix/laravel-mix/issues/1942#issuecomment-998148038

1. 首先安装 `glob`
 - npm：`npm install fast-glob -D`
 - yarn：`yarn add fast-glob -D`

2. 然后将 `tailwind.config.js` 改为：

```js
module.exports = {
    // 看这里
    content: require('fast-glob').sync([
    './src/**/*.{html,js,ts}',
    './node_modules/tw-elements/dist/js/**/*.js',
    './theme/**/*.php'
    ]),
    theme: {
        extend: {},
    },
    plugins: [],
}
```

然后就完美解决了

Vue 3 渲染后端返回的标签 | component 标签的使用和 compile 的使用

作者: Chuwen
时间: 2022-05-13
分类: WEB开发
评论

## 缘由

项目中有一个需求，需要动态渲染后端返回的 HTML，如下所示，下述的**每一个** `svg` 是后端动态返回的
```html
<template>
	<div class="class-name">
		
		<svg></svg>
		<svg></svg>
		<svg></svg>
	</div>
</template>
```

试过这样，但是不会渲染出来：
```html
<template>
	<div class="class-name">
		<template v-html="svg1"></template>
		<template v-html="svg2"></template>
		<template v-html="svg3"></template>
	</div>
</template>
```

## 解决方案

通过浏览 Vue.js 文档，发现如下文章：
- [渲染函数 - 模板编译](https://v3.cn.vuejs.org/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6 "模板编译")
- [内置特殊元素 - component](https://staging-cn.vuejs.org/api/built-in-special-elements.html#component)
- [在 Vue.js 中使用 Vue.compile](https://stackoverflow.com/questions/68981411/vue3-how-to-use-vue-compile-in-vue3)

### `<component>` 是 Vue 内置特殊元素

> `<component>` 和 `<slot>` 具有类似组件的特性，也是模板语法的一部分。它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。

所以，使用 `<component>`、`Vue.compile` 就实现了我想要的功能

gist: https://gist.github.com/PrintNow/f9fec1890bd736593800564c45584c3b
```vue
<template>
  <h2>实现效果</h2>
  <div class="class-name">
    <component :is="getSvg" :style="svg_style"></component>
    <component :is="getSvg" :style="svg_style"></component>
    <component :is="getSvg" :style="svg_style"></component>
  </div>

<h2><code>getSvg</code> 输出结果：</h2>
  <pre v-text="getSvg"></pre>

export default {
  name: "App",
  components: {},
  data() {
    return {
      svg_style: { width: "64px", height: "auto" },
      svg: `<svg t="1652418272564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2045" width="512"
     height="512">
    <path d="M408 617m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2046"></path>
    <path d="M927 369H111.75a25 25 0 0 1 0-50H927a25 25 0 0 1 0 50zM569.79 748H225a30 30 0 0 1 0-60h344.79a30 30 0 0 1 0 60zM668 748h-2.84a30 30 0 1 1 0-60H668a30 30 0 0 1 0 60z"
          fill="#087E6A" p-id="2047"></path>
    <path d="M832 860H197A125.14 125.14 0 0 1 72 735V263a125.14 125.14 0 0 1 125-125h635a125.14 125.14 0 0 1 125 125v472a125.14 125.14 0 0 1-125 125zM197 188a75.09 75.09 0 0 0-75 75v472a75.09 75.09 0 0 0 75 75h635a75.09 75.09 0 0 0 75-75V263a75.09 75.09 0 0 0-75-75z"
          fill="#087E6A" p-id="2048"></path>
</svg>`,
    };
  },
  computed: {
    getSvg() {
      return compile(this.svg);
    },
  },
};
</script>

解决 GitHub Connect: kex_exchange_identification: Connection closed by remote host

Laravel Middleware(中间件) 设置登录信息(User Model)

Laravel 控制器测试

Laravel mix + TailwindCSS 运行 npm run watch 无限重新编译 CSS

Vue 3 渲染后端返回的标签 | component 标签的使用和 compile 的使用

最新文章

最近回复

分类

归档

其它