Tech Blog

解决MySQL8.0报错Client does not support authentication protocol requested by server...问题

2024-08-13

这个错误通常发生在客户端尝试连接到MySQL 8.0服务器时，但是客户端不支持服务器要求的认证协议。MySQL 8.0默认使用的认证插件是caching_sha2_password，它比之前的mysql_native_password插件提供了更好的安全性。

解决方法：

升级您的客户端库（如果是使用MySQL客户端，确保它是最新版本）。
如果您不能升级客户端库，可以将用户的认证插件改为mysql_native_password：




ALTER USER 'username'@'hostname' IDENTIFIED WITH 'mysql_native_password' BY 'password';

将username、hostname和password替换为实际的用户名、主机名和新密码。

如果您是数据库管理员并且想要全局更改默认的认证插件，可以在创建新用户时指定使用mysql_native_password：




CREATE USER 'username'@'hostname' IDENTIFIED WITH 'mysql_native_password' BY 'password';

确保替换username、hostname和password为实际的用户名、主机名和密码。

如果您正在使用某些ORM或框架，确保它支持caching_sha2_password插件或者可以配置为使用它。
如果您不想修改任何认证插件，确保您的客户端支持caching_sha2_password，或者从客户端使用较旧的MySQL驱动。

System

2024-08-13

所有,nodejs




// 引入 better-sqlite3 模块
const Database = require('better-sqlite3');
 
// 打开数据库，使用SQLCipher加密
const db = new Database('./data.db', {
  fileMustExist: true, // 数据库文件必须存在
  mode: Database.OPEN_READWRITE, // 打开数据库的模式
  driver: Database.SQLCIPHER, // 使用SQLCipher驱动
  key: 'your-encryption-key' // 加密密钥
});
 
// 示例：执行查询
const rows = db.prepare('SELECT * FROM users WHERE email = ?;').all('user@example.com');
console.log(rows);
 
// 示例：执行更新
db.prepare('UPDATE users SET password = ? WHERE email = ?;').run('new-password', 'user@example.com');
 
// 关闭数据库连接
db.close();

这段代码展示了如何使用better-sqlite3模块打开一个已经存在的SQLite数据库文件，并且使用SQLCipher进行加密。它演示了如何执行查询和更新操作，并在最后关闭了数据库连接。这是一个安全且高效处理加密数据库操作的实践例子。

System

2024-08-13

所有,nodejs

报错解释：

这个错误表明您正在使用的pnpm版本需要至少Node.js版本v18.12才能运行。报错提示当前版本低于此要求，因此无法正常工作。

解决方法：

升级Node.js到至少v18.12。您可以访问Node.js官方网站（https://nodejs.org/）下载最新稳定版本或使用Node Version Manager（如nvm或n）来升级Node.js。
如果您使用的是nvm，可以通过以下命令升级Node.js：
```
nvm install 18.12
nvm use 18.12
```
如果使用n，可以通过以下命令升级Node.js：
```
n 18.12
```
升级完成后，重新运行之前出现错误的命令，以确认问题是否已解决。

确保在升级Node.js之前，备份您的项目依赖和配置，以防出现不兼容或其他问题。

- 阅读更多 -

node.js npm 版本不匹配问题

System

2024-08-13

所有,nodejs

报错问题：Node.js 和 npm 版本不匹配可能会导致一些模块无法正确安装或者运行，因为它们可能依赖于特定版本的 Node.js 或 npm。

解决方法：

更新 Node.js 和 npm：
- 使用 Node Version Manager (nvm) 或 Node.js Version Manager (nvs) 来管理和切换不同的 Node.js 版本。
- 运行以下命令来更新 Node.js 和 npm：
```
nvm install node # 安装最新版本的 Node.js
nvm use node     # 切换到最新版本
npm install -g npm@latest # 更新 npm 到最新版本
```
检查 package.json 文件中的 engines 字段，确保你的 Node.js 和 npm 版本与项目要求相匹配。
如果你是在使用特定项目，并且该项目指定了 Node.js 和 npm 版本，请安装与该项目相匹配的版本：
```
nvm install <version> # 安装指定版本的 Node.js
nvm use <version>     # 切换到指定版本
```
替换 <version> 为项目要求的版本号。
如果你是在升级 Node.js 或 npm 时遇到问题，可以考虑清除 npm 缓存：
```
npm cache clean --force
```
如果以上方法都不能解决问题，可以考虑重新安装 Node.js 和 npm。

