最近需要部署一个wordpress到服务器上，因为我觉得php安装不像python那样熟悉和方便，另外我感觉好像会自动占用80端口，就不是很想在原生系统上安装php，准备用一个docker跑wordpress。

Q1：wordpress数据库丢失，需要重新安装

删除wp-config.php文件

Q2：Docker 部署wordpress

1. 拉取镜像： docker pull wordpress
2. 创建容器：docker run -d -it -p 8083:80 wordpress
3. 创建mysql数据库
4. 安装

Q3：wordpress使用postgresql数据库

放弃，需要用到一个psql的插件，但是这个插件又比较旧了，和新版本的wp适配总是有问题。用docker跑了一个mysql，数据文件映射到原生系统上了。

Q4：wordpress连接不到docker的mysql

不能用127.0.0.1，要用docker给mysql分配的ip地址

 docker inspect mysql | grep -i ipaddr

可能会显示如下的信息：

            "SecondaryIPAddresses": null,
            "IPAddress": "172.17.0.4",
                    "IPAddress": "172.17.0.4",

Q5：上传的文件大小超过php.ini文件中定义的upload_max_filesize值

docker中没找到相关的配置文件，理论上改php.ini，或者反向代理的配置。遂放弃。用cp命令，从原生系统复制到docker里了。

将主机/www/bb目录拷贝到容器 abcd123的/www目录下。
docker cp /www/bb abcd123:/www/

Q6：wordpress主页跳转到127.0.0.1，其他页面都是正常访问

应该在设置里面填入当前的主页网址。配置好记得清理缓存，不然总是跳到localhost，配置不生效。

Q7：静态文件网络请求出错，显示no data found，报错block:mixed-content

nginx配置有问题，http请求没有自动升级为https请求。
我当时加了这一行：

add_header Content-Security-Policy "upgrade-insecure-requests";

完整的nginx配置

