公告

网站迁移了,之前是托管在 gitee 上,好处是不用买服务器,坏处是不利于 seo 收录

前段时间把域名备案了,买了中国大陆的服务器,用 jenkins + nginx 搭了个自动化部署

新的服务器,新的开始,加油,奥利给 💪

修复 antd select placeholder 不显示的问题

今天弄后台的时候需要用到 Select 下拉选择器的组件,但是发现传了 placeholder 还是无法显示提示,以前也一直是这些写的啊,看了下官网 demo,也是这样的,这让我很疑惑这次咋不行了

后来找了下原因,发现把默认值设为 undefined 就可以显示了,设置为 “” 或者 null 的时候是不会显示的

css 自定义 ol/li 序号样式

默认样式:

css 自定义 ol/li 序号样式 - 小鑫の随笔

自定义样式:

css 自定义 ol/li 序号样式 - 小鑫の随笔

CSS 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ol {
counter-reset: li; // 创建计数器
}
ol li {
position: relative;
padding-left: 30px;
}
ol li::before {
content: counter(li) ".";
counter-increment: li; // 递增计数器
position: absolute;
left: 0;
font-size: 28px;
color: rgba(0, 0, 0, .8);
}

Taro 函数式组件配置页面参数

原来类组件的写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default class Index extends Component {
config = {
navigationBarTitleText: '首页',
navigationBarBackgroundColor: '#ffffff',
backgroundColor: '#eeeeee',
navigationBarTextStyle: 'black',
backgroundTextStyle: 'light'
}

render () {
return (
<View className='index'>
</View>
)
}
}

如果是函数式组件需要换种写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Index() {
return (
<View className='index'>
<Text>1</Text>
</View>
)
}

Index.config = {
navigationBarTitleText: '首页',
navigationBarBackgroundColor: '#ffffff',
backgroundColor: '#eeeeee',
navigationBarTextStyle: 'black',
backgroundTextStyle: 'light'
}

export default Index

Laravel 保存 emoji 表情

最近写接口时,有个新增文章的接口报错了,报错的信息为:

1
2
3
...
SQLSTATE[HY000]: General error: 1366 Incorrect string value: '\xF0\x9F\x98\x8B\xF0\x9F...' for column 'content' at row
...

因为那个页面有富文本编辑器,所以很快的推断出了这是因为数据里有 emoji 表情导致的报错

解决办法如下:

1.设置该字段的字符编码

1
ALTER TABLE 表名 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2.修改 Laravel 配置

config/database.php

1
2
3
4
5
6
7
8
9
10
'mysql' => [
'driver' => 'mysql',
'host' => env('DB_HOST', 'localhost'),
'port' => env('DB_PORT', '3306'),
'charset' => 'utf8mb4',
'collation' => 'utf8mb4_unicode_ci',
'prefix' => '',
'strict' => true,
'engine' => null,
]

Laravel 存储 base64 格式图片

直接用正则替换 base64 图片的编码头即可

1
2
3
4
5
6
7
8
public function update(Request $request) {
$coverImg = $request->get('cover_img');
preg_match('/^(data:\s*image\/(\w+);base64,)/', $coverImg, $res);
$coverImg = base64_decode(str_replace($res[1], '', $coverImg));
$imagePath = str_random(10) . uniqid() . '.png'; // 生成图片名
Storage::disk('uploads')->put($imagePath, $coverImg); // 保存图片
return env('APP_URL') . '/uploads/' . $imagePath; // 拼接完成路径
}

有几个点要注意:

1.上面代码中的 Storage::disk('uploads') 是我在 config/filesystems.php 文件中定义的,如果直接把代码复制过去执行是不行的

config/filesystems.php

1
2
3
4
5
6
7
8
9
10
'disks' => [
...
// 新建一个本地端uploads空间(目录) 用于存储上传的文件
'uploads' => [
'driver' => 'local',
// 文件将上传到public/uploads目录 如果需要浏览器直接访问 请设置成这个
'root' => public_path('uploads'),
]
...
],

2.部署到生产环境后需要给权限 否则无法保存图片