确保在解决版本不匹配问题后，重新尝试运行你的应用或安装模块。

- 阅读更多 -

如何用HTML＋CSS编写灵活的Tab页

System

2024-08-13

所有,html




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible Tab Page (2)</title>
<style>
  .tabs {
    display: flex;
    justify-content: space-between;
    background-color: #f2f2f2;
    padding: 10px;
  }
  .tab {
    padding: 10px;
    cursor: pointer;
    user-select: none;
  }
  .tab.active {
    background-color: #ccc;
  }
  .content {
    border: 1px solid #ccc;
    border-top: none;
    padding: 20px;
  }
</style>
</head>
<body>
 
<div class="tabs">
  <div class="tab active">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
</div>
 
<div class="content">Content for Tab 1</div>
 
<script>
document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', () => {
    // Remove active class from all tabs
    document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
 
    // Add active class to the clicked tab
    tab.classList.add('active');
 
    // Get the name of the tab
    const tabName = tab.textContent.trim();
 
    // Show the content for the active tab
    document.querySelectorAll('.content').forEach(content => {
      if(content.textContent.trim() === `Content for ${tabName}`) {
        content.style.display = 'block';
      } else {
        content.style.display = 'none';
      }
    });
  });
});
</script>
 
</body>
</html>

这段代码使用了原生JavaScript来处理点击事件，当用户点击标签时，会更改标签的样式并显示对应的内容区域。这个例子简单直观，方便理解和学习。

System

2024-08-13

所有,html




// 引入Vue
import Vue from 'vue';
// 引入组件
import { qrcode } from 'qrcodejs2-fix';
import html2canvas from 'html2canvas';
 
// 注册Vue全局指令，用于生成二维码
Vue.directive('qrcode', {
  inserted: function (el, binding) {
    let content = binding.value;
    let qrcodeElement = el.querySelector('.qrcode');
    if (content && qrcodeElement) {
      qrcode.toCanvas(content, qrcodeElement);
    }
  }
});
 
// 自定义打印函数
function printContent(selector) {
  const element = document.querySelector(selector);
  html2canvas(element).then(canvas => {
    const printWindow = window.open('', '_blank');
    printWindow.document.write(canvas.outerHTML);
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
  });
}
 
// 使用示例
new Vue({
  el: '#app',
  data: {
    qrcodeContent: 'https://www.example.com'
  },
  methods: {
    printQRCode() {
      this.$nextTick(() => {
        printContent('#printSection');
      });
    }
  }
});

这个代码示例展示了如何在Vue应用中注册一个全局指令来生成二维码，并使用html2canvas将指定DOM内容转换为图片，然后在新窗口中打开并执行打印操作。这是一个简化的实现，去除了一些非核心功能，如错误处理等。

System

2024-08-13

所有,html




import com.itextpdf.html2pdf.HtmlConverter;
import com.itextpdf.html2pdf.resolver.image.ImageDataFactory;
import com.itextpdf.kernel.font.PdfFontFactory;
import com.itextpdf.layout.element.List;
import com.itextpdf.layout.property.UnitValue;
import com.itextpdf.licensing.base.LicenseKey;
import com.itextpdf.styledxmlparser.css.media.MediaDeviceDescription;
import com.itextpdf.styledxmlparser.css.media.MediaType;
import com.itextpdf.kernel.pdf.PdfWriter;
import com.itextpdf.layout.Document;
import com.itextpdf.layout.element.IBlockElement;
import com.itextpdf.layout.element.IElement;
import com.itextpdf.layout.property.TextAlignment;
import com.itextpdf.layout.element.Paragraph;
 
import java.io.*;
import java.util.ArrayList;
import java.util.List;
 
