Write the Code. Change the World.

9月 10
精选文章

发表于 • 1,146 views • 没有评论!

go,php,前端

该后台使用 vite + ts + pnpm + vue3 + element-plus + tailwindcss 等技术栈构成。没有添加任意可视化图标等插件。以最小功能，最基础功能展现。用户可以额外添加可使用的插件逻辑。

该后台后端使用 php8.2 + laravel 10 + mysql

该后台后端 go 语言版本开发中。将使用 gframe2.5.2

源码： https://github.com/vini123/simpleAdmin

在线体验： https://www.zeipan.com/admin

权限以及密码一键复位: https://v3test.yuepaibao.com/admin/api/reset

测试账号以及密码： zhoulin@xiangrong.pro、 111111 （如果发现登录不了，可一键复位谢谢）

阅读全文 >>

11月 21

发表于 • 1 views • 没有评论!

工具

随着各个平台（github,阿里云，等）都开始使用 MFA 来增加软件使用的安全性。对软件进行 MFA 处理还是有必要。有些平台已经在强制使用了。

MFA（Multi-factor Authentication，多因素认证）是一种安全实践，它要求用户提供两种或两种以上的认证因素来验证身份，以增强账户和系统的安全性。

TOTP（Time-Based One-Time Password，基于时间的一次性密码）是一种基于时间的一次性密码算法，通常用于两步验证和多因素身份验证，以增强静态口令认证的安全性。它由互联网工程任务组（IETF）在RFC 6238中定义，是HOTP（基于哈希的消息认证码的一次性密码算法）的扩展，添加了时间因素。

TOTP 可以是 MFA 的一部分。

MFA 的工作原理

MFA的目的是建立一个多层次的防御，使未经授权的人访问计算机系统或网络更加困难，从而提高安全性。

MFA通常包括以下三个要素之一或多个的组合：

  1. 知识因素（用户知道的东西）：如密码、PIN码、答案问题。
  2. 所有权因素（用户拥有的东西）：如手机、硬件令牌、电子邮件。
  3. 生物特征因素（用户所具有的东西）：如指纹、虹膜、面部识别

实现MFA的基本步骤通常包括：

  1. 第一步验证（通常是密码）：用户输入用户名和密码，数据库对其进行验证。
  2. 第二步验证（如一次性密码 OTP）：如果第一步验证通过，用户会收到一个一次性密码（OTP），通常通过短信、电子邮件或身份验证器应用生成。用户需要输入这个OTP。
  3. 验证通过：系统验证OTP的有效性，如果正确，则允许用户访问资源。

MFA的实现方法：
MFA可以通过多种方式实现，以下是一些常见的方法：

  1. 双因素身份验证（2FA）：这是最常见的MFA形式，包括两个身份验证步骤，例如输入密码后，向用户的手机或电子邮件发送一次性密码（OTP）。

  2. 身份验证器软件：身份验证器软件会生成基于时间的一次性密码（TOTP），供用户在输入密码后使用。

  3. 硬件令牌：用户可以携带的物理设备，如安全密钥，用于生成一次性密码或提供认证响应。短信或电子邮件验证码：向用户的手机号或邮箱发送验证码，用户需要输入这个验证码来完成认证。

简要

上边这些，都是一些文字的简要介绍。真正的使用场景可以这样。

比如，先账号密码登录或扫码登录。这一步验证通过后，再进行短信验证或 TOTP 验证。毕竟短信的使用是有费用成本，使用 TOTP 来实现验证就是一个省钱的方式。只是 TOTP 也是需要客户端来做支撑。（自己开发或让用户使用市面上成熟的工具）

阅读全文 >>

9月 17

发表于 • 227 views • 没有评论!

前端

在某些场景中，css 的遮罩真的很好用。小程序也可以用。如其名，遮罩就是遮住的地方才能罩得住，才能显示出来。adobe 的 flash 和 ps 也是这样提现的。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image

如下图，用户的头像是个六边形区域。如果用传统 css 实现六边形的裁切，很难实现这样好的效果。这个不仅有 border，边边交接处还有圆角，看起来更圆润。这个时候，遮罩就能很好的实现。只要用图中所示的区域的 png 图片作为遮罩来对目标图片进行遮罩处理就可以很好的实现。border 可以通过嵌套和内层 margin 来实现。

阅读全文 >>

9月 17

发表于 • 101 views • 没有评论!

前端

css 实现渐变边框

不需要圆角的方式

