存在主义与命理学

https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

萨特说”存在先于本质“,意思是人的本质实在人出现后产生的。我的人生该怎么过,完全依靠我自己决定,在选择成为什么样的人上,人是完全自由的。进而衍生出来的是,人的命运也不是写在天上写在书里的命理,人人都可以做他想做的事,朝他想变的方向去改变。而命理学认为的人的命运是写在天上,写在书里,关键结点都可以被预测。通过生辰八字以及衍生的一系列算法,你的一切都已经注定(宿命论)。

这样一看萨特思想更容易被现代人所接受,毕竟怎么会有宿命呢,我们人人都可以改变做自己的主任,主宰自己的命运。但是王德峰老师提到,决定命运的除了我们的意志,还有天灾、出生、环境等这些外在因素和客观条件。这些“突然落在”直接落在我们头上的因素可以称作“命”。对于这些,存在主义也承认自由收到了限制。

所以,这是不是命理学的胜利呢?

Gorm 关联关系彻底区分

https://images.unsplash.com/photo-1505686994434-e3cc5abf1330?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

多对一 Belongs To 与 一对多 Has Many

// `User` 属于 `Company`,`CompanyID` 是外键
type User struct {
  gorm.Model
  Name      string
  CompanyID int
  Company   Company
}

type Company struct {
  ID   int
  Name string
}

一对多和多对一的区别在于语义侧重点不同。你可以说一个工人属于一个工厂也可以说一个工厂有多馆工人,前者是多对一,后者是一对多。

// Company 有多个 User,CompanyID 是外键
type User struct {
  gorm.Model
  Name      string
  CompanyID int
}

type Company struct {
  ID   int
  Name string
  Users User[]
}

在实际的操作中就是要看你是要查公司然后顺便知道这个公司下有多少工人,还是要知道一个工人对应的公司是什么。Gorm 提供了预加载 Preload 来做这一点 。所以多对一和一对多的区分前提是你知道自己要什么,然后定义它,最后用 Preload 来得到它。

继续阅读Gorm 关联关系彻底区分

微信H5开发环境配置指南(全)

https://images.unsplash.com/photo-1594909122845-11baa439b7bf?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

微信H5想要真机开发没有小程序那么方便,都需要授权安全域。为此把内网地址映射到公网上十分必要。经过我两天的尝试,试了一些穿透工具,只有自建+frp是最满意的结果,其他方式都基本不可用或者需要花钱才能达到可用。我总结如下。

花生壳

这个不多说免费没有80端口,也不固定域名。付费门槛又很高1000+年付。放弃。

ngrok

官网 https://ngrok.com/download 。ngrok MACOS 下使用手册是这样。

继续阅读微信H5开发环境配置指南(全)

一种底部固定上方滚动的H5方案(IOS)

https://images.unsplash.com/photo-1541701494587-cb58502866ab?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

上下分割思路

上下分割思路总结是指将页面分成上下两部分,一部分是主体滚动页面,一部分是底部固定物件。实现方式上可以分成:可视区域动态获取+CSS变量+UMIJS 全局样式变量三个关键点。

首先是要获取当前我们的可视区。我们不能简单的使用100VH来获取当前视口。因为在移动端100VH的高度这个属性会把上方和下方的导航工具也包含进去这篇文章提到这个问题.。一个计算当前有效视口的函数如下所示。其中,3rem是我指定的一个navbar 的大小这不是巧合,对应tw的h-12原子属性,并定义了 –content-height 这个 CSS 变量,这可以让其他样式根据当前的高度做一个变化。

继续阅读一种底部固定上方滚动的H5方案(IOS)

Antd Upload 上传实战

https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

(嫌弃)Form 方式自己组装发送

// 因为涉及到文件上传是单独分开的接口,使用form表单实现
// todo 服务器要拉取当前信息对应的所有附件信息
// 上传 formData <https://blog.csdn.net/TetaiSon/article/details/112677857>
// 自己构建 form data 设定 request 方法 post form
// 关键是知道 upload 的 file 就是一个 Blob list
let formData = new FormData();

Object.keys(newRecord).forEach((key) => {
  if (key !== 'upload') {
    formData.append(key, newRecord[key]);
  } else {
    // file 单独处理
    newRecord.upload?.forEach((file) => {
      formData.append('uploadFiles', file.originFileObj as any);
    });
  }
});

file.originFileObj 是 ANTD 封装的关键,另外,通过append 构造 form 数组。此外你要实现上传的逻辑。相比来说还是下面这种方法简洁。

继续阅读Antd Upload 上传实战

Docker Compose 部署多个单页应用

Photo by Mak on Unsplash

场景

近阶段,我需要把我多个SPA部署到一台虚拟机上。多个应用通过二级域名进行访问。我知道通过 Nginx 设定多个虚拟主机可以做到这一点。但是如何和 Docker Compose 结合是个问题。目前的我是只有 SPA 应用,因此只在那个文件夹里作了一个 Nginx。假如要多个 SPA 如何编写 Docker Compose 文件呢。我想了下面两种方案。

方案

一是多个SPA放在一个容器。这意味着要共享一个 Dockerfile,感觉不利于维护。弃用;二是每个SPA放在不同容器。通过一个中转 Nginx 转发到不同容器各自的 Nginx。需要注意的是,需要在每个SPA 的 Dockerfile 中禁止默认的 Nginx Server 配置,关闭 80 端口,否则会报端口占用错误。

继续阅读Docker Compose 部署多个单页应用

解决移动端字体适配两个问题

https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

IOS PT 和 PX 的关系

淘宝美工交付我的设计稿是375(PT)宽度,然后我就去琢磨了一下这个单位。一开始,我通过百度呢,说 PT 是一个绝对单位,一个PT = 1/72英寸,IPHONE6上一个PX等于1/326英寸(可以通过屏幕英寸和像素的 PPI 比如说 326 值得到),然后一个 PT 等于 326/72 = 4个PX。然后我按照这个计算结果来写代码,发现尺寸是设计稿的4倍多(326/72),而实际上设计稿的PT和PX是1比1的关系。

带着这个疑惑,我查到了这个说法,在不同的屏幕上(普通屏幕 vs retina屏幕),CSS像素所呈现的大小(物理尺寸)是一致的,不同的是1个CSS像素所对应的物理像素个数是不一致的。(这篇文章里)。这和我的实验是一致的。

所以IOS的PT其实是他的逻辑像素,任何CSS像素值在IOS上都会被转换成逻辑像素。关键的是这个转换不是用户去做的,而是IOS自动做的转换。你只要写1PX,系统自己转换成逻辑上的1个PT(物理上是多个像素组成)。

继续阅读解决移动端字体适配两个问题