<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。

基本语法

在 <script> 标签上添加 setup 属性启用该语法，里面的代码会背编译成组件 setup() 函数的内容，每次组件实例被创建时执行。

1
2
3

<script setup>
// 组合式 API 写在这里
</script>

如果要使用 TypeScript，加上 lang="ts" 属性即可。

1
2

<script lang="ts" setup>
</script>

当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用。

响应式

响应式即变量数据变化的时候，视图跟着变化。
响应式状态需要明确使用 响应式 API 来创建.
常用 API：

• ref()
• reactive()
• computed()
• watch()
• watchEffect()
• readonly()

一对一 HasOne

tables

1
2
3
4
5
6

- users
  - id
  - name
- avatars
  - user_id
  - image

HasOne 关联

1
2
3
4
5
6
7
8
9

// App\Models\User
public function avatar(): HasOne
{
    // $this->hasOne('class_name', 'foreign_key', 'local_key');
    // foreign_key默认是表名去掉 s 加上 '_id' 后缀
    // local_key 默认是 id
    return $this->hasOne(Avatar::class);
    // 即 $this->hasOne(Avatar::class, 'user_id', 'id');
}

HasOne 反向关联

1
2
3
4
5
6
7

// App\Models\Avatar
public function user(): BelongsTo
{
    // $this->belongsTo(User::class, 'foreign_key', 'owner_key');
    // return $this->belongsTo(User::class, 'user_id', 'id');
    return $this->belongsTo(User::class); // 省略 'foreign_key', 'owner_key' 参数
}

数据操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 新建
$user = User::create(['name', '...']);
Avatar::create([
    'user_id' => $user->id,
    'image' => '...',
]);

// 更新
$user = User::find(1);
// 更新关联数据
$user->avatar()->update(['image' => '...']);
// 更新模型
$user->update(['name' => '...']);

// 反向关联操作 belongsTo 的 associate/dissociate
$avatar = Avatar::find(1);
$avatar->user()->dissociate(); // 把 user_id 设为 null
$avatar->save(); // 保存更改

$user = User::find(10);
$avatar->user()->associate($user); // 把 user_id 改为 10
$avatar->save();

一对多 HasMany

tables

1
2
3
4
5
6
7

- posts
  - id
  - title
- comments
  - id
  - post_id
  - comment

模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// App\Models\Post 关联
public function comments(): HasMany
{
    // return $this->hasMany('class_name', 'foreign_key', 'local_key');
    return $this->hasMany(Comment::class, 'post_id', 'id');
    return $this->hasMany(Comment::class); // 使用默认参数
}

// App\Models\Comment 反向关联
public function post(): BelongsTo
{
    // $this->belongsTo(Post::class, 'foreign_key', 'owner_key');
    return $this->belongsTo(Post::class, 'post_id', 'id');
    return $this->belongsTo(Post::class); // 省略 'foreign_key', 'owner_key' 参数
}

//TODO

子查询

1
2
3
4
5
6
7

User::query()->whereIn(
    'id',
    UserRolePivot::query()
        ->select('user_id')
        ->where('role_id', $roleId)
)->get();
// SELECT * FROM user WHERE id IN( SELECT user_id FROM user_role_pivot WHERE role_id = $roleId)

分组查询

• 文件

  • option + command + y 同步文件/文件夹，文件夹中外部新增或删除文件时刷新有延迟，使用该快捷键同步
  • Ctrl + n 新建文件/文件夹

• 编辑

  • command + x 剪切行
  • command + c 复制行/复制选中文本
  • command + shift + c 复制文件/文件夹路径
  • command + d 复制行
  • option + ↑ 选择更多代码
  • option + ↓ 选择更少代码
  • option + → 下一个代码（令牌）位置
  • option + ← 上一个代码（令牌）位置
  • command + → 代码行尾
  • command + ← 代码行头
  • tab 增加缩进
  • shift + tab 减少缩进
  • command + shift + enter 完成代码声明

