近来项目遇到要显示SVG图像文件。本来SVG已不是新鲜事物，应该很好使用，现实并非如此。
设计说用AI（Adobe Illustrator）做出来的图，用Chrome打开会出现错误，比如图形位置不对、该显示的图形没显示等。用文本文件打开那图，会显示xml标签开头，而不是svg标签开头。
图片显示有误的问题，只能让设计去修正了。至于文件格式的问题，找到svgcleaner这个工具，转换一下就好了，体积还有所减少。虽然svgcleaner貌似不更新了，但工作正常。
以前一直用Inkscape代替曾经的Flash，设计矢量图，比如图标之类，还不错。不知道为什么大厂出品的AI会是这么多问题。
近来遇到关于库存与并发的问题。由于一直接触的系统都是没有考虑过商品库存的并发，加上解决过的并发问题，也只是简单直接地采用锁表的方式。所以导致踩坑。
商品基础数据，包括库存数量，主要用于查询。但库存数量，还要解决经常变化，且可能出现并发的情况。如果简单使用锁，即使只锁一行数据，也会导致正在进行下单（涉及扣减库存）的商品不能被浏览（因为锁住，不能查询）。
为了减轻这个情况，下单时，检查库存数量是否足够购买时，不锁数据，等到保存订单数据，真正扣减库存时才加锁。本想着通过减少锁数据的时间，减少商品数据不能查询的情况。但是系统采用Java开发，使用了Spring + Hibernate框架。而Hibernate在事务内使用了一级缓存，即事务内未提交时，查询到的业务数据都放到一级缓存。事务内查询时，会先查询一级缓存，若命中，则不再查询数据库。就导致了检查库存时已获取了商品数据，扣减库存时（从一级缓存获取）不能获取到最新库存（特别是两个客户同时下单同一个商品的情况），最后在并发情况下扣减库存，就出现库存扣少1了的问题。
解决方案很简单，把商品基础数据与库存数据分开两个表存放。库存数据在扣减时，不影响商品浏览。
由于客户浏览商品，或者添加商品到购物车，都需要查询库存数据。如果使用悲观锁，即锁表或锁数据后不能查询，会导致客户不能浏览。参考了以下文章，决定使用乐观锁，即不使用数据库锁。
目前系统规模比较小，且没有涉及分布式，于是决定在扣减库存时直接更新数据的方式。即使用update语句扣减库存时，用where条件判断是否足够扣减，并返回是否扣减成功。
由于使用MySQL，update语句不能返回指定数据（但是，sql server可以使用update…output，PostgreSQL可用update…returning）。加上Hibernate不能同时执行update和select两个语句，最后采用存储过程。参考以下网址：
总的来说，使用乐观锁（即没有使用数据库的锁），并利用MySQL存储过程实现扣减库存后返回结果。
1）库存表
create table `product_stock` (
`productId` bigint not null comment '商品ID',
`instock` int not null default '0' comment '库存数量',
`createTime` datetime(3) default null comment '创建时间',
`updateTime` datetime(3) default null comment '更新时间',
primary key ( productId )
) engine=InnoDB default charset=utf8mb4 collate=utf8mb4_0900_ai_ci comment='商品库存';
2）扣减库存的存储过程
利用存储过程的out参数，返回扣减结果。当outUpdateQty返回的值大于零，扣减成功，否则失败。扣减成功，outStockAfter的值才是正确。
delimiter //
create procedure `product_reduce_instock`(
in inProductId bigint, /*传入参数：商品ID*/
in inReduceQty int, /*传入参数：扣减数量*/
out outUpdateQty int, /*传出参数：实际扣减数量*/
out outStockAfter int /*传出参数：更新后库存数量*/
)
begin
-- 初始化返回的值
set @updateQty=0;
set @stockAfter=0;
-- 执行扣减库存
update product_stock
set instock = (@stockAfter := instock - (@updateQty := inReduceQty)), updateTime = now()
where productId = inProductId and instock >= inReduceQty;
-- 传出参数赋值，即返回扣减结果
set outUpdateStock=@updateQty;
set outStockAfter=@updateQty;
end //
锐角云三角主机，入手两年多，一直在家作为私人服务器，稳定跑着各种服务。作为矿难出品，当年以299RMB入手，很多人说贵。但跑了这么久，现在感觉很超值。性价比高，秒杀各种ARM开发板。
先说缺点。当时由于是299，所以没有外壳和M.2接口的128GB SSD。为了不破坏自带的Win10，我另外买了个32GB SSD，装上Debian 10。30 多 RMB，包邮，型号是M.2 2242。CPU性能问题，不能胜任大型计算任务。试过编译minidlna，能跑到2.2Ghz，但仍然有点慢。
装系统时，注意要支持uefi32启动的。所以Debian 10的安装盘，只能用同时支持32位和64位的ISO文件。
另外还有个硬伤，不能上电自动开机。如果家里电路不稳定，可能需要买个12V的UPS补救。另外，也可以参照以下教程，添加上电自动开机的功能：
再来说优点吧。作为家用服务器，首先是省电。然后是8GB大内存（z8350那类电视棒一般是2GB或4GB）！CPU是N3450，x86架构，64位（服务器软件方面几乎没有障碍，例如直接跑Minecraft Bedrock），跑起来风扇不会经常转（就是噪音低）。接口丰富，千兆网卡、3个USB 3.0、HDMI 2.0、WiFi、蓝牙、SSD（M.2 2242接口，SATA协议，最大支持960GB）、耳机接口等。自带64GB存储，默认装Win10，就算不做服务器，作为高清播放器、办公电脑，也是可以。
更多相关资料，可以搜索关键词“锐角云 三角主机”。
本文记录了从jQurey转到原生JavaScript开发的相关处理。
二十一世纪初，IE 6还在统治浏览器的时代，出现了一批JavaScript框架。除了提高前端开发效率，还屏蔽了各个浏览器的JavaScript接口差异。那时有3个产品印象比较深刻：
看看当前的浏览器，已经是Webkit内核的天下，加上IE已亡，ECMAScript 6普及……各个浏览器的JavaScript兼容性大大提高。所以，我们可以直接采用浏览器原生JavaScript，替代jQuery这类用于遍历或搜索DOM的框架。当然，复杂的界面，主要是响应式前端框架（AngularJS、React、VUE）的世界。
主要参考这个文章，从jQuery转到原生JavaScript。
另外，对于页面上的异步请求（ajax），该文章没有提出timeout的处理。以下整理一个示例：
// 请求错误的类，用于传递错误信息
let RespError = class {
constructor(code, msg, respJson) {
this.code = code;
this.msg = msg;
this.respJson = respJson;
}
};
// POST提交Json数据。调用ajaxJson方法前加上async就是同步调用，直接调用就是异步调用
// 默认超时10秒
let ajaxJson = async (url, formParam={}, onSuccess=(respJson)=>{},
onFailed=(respError)=>{}, timeoutSec=10) => {
let controller = new AbortController();
let timeoutId = setTimeout(() => {
// 超时后停止请求
controller.abort();
// 抛出超时的错误
onFailed(new RespError(-1, 'TIMEOUT', null));
}, timeoutSec * 1000);
try {
// 发起请求
let response = await fetch(url, {
signal: controller.signal, // 用于接收中断请求信号
method: 'POST',
cache: 'no-cache',
headers: {
// 声明请求的参数是JSON
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(formParam)
});
// 注意，响应的数据只能获取一次，包括response.json()和response.text()
let respJson = await response.json();
if(!response.ok) {
// 请求失败，抛出自定义的错误对象
throw new RespError(response.status, response.statusText, respJson);
}
onSuccess(respJson);
} catch(err) {
onFailed(err instanceof RespError ? err : new RespError(-1, err.message, null));
} finally {
// 请求结束，停止执行定时函数。避免相应成功后，抛出超时的错误。
clearTimeout(timeoutId);
}
};
关于Fetch的使用，参考：
推荐搭配 petite-vue ，实现数据与页面元素的绑定。
用过Flutter，对数据的响应式，有进一步了解。于是，回过头来再看看VueJS，自然而然地理解了。
找到一个比较好的Vue3示例代码，展示了使用Vue3的主要代码，涉及Vue3的模板语言、组件等。
我在代码加上注释，更容易理解：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>Learn Vue3</title>
</head>
<body>
<!-- 界面模板 -->
<div id="app">
<!-- 两个大括号，获取data()方法返回对象的属性的值，给文本绑定值 -->
<p>{{counter}}</p>
<p>
<!-- :title是v-bind:title的缩写，给HTML标签的属性绑定值 -->
<span :title="message">{{message}}</span>
</p>
<!-- @click 是 v-on:click 的缩写，指定事件的执行方法 -->
<p><button @click="reverseMessage">翻转文字</button></p>
<!-- “v-”前缀的特殊属性，是Vue的指令 -->
<!-- 使用 v-model 指令来实现双向数据绑定 -->
<p><input type="text" v-model="message"></p>
<!-- v-if ，当值为true时，才显示对应HTML -->
<p v-if="seen">你能看到我吗？</p>
<p><button @click="seenYN">显示/隐藏</button></p>
<h4>我爱吃的水果：</h4>
<ul>
<!-- v-for，循环输出HTML -->
<li v-for="fruit in fruits">{{fruit}}</li>
</ul>
<h4>周末计划：</h4>
<ol>
<!-- todo-item对应自定义组件TodoItem -->
<todo-item v-for="todo in todos" :todo="todo" :key="todo"></todo-item>
</ol>
</div>
<script>
// 定义自定义组件
const TodoItem = {
props: ['todo'],
template: '<li>{{todo}}</li>'
}
// 数据对象，有点像Flutter的State或者Provider
const dataObj = {
// 声明用到的自定义组件
components: {
TodoItem
},
// 定义数据对象，有用的属性可以先设置null，用于占位
data() {
console.log("vue3 demo, data()");
return {
counter: 0,
message: "hello vue",
seen: true,
fruits: ["apple", "orange", "bananas"],
todos: ["钢琴课", "绘画课", "看电影"]
}
},
// 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
created() {
console.log("vue3 demo, created()");
},
// 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
mounted() {
console.log("vue3 demo, mounted()");
setInterval(() => {
this.counter++
}, 1000);
},
// 操作数据的方法，一般用于页面元素的事件处理
methods: {
reverseMessage: function () {
// 操作数据，让Vue更新界面
this.message = this.message.split('').reverse().join('');
},
seenYN: function () {
this.seen = !this.seen;
}
}
}
// 数据与模板绑定
Vue.createApp(dataObj).mount('#app')
</script>
</body>
</html>
更详细的介绍和相关文档，可以访问Vue3的官网：
注：本文不是教程。纯粹以玩和分享的角度做记录。
现今时代，微波炉已经足够廉价，可以成为普通家用电器。微波炉也是个加热工具，所以一直想试试用来烘培咖啡豆，但不知如何操作。直到刷到这个视频（注意，up主是个居住在中国的日本人，应该是用翻译软件翻译出来的中文，所以看起来有点别扭）：
视频的操作是，微波炉（分5档，低火、中低火、中火、中高火、高火）开高火，每隔30秒拿出来摇晃几下。130g生豆，约7分钟后一爆，约10分钟后二爆，约12分钟下豆。
我第一次试，50g生豆，用玻璃茶壶（外壁比较薄）。开高火，第一个30秒还没到就黑掉几颗，赶紧转中高火。可是全程中高火，烘了14分钟也没有一爆，但豆子没有糊。估计是没能锁住热量。
后面一次，110g生豆，用两个玻璃饭盒（外壁比较厚）。先开中高火，约5分钟后转黄，再开高火，约9分钟后（时间有点忘记了）一爆，一爆过后下豆。效果比较好。但是由于两个饭盒盖得比较紧，拖慢了下豆时间，导致有点过烘。
就是，没有一次成功的经历，但可以总结一些经验。正如该视频下的有个留言，“小火脱水，中火转黄，大火发展”，烘豆一般都是这样操作的过程。
总的来说，微波炉烘豆，值得玩玩。毕竟器具都很家常，整个过程能够观察咖啡生豆的颜色和气味变化，烘焙过程也不会有银皮乱飞的烦恼。
但不建议作为日常烘豆。不能搅拌、不能测温，基本就不能控制并稳定出品的风味。
今年受疫情影响，几乎所有芯片都涨价了。但是合宙ESP32C3-CORE却奇迹地以9.9RMB包邮，其搭配的Air101-LCD屏幕扩展板（0.96寸）也是9.9RMB包邮。甚是吸引，于是入手了一套，主板+屏幕。
注：以下操作，以基于Debian的Linux发行版为例。
合宙ESP32C3-CORE简单总结如下：
相关资料：
由于合宙的Lua OS采用Lua语言，虽然官方在努力，但本人不熟悉，就选择了更好玩的MicroPython。
相关资料：
MicroPython关于ESP32-C3的固件及刷机教程，参考官方文档：
对应合宙ESP32C3经典版，即自带CH340芯片，提供实体串口。 https://micropython.org/download/esp32c3/
对应合宙ESP32C3精简版（简约版），即没有串口芯片，提供虚拟串口。 https://micropython.org/download/esp32c3-usb/
Windows，需要安装CH343的驱动。我使用Lubuntu 20.04，自动识别。另外，新版的合宙ESP32C3-CORE应该也不用装。
安装Python 3.8或3.7后，再装刷机工具esptool。使用sudo安装，是方便所有用户都可以用。使用pip3是指定安装Python3的版本。
sudo pip3 install esptool
在MicroPython官方网站 https://micropython.org/download/esp32c3/ 底部的Firmware -> Releases，下载最新版本的固件。
--port为端口，要根据实际填写，我电脑上的是/dev/ttyACM0。
sudo esptool.py --chip esp32-c3 --port /dev/ttyACM0 erase_flash
--port为端口，/opt/download/esp32c3-20220618-v1.19.1.bin为MicroPython固件文件。另外，如果刷入不成功，可以多刷几次。
sudo esptool.py --chip esp32-c3 --port /dev/ttyACM0 --baud 460800 write_flash -z 0x0 /opt/download/esp32c3-20220618-v1.19.1.bin
推荐使用Thonny作为开发IDE。可以先不上传代码而直接运行，也可以看到开发板上的文件。
相关资料：
先安装python3-tk
sudo apt install python3-tk
再安装thonny
sudo pip3 install thonny
运行
thonny
插上开发板，在Thonny进入 工具 -> 设置 -> 解释器 -> 选择解释器为“MicroPython (ESP32)”，然后就可以开发了。
Air101-LCD屏幕的使用有几点需要注意的：
SoftSPI。tft.rotation(1)，x轴不偏移，y轴偏移24像素。相反，竖屏时，即不写tft.rotation(1)，x轴偏移24像素，y轴不偏移。相关资料：
写了个示例代码显示一些信息（如下），保存为main.py，连同ST7735驱动文件ST7735.py、英文字体文件terminalfont.py一起上传上去。
from machine import Pin, SoftSPI, SPI
from ST7735 import TFT
import time
from terminalfont import terminalfont
import network
import ubinascii
# 由于TFT屏的颜色有问题，因此需要重写一个函数修复一下
def TFTColor(r,g,b) :
return ((b & 0xF8) << 8) | ((g & 0xFC) << 3) | (r >> 3)
spi = SoftSPI(baudrate=1000000, polarity=1, phase=0, sck=Pin(2), mosi=Pin(3), miso=Pin(10))
tft=TFT(spi,6,10,7) #DC, Reset, CS
tft.initr()
tft.rgb(True)
tft.rotation(1) # 横屏显示
# 绘制背景色
tft.fill(TFTColor(0,0,0))
# 绘制方块
#tft.fillrect((0,24),(20,20),TFTColor(0,0,255))
# 显示文字
tft.text((0,24),'mac',tft.WHITE,terminalfont,2)
# 显示MAC
mac = ubinascii.hexlify(network.WLAN().config('mac')).decode()
tft.text((0,40),mac,tft.WHITE,terminalfont,2)
# 显示运行秒数
from machine import Timer
sec = 0
def showTime(t) :
global sec
sec += 1
tft.fillrect((0,56),(160,20),TFTColor(255,255,255))
tft.text((0,60),f'Run {sec} sec',tft.BLACK,terminalfont,2)
# 运行定时器
tim0 = Timer(0)
tim0.init(period=1000, mode=Timer.PERIODIC, callback=showTime)
# 把按键信息显示在屏幕的函数
def showDirect(t) :
global tft
tft.fillrect((0,76),(160,16),TFTColor(0,0,0))
tft.text((0,78),str(t),tft.WHITE,terminalfont,2)
# 设置按键的接口
from machine import Pin
keyL = Pin(9, Pin.IN, Pin.PULL_UP)
keyU = Pin(8, Pin.IN, Pin.PULL_UP)
keyC = Pin(4, Pin.IN, Pin.PULL_UP)
keyD = Pin(5, Pin.IN, Pin.PULL_UP)
keyR = Pin(19, Pin.IN, Pin.PULL_DOWN)
keyL.irq(trigger=Pin.IRQ_FALLING, handler=showDirect)
keyU.irq(trigger=Pin.IRQ_FALLING, handler=showDirect)
keyC.irq(trigger=Pin.IRQ_FALLING, handler=showDirect)
keyD.irq(trigger=Pin.IRQ_FALLING, handler=showDirect)
keyR.irq(trigger=Pin.IRQ_RISING, handler=showDirect)
这是另一个程序，显示一个走动的方块：
from machine import Pin, SoftSPI, SPI
from ST7735 import TFT
import time
# 由于ftf屏的颜色有问题，因此需要重写一个函数修复一下
def TFTColor(r,g,b) :
return ((b & 0xF8) << 8) | ((g & 0xFC) << 3) | (r >> 3)
spi = SoftSPI(baudrate=1000000, polarity=1, phase=0, sck=Pin(2), mosi=Pin(3), miso=Pin(10))
tft=TFT(spi,6,10,7) #DC, Reset, CS
tft.initr()
tft.rgb(True)
tft.rotation(1) #方向调整
# 绘制背景色
tft.fill(TFTColor(0,0,0))
w = 20
h = 20
max = 160
for i in range(0,max*4-1):
x = i * 5 % max
y = i * 5 // max * h + 24
tft.fillrect((x,y),(w,h),TFTColor(255,255,255))
++i
time.sleep(0.04)
tft.fillrect((x,y),(w,h),TFTColor(0,0,0))
显示优化的问题，仍未解决（如下）。后面应该会试试Arduino for ESP32-C3。
有个项目解决中文的显示的，但刷固件失败，放弃了。 支持中文显示的MicroPython固件 https://github.com/wangshujun-tj/mpy-Framebuf-boost
想使用LVGL显示更好的UI，但是编译失败，也放弃了。 Micropython + lvgl https://github.com/lvgl/lv_micropython
今晚计划做意大利面，于是CFO建议搭配个Pizza。以前做过很多次，一直没有实现满意的饼底。再次参考小高姐视频，做了个软底的，这次算是比较满意了。当然，还是没有视频中的烘焙石板。视频如下：
近来工作中用上了Flutter，并且使用了Provider作为状态管理，确实爽，但是也踩了一下坑。
Provider是基于InheritedWidget组件，使用观察者模式 + 生产者消费者模式，实现状态共享，简直就是为了取代StatefulWidget而存在。相关资料：
Provider可以定义在任意地方，其状态只提供给其子Widget访问。例如，定义在App之上可实现全局的状态共享的状态，定义在页面之上可实现页面内的状态共享。
Provider是利用BuildContext对象传递，实现状态共享，也因此只能实现子级可访问。
Provider的子Widget（即child参数）不能赋予创建好的Widget对象，否则后面的所有孙Widget不能通过BuildContext对象获取其状态。解决方案是使用builder参数，传入构建子Widget的函数，或者child参数设置带有builder函数的Widget，例如Builder对象。简单来说，实现BuildContext对象传递，就要父级创建后，利用创建子级的builder方法，把带有父级Provider状态的BuildContext对象传递给子级。
数据变化，必然导致重绘。所以不要过于担心是否重绘，而重点关注重绘的点在哪里，如何减少重绘的Widget。重绘Widget，会向上找到最近的builder方法并执行。所以需要重绘的Widget，最好放在其builder方法内。需要变化的StatelessWidget对象，用Builder类的builder方法包裹，是个很好的做法。
Provider是以类型区分数据的。如果是多个相同数据类型（例如int类型）的状态，则需要定义不同的类，且都含有该数据类型（例如int类型）的属性。
定义多个Provider，可以使用MultiProvider。
组合多个Provider对象，可以使用ProxyProvider。
一般使用ChangeNotifierProvider就可以，更多的Provider类型如下：
| 类型 | 描述 |
|---|---|
| Provider | 最基础的 provider 组成，接收一个任意值并暴露它。 |
| ListenableProvider | 供可监听对象使用的特殊 provider。ListenableProvider 会监听对象，并在监听器被调用时更新依赖此对象的 widgets。 |
| ChangeNotifierProvider | 为 ChangeNotifier 提供的 ListenableProvider 规范，会在需要时自动调用 ChangeNotifier.dispose。 |
| ValueListenableProvider | 监听 ValueListenable，并且只暴露出 ValueListenable.value。 |
| StreamProvider | 监听流，并暴露出当前的最新值。 |
| FutureProvider | 接收一个 Future，并在其进入 complete 状态时更新依赖它的组件。 |
获取Provider的状态，有以下三种方式：
// 使用Provider.of，需要加上参数“listen: false”
T t = Provider.of<T>(context，listen: false)）;
// 使用context.read方法最简单
T t = context.read<T>();
// 使用Selector类，可以定义builder方法
Selector<T, R>(
selector: (_, t) {return t.r;},
builder: (_, r, __) {return Text('${r}');}
);
// 使用context.select方法最简单。如果取出的数据需要重绘，则最好用Builder类包裹一下
R r = context.select<T，R>(R cb(T value));
// Flutter Provider Selector数据更新问题优化
// https://blog.csdn.net/Code1994/article/details/124720388
// 使用Consumer类，可以定义builder方法
Consumer<T>(
builder: (_, t, __) {return Text('${t.r}');}
);
// 使用Provider.of方法。如果取出的数据需要重绘，则最好用Builder类包裹一下
T t = Provider.of<T>(context);
// 使用context.watch方法最简单。如果取出的数据需要重绘，则最好用Builder类包裹一下
T t = context.watch<T>();
为了消灭家中的低筋面粉库存，找到“奶香馒头”的视频。试着做了一下，不难，吃起来也可以。