server {
   server_name 你的域名.com;
   location / {
       proxy_pass http://反向代理的ip;
       proxy_set_header Host $host;   
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       add_header Content-Security-Policy "upgrade-insecure-requests";
}

Q8：Uncaught TypeError: strlen(): Argument #1 ($str) must be of type string, array given in

估计是早期的php版本中数组和字符串都可以自动转换可能。
我这里的变量类型的是array，所以我把strlen换成count。
注意我这里是用的option framework，应该用了这个框架的都有可能碰到这种问题。

总结：docker跑php虽然有些坑，但是不污染原生系统，对于这种不再流行的语言来说，我觉得还是觉得挺方便省心的。

BoxInst官方代码

https://github.com/aim-uofa/AdelaiDet

Q1：安装官方的包时报错THC/THC.h 相关头文件找不到

原因PyTorch新版本移除了相关的实现，解决办法，去其它仓库找以适配好的代码。因为官方改的是detectron2的包，所以别人也有可能用了。

Q2：detectron2安装不上

1. 官方仓库：https://github.com/facebookresearch/detectron2
2. 特定版本：Please use Detectron2 with commit id 9eb4831 if you have any issues related to Detectron2.

Q3: 安装detectron2报错，nms_rotated_cuda.cu报了5个错误

注释了if判断

// #ifdef WITH_CUDA
#include "../box_iou_rotated/box_iou_rotated_utils.h"
// #endif
// TODO avoid this when pytorch supports "same directory" hipification
// #ifdef WITH_HIP
#include "box_iou_rotated/box_iou_rotated_utils.h"
// #endif

pnpm

• Official website

  • https://pnpm.io/

• Advantages

  • Fast
  • Efficient
    • Files in node_modules are copied or linked from a specific content-addressable storage repository.
  • Supports monorepos
    • Monorepo means that all the code of all projects is maintained in a single code version repository.
    • pnpm has built-in support for multiple packages in a single repository.
      

• Differences from npm and yarn

  • npm3+ and yarn manage node_modules through a flattened way, which solves some problems of nested ways, but introduces the problem of ghost dependencies, and only one version of the same package will be promoted, and the rest of the versions will still be copied multiple times.
  • pnpm hard links from the global store to node_modules/.pnpm, and then organizes the dependency relationship between them through soft links.

Q1：如何创建postgresql和mysql的Docker容器

• 拉取镜像

以mysql为例

docker pull mysql

• 创建并启动容器

docker run --name mysql -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 -d mysql

注意：

• 配置e，这是镜像需要的一些参数
• 配置p，将容器的端口映射到本地，不然只能用容器的ip去访问

Q2：maven引入mysql-connector-java报错Cannot find class:com.mysql.jdbc.Drive

版本问题，换个高版本的。mysql版本太高了，驱动也应该换高一点。

Q3：mysql创建数据库推荐用什么编码？

utf8mb4_general_ci，utf-8不用多少了，世界统一编码。mb4兼容四字节的unicode，utf8_general_ci，它速度快。使用utf8_unicode_ci，它比较准确。

Q4：测试SpringBoot是否已经连接到mysql

• 打开Debug模式

application.prosperity中设置

logging.level.com.zaxxer.hikari=DEBUG

• 看是否有连接成功的字样
  

Q5：SpringBoot处理流程

Entity->Dao->Service->Controller

Entity: 数据库模型
Dao: 做一些读数据的操作
Service: 组合Dao读出的数据，来满足Controller的要求
Controller: 路由操作

Q6：Dao和Repository的区别

Dao通过Repository去实现

Q7：SpringBoot如何返回json

在路由方法前面加一个ResponseBody，让SpringBoot直接返回数据，而不是找视图什么的。

Q8：SpringBoot返回的json数组数量对，但是里面没有值？

在Entity层没有配置get和set方法，可以通过lombok.Data包，在Entity类前面加@Data注释来自动生成。

当使用 React 来创建表单时，我们可以像 Vue.js 一样实现双向绑定。具体步骤如下：

1. 创建一个状态变量
   使用 React 的 Hooks 中的 useState 方法创建一个状态变量，用于存储表单输入的值。

   const [firstName, setFirstName] = useState('');

2. 将表单控件的 value 属性与状态变量绑定
   将表单控件（如 input）的 value 属性设置为状态变量，确保表单控件的值与状态变量同步。

   <input value={firstName} />

   在此示例中，firstName 是我们在步骤 1 中定义的状态变量。

3. 在 onChange 事件中更新状态变量
   当表单控件的值发生变化时，触发 onChange 事件。在事件处理程序中，使用 setFirstName 方法更新状态变量，以便它反映输入字段中的最新值。

   <input value={firstName} onChange={e => setFirstName(e.target.value)} />

   在此示例中，setFirstName 是我们在步骤 1 中定义的更新状态变量的方法。

以下是一个完整的示例：

import React, { useState } from 'react';

function Form() {
  const [firstName, setFirstName] = useState('');

  return (
    <div>
      <input
        type="text"
        value={firstName}
        onChange={e => setFirstName(e.target.value)}
      />
      <p>First Name: {firstName}</p>
    </div>
  );
}

在此示例中，我们创建了一个输入框，并将其与 firstName 状态变量绑定。每当输入框的值发生变化时，该变量的值也会随之更新，并显示在页面上。

Master the React form development skills and achieve two-way binding just like Vue.js. Here are the specific steps:

1. Create a state variable
   Use the useState method from React Hooks to create a state variable for storing the input value of the form.

   const [firstName, setFirstName] = useState('');

2. Bind the value attribute of the form control with the state variable
   Set the value attribute of the form control (e.g., input) to the state variable to ensure that the value of the form control stays synchronized with the state variable.

   <input value={firstName} />

   In this example, firstName is the state variable defined in step 1.

3. Update the state variable in the onChange event
   When the value of the form control changes, trigger the onChange event. In the event handler, use the setFirstName method to update the state variable so that it reflects the latest value in the input field.

   <input value={firstName} onChange={e => setFirstName(e.target.value)} />

   In this example, setFirstName is the method defined in step 1 for updating the state variable.

Here is a complete example:

import React, { useState } from 'react';

function Form() {
  const [firstName, setFirstName] = useState('');

  return (
    <div>
      <input
        type="text"
        value={firstName}
        onChange={e => setFirstName(e.target.value)}
      />
      <p>First Name: {firstName}</p>
    </div>
  );
}

In this example, we created an input box and bound it to the firstName state variable. Whenever the value of the input box changes, the value of the variable will be updated accordingly and displayed on the page.

记录一下吧，遇到了一个很奇怪的问题。我的 Django 程序突然无法正常运行了，所以我决定修复一下。

我的情况是这样的：
Django 运行在 Docker 容器中，而 Nginx 运行在主机系统上。

Q1：访问 Django 的接口时，返回 502 错误。

Nginx 的错误日志显示如下：

recv() failed (104: Unknown error) while reading response header from up

Docker 容器中的 Django 没有运行起来，可能的原因是我在构建镜像时禁用了自动启动的选项。我担心自动启动可能会导致容器无法进入。

Q2：错误提示信息为 "none is not an allowed value"。

在代码中添加了一个选项，并标注为可选的。

from typing import Optional

Optional[str]

当生活节奏慢下来，我再也无法忍受如此糟糕的国际漫游网络，于是我决定对路由器进行一些调整。

然而，我遇到了一些问题：

下载失败:【/opt/app/clash/clash_webs.tgz】

这导致我无法打开clash web面板。

最终，我找到了解决方案：

1. 回退到22.10.1版本。
2. 将clash和clash web手动上传到/opt/bin/和/opt/bin/app/下。

我在网络上找到的解决方案：

• 将clash和clash web手动上传到/opt/bin/和/opt/bin/app/下。这个方法是可行的，但还是没有没有网络，我怀疑这可能是版本问题。
• 开启opt。这个方法不可行，因为我已经开启了opt。

Q1：date类型input的输入日期格式化

将输入的日期值格式化为YYYY-MM-DD。

Q2：在React中使用单选按钮

1. 使用相同的name属性来将多个单选按钮分组。
2. 为每个单选按钮设置一个value属性。
3. 根据逻辑判断设置每个单选按钮的checked属性。
4. 构建一个onChange回调函数。

Q3：useCallback

用于缓存函数。

Q4：在React路由中返回上一页

1. 导入useNavigate钩子函数，来自React Router库。
2. 使用const navigate = useNavigate();初始化navigate变量。
3. 调用navigate(-1)以返回上一页。

Q5：如何一次性设置多个状态值

要一次性设置多个状态值，首先初始化状态和数据，如下：

// 初始化状态和数据
const [state, setState] = useState(fakeData);

然后构建一个回调函数以根据输入事件更新状态，例如：

function handleChange(event) {
  const { name, value } = event.target;
  setState((prevState) => ({ ...prevState, [name]: value }));
}

对于单选按钮，请确保name属性与要更新的状态属性名称匹配。

掌握React的路由传参技巧！学习如何定义、获取路由参数，实现页面间数据传递。无论是在类组件还是函数组件中，都能轻松操控路由参数。进一步，快速修改Git最近一次提交信息的方法，只需一行命令！不断优化代码记录，留住每次提交的精髓。立即行动，提升开发效率！

Q1: React路由传参

路由参数的定义

路由参数可以在URL中包含一些动态的值，例如ID或者用户名。通过定义路由参数可以在不同的页面之间传递参数。

例如下面这个路由可以接收一个名为id的参数：

<Route path="/details/:id" component={DetailsPage}/>

类组件获取路由参数

在类组件中，可以通过this.props.match.params来获取路由参数，其中params属性是一个对象，包含了所有定义的路由参数。

示例代码：

export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
      </div>
    )
  }
}

