erishen
仅使用一副标准的三角尺（30°-60°-90° 和 45°-45°-90°），无法直接画出145度的角，因为三角尺提供的角度无法组合或分解成145度。
三角尺提供的角度：
无法组合145°：
因此，用一副标准的三角尺无法直接画出145°的角。如果需要145°的角，可以借助量角器或者其他工具进行精确绘制。
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
const ClockContainer = styled.div`
width: 200px;
height: 200px;
border: 8px solid #333;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
`;
const Hand = styled.div`
position: absolute;
bottom: 50%;
left: 50%;
background: #333;
transform-origin: bottom;
transition: transform 0.5s ease-in-out;
&.hour {
height: 50px;
width: 6px;
background: black;
}
&.minute {
height: 70px;
width: 4px;
background: gray;
}
&.second {
height: 90px;
width: 2px;
background: red;
}
`;
const Center = styled.div`
position: absolute;
width: 14px;
height: 14px;
background: black;
border-radius: 50%;
`;
const Number = styled.div`
position: absolute;
font-size: 16px;
font-weight: bold;
color: black;
`;
const Clock = () => {
const [secondCounts, setSecondCounts] = useState(0);
const [minuteCounts, setMinuteCounts] = useState(0);
const [hourCounts, setHourCounts] = useState(0);
const [time, setTime] = useState(new Date());
useEffect(() => {
const interval = setInterval(() => {
setTime(new Date());
}, 1000);
return () => clearInterval(interval);
}, []);
const formatTime = (date) => {
const hours = date.getHours() % 12;
const minutes = date.getMinutes();
const seconds = date.getSeconds();
return { hours, minutes, seconds };
};
const { hours, minutes, seconds } = formatTime(time);
useEffect(() => {
if(seconds === 0){
setSecondCounts((secondCounts)=> secondCounts + 1);
}
if(minutes === 0 && seconds === 0){
setMinuteCounts((minuteCounts)=> minuteCounts + 1);
}
if(hourCounts === 0 && minutes === 0 && seconds === 0){
setHourCounts((hourCounts)=> hourCounts + 1);
}
}, [hours, minutes, seconds]);
const renderNumbers = () => {
const numbers = Array.from({ length: 12 }, (_, index) => index + 1);
return numbers.map((number) => {
const angle = (number * 30) - 90; // 计算数字位置
const x = 80 * Math.cos((angle * Math.PI) / 180);
const y = 80 * Math.sin((angle * Math.PI) / 180);
return (
<Number key={number} style={{ transform: `translate(${x}px, ${y}px)` }}>
{number}
</Number>
);
});
};
return (
<ClockContainer>
{renderNumbers()}
<Hand className="hour" style={{ transform: `rotate(${(hours * 30) + (minutes / 2) + hourCounts * 360}deg)` }} />
<Hand className="minute" style={{ transform: `rotate(${minutes * 6 + minuteCounts * 360}deg)` }} />
<Hand className="second" style={{ transform: `rotate(${seconds * 6 + secondCounts * 360}deg)` }} />
<Center />
</ClockContainer>
);
};
export default Clock;
这个流程图描述了一个简单的数学计算过程。
const Fraction = require('fraction.js');
function calculateAndAdjust(num1, num2) {
const sum = new Fraction(num1).add(new Fraction(num2));
if (sum.compare(3) > 0) {
return sum.sub(new Fraction(3, 4));
}
return sum;
}
// 示例调用
const result = calculateAndAdjust(1 / 5, 1 / 3);
console.log(result.toFraction());
8/15
这个代码片段使用了 fraction.js 库来处理分数运算。首先，它将输入的两个数转换为分数，然后计算它们的和。如果和大于 3，则从和中减去 3/4。最后，输出结果。
fraction.js 库。https://github.com/Homebrew/homebrew-core/issues/180498
MySQL 9 不再支持 mysql_native_password 认证方法，这可能会影响从 MySQL 8.x 升级到 MySQL 9 的用户。为了解决此问题，您需要更新 MySQL 用户表，使用新的认证方法。按照以下步骤操作：
1.- 禁用权限表：
编辑 MySQL 配置文件，通常位于 /opt/homebrew/etc/my.cnf。在 [mysqld] 部分下添加以下行以禁用权限表：
[mysqld]
skip-grant-tables
2.- 重启 MySQL：
使用 Homebrew 重启 MySQL：
brew services restart mysql
3.- 以 root 用户连接 MySQL：
mysql -uroot
4.- 更新用户认证方法：
刷新权限：
FLUSH PRIVILEGES;
5.- 检查使用 mysql_native_password 插件的用户：
SELECT User, Host, plugin FROM mysql.user WHERE plugin = 'mysql_native_password';
6.- 将 root 用户更新为使用 caching_sha2_password 插件：
ALTER USER 'root'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'new_password';
7.- 重新启用权限表：
更新后，删除或注释掉 MySQL 配置文件中的 skip-grant-tables 行。
8.- 重启 MySQL 以应用更改：
brew services restart mysql
通过执行这些步骤，您应该能够在升级到 MySQL 9 后解决认证方法问题。
使用 npm 安装 mysql2：
https://github.com/sidorares/node-mysql2
TypeScript 是 JavaScript 的超集，提供了强类型支持，让开发者可以编写更安全、更健壮的代码。在本文中，我们将探讨如何将 TypeScript 与 Node.js 和 Express 一起使用，并构建一个简单的应用程序。
要完成本教程，你需要以下工具：
首先，我们需要创建一个新目录并初始化一个新的 Node.js 项目。在终端中运行以下命令：
mkdir node-ts-express
cd node-ts-express
npm init -y
这将创建一个新的 package.json 文件，默认设置所有值。接下来，我们将安装 TypeScript 和一些必要的依赖项。
为了使用 TypeScript，我们需要安装 TypeScript 编译器和 Node.js 的类型定义：
npm install typescript ts-node @types/node --save-dev
typescript 是 TypeScript 编译器ts-node 允许我们在 Node.js 中直接运行 TypeScript 文件，而无需手动编译@types/node 包含 Node.js API 的类型定义接下来，我们还需要安装 Express 和其类型定义：
npm install express
npm install @types/express --save-dev
接下来，我们将设置 TypeScript 配置文件 tsconfig.json。在项目根目录下运行以下命令：
npx tsc --init
这个命令将在项目根目录中生成一个 tsconfig.json 文件。打开这个文件，确保以下选项被正确设置：
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
}
}
target 设置了编译后的 JavaScript 版本（在本例中为 ES6）module 指定模块系统（在本例中为 CommonJS）outDir 指定编译后文件的输出目录rootDir 定义 TypeScript 源文件所在的目录strict 启用严格的类型检查选项esModuleInterop 允许兼容 CommonJS 和 ES 模块现在，我们可以开始编写代码了。首先，创建一个 src 目录，并在其中创建一个名为 index.ts 的文件：
mkdir src
touch src/index.ts
在 index.ts 文件中，添加以下代码：
import express, { Request, Response } from 'express';
const app = express();
const PORT = 3000;
app.get('/', (req: Request, res: Response) => {
res.send('Hello, TypeScript with Node.js!');
});
app.listen(PORT, () => {
console.log(`Server is running at http://localhost:${PORT}`);
});
在这段代码中，我们导入了 Express 和类型定义，并创建了一个基本的 Express 服务器。服务器监听 3000 端口，并在根路由 / 返回一个简单的消息。
为了运行这个 TypeScript 应用程序，我们可以使用 ts-node 命令。运行以下命令：
npx ts-node src/index.ts
这将启动服务器，你可以在浏览器中访问 http://localhost:3000，并看到页面显示 "Hello, TypeScript with Node.js!"。
尽管 ts-node 非常方便，但在生产环境中，你通常会编译 TypeScript 代码为 JavaScript，然后运行编译后的代码。要编译 TypeScript 代码，运行以下命令：
npx tsc
这将编译 src 目录中的所有 TypeScript 文件，并将编译后的 JavaScript 文件输出到 dist 目录中。你可以通过以下命令运行编译后的应用程序：
node dist/index.js
在本文中，我们介绍了如何在 Node.js 项目中设置 TypeScript，并使用 Express 创建了一个简单的服务器。TypeScript 提供的强类型检查和其他特性，使得它成为构建更大规模、复杂应用程序的理想选择。
你可以根据项目需求扩展此设置，添加更多的中间件、路由、控制器等。希望你在使用 TypeScript 构建 Node.js 应用时取得成功！
在 Nginx 的配置目录中创建或编辑一个配置文件，例如 /etc/nginx/conf.d/example.conf：
sudo nano /etc/nginx/conf.d/example.conf
在配置文件中添加以下内容，将请求代理到 8080 端口：
server {
listen 80;
server_name example.com; # 替换为实际域名
location / {
proxy_pass http://localhost:8080;
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;
}
}
验证配置文件的语法正确性：
sudo nginx -t
重新加载 Nginx 以应用更改：
sudo systemctl reload nginx
根据你的系统安装 Certbot：
Ubuntu:
sudo apt update
sudo apt install certbot python3-certbot-nginx
CentOS/RHEL:
sudo yum install epel-release
sudo yum install certbot python3-certbot-nginx
使用 Certbot 自动配置 Nginx：
sudo certbot --nginx -d example.com # 替换为实际域名
访问 https://example.com 并检查证书是否有效。你也可以使用 SSL Labs SSL Test 进行检测。
在 Nginx 配置文件中配置 SSL/TLS：
server {
listen 80;
server_name example.com; # 替换为实际域名
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name example.com; # 替换为实际域名
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:TLS_CHACHA20_POLY1305_SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-CBC-SHA256:ECDHE-RSA-AES256-CBC-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA384';
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://localhost:8080;
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;
}
}
sudo systemctl reload nginx
使用以下命令查找占用 443 端口的进程：
sudo netstat -tulnp | grep :443
或：
sudo ss -tulnp | grep :443
根据找到的进程 ID (PID)，停止该进程：
sudo kill -9 <PID>
确保没有多个 Nginx 配置文件试图监听相同的端口：
sudo grep -R "listen 443" /etc/nginx/
确认 Apache 配置文件中没有监听 443 端口：
sudo grep -R "Listen 443" /etc/httpd/
或：
sudo grep -R "Listen 443" /etc/apache2/
如果需要，同时运行 Nginx 和其他服务时，可以调整 Nginx 配置文件中的端口号：
server {
listen 8443 ssl;
server_name example.com; # 替换为实际域名
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:TLS_CHACHA20_POLY1305_SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-CBC-SHA256:ECDHE-RSA-AES256-CBC-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA384';
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://localhost:8080;
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;
}
}
重启 Nginx 和其他相关服务：
sudo systemctl restart nginx
sudo systemctl restart apache2 # 如果你使用的是 Apache
检查系统是否有其他端口冲突情况或资源争用问题：
sudo lsof -i :443
确保服务器的系统时间准确：
date
通过以上步骤，你可以配置 Nginx 以使用 SSL/TLS，并解决端口冲突问题。确保你的服务配置正确，证书有效，且端口未被其他进程占用。如果问题仍然存在，请详细检查错误日志并与相关支持团队联系获取进一步帮助。
作者：36氪编辑
近年来，中国科技公司在海外市场的表现令人瞩目。本文探讨了这些公司在全球扩展过程中面临的挑战与机遇，并分析了如何在国际市场上超越张一鸣（字节跳动创始人）的成功模式。
中国科技公司在全球扩展过程中面临诸多挑战，但同时也拥有巨大的机遇。通过深耕本地市场、持续技术创新和有效的品牌建设，有望在国际市场上取得更大的成功，超越当前的行业领袖。
作者：36氪编辑
根据36氪发布的《2024中国开发者调查报告》显示：
这份报告展示了中国开发者的工作状态和职业发展趋势。AI技术的快速发展，对开发者的工作方式和效率带来了显著影响。开发者们在追求更高薪资和更好的职业发展的同时，也越来越重视个人成长和技能提升。
Electron 是一个流行的框架，它允许开发人员使用 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台桌面应用程序。通过将 Electron 与用于构建用户界面的强大 JavaScript 库 React 相结合，我们可以创建功能丰富的桌面应用程序，这些应用程序的感觉和行为就像 Windows、macOS 和 Linux 上的本机应用程序一样。
在本教程中，我们将引导您完成使用 Electron 和 React 创建简单桌面应用程序的过程。我们将介绍如何设置开发环境、创建基本的 React 应用程序、将其与 Electron 集成以及为不同平台构建可分发包。
在开始之前，请确保您的系统上安装了以下软件：
让我们首先使用 设置一个新的 React 应用程序create-react-app。
npx create-react-app electron-react-app
2. 安装完成后，导航到新创建的项目目录：
cd electron-react-app
3. 要验证一切设置是否正确，请运行开发服务器：
npm 启动
现在，你应该可以看到 React 应用程序在你的浏览器中运行http://localhost:3000。
接下来，我们将安装 Electron 并配置我们的 React 应用程序以使用它。
Ctrl+C通过按下终端来停止开发服务器。electron-builder作为开发依赖项：npm install electron electron-is-dev electron-builder -D
该命令还安装了一个名为的有用 npm 包，electron-is-dev用于检查我们的 electron 应用程序是在开发中还是在生产中。您使用该-D标志在 dev 依赖项下安装 electron。
现在，我们将配置 Electron 来运行我们的 React 应用程序。
electron.js。该文件将作为我们的 Electron 应用程序的主要入口点。electron.js并添加以下代码：// electron.js
const { app, BrowserWindow } = require（“electron”）；
const path = require（“path”）；
let mainWindow;
function createWindow（）{
mainWindow = new BrowserWindow（{
width：800，
height：600，
webPreferences：{
nodeIntegration：true，
}，
}）；
(async () => {
const isDev = (await import('electron-is-dev')).default;
const startURL = isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`;
mainWindow.loadURL(startURL);
})();
mainWindow.loadURL （startURL）；mainWindow.on
（“ closed”，（）=>（mainWindow = null））；}
app.on
（“ ready ”，createWindow）；
app. on ( 'window-all-closed' , () => {
if (process.platform ! == ' darwin' ) {
app.quit (); } }); app.on ( 'activate' , () => { if (mainWindow === null ) { createWindow (); } });
此代码设置了主 Electron 应用程序窗口，并在开发模式下从开发服务器加载 React 应用程序，或在生产模式下从构建目录加载 React 应用程序。
package.json为了让 Electron 知道我们的主要入口文件和构建目录，我们需要修改该package.json文件。
package.jsonJSON 对象并在其内添加以下行：// package.json
{
// ...
"main" : "electron.js" ,
"build" : {
"appId" : "com.example.myapp" ,
"productName" : "我的 Electron 应用" ,
"directories" : {
"output" : "dist"
}
} ,
"scripts": {
// ...
"electron": "electron .",
"dist": "electron-builder"
},
// ...
}
字段"main"指定了 Electron 的入口点，"build"部分提供了的配置选项electron-builder，包括appId、productName和分发的输出目录。
现在，让我们测试我们的 Electron 应用程序。
npm start
2. 在单独的终端或命令提示符中，运行 Electron 应用程序：
npm run electron
现在您应该看到您的 React 应用程序在独立的 Electron 窗口中运行。
要打包并分发你的 Electron 应用程序给用户，你需要创建特定于平台的可分发包。electron-builder使这个过程更容易。
npm run build
该命令将在dist目录中生成一个可分发的包。
要为多个平台构建包，可以使用以下命令：
npm run dist
上述命令将在dist目录中创建适用于 Windows、macOS 和 Linux 的包。
恭喜！您已成功使用 Electron 和 React 创建了桌面应用程序。现在您可以将应用程序分发给不同平台上的用户。
Electron 和 React 为构建跨平台桌面应用程序提供了强大的组合。通过本教程，您已经学会了如何设置 React 应用程序、将其与 Electron 集成以及将其打包以供分发。
请记住，本教程仅涵盖基础知识，您可以使用 Electron 和 React 做更多事情来构建复杂的桌面应用程序。浏览 Electron 和 React 文档以发现更多高级功能和适合您项目的可能性。祝您编码愉快！