<div class="box">无圆角的渐变边框</div>
.box {
  border: 4px solid;
  border-image-source: linear-gradient(to right, #8f41e9, #578aef);
  border-image-slice: 1;
}

这种方式最简洁简单。唯一缺点就是无圆角。

有圆角的方式

一般人能想到的是使用一个渐变色背景。然后里边套一层 div，设置 div 的背景色。同时设置外层和里层的圆角。这个有两个缺点。一个是多套了一层，另外一个就是圆角不一定能把握的住，不一定非常完美融合。

还有一种方式实现,分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。

.box {
  border: 4px solid transparent;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}

文章来源

https://segmentfault.com/a/1190000040794056

阅读全文 >>

9月 12

发表于 • 116 views • 没有评论!

工具

分析 app 接口数据，对 app 请求进行抓包是必要的一步。比如想做一个自动抢票系统，在对方没有提供 api 给予抢票时，就得需要自己去抓包分析请求。虽然这样不一定能成功，却是要走的一步。charles 是一个很不错的抓包工具，是一个付费工具。利用 charles 进行抓包需要走一下几步。

抓包步骤

  1. 下载安装 charles。 https://www.charlesproxy.com/latest-release/download.do
  2. 获取激活码。 https://www.zzzmode.com/mytools/charles/
  3. 通过上边的激活码，激活 charles。
  4. 配置（mac 端证书，手机端证书，代理接口等）。 https://blog.csdn.net/pan_jiabao/article/details/123126053

乱码配置

上边这些做好之后，手机端运行程序发起的 https 请求， mac 端的 charles 都能抓取到。可是在查看数据时，发现都是乱码。不是乱码更好了。如果是乱码，就处理处理。

  1. 依次点击顶部菜单。 Proxy->SSL Proxying Settings.

  2. Enable SSL Proxying 打勾，并且添加 include 配置。这里可以添加 :。允许所有的域名和端口号。这样设置之后，乱码应该就没了。至少我是没了。

阅读全文 >>

9月 12

发表于 • 113 views • 没有评论!

vite,前端

vite 构建的 ts 项目中，引用某些库时，遇到 Could not find a declaration file for module 的错误提示。手动在 env.d.ts 中添加一下就可以。如：

/// <reference types="vite/client" />
declare module 'element-plus/dist/locale/zh-cn.mjs'
declare module 'element-plus/dist/locale/en.mjs'
declare module 'element-plus/dist/locale/ja.mjs'
declare module 'simple-peer/simplepeer.min.js'

阅读全文 >>

9月 10

发表于 • 305 views • 没有评论!

node.js

https://socket.io/zh-CN/

行为 命令
给自己发消息 socket.emit('message', '这是一条给自己的消息');
给所有人发消息 io.emit('message', '这是一条消息');
给除自己之外的人发消息 socket.broadcast.emit('message', '这是一条消息，但不发送给自己');
给房间里的人发消息 io.to('roomName').emit('message', '这是一条仅房间内用户可见的消息');
给房间里除了自己之外的人发消息 socket.broadcast.to('roomName').emit('message', '这是一条仅房间内其他用户可见的消息');
加入房间 socket.join('roomName')
离开房间 socket.leave('roomName')

阅读全文 >>

9月 09

发表于 • 287 views • 没有评论!

vite,vue,前端

在 vite 环境下，安装使用 simple-peer，报错 global is not defined 处理。

解决方法： https://github.com/feross/simple-peer/issues/883

这样引入就可以了：

import SimplePeer from 'simple-peer/simplepeer.min.js'

如果遇到 Could not find a declaration file for module 'simple-peer/simplepeer.min.js'. 错误。可以在 env.d.ts 中增加定义就可以。

env.d.ts

declare module 'simple-peer/simplepeer.min.js'

阅读全文 >>

8月 02

发表于 • 334 views • 没有评论!

linux,运维

操作

有就编辑，没有就创建 .vimrc 文件

vim ~/.vimrc

增加以下配置。

set encoding=utf-8  
set fileencodings=utf-8,gbk,gb2312,gb18030,cp936,latin1  
set termencoding=utf-8

使得生效

source ~/.vimrc

阅读全文 >>

7月 25

发表于 • 340 views • 没有评论!

架构服务

原文： https://community.uwa4d.com/blog/detail?id=1638476203938906113

写在前面

本文我想写一下，一款游戏上线前需要做哪些事情，以保证项目上线后的稳定性。若你们公司之前没有大DAU游戏上线和运维经验，现在准备上线一款新游戏，可以按照这个RoadMap去做或者检查一遍自己游戏的上线准备工作。

本文不会写具体的操作，只是提供一个RoadMap，具体如何做大家可以自行查找相关文档。

所有的工作，都会存在一个工作量和收益的权衡。一般来说，对于大部分游戏，不需要做到100w以上的同时在线，也不需要做到100%的可用性。具体工作做到哪一步，项目根据自己的情况权衡即可，我在文中会介绍需要重点关注的地方。

这些工作，至少需要提前6个月以上的时间准备，至少需要一个资深服务端和一个靠谱的执行服务端。

阅读全文 >>