函数组件获取路由参数

在函数组件中，可以使用useParams钩子来获取路由参数，它返回一个包含路由参数的对象。

示例代码：

import { useParams } from 'react-router';

export default function DetailsPage() {
  const { id } = useParams();
  return (
    <div>
      <h2>{id}</h2>
    </div>
  );
}

Q2: 修改Git提交信息

若您希望修改当前分支最近一次提交的提交信息，可以通过以下命令实现：

git commit --amend -m "新的提交信息"

其中，--amend选项表示要修改最近一次提交的提交信息，-m选项后面跟上新的提交信息即可完成修改。

1. Table Text Alignment

th {
  text-align: center;
  vertical-align: middle;
}

The vertical-align property sets the vertical alignment of the content in <th> or <td> (such as top, bottom, or middle).

By default, the vertical alignment of content in a table is middle.

2. box-sizing

When an element is set to box-sizing: border-box;, its padding and border no longer increase its width.

3. How to Hide Table Borders

Set border-top, border-left, border-bottom, and border-right of th and td to none.

4. CSS Calculation

calc()

5. Horizontal Scrolling for Tables

.container1{
	width: 1000px;
}

.container2{
  position: relative;
  overflow: auto;
  white-space: nowrap;
}

<div class="container1">
	<div class="container2">
			<table>
				<tbody>...</tbody>
			</table>
	</div>
</div>

6. Frozen Columns in Tables

.sticky-col {
  position: sticky;
	left: 0;
}

7. Multi-Row and Multi-Column Table Headers

<th rowSpan={1} colSpan={1} >
...
</th>

Use the row-span and col-span attributes.

8. Mixing Multi-Row and Multi-Column Table Headers

<thead>
	<tr>
		<th rowSpan={1} colSpan={1} >
		...
		</th>
	</tr>
	<tr>
	<th rowSpan={1} colSpan={1} >
	...
	</th>
	</tr>
</thead>

Calculate the positions of rows and columns that span multiple cells in advance, and the second row of headers will automatically appear in the reserved space.

9. Fixed Width for Table Content

<th>
	<div style="widh: 220px">...</div>
</th>

Nest a <div> element to achieve a fixed width.