public class PdfGenerator {
    public static void main(String[] args) throws IOException {
        String htmlContent = "<html><body><p>你好，这是PDF生成示例。</p><img src='image.jpg' /></body></html>";
        String pdfFilePath = "output.pdf";
 
        LicenseKey.loadLicenseFile("E:/workspace/itextkey.xml"); // 加载itext的授权文件
        PdfWriter writer = new PdfWriter(pdfFilePath);
        // 设置中文字体
        String fontPath = "E:/workspace/simsun.ttc";
        PdfFontFactory.register(fontPath);
        MediaDeviceDescription mediaDeviceDescription = new MediaDeviceDescription(MediaType.PRINT);
        List<IElement> elements = HtmlConverter.convertToElements(htmlContent, mediaDeviceDescription);
 
        // 解决中文不显示的问题
        for (IElement element : elements) {
            if (element instanceof List) {
                List list = (List) element;
                for (ListLabel label : list.getListItems()) {
                    for (IBlockElement blockElement : label.getBlockElements()) {
                        processElement(blockElement);
                    }
                }
            } else {
                processElement(element);
            }
        }
 
        // 解决图片不显示的问题
        Document document = new Document(writer);
        for (IElement element : elements) {
            if (element instanceof IBlockElement && "img".equals(((IBlockElement) element).getPropertyAsString(HtmlConverter.PROPERTY_TAG))) {
                String imageUrl = ((IBlockElement) element).getPropertyAsString(HtmlConverter.PROPERTY_SRC);
                InputStream imageStream = new FileInputStream(imageUrl);

- 阅读更多 -

python制作超炫流星雨表白,html写流星雨(完整代码)

System

2024-08-13

所有,html

以下是一个简单的HTML和JavaScript代码示例，用于创建流星雨效果。你可以将这段代码保存为HTML文件，并通过浏览器打开查看效果。




<!DOCTYPE html>
<html>
<head>
    <title>流星雨</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
 
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const W = window.innerWidth;
        const H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
 
        let particles = [];
        let particleCount = 200;
 
        function init() {
            for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }
            animate();
        }
 
        function animate() {
            ctx.clearRect(0, 0, W, H);
            for (let i = 0; i < particleCount; i++) {
                let p = particles[i];
                p.draw();
                p.update();
            }
            requestAnimationFrame(animate);
        }
 
        function Particle() {
            this.x = Math.random() * W;
            this.y = Math.random() * H;
            this.vx = -.5 + Math.random();
            this.vy = -.5 + Math.random();
            this.size = Math.random() * 2;
            this.life = 1;
 
            this.draw = function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = 'white';
                ctx.fill();
            }
 
            this.update = function() {
                this.x += this.vx * 5;
                this.y += this.vy * 5;
                if (this.x > W || this.x < 0) this.vx *= -1;
                if (this.y > H || this.y < 0) this.vy *= -1;
            }
        }
 
        init();
    </script>
</body>
</html>

这段代码会在页面上创建一个canvas元素，并用JavaScript实现流星雨的效果。你可以根据需要调整particleCount来改变雨中星星的数量，以及通过调整颜色和大小来自定义样式。

- 阅读更多 -

HTML中的6种空格标记

System

2024-08-13

所有,html

HTML中的6种空格字符是：

普通空格：（在键盘上按下空格键产生）
不断空格：&ensp;（en space）
半方大的空格：&emsp;（em space）
四分之一空间空格： （thin space）
不可断空格： （non-breaking space）
中文字符空格：　（中文全角空格字符）

以下是每种空格的HTML实体代码示例：




普通空格： a b<br>
不断空格： a&ensp;b<br>
半方大的空格： a&emsp;b<br>
四分之一空间空格： a&thinsp;b<br>
不可断空格： a&nbsp;b<br>
中文字符空格： a&#x3000;b

在HTML中使用时，只需将相应的代码插入到需要空格的地方即可。

- 阅读更多 -

【带给你不一样的思路】纯 CSS + HTML 实现几个好看的案例

System

2024-08-13

所有,html

以下是几个使用纯 CSS 和 HTML 实现的简单示例，展示了不同的视觉效果和布局技巧。

简单的三栏布局：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple 3-Column Layout</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .column {
    flex: 1;
    margin: 10px;
    padding: 15px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
  }
</style>
</head>
<body>
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>
</body>
</html>

带有渐变背景的圆形按钮：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Button with Gradient</title>
<style>
  .button {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: background 0.5s ease;
  }
  .button:hover {
    background: linear-gradient(to right, #330867 0%, #30cfd0 100%);
  }
</style>
</head>
<body>
<div class="button">Button</div>
</body>
</html>

创建一个简单的下拉菜单：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Dropdown Menu</title>
<style>
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content a:hover {background-color: #f1f1f1;}
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
</head>
<body>
 
<ul>
  <li class="dropdown">
    <a href="#">Dropdow

- 阅读更多 -