• 查找相关

  • command + f 查找当前文件
  • command + r 查找替换
  • command + shift + o 快速查询文件
  • command + shift + f 关键字查找,更强大的查询器
  • command + shift + r 高级替换
  • command + option + b 找到当前类（接口的）所有继承（实现类）
  • option + shift + c 查找最近修改的文件
  • option + f7 直接查询选中的字符
  • ctrl + f7 文件中查询选中字符
  • command + 鼠标点击 跳到类或方法或变量等声明处
  • command + shift + tab 切换tab页文件
  • command + shift + +,- 展开或缩起
  • command + . 折叠或展开选中的代码

• View

  • command + e 打开最近的文件
  • shift + command + e 最近打开文件具体代码位置

• Bookmarks

  • F3 加入/取消书签
  • option + F3 加入(可设置数字字母记号的)/取消书签
  • command + F3 弹窗显示/隐藏书签

• Code

  • shift + command + ↑ 声明段上移
  • shift + command + ↓ 声明段下移
  • shift + option + ↑ 行上移
  • shift + option + ↓ 行下移

• 自动代码

  • option + 回车 选中类名/接口名后按快捷键，导入包，自动修正
  • command + n 快速生成代码，为每个成员属性生成 getter/setter/__construct/方法、文档注释、单元测试等
  • ctrl + i 快速生成插入魔术方法
  • ctrl + o 复写父类方法
  • command + option + l 对当前文件进行格式化排版
  • command + d 复制当前行
  • command + / // 单行注释
  • command + shift + / 多行注释

• 显示窗口

  • command + 1 Project
  • command + 2 Favorites
  • command + 6 TODO
  • command + 7 Structure
  • command + 9 Version Control 版本控制
  • option + F12 Terminal 终端

• Git

  • ctrl + v 版本控制相关操作
  • option + command + a Add
  • option + command + z revert (取消Add)
  • shift + command + p pull
  • shift + command + k push
  • command + k commit

Composer的元数据存在国外的服务器，每次执行composer命令的时候，经常要下载很多的元数据，需要几分钟到十几分钟，效率极低。

我们可以设置使用国内composer镜像来加速。

1
2
3
4

# 查看 composer 项目配置
composer config -l
# 查看 composer 全局配置
composer config -gl

设置镜像命令：

1
2
3
4
5

# 阿里云镜像（不同步了，不推荐用）
# composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

# 腾讯云镜像（推荐用）
composer config -g repos.packagist composer https://mirrors.tencent.com/composer/

恢复默认源：

1

composer config -g --unset repos.packagist

从阿里云镜像换腾讯云镜像

最近安装 Laravel 10 总提示 匹配不到 doctrine/inflector 最小版本的错误：

1

- laravel/framework[v10.0.0, ..., v10.4.1] require doctrine/inflector ^2.0.5 -> found doctrine/inflector[2.0.x-dev, 2.1.x-dev] but it does not match your minimum-stability.

打开 packagist.org 看，明明最新包是 2.0.6，怎么会没有。

用 composer show doctrine/inflector -a 命令，看到的最新版本是 2.0.4 😭。可以实锤是镜像没同步，应用包太老了。

用命令 composer config -g --unset repos.packagist 恢复默认源，再执行 composer show doctrine/inflector -a，果然最新包时 2.0.6。

换腾讯云镜像，问题解决。

这篇文章解决：

• PhpStorm + xdebug 单步调试PHP的设置
• 远程服务器PHP源码调试
• 微信公众号接口/小程序接口服务的调试

有些应用需要部署到外网环境才能运行，我们使用 PhpStorm + Xdebug 在本地调试远程web服务器跑的代码。

安装xdebug扩展

1

pecl install xdebug

如果服务器部署的是php很新，安装xdebug不成功，可以试试 pecl install xdebug-beta

配置xdebug

在php.ini中添加如下配置

此文档已过时，点击这里阅读新文档

关于Let’s Encrypt

Let’s Encrypt 是一个免费、开放，自动化的证书颁发机构，由 ISRG（Internet Security Research Group）运作。

兼容性： Let’s Encrypt 已经得了 IdenTrust 的交叉签名，这意味着其证书现在已经可以被所有主流的浏览器所信任，包括从IE6-IE11，其它现代浏览器更没话说，100%放心使用。

申请频率限制

注册IP限制：每IP每3个小时不超过10次

域名数量限制：每个域名（包含子域名）每7天不超过5个

证书位置

所有版本已申请的证书放在 /etc/letsencrypt/archive下，/etc/letsencrypt/live是指向最新版本的符号链接。web server中关于证书的配置建议指向 live 目录下的文件，以免证书更新后还需要更改配置。

每个域名一个目录，主要包含以下几个文件：

• cert.pem 申请的服务器证书文件
• privkey.pem 服务器证书对应的私钥
• chain.pem 除服务器证书外，浏览器解析所需的其他全部证书，比如根证书和中间证书
• fullchain.pem 包含服务器证书的全部证书链文件

证书更新

平时经常用vim编辑服务器端一些配置文件和脚本，当复制粘贴内容时，会因为自动缩进把代码缩进搞乱了。

解决办法：进入粘贴模式粘贴内容

1

:set paste

我们不能直接通过修改配置来适应粘贴内容，因为粘贴模式下配置变化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

textwidth = 0
wrapmargin = 0
set noai
set nosi
softtabstop = 0
revins 重置
ruler 重置
showmatch 重置
formatoptions 使用空值

# 下面的选项值不变，但却被禁用：
lisp
indentexpr
cindent

注册账号

注册登录 https://pypi.org/ 账号，在 “Account Setting” 中点击 “Add API token”，把创建好的 token 保存起来。

创建 setup.py 文件

setup.py 设置包的参数，例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

from distutils.core import setup
from setuptools import find_packages

with open("README.rst", "r") as f:
  long_description = f.read()

setup(
    name='',  # 包名
    version='1.0.0',  # 版本号
    description='A small example package',
    long_description=long_description,
    author='',
    author_email='',
    url='',
    install_requires=[],
    license='MIT',
    packages=find_packages(),
    platforms=["all"],
    classifiers=[
        'Intended Audience :: Developers',
        'Operating System :: OS Independent',
        'Natural Language :: Chinese (Simplified)',
        'Programming Language :: Python',
        'Programming Language :: Python :: 2',
        'Programming Language :: Python :: 2.7',
        'Programming Language :: Python :: 3',
        'Programming Language :: Python :: 3.5',
        'Programming Language :: Python :: 3.6',
        'Programming Language :: Python :: 3.7',
        'Programming Language :: Python :: 3.8',
        'Topic :: Software Development :: Libraries'
    ],
)

重要参数说明：

• name：项目的名称，name是包的分发名称。
• version：项目的版本。需要注意的是，PyPI上只允许一个版本存在，如果后续代码有了任何更改，再次上传需要增加版本号
• author和author_email：项目作者的名字和邮件, 用于识别包的作者。
• description：项目的简短描述
• long_description：项目的详细描述，会显示在PyPI的项目描述页面。必须是rst(reStructuredText) 格式的
• packages：指定最终发布的包中要包含的packages。
• install_requires：项目依赖哪些库，这些库会在pip install的时候自动安装
• classifiers：其他信息，一般包括项目支持的Python版本，License，支持的操作系统。

pip 安装需要的包

1

pip install setuptools wheel twine

打包&发布

执行命令

1
2
3
4

# 打包
python setup.py sdist build
# 发布
twine upload dist/*

弹出的 username 输入：__token__，密码输入前面创建的 API token，这样就发布好 pip 包了。

这个密码每次要输入比较麻烦，执行如下配置就可以省掉输入账号密码的步骤：

在系统用户文件夹中创建 .pypirc 文件，输入内容：

1
2
3

[pypi]
username = __token__
password = 前面创建的 API token

一个基于element-ui，实现图片选取和上传的Vue插件，可显著提升管理后台图片选取、上传的用户体验。

源码： https://github.com/coderpan-com/elx-imgbox

效果截图

1、选取图片库中的图片

2、上传图片