快速查阅

谷歌插件

其它

英文学习

AI导航

Rust

React生态

Vue生态

CSS 相关

图标库

网站部署

"真"学习

时间处理

精度处理

滚动处理

事件处理

单一组件

图片处理

文件处理

Markdown 解析器

代码高亮

轮播

表单处理

表格

拖拽

用户体验

评论系统

编译构建打包

Quick Look

Google plugins

Other

English Study

AI Navigation

Rust

React Ecosystem

Vue Ecosystem

CSS Related

Icon library

Web Build

"True" Learning

Time Processing

Accuracy Processing

Scroll Handling

Event Handling

Individual Components

Image Processing

File Processing

Markdown

Code Highlighting

Swiper

Form Processing

Table

Drag

User Experience

Comment Systems

Compiling & Building & Packaging

What is MCP?

MCP (Model Context Protocol) is a protocol that allows AI agents to easily connect with various tools.
It consists of three core components:

1. MCP Servers

They act as a bridge to connect APIs, databases, or code, exposing them as tools. MCP servers can be built using Python or TypeScript SDKs.

2. MCP Clients

Clients use the MCP protocol to communicate with MCP servers. They can also be built using Python or TypeScript SDKs.

3. MCP Hosts

These hosts manage data exchange between servers and clients. Popular MCP hosts include Claude Desktop, Cursor Desktop, Zed, and Sourcegraph Cody.

Role of MCP Servers

MCP servers provide tools that any MCP host can access. This allows developers to quickly connect AI agents to new tools without writing integration code for each one.

How to Build an MCP Server

Below is a complete example of building an MCP server using the TypeScript SDK, with Claude or Cursor Desktop as the test host.

Step 1: Install Dependencies

Create a new project and initialize npm. Then install the dependencies for the MCP server and configure package.json and tsconfig.json.

Create project directory:

mkdir mcp-server
cd mcp-server

Create package.json:

{
  "name": "mcp-server",
  "version": "0.1.0",
  "description": "Model Context Protocol server example",
  "private": true,
  "type": "module",
  "bin": {
    "mcp-server": "./build/index.js"
  },
  "files": [
    "build"
  ],
  "scripts": {
    "build": "tsc && node -e \"require('fs').chmodSync('build/index.js', '755')\"",
    "prepare": "npm run build",
    "watch": "tsc --watch",
    "inspector": "npx @modelcontextprotocol/inspector build/index.js"
  },
  "dependencies": {
    "@modelcontextprotocol/sdk": "0.6.0"
  },
  "devDependencies": {
    "@types/node": "^20.11.24",
    "typescript": "^5.3.3"
  }
}

Create tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Then run:

npm install

Step 2: Write Basic Code

Create src/index.ts and add the following:

import { Server } from '@modelcontextprotocol/sdk/server/index.js'
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
import {
  CallToolRequestSchema,
  ErrorCode,
  ListToolsRequestSchema,
  McpError,
} from '@modelcontextprotocol/sdk/types.js'

const server = new Server(
  {
    name: 'mcp-server',
    version: '1.0.0',
  },
  {
    capabilities: {
      tools: {}
    }
  }
)

server.setRequestHandler(ListToolsRequestSchema, async () => {
  return { tools: [] }
})

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === 'name_of_tool') {
    return {}
  }
  throw new McpError(ErrorCode.ToolNotFound, 'Tool not found')
})

const transport = new StdioServerTransport()
await server.connect(transport)

Step 3: Define and Add MCP Tools

Here we define a simple tool, e.g., calculating the sum of two numbers:

server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [
      {
        name: 'calculate_sum',
        description: 'Calculates the sum of two numbers',
        inputSchema: {
          type: 'object',
          properties: {
            a: { type: 'number' },
            b: { type: 'number' }
          },
          required: ['a', 'b']
        }
      }
    ]
  }
})

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === 'calculate_sum') {
    const { a, b } = request.params.arguments
    return { toolResult: a + b }
  }
  throw new McpError(ErrorCode.ToolNotFound, 'Tool not found')
})

Step 4: Integrate MCP Server into Claude or Cursor Desktop

Register the MCP server in claude_desktop_config.json or cursor_desktop_config.json:

{
  "mcpServers": {
    "mcp-server": {
      "command": "node",
      "args": [
        "/Users/YOUR_USER/mcp-server/build/index.js"
      ]
    }
  }
}

Restart Claude or Cursor Desktop, and you should see calculate_sum in the tool list!

Step 5: Call External REST API as an MCP Tool

You can also create tools that fetch external APIs:

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === 'httpbin_json') {
    try {
      const response = await fetch('https://httpbin.org/json', {
        method: 'GET',
        headers: { accept: 'application/json' }
      })
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`)
      }
      const data = await response.json()
      return { toolResult: data }
    }
    catch (e) {
      throw new Error('Request failed')
    }
  }
})

什么是 MCP？

MCP（模型上下文协议，Model Context Protocol） 是一个让智能体轻松连接各种工具的协议。
它主要由三个核心组件组成：

1. MCP 服务器（MCP Servers）

充当桥梁，用于连接 API、数据库或代码，并将这些数据源公开为工具。可使用 Python 或 TypeScript SDK 构建。

2. MCP 客户端（MCP Clients）

这些客户端使用 MCP 协议与 MCP 服务器通信，也可以用 Python 或 TypeScript SDK 进行开发。

3. MCP 主机（MCP Hosts）

在服务器和客户端之间进行数据交换，确保通信顺畅。目前流行的 MCP 主机包括 Claude Desktop、Zed 和 Sourcegraph Cody。

MCP 服务器的作用

MCP 服务器能够提供各种工具，任何 MCP 主机都可以访问它们。这意味着开发者可以快速将智能体连接到新的工具，而无需为每种工具都写一遍集成代码。

如何搭建 MCP 服务器？

下面是一个使用 TypeScript SDK 来构建 MCP 服务器，并用 Claude Desktop 作为测试主机的完整示例。

步骤 1：安装依赖

首先，创建一个新项目，并初始化 npm 包。然后安装 MCP 服务器所需的依赖项，并配置 package.json 和 tsconfig.json。

创建项目目录：

mkdir mcp-server
cd mcp-server

创建 package.json：

{
  "name": "mcp-server",
  "version": "0.1.0",
  "description": "Model Context Protocol 服务器示例",
  "private": true,
  "type": "module",
  "bin": {
    "mcp-server": "./build/index.js"
  },
  "files": [
    "build"
  ],
  "scripts": {
    "build": "tsc && node -e \"require('fs').chmodSync('build/index.js', '755')\"",
    "prepare": "npm run build",
    "watch": "tsc --watch",
    "inspector": "npx @modelcontextprotocol/inspector build/index.js"
  },
  "dependencies": {
    "@modelcontextprotocol/sdk": "0.6.0"
  },
  "devDependencies": {
    "@types/node": "^20.11.24",
    "typescript": "^5.3.3"
  }
}

创建 tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

然后执行：

npm install

步骤 2：编写基础代码

在 src 目录下创建 index.ts，并添加以下内容：

import { Server } from '@modelcontextprotocol/sdk/server/index.js'
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
import {
  CallToolRequestSchema,
  ErrorCode,
  ListToolsRequestSchema,
  McpError,
} from '@modelcontextprotocol/sdk/types.js'

const server = new Server(
  {
    name: 'mcp-server',
    version: '1.0.0',
  },
  {
    capabilities: {
      tools: {}
    }
  }
)

server.setRequestHandler(ListToolsRequestSchema, async () => {
  return { tools: [] }
})

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === 'name_of_tool') {
    return {}
  }
  throw new McpError(ErrorCode.ToolNotFound, '工具未找到')
})

const transport = new StdioServerTransport()
await server.connect(transport)

步骤 3：定义并添加 MCP 工具

接下来我们定义一个简单工具，比如 “计算两个数的和”：

server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [
      {
        name: 'calculate_sum',
        description: '计算两个数的总和',
        inputSchema: {
          type: 'object',
          properties: {
            a: { type: 'number' },
            b: { type: 'number' }
          },
          required: ['a', 'b']
        }
      }
    ]
  }
})

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === 'calculate_sum') {
    const { a, b } = request.params.arguments
    return { toolResult: a + b }
  }
  throw new McpError(ErrorCode.ToolNotFound, '工具未找到')
})

步骤 4：将 MCP 服务器集成到 Claude/Cursor Desktop

在 claude_desktop_config.json 中注册 MCP 服务器：

{
  "mcpServers": {
    "mcp-server": {
      "command": "node",
      "args": [
        "/Users/YOUR_USER/mcp-server/build/index.js"
      ]
    }
  }
}

重启 Claude/Cursor，你应该能在工具列表里看到 calculate_sum！

步骤 5：调用 REST API 作为 MCP 工具

你也可以让 MCP 工具帮你调用外部 REST API，例如：

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === 'httpbin_json') {
    try {
      const response = await fetch('https://httpbin.org/json', {
        method: 'GET',
        headers: {
          accept: 'application/json'
        }
      })
      if (!response.ok) {
        throw new Error(`HTTP 错误！状态码：${response.status}`)
      }
      const data = await response.json()
      return { toolResult: data }
    }
    catch (e) {
      throw new Error('请求失败')
    }
  }
})

Project Overview

This project is a Flask-based web application that provides API interfaces and a simple frontend for interacting with GPT models. Users can interact with AI through a WeChat official account or a web interface to chat, generate images, or obtain content summaries.

Key features include:

• Text-based interaction with GPT models: Supports multi-turn conversations, simulating human-like chats.
• Image generation based on user input: Generates high-quality images using AI models.
• WeChat official account message handling: Supports auto-replies, image generation, and other features.
• Content summarization: Extracts key information from long texts or web pages to generate concise summaries.

This project is suitable for individual developers, enterprises, or researchers to quickly build applications based on GPT models.

Usage Instructions

Environment Setup

1. Clone the repository:

   git clone <repository-url>
   cd gpt
   

2. Install dependencies:

   pip install -r requirements.txt
   

3. Configure environment variables:

   • Create a .env file and set the following variables:
     • WX_TOKEN: Token for the WeChat official account, used for message verification.
     • OPENAI_API_KEY: API key for the GPT model (if required).
   • Ensure other necessary environment variables are correctly configured, such as database connection information (if applicable).

4. Start the service:

   python -m api.index
   

5. Deploy to Vercel:

   • Ensure the vercel.json configuration is correct, including routes and environment variables.
   • Deploy using the Vercel CLI:

     vercel
     

API Usage

• Chat Interface:

  • Path: /g4f/<model>
  • Method: POST
  • Parameters:
    • message: User input text.
    • context (optional): Conversation context.
  • Response: Reply generated by the GPT model.

• Image Generation:

  • Path: /generate-image
  • Method: POST
  • Parameters:
    • prompt: Text describing the content of the image.
  • Response: URL of the generated image.

• WeChat Official Account:

  • Path: /wechat
  • Method: POST
  • Functionality: Handles messages from the WeChat official account, including text replies and image generation.

• Content Summarization:

  • Path: /ai-post
  • Method: POST
  • Parameters:
    • url: URL of the webpage to summarize.
  • Response: A concise summary of the webpage content.

Project Structure

• api/: Backend API code.
• static/: Frontend static files (HTML, CSS, JS).
• templates/: Frontend template files.
• requirements.txt: Python dependency list.
• vercel.json: Vercel deployment configuration.

Core Principles

1. GPT Model Interaction:

   • Uses the g4f client to interact with GPT models, supporting various models (e.g., gpt-4o-mini).
   • Provides flexible interfaces, supporting custom contexts and model selection.

2. WeChat Official Account Integration:

   • Uses the wechatpy library to handle message signature verification, message parsing, and replies.
   • Supports text messages, image generation requests, and other custom features.

3. Image Generation:

   • Calls the image generation interface of the g4f client to generate images based on user input prompts.
   • Returns the URL of the image for user download or preview.

4. Content Summarization:

   • Retrieves webpage content from the specified URL and generates a concise summary using the GPT model.
   • Supports multilingual content processing.

Frequently Asked Questions

1. How to switch GPT models?

   • Call the /models interface to get a list of supported models.
   • Specify the desired model name in the request.

2. How to debug WeChat official account features?

   • Use the WeChat official platform's developer tools for testing.
   • Check if the WX_TOKEN is correctly configured.

3. What to do if image generation fails?

   • Ensure the g4f client is working correctly.
   • Check if the input prompt meets the requirements.

References

• Flask Official Documentation
• wechatpy Documentation
• Vercel Official Documentation
• OpenAI GPT Models
• Python Official Documentation

项目简介

本项目是一个基于 Flask 的 Web 应用，提供了与 GPT 模型交互的 API 接口和简单的前端页面。用户可以通过微信公众号或 Web 界面与 AI 进行对话、生成图片或获取内容摘要。

主要功能包括：

• 与 GPT 模型进行文本对话：支持多轮对话，模拟人类聊天。
• 根据用户输入生成图片：通过 AI 模型生成高质量图片。
• 微信公众号的消息处理功能：支持自动回复、图片生成等功能。
• 内容摘要功能：从长文本或网页中提取关键信息，生成简洁摘要。

本项目适用于个人开发者、企业或研究人员，帮助快速构建基于 GPT 模型的应用。

使用说明

环境准备

1. 克隆仓库：

   git clone <仓库地址>
   cd gpt
   

2. 安装依赖：

   pip install -r requirements.txt
   

3. 配置环境变量：

   • 创建 .env 文件，设置以下变量：
     • WX_TOKEN：微信公众号的 token，用于消息验证。
     • OPENAI_API_KEY：GPT 模型的 API 密钥（如果需要）。
   • 确保其他必要的环境变量已正确配置，例如数据库连接信息（如适用）。

4. 启动服务：

   python -m api.index
   

5. 部署到 Vercel：

   • 确保 vercel.json 配置正确，包含路由和环境变量。
   • 使用 Vercel CLI 部署：

     vercel
     

API 使用

• 对话接口：

  • 路径：/g4f/<model>
  • 方法：POST
  • 参数：
    • message：用户输入的文本。
    • context（可选）：对话上下文。
  • 返回：GPT 模型生成的回复。

• 图片生成：

  • 路径：/generate-image
  • 方法：POST
  • 参数：
    • prompt：描述图片内容的文本。
  • 返回：生成图片的 URL。

• 微信公众号：

  • 路径：/wechat
  • 方法：POST
  • 功能：处理微信公众号的消息，包括文本回复和图片生成。

• 内容摘要：

  • 路径：/ai-post
  • 方法：POST
  • 参数：
    • url：需要摘要的网页 URL。
  • 返回：网页内容的简短摘要。

项目结构

• api/：后端 API 代码。
• static/：前端静态文件（HTML、CSS、JS）。
• templates/：前端模板文件。
• requirements.txt：Python 依赖列表。
• vercel.json：Vercel 部署配置。

核心原理

1. GPT 模型交互：

   • 使用 g4f 客户端与 GPT 模型交互，支持多种模型（如 gpt-4o-mini）。
   • 提供灵活的接口，支持自定义上下文和模型选择。

2. 微信公众号集成：

   • 使用 wechatpy 库处理消息签名验证、消息解析和回复。
   • 支持文本消息、图片生成请求和其他自定义功能。

3. 图片生成：

   • 调用 g4f 客户端的图片生成接口，基于用户输入的 prompt 生成图片。
   • 返回图片的 URL，供用户下载或预览。

4. 内容摘要：

   • 从指定 URL 获取网页内容，使用 GPT 模型生成简短摘要。
   • 支持多语言内容处理。

常见问题

1. 如何更换 GPT 模型？

   • 调用 /models 接口获取支持的模型列表。
   • 在请求中指定所需的模型名称。

2. 如何调试微信公众号功能？

   • 使用微信公众平台的开发者工具进行测试。
   • 检查 WX_TOKEN 是否正确配置。

3. 图片生成失败怎么办？

   • 确保 g4f 客户端正常工作。
   • 检查输入的 prompt 是否符合要求。

参考

• Flask 官方文档
• wechatpy 文档
• Vercel 官方文档
• OpenAI GPT 模型
• Python 官方文档

What is ForwardEmail?

ForwardEmail is an open-source email forwarding service that allows you to forward emails from a custom domain to an existing email address without hosting your own mail server.

Prerequisites

1. A custom domain (e.g., example.com).
2. An existing email address (e.g., yourname@gmail.com).
3. Access to a ForwardEmail account.

Configuration Steps

1. Sign Up and Log In to ForwardEmail

Visit ForwardEmail, sign up for an account, and log in.

2. Add Your Domain

In the ForwardEmail dashboard, click the Add Domain button and enter your domain (e.g., example.com).

3. Configure DNS Records

Follow the instructions provided by ForwardEmail to add the following DNS records in your domain registrar's control panel:

• MX Records: Set to mx1.forwardemail.net and mx2.forwardemail.net with priorities 10 and 20, respectively.
• TXT Record: Used to verify domain ownership, with the value provided by ForwardEmail.

Save the changes and wait for the DNS records to propagate (this usually takes a few minutes to a few hours).

4. Set Up Forwarding Rules

In the ForwardEmail dashboard, set up forwarding rules for your domain. For example:

• Forward hello@example.com to yourname@gmail.com.
• Forward info@example.com to anotheremail@gmail.com.

5. Test Your Email

Send a test email to your custom email address (e.g., hello@example.com) and confirm that the email is successfully forwarded to the target address.

Advantages

• Free: ForwardEmail offers a free plan.
• Privacy Protection: No need to host your own mail server.
• Easy to Use: Simply configure DNS records.

By following these steps, you can easily create and use your own email address!

Reference

• domain-email
• v2ex question

什么是 ForwardEmail？

ForwardEmail 是一个开源的电子邮件转发服务，允许你将自定义域名的电子邮件转发到现有的电子邮件地址，而无需托管自己的邮件服务器。

准备工作

1. 一个自定义域名（例如 example.com）。
2. 一个现有的电子邮件地址（例如 yourname@gmail.com）。
3. 访问 ForwardEmail 的账户。

配置步骤

1. 注册并登录 ForwardEmail

访问 ForwardEmail 网站，注册一个账户并登录。

2. 添加你的域名

在 ForwardEmail 的仪表板中，点击 Add Domain 按钮，输入你的域名（例如 example.com）。

3. 配置 DNS 记录

根据 ForwardEmail 提供的说明，在你的域名注册商的控制面板中添加以下 DNS 记录：

• MX 记录：设置为 mx1.forwardemail.net 和 mx2.forwardemail.net，优先级分别为 10 和 20。
• TXT 记录：用于验证域名所有权，内容为 ForwardEmail 提供的值。

保存更改后，等待 DNS 记录生效（通常需要几分钟到几小时）。

4. 设置转发规则

在 ForwardEmail 的仪表板中，为你的域名设置转发规则。例如：

• 将 hello@example.com 转发到 yourname@gmail.com。
• 将 info@example.com 转发到 anotheremail@gmail.com。

5. 测试电子邮件

发送一封测试邮件到你的自定义邮箱地址（例如 hello@example.com），确认邮件是否成功转发到目标邮箱。

优势

• 免费：ForwardEmail 提供免费计划。
• 隐私保护：无需托管自己的邮件服务器。
• 简单易用：只需配置 DNS 记录即可。

通过以上步骤，你就可以轻松创建并使用自己的电子邮件地址了！

参考文章

• domain-email
• v2ex question

A convenient project template management tool for quickly cloning templates from Git repositories.

Features

• ✅ Interactive template selection
• ✅ Flexible configuration via command-line arguments
• ✅ Intelligent cache configuration management
• ✅ Support for branch specification and directory renaming
• ⚡ Native JSON project selection mode

Installation

Install via Cargo

cargo install --path .

Manual Build

git clone https://github.com/your-repo/project-template.git
cd project-template
cargo build --release

Usage Guide

Basic Command Structure

template-cli [options]

Quick Start Examples

# Clone a template project (interactive selection)
template-cli https://github.com/my-repo/templates

# Clone with specific parameters
template-cli -r https://github.com/my-repo -b dev -d ./new-project -t my_template

# View cache configuration
template-cli -x

# Use native project selection mode
template-cli --original https://github.com/my-repo.json

Parameter Description

Advanced Parameters

• Intelligent Cache:
  Automatically saves recently used repositories, branches, etc., and prioritizes cache on reuse.

  • View cache: template-cli -x
  • Clear cache: template-cli -c

• Native Project Selection Mode:
  Use the --original parameter to specify a JSON configuration file URL, which displays a selection interface like this:

  Category:
  1. Frontend Projects
  2. Backend Projects
  
  Select a category (default: Frontend Projects):
  

Workflow

1. User inputs parameters or selects interactive mode.
2. Determine repository information based on parameters/cache.
3. Clone the repository from the specified branch to a temporary directory.
4. Display available templates for user selection.
5. Copy the selected template to the target path.
6. Automatically clean up temporary files and output success message.

FAQ

Q: Where is the cache stored?

~/.tmpl-cli/{.template_cli_cache.json}

Q: How to completely reset the configuration?

rm -rf ~/.tmpl-cli && template-cli --clear-cache

Q: Supported template repository structure?

<repository>/
├── template1/
├── template2/
└── .gitignore

Developer Guide

Code Structure

src/
├── cache.rs    # Cache module
├── cli.rs      # Command-line parsing
├── errors.rs   # Error handling
├── git.rs      # Git operations
├── original.rs # Native mode implementation
├── utils.rs    # Utility methods
└── template.rs # Core template handling

Contribution Guide

1. Fork this repository.
2. Create a feature branch: git checkout -b feature/X.
3. Implement the feature and test it.
4. Create a Pull Request.

便捷的项目模板管理工具，从 Git 仓库快速克隆模板

特性

• ✅ 交互式模板选择
• ✅ 命令行参数灵活配置
• ✅ 智能缓存配置管理
• ✅ 支持分支指定和目录重命名
• ⚡ 支持原生 JSON 项目选择模式

安装

通过 Cargo 安装

cargo install --path .

手动构建

git clone https://github.com/your-repo/project-template.git
cd project-template
cargo build --release

使用指南

基础命令结构

template-cli [参数选项]

快速开始示例

# 克隆模板项目（交互式选择）
template-cli https://github.com/my-repo/templates

# 指定参数下载
template-cli -r https://github.com/my-repo -b dev -d ./new-project -t my_template

# 查看缓存配置
template-cli -x

# 使用原生项目选择模式
template-cli --original https://github.com/my-repo.json

参数说明

进阶参数

• 智能缓存：
  自动保存最近使用的仓库、分支等配置，再次使用时会优先读取缓存

  • 查看缓存：template-cli -x
  • 清除缓存：template-cli -c

• 原生项目选择模式：
  使用 --original 参数指定 JSON 配置文件地址，会展示类似这样的界面进行选择：

  Category：
  1. Frontend Projects
  2. Backend Projects
  
  Select a category (default: Frontend Projects):
  

工作流程

1. 用户输入参数或选择交互模式
2. 根据参数/缓存确定需要克隆的仓库信息
3. 从指定分支克隆仓库到临时目录
4. 展示可用模板列表供用户选择
5. 将选择的模板复制到目标路径
6. 自动清理临时文件并输出成功提示

常见问题

Q: 缓存存储在哪儿？

~/.tmpl-cli/{.template_cli_cache.json}

Q: 如何完全重置配置？

rm -rf ~/.tmpl-cli && template-cli --clear-cache

Q: 支持的模板仓库结构？

<repository>/
├── template1/
├── template2/
└── .gitignore

开发者指南

代码结构

src/
├── cache.rs    # 缓存模块
├── cli.rs      # 命令行解析
├── errors.rs   # 错误处理
├── git.rs      # Git操作
├── original.rs # 原生模式实现
├── utils.rs    # 通用方法
└── template.rs # 模板处理核心

贡献指南

1. Fork 本项目
2. 创建功能分支：git checkout -b feature/X
3. 实现功能并测试
4. 创建 Pull Request

Gold Buying Process (Using JD Finance as an Example)

1. Account Setup

• Download the JD Finance app → Complete identity verification → Link your bank account.

2. Fund Transfer

• Recharge your gold account balance via bank card or JD Xiaojinku.

3. Buying Gold

• Path: Finance Channel → JD Gold → Enter amount/weight → Confirm real-time gold price and place the order.
• Trading hours:
  • Closed on holidays.
  • 24-hour trading.

4. Selling and Withdrawal

• Funds are credited to the gold account immediately after selling. Withdrawals to a bank account incur a 0.3% fee.

Gold Conversion Methods

1. Unit Conversion

• 1 ounce ≈ 31.1035 grams.
• Domestic prices are quoted in "CNY/gram," while international prices are quoted in "USD/ounce."

2. Exchange Rate Impact

• Domestic gold price = International gold price (USD/ounce) × RMB exchange rate ÷ 31.1035.

• Example: International gold price is $2000/ounce, exchange rate is 7.2 → Domestic gold price ≈ 462.8 CNY/gram.

• Online Conversion Tool

How to Monitor Gold Prices

Global Trading Session Comparison Table (2025)

2. Monitoring Tools

• JD Finance app for real-time gold prices/Online View.
• Jin10 Data
• NY Gold CFD

Onshore vs Offshore & Domestic Gold Price Rationality

1. Reasons for Price Differences

• Onshore gold price: Quoted by the Shanghai Gold Exchange (includes VAT, transportation costs, etc.).
• Offshore gold price: International London Gold (LBMA), without tax or fees.
• Price difference is usually 1%-3%, mainly due to:
  • RMB exchange rate fluctuations;
  • Domestic supply, demand, and policies (e.g., import controls).

2. Different Actual Trading Prices

• Platforms may charge spreads or fees (e.g., JD Finance charges a 0.3% selling fee).

Frequently Asked Questions

1. Can I Place Orders Outside Trading Hours?

• You can submit a reservation order, which will take effect in the next trading session.
• Orders can be placed 24/7, but transactions are executed during specific trading hours: Monday to Friday 9:00-11:30, 13:30-15:00, 21:00-24:00. No trading on public holidays. To avoid timing discrepancies, operate in advance.

2. Why Is Domestic Gold Price Higher Than Converted Price?

• Includes buy-sell spreads (platform profit source).
• Premiums may exist.

3. How to Break Even at High Prices?

• Single transactions are essentially "cutting losses." Even with full positions, you can achieve this through single trades. The key is to sell high and buy back at a lower price, maintaining the total position (weight). Through multiple high-sell-low-buy operations, you can not only reduce the average holding cost but also potentially gain some price differences.

4. Where to Check Premiums?

• Search for "Premium" in the Pocket Precious Metals app.

买金流程（以京东金融为例）

1. 开户准备

• 下载京东金融APP → 实名认证 → 绑定银行卡。

2. 资金转入

• 通过银行卡或京东小金库充值至黄金账户现金余额。

3. 买入操作

• 路径：理财频道 → 京东黄金 → 输入金额/克数 → 确认实时金价后下单。
• 交易时段：
  • 节假日休市
  • 24小时交易。

4. 卖出与提现

• 卖出后资金实时到账黄金账户，提现至银行卡需支付0.3%的手续费。

黄金换算方法

1. 单位换算

• 1盎司 ≈ 31.1035克。
• 国内以“元/克”报价，国际以“美元/盎司”报价。

2. 汇率影响

• 国内金价 = 国际金价（美元/盎司） × 人民币汇率 ÷ 31.1035。

• 示例：国际金价2000美元/盎司，汇率7.2 → 国内金价≈462.8元/克。

• 在线换算工具

如何盯盘

全球交易时段对照表（2025年）

2. 盯盘工具

• 京东金融APP实时金价/在线观看。
• 金十数据
• 纽约黄金CFD

在岸 vs 离岸 & 国内金价合理性

1. 价格差异原因

• 在岸金价：上海黄金交易所报价（含增值税、运输成本等）。
• 离岸金价：国际伦敦金（LBMA），无税费成本。
• 价差通常为1%-3%，主要原因：
  • 人民币汇率波动；
  • 国内供需与政策（如进口管制）。

2. 实际交易价不同

• 平台可能加收点差或手续费（如京东金融卖出0.3%）。

常见问题

1. 非交易时段能下单吗？

• 可提交预约单，下一交易时段生效。
• 24小时都可以下单买入，但买/卖价格确定时段立即成交，非买/卖价格确定时段需至下个交易时段进行成交。买/卖价格确定时段为周一至周五9:00-11:30，13:30-15:00，21:00-24:00，法定节假日不交易。为避免临界时间的时间差，请提前操作。

2. 为何国内金价高于换算价格？

• 存在买卖点差（平台利润来源）。
• 存在溢价的情况。

3. 如何高位解套？

• 单笔交易的本质类似于“割肉”，即便是满仓操作也可以通过单笔交易实现。关键在于卖出后能以更低的价格买入，保持总仓位（克重）不变。通过多次高抛低吸操作，不仅可以降低持仓均价，还可能获得一定的价差收益。

4. 溢价在哪看？

• 在口袋贵金属APP上搜索“溢价”即可查看。

Efficiency and Convenience: The integrated deployment process allows you to complete Ollama setup, OpenWebUI launch, and browser opening with a single execution, significantly improving efficiency compared to manual operations.

Deployment Preparation

System Requirements

• OS Requirements: Recommended to use the latest version of macOS for optimal software compatibility and performance.
• Hardware Requirements: Minimum 8GB RAM for smooth model operation. For optional GPU acceleration, your Mac needs to support compatible GPUs (e.g., AMD Radeon Pro series in some MacBook Pro models).
• Network: Stable internet connection required for downloading Ollama, model files, and Open-WebUI resources.

Essential Software Installation (Ollama, OpenWebUI, Shell environment):

1. Python 3.11~3.12
2. Ollama Official Download
3. OpenWebUI

pip install open-webui

Model Preparation

ollama pull qwen3:8b

Model Download

Quick Start

Create Startup Script

Save the script anywhere on your Mac, e.g.: /Users/username/Desktop/ollama_start.sh

# Configure ports
PORT=11434
WEB_PORT=9790

# Start Ollama service
start_ollama() {
  echo "Starting Ollama..."
  ollama serve &
  OLLAMA_PID=$!
  echo "Ollama Process ID: $OLLAMA_PID"
}

# Start OpenWebUI
start_webui() {
  echo "Starting OpenWebUI..."
  open-webui serve --port "$WEB_PORT" &
  WEBUI_PID=$!
  echo "OpenWebUI Process ID: $WEBUI_PID"
}

# Auto-open browser
open_browser() {
  echo "Opening browser..."
  # Cross-platform support
  case "$(uname -s)" in
    Darwin) open "http://localhost:$WEB_PORT" ;;
    Linux) xdg-open "http://localhost:$WEB_PORT" ;;
    Windows) start "http://localhost:$WEB_PORT" ;;
    *) echo "Unsupported OS, cannot auto-open browser" ;;
  esac
}

# Main workflow
start_ollama
sleep 5  # Wait for Ollama to start (adjust time based on model size)
start_webui
sleep 5  # Wait for WebUI to start
open_browser  # Auto-open browser

# Display access info
echo -e "\nOllama service running at: http://localhost:$PORT"
echo -e "OpenWebUI running at: \033[32mhttp://localhost:$WEB_PORT\033[0m"
echo "Press Ctrl+C to stop all services"

# Handle termination signals
trap "echo 'Stopping services...'; kill -9 $OLLAMA_PID $WEBUI_PID 2>/dev/null; wait; echo 'Services stopped'." SIGINT SIGTERM

# Wait for processes
wait

Configure Quick-Start Alias

Create a shell script named ollama_start.sh and add:

# alias ollama_start='/Users/username/Desktop/ollama_start.sh'
echo "alias ollama_start='/Users/username/Desktop/ollama_start.sh'" >> ~/.zshrc
source ~/.zshrc
ollama_start # Launch services

Script Explanation

1. Port Configuration: Defines two ports for Ollama and OpenWebUI (default: 11434 and 9790, customizable).
2. Start Ollama: Launches Ollama service with ollama serve and records process ID.
3. Start OpenWebUI: Launches OpenWebUI with open-webui serve and records process ID.
4. Auto-open Browser: Opens browser automatically with OS-appropriate commands.
5. Main Workflow: Starts services sequentially with delays, then opens browser and displays access info.
6. Termination Handling: Gracefully stops services when receiving Ctrl+C.

References

• ollama
• open-webui

高效便捷：整合部署流程，一次执行即可完成 Ollama、OpenWebUI 启动及浏览器打开，相比手动操作大幅提升效率。

部署准备

系统环境要求

系统环境要求：建议使用最新版本的 macOS 系统，以确保软件兼容性和性能优化。
硬件要求：为了流畅运行模型，推荐至少 8GB 内存。若要使用 GPU 加速（可选），需要 Mac 支持相应的 GPU，如某些 MacBook Pro 机型配备的 AMD Radeon Pro 系列 GPU 。
网络连接：稳定的网络连接，因为在部署过程中需要下载 Ollama、模型文件以及 Open-WebUI 相关资源。

必备软件安装（Ollama、OpenWebUI、Shell 运行环境：

1. Python3.11~3.12
2. Ollama, 官方下载
3. OpenWebUI

pip install open-webui

模型准备

ollama pull qwen3:8b

模型下载

快速启动

创建保存脚本

保持在mac系统的任意位置，如：/Users/username/Desktop/ollama_start.sh

# 配置端口
PORT=11434
WEB_PORT=9790

# 启动Ollama服务
start_ollama() {
  echo "正在启动 Ollama..."
  ollama serve &
  OLLAMA_PID=$!
  echo "Ollama 进程ID: $OLLAMA_PID"
}

# 启动OpenWebUI
start_webui() {
  echo "正在启动 OpenWebUI..."
  open-webui serve --port "$WEB_PORT" &
  WEBUI_PID=$!
  echo "OpenWebUI 进程ID: $WEBUI_PID"
}

# 自动打开浏览器
open_browser() {
  echo "正在打开浏览器..."
  # 支持macOS/Windows/Linux通用格式
  case "$(uname -s)" in
    Darwin) open "http://localhost:$WEB_PORT" ;;
    Linux) xdg-open "http://localhost:$WEB_PORT" ;;
    Windows) start "http://localhost:$WEB_PORT" ;;
    *) echo "不支持的操作系统，无法自动打开浏览器" ;;
  esac
}

# 主流程
start_ollama
sleep 5  # 等待Ollama服务启动（根据模型大小可调整时间）
start_webui
sleep 5  # 等待WebUI启动
open_browser  # 自动打开浏览器

# 输出访问信息
echo -e "\nOllama 服务运行在：http://localhost:$PORT"
echo -e "OpenWebUI 运行在：\033[32mhttp://localhost:$WEB_PORT\033[0m"
echo "按 Ctrl+C 停止所有服务"

# 终止信号处理
trap "echo '停止服务...'; kill -9 $OLLAMA_PID $WEBUI_PID 2>/dev/null; wait; echo '服务已停止'." SIGINT SIGTERM

# 等待进程结束
wait

配置快速启动别名

创建一个名为ollama_start.sh的shell脚本，并添加以下内容：

# alias ollama_start='/Users/username/Desktop/ollama_start.sh'
echo "alias ollama_start='/Users/username/Desktop/ollama_start.sh'" >> ~/.zshrc
source ~/.zshrc
ollama_start # 启动服务

脚本详解

1. 配置端口：脚本中定义了两个端口，分别用于Ollama和OpenWebUI。默认端口为11434和9790，可以根据需要修改。
2. 启动Ollama服务：使用ollama serve命令启动Ollama服务，并保存进程ID。
3. 启动OpenWebUI：使用open-webui serve命令启动OpenWebUI服务，并保存进程ID。
4. 自动打开浏览器：根据操作系统的不同，使用不同的命令打开浏览器，并指定访问地址。
5. 主流程：启动Ollama和OpenWebUI服务，并等待它们启动。然后自动打开浏览器，并输出访问信息。
6. 输出访问信息：输出Ollama和OpenWebUI的访问地址，并提示按Ctrl+C停止服务。

参考文章

• ollama
• open-webui

1️⃣ Purpose

Completely remove the Yunshu/EagleYun client and its background services, clean up residual directories and configuration files, and keep your system clean without affecting other applications.

2️⃣ Detect Yunshu Residue

2.1 Detection Script Example

#!/bin/bash
echo "=== Detecting Yunshu (EagleYun) Residue ==="

echo ""
echo ">> Process Check:"
ps aux | grep -i "yunshu\|eagleyun" | grep -v grep

echo ""
echo ">> Startup Items (LaunchDaemons / LaunchAgents):"
sudo grep -ril "yunshu\|eagleyun" /Library/LaunchDaemons /Library/LaunchAgents ~/Library/LaunchAgents 2>/dev/null

echo ""
echo ">> Application Directories:"
[ -d "/opt/.yunshu" ] && echo "/opt/.yunshu"
[ -d "/Library/Application Support/Yunshu" ] && echo "/Library/Application Support/Yunshu"
[ -d "/Library/Application Support/EagleCloud" ] && echo "/Library/Application Support/EagleCloud"

echo ""
echo ">> Log Directories:"
[ -d "/Library/Logs/com.eagleyun.sase.helper" ] && echo "/Library/Logs/com.eagleyun.sase.helper"

echo ""
echo ">> User Preferences:"
ls ~/Library/Preferences | grep -i "eagleyun" 2>/dev/null
ls ~/Library/Preferences | grep -i "yunshu" 2>/dev/null

echo ""
echo "=== Detection Complete ==="

2.2 How to Run

chmod +x check_yunshu.sh
./check_yunshu.sh

2.3 Detection Result Explanation

• Process: If you see FWRunner, TBRunner, YunshuAgent, etc., the software is still running.
• Startup Items: Files like com.eagleyun*.plist indicate auto-start entries exist.
• Application Directories: /opt/.yunshu, /Library/Application Support/Yunshu, /Library/Application Support/EagleCloud
• Log Directories: /Library/Logs/com.eagleyun.sase.helper
• User Preferences: ~/Library/Preferences/com.eagleyun.sase.plist

3️⃣ Manual Uninstall Steps

3.1 Stop Background Processes

sudo kill -9 $(ps aux | grep -i "yunshu\|eagleyun" | grep -v grep | awk '{print $2}')

3.2 Remove Startup Items

sudo launchctl bootout system /Library/LaunchDaemons/com.eagleyun*.plist 2>/dev/null
sudo rm -f /Library/LaunchDaemons/com.eagleyun*.plist
rm -f ~/Library/LaunchAgents/com.eagleyun*

3.3 Delete Application Directories and Logs

sudo rm -rf /opt/.yunshu
sudo rm -rf "/Library/Application Support/Yunshu"
sudo rm -rf "/Library/Application Support/EagleCloud"
sudo rm -rf "/Library/Logs/com.eagleyun.sase.helper"
rm -f ~/Library/Preferences/com.eagleyun.sase.plist

4️⃣ Uninstall Confirmation

Run the detection script check_yunshu.sh again or manually check:

ps aux | grep -i "yunshu\|eagleyun" | grep -v grep
launchctl list | grep -i "yunshu\|eagleyun"

If the output is empty, the uninstall is complete.

5️⃣ Notes

1. Permissions: Removing files under /opt/.yunshu and /Library requires sudo privileges.
2. System Integrity: Do not delete files under /System/Library to avoid damaging macOS.
3. Backup: Backup important data before uninstalling.
4. Restart Recommended: Restart your system after uninstalling to ensure all background services are cleared.

6️⃣ Automated Uninstall Script (Optional)

For one-click uninstall, use the following script:

#!/bin/bash
echo "=== Starting Yunshu (EagleYun) Uninstall ==="

echo ">> Stopping related processes..."
sudo kill -9 $(ps aux | grep -i "yunshu\|eagleyun" | grep -v grep | awk '{print $2}') 2>/dev/null

echo ">> Removing startup items..."
sudo launchctl bootout system /Library/LaunchDaemons/com.eagleyun*.plist 2>/dev/null
sudo rm -f /Library/LaunchDaemons/com.eagleyun*.plist
rm -f ~/Library/LaunchAgents/com.eagleyun*

echo ">> Deleting application directories and logs..."
sudo rm -rf /opt/.yunshu
sudo rm -rf "/Library/Application Support/Yunshu"
sudo rm -rf "/Library/Application Support/EagleCloud"
sudo rm -rf "/Library/Logs/com.eagleyun.sase.helper"
rm -f ~/Library/Preferences/com.eagleyun.sase.plist

echo "=== Uninstall complete. Please restart your system. ==="

How to use:

1. Save the above content as uninstall_yunshu.sh
2. Make it executable and run:

   chmod +x uninstall_yunshu.sh
   ./uninstall_yunshu.sh
   

Note: The automation script will perform all uninstall steps. Make sure to backup important data and close related applications.

1️⃣ 卸载目的

彻底移除 Yunshu/EagleYun 客户端及其后台服务，清理残留目录和配置文件，保证系统干净，不影响其他应用。

2️⃣ 检测 Yunshu 残留

2.1 检测脚本示例

#!/bin/bash
echo "=== 检测 Yunshu (EagleYun) 残留 ==="

echo ""
echo ">> 进程检查:"
ps aux | grep -i "yunshu\|eagleyun" | grep -v grep

echo ""
echo ">> 启动项 (LaunchDaemons / LaunchAgents):"
sudo grep -ril "yunshu\|eagleyun" /Library/LaunchDaemons /Library/LaunchAgents ~/Library/LaunchAgents 2>/dev/null

echo ""
echo ">> 应用目录:"
[ -d "/opt/.yunshu" ] && echo "/opt/.yunshu"
[ -d "/Library/Application Support/Yunshu" ] && echo "/Library/Application Support/Yunshu"
[ -d "/Library/Application Support/EagleCloud" ] && echo "/Library/Application Support/EagleCloud"

echo ""
echo ">> 日志目录:"
[ -d "/Library/Logs/com.eagleyun.sase.helper" ] && echo "/Library/Logs/com.eagleyun.sase.helper"

echo ""
echo ">> 用户偏好文件:"
ls ~/Library/Preferences | grep -i "eagleyun" 2>/dev/null
ls ~/Library/Preferences | grep -i "yunshu" 2>/dev/null

echo ""
echo "=== 检测完成 ==="

2.2 运行方式

chmod +x check_yunshu.sh
./check_yunshu.sh

2.3 检测结果说明

• 进程：如有 FWRunner、TBRunner、YunshuAgent 等进程表示软件仍在运行
• 启动项：包含 com.eagleyun*.plist 表示开机自启存在
• 应用目录：/opt/.yunshu、/Library/Application Support/Yunshu、/Library/Application Support/EagleCloud
• 日志目录：/Library/Logs/com.eagleyun.sase.helper
• 用户偏好文件：~/Library/Preferences/com.eagleyun.sase.plist

3️⃣ 手动卸载步骤

3.1 停止后台进程

sudo kill -9 $(ps aux | grep -i "yunshu\|eagleyun" | grep -v grep | awk '{print $2}')

3.2 卸载启动项

sudo launchctl bootout system /Library/LaunchDaemons/com.eagleyun*.plist 2>/dev/null
sudo rm -f /Library/LaunchDaemons/com.eagleyun*.plist
rm -f ~/Library/LaunchAgents/com.eagleyun*

3.3 删除应用目录及日志

sudo rm -rf /opt/.yunshu
sudo rm -rf "/Library/Application Support/Yunshu"
sudo rm -rf "/Library/Application Support/EagleCloud"
sudo rm -rf "/Library/Logs/com.eagleyun.sase.helper"
rm -f ~/Library/Preferences/com.eagleyun.sase.plist

4️⃣ 卸载确认

再次运行检测脚本 check_yunshu.sh 或手动检查：

ps aux | grep -i "yunshu\|eagleyun" | grep -v grep
launchctl list | grep -i "yunshu\|eagleyun"

确认输出为空，说明卸载彻底。

5️⃣ 注意事项

1. 权限：删除 /opt/.yunshu 和 /Library 下文件需要 sudo 权限
2. 系统完整性：不要删除 /System/Library 下的文件，避免破坏 macOS
3. 备份：卸载前若有重要数据，建议备份
4. 重启建议：卸载完成后重启系统，确保后台服务全部清除

6️⃣ 自动化卸载脚本（可选）

如需一键卸载，可使用如下脚本：

#!/bin/bash
echo "=== 开始自动卸载 Yunshu (EagleYun) ==="

echo ">> 停止相关进程..."
sudo kill -9 $(ps aux | grep -i "yunshu\|eagleyun" | grep -v grep | awk '{print $2}') 2>/dev/null

echo ">> 卸载启动项..."
sudo launchctl bootout system /Library/LaunchDaemons/com.eagleyun*.plist 2>/dev/null
sudo rm -f /Library/LaunchDaemons/com.eagleyun*.plist
rm -f ~/Library/LaunchAgents/com.eagleyun*

echo ">> 删除应用目录及日志..."
sudo rm -rf /opt/.yunshu
sudo rm -rf "/Library/Application Support/Yunshu"
sudo rm -rf "/Library/Application Support/EagleCloud"
sudo rm -rf "/Library/Logs/com.eagleyun.sase.helper"
rm -f ~/Library/Preferences/com.eagleyun.sase.plist

echo "=== 卸载完成，请重启系统 ==="

使用方法：

1. 将上述内容保存为 uninstall_yunshu.sh
2. 赋予执行权限并运行：

   chmod +x uninstall_yunshu.sh
   ./uninstall_yunshu.sh
   

注意：自动化脚本会执行所有卸载步骤，请确保已备份重要数据，并关闭相关应用程序。

Old page view	New page view

Due to the fact that the frame is older, I decided to rewrite it using Next.js. It also has a lot of features that I want to add, and easy to maintain.

Technical Selection

1. Next.js
2. Tailwind CSS
3. shadcn/ui

Plan Design Features

1. support config(config.json).
2. support upload(drag、paste、click、select).
3. support download (download once、download selected).
4. support delete (delete once、delete selected).
5. support sort (name、size、time).
6. support preview (image、video、audio).
7. support copy markdown link or html link.
8. support pwa (offline support).
9. support dark mode.
10. support multi-language.
11. support image masonry Layouts or gird Layouts.
12. support image watermark/compress.
13. support and so on ...

Design Inspiration Source

• File manager UI
• Photo Management

Development

Old page view	New page view

Due to the fact that the frame is older, I decided to rewrite it using Next.js. It also has a lot of features that I want to add, and easy to maintain.

Technical Selection

1. Next.js
2. Tailwind CSS
3. shadcn/ui

Plan Design Features

1. support config(config.json).
2. support upload(drag、paste、click、select).
3. support download (download once、download selected).
4. support delete (delete once、delete selected).
5. support sort (name、size、time).
6. support preview (image、video、audio).
7. support copy markdown link or html link.
8. support pwa (offline support).
9. support dark mode.
10. support multi-language.
11. support image masonry Layouts or gird Layouts.
12. support image watermark/compress.
13. support and so on ...

Design Inspiration Source

• File manager UI
• Photo Management

Development

markdown-it-diagram is a markdown-it plugin for creating diagrams in Markdown documents. It supports mermaid and plantuml, and also provides control functions such as zooming and moving.

UML 示例

Markdown supports：plantuml、mermaid、dot、ditaa

Features

• Support PlantUML、Mermaid、Dot、Ditaa syntax;
• Support zoom、move、rough、download、copy origin code and soon contorls;
• Support Shift and mouse wheel to zoom in or out;
• Support modal preview;
• Support long press mouse click to drag the chart

PlantUML

try it

```plantuml
Bob -> Alice : Chào cô, chúc cô buổi trưa vui vẻ!
```

Bob -> Alice : Chào cô, chúc cô buổi trưa vui vẻ!

DOT

```dot
digraph example1 {
    1 -> 2 -> { 4, 5 };
    1 -> 3 -> { 6, 7 };
}
```

digraph example1 {
    1 -> 2 -> { 4, 5 };
    1 -> 3 -> { 6, 7 };
}

ditaa

Warning: In PlantUML, only PNG, ASCII Art image generation is supported.

```ditaa
+--------+   +-------+    +-------+
    |        | --+ ditaa +--> |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |     {d}|   |       |    |       |
    +---+----+   +-------+    +-------+
        :                         ^
        |       Lots of work      |
        +-------------------------+
```

+--------+   +-------+    +-------+
    |        | --+ ditaa +--> |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |     {d}|   |       |    |       |
    +---+----+   +-------+    +-------+
        :                         ^
        |       Lots of work      |
        +-------------------------+

mermaid

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Installation

npm install markdown-it-diagram --save

Usage

Vite Configuration

// vite.config.ts
import MarkdownItDiagrams from 'markdown-it-diagram'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Markdown({
      markdownItSetup(md) {
        md.use(MarkdownItDiagrams, {
          showController: true, // show controller,default:false
          /**
           * PlantUML options
           * ditaa:imageFormat 'png| txt'
           * plantuml: imageFormat'png| svg| txt'
           * dot: imageFormat'png| svg| txt'
           */
          // imageFormat: 'svg', // image format:svg|png|txt,default:svg
          // server: '', // plantuml server,default:http://www.plantuml.com/plantuml
          // ditaa: {
          // imageFormat: 'svg', // image format:png|txt,default:svg
          // server: '', // plantuml server,default:http://www.plantuml.com/plantuml
          // }
        })
      }
    })
  ]
})

If you open the controller, you need to import the script in the initialization.
vue3 example:

<script setup lang="ts">
import { markdownItDiagramDom } from 'markdown-it-diagram/dom'
import { onMounted } from 'vue'

onMounted(async () => {
  // if you want to use mermaid, you need to install mermaid.js
  // npm install mermaid
  // import mermaid from 'mermaid'
  mermaid.initialize({ startOnLoad: false })
  await mermaid.run()
  // initialize markdown-it-diagram/dom script
  await markdownItDiagramDom()
})
</script>

markdown-it-diagram 是一个用于在 Markdown 文档中创建图表的 markdown-it 插件。它支持 mermaid 和 plantuml，同时提供了如缩放、移动等控件功能。

UML 示例

Markdown 支持：plantuml、mermaid、dot、ditaa

功能

• 支持PlantUML、Mermaid、Dot、Ditaa图形语法
• 包含缩放、移动、粗糙渲染、下载、复制源代码等快捷操作
• 支持Shift键结合鼠标滚轮进行缩放
• 集成模态窗口预览模式
• 实现长按鼠标左键拖动图表功能

PlantUML

在线尝试

```plantuml
Bob -> Alice : Chào cô, chúc cô buổi trưa vui vẻ!
```

Bob -> Alice : Chào cô, chúc cô buổi trưa vui vẻ!

DOT

```dot
digraph example1 {
    1 -> 2 -> { 4, 5 };
    1 -> 3 -> { 6, 7 };
}
```

digraph example1 {
    1 -> 2 -> { 4, 5 };
    1 -> 3 -> { 6, 7 };
}

ditaa

警告: 在 PlantUML 中，仅支持生成 PNG,ASCII Art 图片。

```ditaa
+--------+   +-------+    +-------+
    |        | --+ ditaa +--> |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |     {d}|   |       |    |       |
    +---+----+   +-------+    +-------+
        :                         ^
        |       Lots of work      |
        +-------------------------+
```

+--------+   +-------+    +-------+
    |        | --+ ditaa +--> |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |     {d}|   |       |    |       |
    +---+----+   +-------+    +-------+
        :                         ^
        |       Lots of work      |
        +-------------------------+

mermaid

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

安装

npm install markdown-it-diagram --save

使用方法

Vite 配置

// vite.config.ts
import MarkdownItDiagrams from 'markdown-it-diagram'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Markdown({
      markdownItSetup(md) {
        md.use(MarkdownItDiagrams, {
          showController: true, // show controller,default:false
          /**
           * PlantUML options
           * ditaa:imageFormat 'png| txt'
           * plantuml: imageFormat'png| svg| txt'
           * dot: imageFormat'png| svg| txt'
           */
          // imageFormat: 'svg', // image format:svg|png|txt,default:svg
          // server: '', // plantuml server,default:http://www.plantuml.com/plantuml
          // ditaa: {
          // imageFormat: 'svg', // image format:png|txt,default:svg
          // server: '', // plantuml server,default:http://www.plantuml.com/plantuml
          // }
        })
      }
    })
  ]
})

If you open the controller, you need to import the script in the initialization.
vue3 example:

<script setup lang="ts">
import { markdownItDiagramDom } from 'markdown-it-diagram/dom'
import { onMounted } from 'vue'

onMounted(async () => {
  // if you want to use mermaid, you need to install mermaid.js
  // npm install mermaid
  // import mermaid from 'mermaid'
  mermaid.initialize({ startOnLoad: false })
  await mermaid.run()
  // initialize markdown-it-diagram/dom script
  await markdownItDiagramDom()
})
</script>

Oh My Zsh enhances terminal usability in Unix environments. Here's a guide to configure it on Windows with Git Bash.

graph TD
    A[Install Git Bash] --> B[Download zsh]
    B --> C[Extract zsh]
    C --> D[Set zsh as default shell]
    D --> E[Download install.sh for Oh-My-Zsh]
    E --> F[Modify installation source in install.sh]
    F --> G[Execute install.sh]
    G --> H[Configure Oh-My-Zsh]
    H --> I[Set theme in .zshrc]
    H --> J[Download syntax highlighting plugin]
    H --> K[Download autosuggestions plugin]
    I --> L[Configure plugins in .zshrc]
    L --> M[Apply configuration with source ~/.zshrc]
    H --> N[Install Windows Terminal]
    N --> O[Set Git Bash as default terminal in Windows Terminal]
    H --> P[Configure IDE to use Git Bash]

Step 1: Install Git Bash

Download and install from the Git website.

Step 2: Install zsh

1. Download zsh

• Download zsh-5.9-2-x86_64.zip
• Download from official source
• Download extraction tool

2. Install zsh

Extract zsh and copy etc and usr directories to the Git installation directory (e.g., C:\Program Files\Git).

3. Set zsh as the Default Shell

Run chsh -s $(which zsh) or add the following to ~/.bashrc:

if [ -t 1 ]; then
  exec zsh
fi

Step 3: Install Oh-My-Zsh

1. Download install.sh

Run:

curl -# -O https://mirror.ghproxy.com/https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh

2. Modify Installation Source

Edit install.sh:

REPO=${REPO:-ohmyzsh/ohmyzsh}
REMOTE=${REMOTE:-https://mirror.ghproxy.com/https://github.com/${REPO}.git}
BRANCH=${BRANCH:-master}

3. Execute the Script

Run:

sh install.sh

Step 4: Configure Oh-My-Zsh

1. Set Theme

Edit ~/.zshrc to change ZSH_THEME="robbyrussell" to ZSH_THEME="ys".

2. Install Plugins

Run:

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

3. Configure Plugins

Edit ~/.zshrc:

plugins=(git zsh-syntax-highlighting zsh-autosuggestions)

4. Apply Configuration

Run:

source ~/.zshrc

Step 5: Configure Windows Terminal

Installation

Install from the Microsoft Store or official documentation.

Configuration

Set Windows Terminal to default to Git Bash.

Step 6: Configure IDEs (e.g., IDEA, VSCode)

Set the default terminal to Git Bash in the IDE settings.

在 Unix 环境中，Oh My Zsh 能极大提高终端易用性，并提供高度之定义功能。本文讲解在 Windows 下通过 Git Bash 配置 Oh My Zsh，实现让终端如在 Unix 环境下般便捷易用。

graph TD
    A[安装 Git Bash] --> B[下载 zsh]
    B --> C[解压 zsh]
    C --> D[设置 zsh 为默认 shell]
    D --> E[下载 Oh-My-Zsh 的 install.sh]
    E --> F[修改 install.sh 中的安装源]
    F --> G[执行 install.sh]
    G --> H[配置 Oh-My-Zsh]
    H --> I[在 .zshrc 中设置主题]
    H --> J[下载语法高亮插件]
    H --> K[下载自动建议插件]
    I --> L[在 .zshrc 中配置插件]
    L --> M[通过 source ~/.zshrc 应用配置]
    H --> N[安装 Windows Terminal]
    N --> O[在 Windows Terminal 中设置 Git Bash 为默认终端]
    H --> P[配置 IDE 使用 Git Bash]

一、安装 Git Bash

从 Git 官网下载并安装 Git Bash。下载地址

二、安装 zsh

1. 下载 zsh

• 下载 zsh-5.9-2-x86_64.zip 或从官方渠道下载最新版。
• 下载 zsh
• 下载解压软件

2. 安装 zsh

• 解压 zsh 包，将 etc 和 usr 目录复制到 Git 安装目录（如 C:\Program Files\Git）。

3. 设置 zsh 为默认终端

• 执行 chsh -s $(which zsh) 或在 ~/.bashrc 中添加以下配置：

if [ -t 1 ]; then
  exec zsh
fi

三、安装 Oh-My-Zsh

1. 下载 install.sh

• 执行命令：

curl -# -O https://mirror.ghproxy.com/https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh

2. 修改安装源

• 编辑 install.sh 文件，将以下内容：

REPO=${REPO:-ohmyzsh/ohmyzsh}
REMOTE=${REMOTE:-https://github.com/${REPO}.git}
BRANCH=${BRANCH:-master}

修改为：

REPO=${REPO:-ohmyzsh/ohmyzsh}
REMOTE=${REMOTE:-https://mirror.ghproxy.com/https://github.com/${REPO}.git}
BRANCH=${BRANCH:-master}

3. 执行安装脚本

• 运行命令：

sh install.sh

四、配置 Oh-My-Zsh

1. 配置主题

• 修改 ~/.zshrc 文件，将 ZSH_THEME="robbyrussell" 修改为 ZSH_THEME="ys"。

2. 下载常用插件

• 语法高亮插件：

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

• 自动补全插件：

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

3. 配置插件

• 修改 ~/.zshrc 文件，将 plugins=(git) 修改为：

plugins=(git zsh-syntax-highlighting zsh-autosuggestions)

4. 使配置生效

• 执行命令：

source ~/.zshrc

五、配置 Windows Terminal

安装

• 从微软商店安装 Windows Terminal 或从官网下载安装包。

• 安装文档

• 配置 Windows Terminal 默认打开 Git Bash。

六、配置 IDE（如 IDEA、VSCode）

• 在对应 IDE 软件设置中配置默认终端为 Git Bash。

Oil Price

Oil Price

在使用Swiper实现内容滑动的Web应用中，Ant Design（antd）的Select组件下拉框无法被触发。

问题复现

1. 在Web页面中引入Swiper和Ant Design组件库。
2. 在Swiper组件中添加Select组件。
3. 尝试点击Select以展开下拉列表。

<Swiper>
  <SwiperSlide>
    <Select>
      <Select.Option value="1">选项1</Select.Option>
      <Select.Option value="2">选项2</Select.Option>
    </Select>
  </SwiperSlide>
</Swiper>

发生原因

• Swiper拦截了点击事件。

解决方法

调整Swiper的配置
防止Swiper拦截Select组件的点击事件。

const swiper = new Swiper('.swiper-container', {
  simulateTouch: false,
  // 其他必要配置...
})

参考文档

Swiper simulateTouch

swiper plugin causes select can not pop drop-down box

在使用Swiper实现内容滑动的Web应用中，Ant Design（antd）的Select组件下拉框无法被触发。

问题复现

1. 在Web页面中引入Swiper和Ant Design组件库。
2. 在Swiper组件中添加Select组件。
3. 尝试点击Select以展开下拉列表。

<Swiper>
  <SwiperSlide>
    <Select>
      <Select.Option value="1">选项1</Select.Option>
      <Select.Option value="2">选项2</Select.Option>
    </Select>
  </SwiperSlide>
</Swiper>

发生原因

• Swiper拦截了点击事件。

解决方法

调整Swiper的配置
防止Swiper拦截Select组件的点击事件。

const swiper = new Swiper('.swiper-container', {
  simulateTouch: false,
  // 其他必要配置...
})

参考文档

Swiper simulateTouch

swiper plugin causes select can not pop drop-down box

是什么？

Mermaid 是一个基于JavaScript的图表和图表工具，可呈现Markdown启发的文本定义以动态创建和修改图表。Docs

PlantUML 是一个多功能组件，可快速、直接地创建图表。PDF

调研选择

markdown-it-plantuml

github

import plantuml from 'markdown-it-plantuml'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Markdown({
      async markdownItSetup(md) {
        md.use(plantuml, {
          server: 'http://www.plantuml.com/plantuml',
        })
      },
    }),
  ],
})

这样就部署好了。
但是因为这个插件是将PlantUML代码发送到PlantUML服务器，考虑到远程服务器可能会增加渲染图表的时间，并且服务器部署在国外（国内用户访问较慢，实际的体验不是很好）。
想折腾可部署一个在线服务，使用docker部署

markdown-it-textual-uml

[推荐]

用于基于plantuml，mermaid等从文本创建uml图。地址
Mermaid相对于PlantUML而言，更简单易用且无需服务器，适合快速创建各种图表。

import textualUml from 'markdown-it-textual-uml'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Markdown({
      async markdownItSetup(md) {
        md.use(textualUml)
      },
    }),
  ],
})

```plantuml
Bob -> Alice : hello
```

Bob -> Alice : hello

使用mermaid的注意事项。Here

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

是什么？

Mermaid 是一个基于JavaScript的图表和图表工具，可呈现Markdown启发的文本定义以动态创建和修改图表。Docs

PlantUML 是一个多功能组件，可快速、直接地创建图表。PDF

调研选择

markdown-it-plantuml

github

import plantuml from 'markdown-it-plantuml'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Markdown({
      async markdownItSetup(md) {
        md.use(plantuml, {
          server: 'http://www.plantuml.com/plantuml',
        })
      },
    }),
  ],
})

这样就部署好了。
但是因为这个插件是将PlantUML代码发送到PlantUML服务器，考虑到远程服务器可能会增加渲染图表的时间，并且服务器部署在国外（国内用户访问较慢，实际的体验不是很好）。
想折腾可部署一个在线服务，使用docker部署

markdown-it-textual-uml

[推荐]

用于基于plantuml，mermaid等从文本创建uml图。地址
Mermaid相对于PlantUML而言，更简单易用且无需服务器，适合快速创建各种图表。

import textualUml from 'markdown-it-textual-uml'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Markdown({
      async markdownItSetup(md) {
        md.use(textualUml)
      },
    }),
  ],
})

```plantuml
Bob -> Alice : hello
```

Bob -> Alice : hello

使用mermaid的注意事项。Here

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

在响应式Web设计中，有多种方法可以确保元素在不同分辨率和设备上的适应性。以下是三种流行的设计方案和它们的实现方法：

方案一：使用vw和vh单位

基本概念

• vw (viewport width) 是相对于视口宽度的单位，100vw 等于视口宽度的100%。
• vh (viewport height) 是相对于视口高度的单位，100vh 等于视口高度的100%。

实现方法

以设计稿尺寸为 1920x1080 为例，要把px单位转化为vw或vh，公式如下：

vwDiv = (300px / 1920px) * 100vw
vhDiv = (200px / 1080px) * 100vh

注意事项

• 需要对屏幕尺寸的变化进行监听，并在变化时重新计算元素的大小。
• 在Vue项目中，可以使用element-resize-detector或自定义的resize指令，帮助自动管理尺寸变化。

方案二：使用CSS的scale属性

核心思路

通过CSS的transform: scale(x)属性对页面进行等比缩放。

实现逻辑

• 当屏幕尺寸保持16:9时，内容全屏显示。
• 当屏幕宽高比小于16:9时，页面上下留白，内容比例为16:9。
• 当屏幕宽高比大于16:9时，页面左右留白，内容比例为16:9。

方案三：结合rem单位和vw/vh单位

实施步骤

1. 确定rem的基准值。
2. 编写JavaScript代码动态地设置html元素的font-size。
3. 监听屏幕尺寸变化，确保元素随着屏幕大小自动调整以及字体，间距，和位移等的自适应性。

示例代码

document.addEventListener('DOMContentLoaded', () => {
  const baseWidth = 1920 // 设计稿宽度
  const baseFontSize = 100 // 基准font-size
  const scale = document.documentElement.clientWidth / baseWidth
  document.documentElement.style.fontSize = `${baseFontSize * scale}px`
})

window.addEventListener('resize', () => {
  // 重新计算并设置 font-size
})

解决大屏问题的库

fit-screen

在响应式Web设计中，有多种方法可以确保元素在不同分辨率和设备上的适应性。以下是三种流行的设计方案和它们的实现方法：

方案一：使用vw和vh单位

基本概念

• vw (viewport width) 是相对于视口宽度的单位，100vw 等于视口宽度的100%。
• vh (viewport height) 是相对于视口高度的单位，100vh 等于视口高度的100%。

实现方法

以设计稿尺寸为 1920x1080 为例，要把px单位转化为vw或vh，公式如下：

vwDiv = (300px / 1920px) * 100vw
vhDiv = (200px / 1080px) * 100vh

注意事项

• 需要对屏幕尺寸的变化进行监听，并在变化时重新计算元素的大小。
• 在Vue项目中，可以使用element-resize-detector或自定义的resize指令，帮助自动管理尺寸变化。

方案二：使用CSS的scale属性

核心思路

通过CSS的transform: scale(x)属性对页面进行等比缩放。

实现逻辑

• 当屏幕尺寸保持16:9时，内容全屏显示。
• 当屏幕宽高比小于16:9时，页面上下留白，内容比例为16:9。
• 当屏幕宽高比大于16:9时，页面左右留白，内容比例为16:9。

方案三：结合rem单位和vw/vh单位

实施步骤

1. 确定rem的基准值。
2. 编写JavaScript代码动态地设置html元素的font-size。
3. 监听屏幕尺寸变化，确保元素随着屏幕大小自动调整以及字体，间距，和位移等的自适应性。

示例代码

document.addEventListener('DOMContentLoaded', () => {
  const baseWidth = 1920 // 设计稿宽度
  const baseFontSize = 100 // 基准font-size
  const scale = document.documentElement.clientWidth / baseWidth
  document.documentElement.style.fontSize = `${baseFontSize * scale}px`
})

window.addEventListener('resize', () => {
  // 重新计算并设置 font-size
})

解决大屏问题的库

fit-screen

参考文献

经典老牌的CDN加速

• unpkg.com
• cdn.jsdelivr.net
• fastly.jsdelivr.net

使用方法：直接进官网，搜NPM包名使用。

缺点：有时候不是很稳定，而且国内有些地方没法访问。

国内能用的CDN

• BootCDN
• 七牛云
• 360
• 字节跳动

使用方法：直接进官网，搜NPM包名使用。

缺点：这些CDN并不全，某些NPM包在这些CDN上找不到。

比较推荐的CDN

• 知乎: unpkg.zhimg.com
• jsd.onmicrosoft.cn (回源jsDelivr)
• npm.onmicrosoft.cn (回源UNPKG)
• cdnjs.onmicrosoft.cn (回源cdnjs)

使用方法：参考unpkg、jsdelivr等的使用方法，更换CDN的域名即可。

优点：CDN包更全一些，能搜到的NPM包与unpkg上的基本一致。

经典老牌的CDN加速

• unpkg.com
• cdn.jsdelivr.net
• fastly.jsdelivr.net

使用方法：直接进官网，搜NPM包名使用。

缺点：有时候不是很稳定，而且国内有些地方没法访问。

国内能用的CDN

• BootCDN
• 七牛云
• 360
• 字节跳动

使用方法：直接进官网，搜NPM包名使用。

缺点：这些CDN并不全，某些NPM包在这些CDN上找不到。

比较推荐的CDN

• 知乎: unpkg.zhimg.com
• jsd.onmicrosoft.cn (回源jsDelivr)
• npm.onmicrosoft.cn (回源UNPKG)
• cdnjs.onmicrosoft.cn (回源cdnjs)

使用方法：参考unpkg、jsdelivr等的使用方法，更换CDN的域名即可。

优点：CDN包更全一些，能搜到的NPM包与unpkg上的基本一致。

Problem Description

When handling Blob files and triggering downloads, if the file name specified for download does not include a file suffix, the downloaded file may lack an extension, which can affect its recognizability and usability.

Default Browser Behavior

• When a browser detects that the file name includes a suffix during download, it usually does not modify or process the file name.
• The browser determines whether the file name includes a suffix by checking if there is a decimal part (i.e., file extension) after a dot (.) in the file name. If such a decimal part exists, the browser will not automatically append a suffix.

If the file name does not explicitly include a suffix, the browser may automatically append one based on the following scenarios:

1. HTTP Response Content-Disposition Header
   If the server explicitly specifies the file name and suffix via the Content-Disposition header, the browser will use that name.

   Content-Disposition: attachment; filename="report.pdf"

2. Response Content-Type Header
   Based on the MIME type of the response, some browsers may attempt to assign an appropriate file suffix.

   Content-Type: application/pdf

3. URL Path Contains File Name
   If the URL path of the download appears to include a file name and suffix, the browser may use that part as the file name for the download.

   https://example.com/download/receipt.pdf

4. Text or Attribute of the Download Link
   In HTML, the download attribute of a download link (e.g., <a> element) can specify the file name. If a file name and suffix are provided, the browser will use that name for the download.

Recommended Measures

To ensure that the downloaded file includes the correct suffix, the following measures are recommended:

• On the server side, set the Content-Disposition and Content-Type headers to ensure that the file name and MIME type are explicitly specified.
• On the client side, when generating Blob files and creating download links via JavaScript, ensure that the file suffix is included when setting the download attribute.

Example Code

// Assume you have some data to download
const data = ''

// Create a Blob object representing the data and specify the MIME type
const blob = new Blob([data], { type: 'application/pdf' })

// Generate a URL pointing to the Blob
const url = URL.createObjectURL(blob)

// Create a link element for downloading and set the file name with a suffix
const link = document.createElement('a')
link.href = url
link.download = 'example.pdf' // Ensure the file name includes a suffix
document.body.appendChild(link)

// Trigger the download
link.click()

// Cleanup: Remove the link element and revoke the Blob URL
document.body.removeChild(link)
URL.revokeObjectURL(url)

问题描述

在处理Blob文件并触发下载时,如果在指定下载文件的名称时未包含文件后缀，可能会导致下载的文件缺失扩展名，从而影响文件的可识别性和可用性。

浏览器的默认行为

• 当浏览器在下载文件时识别到文件名中包含后缀，它通常不会对文件名进行任何修改或处理。
• 浏览器判断文件名是否包含后缀的依据是检查文件名中是否存在点（.）后的小数位（即文件扩展名）。如果文件名中已经包含此类小数位，则浏览器不会自动添加后缀。

在没有明确文件后缀的情况下，浏览器可能根据以下几种情况自动为文件名拼接后缀：

1. HTTP响应的Content-Disposition头部
   如果服务器通过Content-Disposition头部明确指定了文件名和后缀，浏览器将采用该名称。

   Content-Disposition: attachment; filename="report.pdf"

2. 响应的Content-Type头部
   根据响应的MIME类型，某些浏览器可能会尝试分配一个合适的文件后缀。

   Content-Type: application/pdf

3. URL路径包含文件名
   如果下载的URL路径看起来像是包含文件名和后缀，浏览器可能会使用该部分作为下载的文件名。

   https://example.com/download/receipt.pdf

4. 下载链接的文本或标签属性
   在HTML中，下载链接（比如<a>元素）的download属性可以指定下载的文件名。如果提供了文件名和后缀，浏览器会使用该名称进行下载。

推荐措施

为了确保文件下载时包含正确的后缀，建议采取以下措施：

• 在服务器端设置Content-Disposition和Content-Type头部，确保文件名和MIME类型被明确指定。
• 在客户端，通过JavaScript生成Blob文件并创建下载链接时，确保在设置下载属性时包含了文件后缀名。

示例代码

// 假设你有一些要下载的数据
const data = ''

// 创建一个表示该数据的Blob对象，并指定MIME类型
const blob = new Blob([data], { type: 'application/pdf' })

// 生成一个指向该Blob的URL
const url = URL.createObjectURL(blob)

// 创建一个用于下载的链接元素，并设置文件名及后缀
const link = document.createElement('a')
link.href = url
link.download = 'example.pdf' // 确保文件名包含后缀
document.body.appendChild(link)

// 触发下载
link.click()

// 清理：移除链接元素，释放Blob URL
document.body.removeChild(link)
URL.revokeObjectURL(url)

Patching with pnpm

Patching is an essential skill in front-end development, allowing you to modify the code of third-party libraries.

Why Patching is Necessary

In project development, we often use third-party libraries. While most third-party libraries are reliable, they may still contain bugs or require optimization. Common ways to address issues in third-party libraries include:

• Replacing the library: However, the new library may not necessarily be better than the original one;
• Submitting an issue: Waiting for the author to respond, which may not be feasible when time is tight;
• Submitting a PR: The author may not merge it immediately;
• Patching: Making local modifications that only affect our project without waiting for the author's review.

Using pnpm for Patching

sequenceDiagram
    participant Developer
    participant pnpm

    Developer ->> pnpm: pnpm patch pkg
    pnpm -->> Developer: Enter the package content for modification
    Developer ->> pnpm: Modify the code
    pnpm -->> Developer: Modification completed
    Developer ->> pnpm: pnpm patch-commit path
    pnpm -->> Developer: Commit the changes
    Developer ->> pnpm: Reinstall dependencies
    pnpm -->> Developer: Apply the modifications

Compared to yarn and npm, pnpm natively supports patching without requiring additional libraries. The specific steps are as follows:

1. Use pnpm patch pkg to enter the content of the package for modification;
2. After modifying the code, use pnpm patch-commit path to commit the changes;
3. Once completed, reinstall the dependencies, and pnpm will automatically read the content from the patch folder.

For example, when using a third-party library, suppose a specific function or method in the library contains a bug or does not meet our requirements. In this case, we can use patching to modify it. Assume we are using a third-party library called awesome-library in our project, but its function doSomething() has a bug that prevents our application from working properly. To resolve this issue, we can use pnpm's patching feature as follows:

1. First, use the command pnpm patch awesome-library to enter the content of the awesome-library package for modification.
2. Locate and fix the bug in the doSomething() function.
3. Commit the changes using the command pnpm patch-commit path.
4. Once completed, reinstall the dependencies, and pnpm will automatically read the content from the patch folder and apply our modifications.

In this way, we can fix or optimize issues in the library to meet the needs of our project without affecting the original library.

Summary

Patching is an effective way to address issues in third-party libraries and improve front-end development efficiency. By patching, we can quickly fix problems without waiting for the author's response.

pnpm 打补丁

打补丁是前端开发中必备的技能之一，通过这种方式可以修改第三方库的代码。

为什么需要打补丁

在项目开发中，我们经常会使用第三方库。尽管大多数第三方库都很可靠，但仍然可能存在 bug 或需要优化的情况。因此，解决第三方库问题的常见方式包括：

• 更换库：但新库未必比原库更好；
• 提交 issue：等待作者回应，但时间紧迫时无法等待；
• 提交 PR：作者可能无法立即合并；
• 打补丁：本地修改，仅在我们的项目中生效，无需等待作者审核。

使用 pnpm 打补丁

sequenceDiagram
    participant Developer
    participant pnpm

    Developer ->> pnpm: pnpm patch pkg
    pnpm -->> Developer: 进入对应包的内容进行修改
    Developer ->> pnpm: 修改代码
    pnpm -->> Developer: 修改完成
    Developer ->> pnpm: pnpm patch-commit path
    pnpm -->> Developer: 提交修改
    Developer ->> pnpm: 重新安装依赖
    pnpm -->> Developer: 应用修改完成

相比于 yarn 和 npm，pnpm 默认支持打补丁功能，无需额外安装库。具体步骤如下：

1. 使用 pnpm patch pkg 进入对应包的内容进行修改；
2. 修改代码后，使用 pnpm patch-commit path 提交修改；
3. 完成后，重新安装依赖，pnpm 将自动读取 patch 文件夹下的内容。

例如，当使用一个第三方库时，假设该库中有一个特定的函数或方法存在 bug 或者不符合我们的需求，这时我们可以通过打补丁来修改它。假设我们在项目中使用了一个名为 awesome-library 的第三方库，但它的某个函数 doSomething() 存在一个 bug，导致我们的应用无法正常工作。为了解决这个问题，我们可以使用 pnpm 打补丁的方式进行修复：

1. 首先，使用命令 pnpm patch awesome-library 进入 awesome-library 包的内容进行修改。
2. 找到并修复 doSomething() 函数中的 bug。
3. 提交修改，使用命令 pnpm patch-commit path 来提交所做的更改。
4. 完成后，重新安装依赖，pnpm 将自动读取 patch 文件夹下的内容，并应用我们的修改。

通过这种方式，我们可以在不影响原始库的情况下，对其中的问题进行修复或优化，以满足我们项目的需求。

总结

打补丁是解决第三方库问题的有效方式，可以提升前端开发效率。通过打补丁，我们可以快速修复问题，而不必等待作者的响应。

在开始之前，请确保你有一个有效的Algolia帐户。如果没有，请先创建一个。

集成步骤

graph TD;
A[创建Algolia帐户] --> B[创建一个新的索引]
B --> C[获取API密钥]
C --> D[集成Algolia到你的文档]
D --> E[索引你的文档]
E --> F[在你的文档中添加搜索功能]

1.创建Algolia帐户

1. 访问 Algolia官网。
2. 点击"Sign Up"注册，按照页面提示完成注册流程。

2.创建一个新的索引

1. 登录你的Algolia帐户。
2. 导航到"Indices"页面，点击"Create Index"。
3. 给你的索引起一个名字，并确认创建。

3.获取API密钥

1. 在Algolia仪表盘中，点击"API Keys"。
2. 记录下你的Application ID、Search-Only API Key和Admin API Key。

4.集成Algolia到你的文档

集成方法取决于你文档的托管方式，这里我以我的文档为例，我使用了开源的DocSearch插件。

集成DocSearch到Vue 3项目

1.申请DocSearch

在集成之前，你需要为你的文档申请DocSearch。访问 DocSearch 申请页面，按照指示填写并提交表单。一旦你的申请被接受，Algolia 的团队将为你的文档创建一个索引，并发送给你一个唯一的 API key 和 index name。

2.安装DocSearch依赖

在你的Vue 3项目中，安装DocSearch的依赖。

pnpm install @docsearch/js@alpha
# 注意引用官方的组件，需要将样式依赖也安装好
pnpm install @docsearch/css

编写组件，可自定义也可直接使用DocSearch官方提供的组件。这里我借鉴vitePress定义的AlgoliaSearch组件，下面展示为主要的代码

<script setup lang="ts">
import docsearch from '@docsearch/js'
import '@docsearch/css'

const props = defineProps<{
  algolia: AlgoliaSearchOptions
}>()

onMounted(() => {
  docsearch(algolia)
})
</script>

<template>
  <div id="docsearch" />
</template>

这里我使用的时候覆盖了原有的样式,如下

<template>
  <a href=" " class="relative">
    <div class="i-mynaui-search-square h-1.3em w-1.3em" />
    <AlgoliaSearchBox
      class="absolute left-0 top-0 h-full w-full op0!"
      :algolia="{
        apiKey: 'db0e9b82d77e75c9fc8aee05b1e14334',
        indexName: 'ryan',
        appId: 'X0NE0GCGVB',
      }"
    />
  </a>
</template>

<style>
:root {
  /* docsearch */
  --docsearch-primary-color: #313237 !important;
  --docsearch-logo-color: #313237 !important;
  --docsearch-text-color: #9d9fa1 !important;
}

.cls-1,
.cls-2 {
  fill: #060606 !important;
}

.DocSearch-Button-Placeholder,
span.DocSearch-Button-Keys {
  display: none;
}

button.DocSearch-Button {
  margin: 0;
  background: transparent;
  height: auto;
  padding: 0;
}

button.DocSearch-Button:active,
button.DocSearch-Button:focus,
button.DocSearch-Button:hover {
  background: transparent;
  box-shadow: none;
  color: var(--c-hover-color);
}
</style>

5.编写爬虫的规则

爬虫规则

在开始之前，请确保你有一个有效的Algolia帐户。如果没有，请先创建一个。

集成步骤

graph TD;
A[创建Algolia帐户] --> B[创建一个新的索引]
B --> C[获取API密钥]
C --> D[集成Algolia到你的文档]
D --> E[索引你的文档]
E --> F[在你的文档中添加搜索功能]

1.创建Algolia帐户

1. 访问 Algolia官网。
2. 点击"Sign Up"注册，按照页面提示完成注册流程。

2.创建一个新的索引

1. 登录你的Algolia帐户。
2. 导航到"Indices"页面，点击"Create Index"。
3. 给你的索引起一个名字，并确认创建。

3.获取API密钥

1. 在Algolia仪表盘中，点击"API Keys"。
2. 记录下你的Application ID、Search-Only API Key和Admin API Key。

4.集成Algolia到你的文档

集成方法取决于你文档的托管方式，这里我以我的文档为例，我使用了开源的DocSearch插件。

集成DocSearch到Vue 3项目

1.申请DocSearch

在集成之前，你需要为你的文档申请DocSearch。访问 DocSearch 申请页面，按照指示填写并提交表单。一旦你的申请被接受，Algolia 的团队将为你的文档创建一个索引，并发送给你一个唯一的 API key 和 index name。

2.安装DocSearch依赖

在你的Vue 3项目中，安装DocSearch的依赖。

pnpm install @docsearch/js@alpha
# 注意引用官方的组件，需要将样式依赖也安装好
pnpm install @docsearch/css

编写组件，可自定义也可直接使用DocSearch官方提供的组件。这里我借鉴vitePress定义的AlgoliaSearch组件，下面展示为主要的代码

<script setup lang="ts">
import docsearch from '@docsearch/js'
import '@docsearch/css'

const props = defineProps<{
  algolia: AlgoliaSearchOptions
}>()

onMounted(() => {
  docsearch(algolia)
})
</script>

<template>
  <div id="docsearch" />
</template>

这里我使用的时候覆盖了原有的样式,如下

<template>
  <a href=" " class="relative">
    <div class="i-mynaui-search-square h-1.3em w-1.3em" />
    <AlgoliaSearchBox
      class="absolute left-0 top-0 h-full w-full op0!"
      :algolia="{
        apiKey: 'db0e9b82d77e75c9fc8aee05b1e14334',
        indexName: 'ryan',
        appId: 'X0NE0GCGVB',
      }"
    />
  </a>
</template>

<style>
:root {
  /* docsearch */
  --docsearch-primary-color: #313237 !important;
  --docsearch-logo-color: #313237 !important;
  --docsearch-text-color: #9d9fa1 !important;
}

.cls-1,
.cls-2 {
  fill: #060606 !important;
}

.DocSearch-Button-Placeholder,
span.DocSearch-Button-Keys {
  display: none;
}

button.DocSearch-Button {
  margin: 0;
  background: transparent;
  height: auto;
  padding: 0;
}

button.DocSearch-Button:active,
button.DocSearch-Button:focus,
button.DocSearch-Button:hover {
  background: transparent;
  box-shadow: none;
  color: var(--c-hover-color);
}
</style>

5.编写爬虫的规则

爬虫规则

Introduction

In any version control software, proper commit messages are crucial for team collaboration and code maintenance. Git, as the most popular distributed version control system, benefits greatly from standardized commit messages. They help team members better understand the code history, speed up code reviews, and automate changelog generation. This article introduces some common Git commit message conventions.

Importance of Git Commit Conventions

• Improved Readability: Clear commit messages allow team members to quickly understand the purpose and changes of a commit.
• Ease of Tracking: Standardized commits make it easier to search for specific changes in the history.
• Support for Automation Tools: Standardized commit messages can be used by various tools, such as automatically generating CHANGELOGs or analyzing code changes through scripts.

Common Format of Git Commit Messages

A standardized Git commit message typically includes the following parts:

1. Type: The type of the commit, such as fixing a bug (fix) or adding a new feature (feat).
2. Scope: (Optional) The scope of the changes, such as a component or a module.
3. Subject: A brief description of the commit, not exceeding 50 characters.
4. Body: (Optional) A more detailed description, which can span multiple lines.
5. Footer: (Optional) Descriptions of related issues or breaking changes.

For example:

feat(login): add the remember me button

- Add a "remember me" checkbox in the login form
- Save the login state to local storage when checked

Closes #123

Common Commit Types

Below are some common commit types and their meanings:

• feat: New feature
• fix: Bug fix
• docs: Documentation
• style: Formatting (changes that do not affect code execution)
• refactor: Code refactoring (neither adding a feature nor fixing a bug)
• test: Adding tests
• chore: Changes to the build process or auxiliary tools

Reference Articles

When defining your own Git commit conventions, you can refer to the following articles and resources:

• Conventional Commits
• AngularJS Git Commit Message Conventions
• Semantic Versioning Specification (SemVer)

The above outlines the basic Git commit conventions and some recommendations. You can customize your commit conventions based on your team's specific needs.

前言

在任何版本控制软件中，合理的提交（commit）信息对于团队合作和代码维护来说都是至关重要的。Git，作为目前最流行的分布式版本控制系统，其提交信息的规范化可以帮助团队成员更好地了解代码历史，加快代码审查过程，以及自动化生成变更日志。本文将介绍一些常见的 Git 提交信息规范。

Git Commit 规范的重要性

• 提高可读性：清晰的提交信息可以让其他团队成员快速了解这次提交的目的和改动内容。
• 方便追踪：规范化的提交便于在历史记录中搜索特定的更改。
• 自动化工具支持：规范的提交信息可以被各种工具所使用，比如自动生成 CHANGELOG，或者通过脚本分析代码变更情况。

Git Commit 规范的常见格式

一个规范化的 Git 提交信息通常包括以下几个部分：

1. 类型（Type）: 这次提交的类型，比如是修复一个 Bug（fix），还是添加一个新功能（feat）。
2. 范围（Scope）: （可选）改动影响的范围，比如一个组件或者一个功能模块。
3. 主题（Subject）: 提交的简短描述，不超过50个字符。
4. 正文（Body）: （可选）更详细的描述，可以分成多行。
5. 页脚（Footer）: （可选）相关联的 issue 或者 breaking changes 的描述。

例如：

feat(login): add the remember me button

- Add a "remember me" checkbox in the login form
- Save the login state to local storage when checked

Closes #123

常用的提交类型

以下是一些常用的提交类型以及它们的含义：

• feat: 新功能（feature）
• fix: 修补bug
• docs: 文档（documentation）
• style: 格式（不影响代码运行的变动）
• refactor: 重构（即不是新增功能，也不是修改bug的代码变动）
• test: 增加测试
• chore: 构建过程或辅助工具的变动

参考文章

在制定自己的 Git Commit 规范时，可以参考以下文章和资源：

• Conventional Commits
• AngularJS Git Commit Message Conventions
• Semantic Versioning Specification (SemVer)

以上是 Git Commit 的基本规范和一些建议，你可以根据团队的实际需求定制自己的提交规范。

Advantages and Disadvantages of Vuex and Pinia

Advantages of Pinia

• Full TypeScript support: Adding TypeScript is easier compared to Vuex.
• Extremely lightweight (about 1KB in size).
• Store actions are dispatched as regular function calls instead of using the dispatch method or MapAction helper functions, which are common in Vuex.
• Supports multiple stores, Vue devtools, SSR, and webpack code splitting.

Disadvantages of Pinia

• Does not support debugging features like time travel and editing.

Advantages of Vuex

• Supports debugging features such as time travel and editing.
• Suitable for large, highly complex Vue.js projects.

Disadvantages of Vuex

• Starting from Vue 3, the results of getters are no longer cached like computed properties.
• Vuex 4 has some issues related to type safety.

Introduction to Pinia

• Pinia.js has the following features:

• Full TypeScript support;

• Lightweight, with a compressed size of only about 1KB;

• Removes mutations, leaving only state, getters, and actions;

• Actions support both synchronous and asynchronous operations;

• Flat code structure without module nesting, only the concept of stores, and stores can be freely used with each other. Each store is independent;

• No need to manually add stores; once a store is created, it is automatically added;

• Supports both Vue 3 and Vue 2;

Introduction to Pinia Usage

Initializing the Pinia Store Repository

• Store Repository

Several Ways to Modify Values in Pinia

• Ways to Modify Values

Destructuring State

• Directly destructuring state does not achieve reactivity.
• Use storeToRefs to achieve reactivity for destructured data on the page.

Actions and Getters in Pinia

• Getters and Actions

Pinia Plugins

• Pinia Caching Plugin

Vuex 和 Pinia 的优缺点

Pinia的优点

• 完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易极其轻巧(体积约 1KB);store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见支持多个Store,支持 Vue devtools、SSR 和 webpack 代码拆分。

Pinia的缺点

• 不支持时间旅行和编辑等调试功能

Vuex的优点

• 支持调试功能，如时间旅行和编辑
• 适用于大型、高复杂度的Vue.js项目

Vuex的缺点

• 从 Vue 3 开始，getter 的结果不会像计算属性那样缓存
• Vuex 4有一些与类型安全相关的问题

pinia介绍

• Pinia.js 有如下特点：

• 完整的 ts 的支持；

• 足够轻量，压缩后的体积只有1kb左右;

• 去除 mutations，只有 state，getters，actions；

• actions 支持同步和异步；

• 代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的

• 无需手动添加 store，store 一旦创建便会自动添加；

• 支持Vue3 和 Vue2；

pinia使用介绍

pinia初始化store仓库

• store仓库

pinia修改值的几种方式

• 修改值的几种方式

解构state

• 直接解构state无法实现响应式
• 使用storeToRefs将解构后 实现页面数据的响应式

pinia中的actions和getters

• getter和actions

pinia插件

• pinia缓冲插件

Graduation Project Video Showcase

Image Showcase

System Architecture

Front-End Functional Design

Libraries Used in the Front-End

• Vue3
• vant3
• echart for data analysis
• swiper for carousel effects
• html2canvas for poster creation
• nprogress for request loading
• compressorjs for image compression

Front-End Performance Optimization

1. Use webpack to analyze performance-consuming files and plugins (BundleAnalyzerPlugin) and separate them one by one.
2. Use CDN for static acceleration. Common components like Vue, vant, swiper, echart, and html2canvas are loaded via CDN (handled differently for production and online environments).
3. Enable Gzip acceleration for both front-end and back-end. The front-end generates compressed files using gzip, and the back-end uses nginx to enable gzip static acceleration.
4. Use asynchronous loading for components. Vue3's defineAsyncComponent is used to separate asynchronous components into individual chunks.

Back-End Introduction

Technologies Used in the Back-End

• YOLO-v5
• Flask
• Tornado (using Tornado's WSGI module to host Flask applications)
• flask_restful for modular handling and easier maintenance
• MySQL 8.0.23

Modular Display

Admin Panel Introduction

Repository Links

• Front-End Open-Source Repository
• Back-End Open-Source Repository
• Database and back-end code are not yet developed.
• Contributions and Stars are welcome!

毕业设计项目视频展示

图片展示

系统架构

前端功能设计

前端用到的库

• Vue3
• vant3
• echart 数据的分析
• swiper 轮播效果
• html2canvas 海报制作
• nprogress 请求加载
• compressorjs 图片压缩

前端的性能优化处理

1. 使用webpack分析出占用性能的文件，插件（BundleAnalyzerPlugin ），逐一分离
2. 使用cdn静态加速，Vue,vant,swiper,echart,html2canvas这些公共的组件 都是以CDN的形式进行加载请求（生产环境和线上环境区别处理）
3. 前后端开启Gzip加速，前端生成gzip处理后得压缩文件，后端使用nginx开启gzip静态加速
4. 组件使用异步加载的方式，Vue3使用defineAsyncComponent才能实现，将异步组件进行分离生成一个单独的chunk

后端介绍

后端用到的技术

• YOLO-v5
• Flask
• tornado 利用Tornado的wsgi模块来托管flask应用
• flask_restful 模块化处理 方便维护
• Mysql 8.0.23

模块化展示

后台管理介绍

仓库地址

• 前端开源仓库
• 后台开源仓库
• 暂未开发数据库和后端代码
• 欢迎Star

为什么使用卷积运算

1. 使用卷积比全连接网络少很多参数，为了计算高分辨率的图片，很少的参数以便我们可以使用较小的训练集来训练，有利于预防过拟合
2. 使用卷积就是为了提取显著特征，减少特征维数，减少计算量。

边缘检测

1. • 表示卷积，使用3x3过滤器
2. 如图是垂直边缘检测器
   

正边缘与负边缘

填充降维度

公式：nxn * fxf = (n-f+1)x(n-f+1)

1. 缺陷：不希望每一步都缩小维度，使得图片丢失了许多边界的信息
2. 解决方法：填充图片扩大图片，给图片增加边框像素也就是 给一个padding为一像素
3. 公式就变成了：n+2p-f+1=n如果让填充后的图片进行卷积等于原来图片的大小 p=(f-1)/2 并且过滤器建议使奇数

带步长的卷积

1. 公式：(n+2p-f)/s+1 带步长卷积后的维度大小，除不尽可以向下取整floor=⌊ ⌋
2. 总结公式：⌊(n+2p-f)/s+1⌋ * ⌊(n+2p-f)/s+1⌋

三维卷积

1. 使用rgb图片 则是三通道（red,green,blue）
   

卷积神经网络结构

1. 卷积神经网络主要由这几类层构成：输入层、卷积层，ReLU层、池化（Pooling）层和全连接层（全连接层和常规神经网络中的一样）。

为什么使用卷积运算

1. 使用卷积比全连接网络少很多参数，为了计算高分辨率的图片，很少的参数以便我们可以使用较小的训练集来训练，有利于预防过拟合
2. 使用卷积就是为了提取显著特征，减少特征维数，减少计算量。

边缘检测

1. • 表示卷积，使用3x3过滤器
2. 如图是垂直边缘检测器
   

正边缘与负边缘

填充降维度

公式：nxn * fxf = (n-f+1)x(n-f+1)

1. 缺陷：不希望每一步都缩小维度，使得图片丢失了许多边界的信息
2. 解决方法：填充图片扩大图片，给图片增加边框像素也就是 给一个padding为一像素
3. 公式就变成了：n+2p-f+1=n如果让填充后的图片进行卷积等于原来图片的大小 p=(f-1)/2 并且过滤器建议使奇数

带步长的卷积

1. 公式：(n+2p-f)/s+1 带步长卷积后的维度大小，除不尽可以向下取整floor=⌊ ⌋
2. 总结公式：⌊(n+2p-f)/s+1⌋ * ⌊(n+2p-f)/s+1⌋

三维卷积

1. 使用rgb图片 则是三通道（red,green,blue）
   

卷积神经网络结构

1. 卷积神经网络主要由这几类层构成：输入层、卷积层，ReLU层、池化（Pooling）层和全连接层（全连接层和常规神经网络中的一样）。

Docker

Image

• A template that can be used to create container services.
• Images are immutable and consist of multiple layers.
• Commonly used base images include ubuntu, alpine, and node.

Container

• Independently runs one or a group of applications, created from an image.
• A simplified Linux system.
• Containers are lightweight and portable, making them ideal for microservices.

Repository

• A place to store images.
• Divided into public and private repositories.
• Popular public repositories include Docker Hub and GitHub Container Registry.

Underlying Principles

How It Works

• A Client-Server structured system, where Docker's daemon runs on the host.
• DockerServer receives commands from Docker-Client.
• Docker uses namespaces for isolation and cgroups for resource management.

Key Components

• Docker Daemon: Runs on the host machine and manages Docker objects.
• Docker CLI: A command-line interface to interact with the Docker Daemon.
• Docker Compose: A tool for defining and running multi-container applications.

Commands

Container

docker container my_command
create — Create a container from an image.
start — Start an existing container.
run — Create and start a new container.
ls — List running containers.
inspect — View detailed information about a container.
logs — Print logs.
stop — Gracefully stop a running container.
kill — Abruptly stop the main process in a container.
rm — Remove a stopped container.
exec — Run a command inside a running container.
cp — Copy files or directories between a container and the host.

Image

• Use docker image my_command
build — Build an image.
  push — Push an image to a remote registry.
  pull — Download an image from a remote registry.
  ls — List images.
  history — View intermediate image information.
  inspect — View detailed information about an image, including layers.
  rm — Remove an image.
  tag — Tag an image for easier reference.

Network

• Use docker network my_command
create — Create a new network.
  ls — List all networks.
  inspect — View detailed information about a network.
  rm — Remove a network.
  connect — Connect a container to a network.
  disconnect — Disconnect a container from a network.

Docker Syntax

Docker

镜像（Image）

• 一个模板，可以通过这个模板来创建容器服务。
• 镜像是不可变的，由多个层组成。
• 常用的基础镜像包括 ubuntu、alpine 和 node。

容器（Container）

• 独立运行一个或一组应用，由镜像创建。
• 一个简化的 Linux 系统。
• 容器轻量且可移植，非常适合微服务。

仓库（Repository）

• 存放镜像的地方。
• 分为公有仓库和私有仓库。
• 常见的公有仓库包括 Docker Hub 和 GitHub Container Registry。

底层原理

怎么工作的

• Client-Server 结构的系统，Docker 的守护进程运行在主机上。
• DockerServer 接收 Docker-Client 的指令。
• Docker 使用命名空间（namespaces）进行隔离，使用控制组（cgroups）进行资源管理。

核心组件

• Docker Daemon：运行在主机上，管理 Docker 对象。
• Docker CLI：用于与 Docker Daemon 交互的命令行界面。
• Docker Compose：用于定义和运行多容器应用的工具。

命令

容器

docker container my_command
create — 从镜像创建容器。
start — 启动现有容器。
run — 创建并启动新容器。
ls — 列出正在运行的容器。
inspect — 查看有关容器的详细信息。
logs — 打印日志。
stop — 优雅地停止运行的容器。
kill — 突然停止容器中的主进程。
rm — 删除已停止的容器。
exec — 在运行的容器中执行命令。
cp — 在容器和主机之间复制文件或目录。

镜像

• 使用 docker image my_command
build — 构建镜像。
  push — 将镜像推送到远程注册表。
  pull — 从远程注册表下载镜像。
  ls — 列出镜像。
  history — 查看中间镜像信息。
  inspect — 查看有关镜像的详细信息，包括图层。
  rm — 删除镜像。
  tag — 为镜像打标签以便于引用。

网络

• 使用 docker network my_command
create — 创建新网络。
  ls — 列出所有网络。
  inspect — 查看有关网络的详细信息。
  rm — 删除网络。
  connect — 将容器连接到网络。
  disconnect — 将容器从网络断开。

docker语法

深度学习

• 机器语言的分支, 对数据进行特征学习, 人工神经网络为基础

机器学习和深度学习的区别

• 特征抽取: 01. 人工的特征抽取的过程 02. 深度学习：自动的进行特征抽取
• 数据量: 01. 机器学习：数据少 02. 深度学习：数据多

深度学习的应用场景

1. 图像识别：物体识别场景识别人脸检测跟踪人脸身份认证自然语言处理技术
2. 机器翻译：文本识别聊天对话语音技术
3. 语音识别

神经网络

1. 人工神经网络（英语：Artificial Neural Network，ANN），简称神经网络（Neural Network，NN）或类神经网络，是一种模仿生物神经网络（动物的中枢神经系统，特别是大脑）的结构和功能的数学模型，用于对函数进行估计或近似。
   和其他机器学习方法一样, 神经网络已经被用于解决各种各样的问题, 例如机器视觉和语音识别. 这些问题都是很难被传统基于规则的编程所解决的.
2. 模拟生物的神经元，对函数进行评估或者近似。神经网络中的基础单元，相互连接，组成神经网络
3. t=f(W^TA+b) 一个神经元的功能是求得输入向量与权向量的内积后, 经一个非线性传递函数得到一个标量结果.

单项神经网络

• 最基本的神经元形式由有限个神经元构成, 所有神经元的输入向量都是同一个向量. 由于每一个神经元都会产生一个标量结果, 所以单层神经元的输出是一个向量, 向量的维数等于神经元的数目.

感知机

• 两层神经网络组成, 输出层输入层, 感知机由两层神经网络组成, 输入层接收外界输入信号后传递给输出层(输出+1正例, -1反例), 输出层是 M-P 神经元
• 作用: 把一个n维向量空间用一个超平面分割成两部分, 给定一个输入向量, 超平面可以判断出这个向量位于超平面的哪一边, 得到输入时正类或者是反类, 对应到2维空间就是一条直线把一个平面分为两个部分.

初步使用

Pytorch的入门使用

目标

1. 知道张量和Pytorch中的张量
2. 知道pytorch中如何创建张量
3. 知道pytorch中tensor的常见方法
4. 知道pytorch中tensor的数据类型
5. 知道pytorch中如何实现tensor在cpu和cuda中转化

1. 张量Tensor

张量是一个统称, 其中包含很多类型:

1. 0阶张量：标量、常数，0-D Tensor
2. 1阶张量：向量，1-D Tensor
3. 2阶张量：矩阵，2-D Tensor
4. 3阶张量
5. ...
6. N阶张量

2. Pytorch中创建张量

1. 使用python中的列表或者序列创建tensor

   torch.tensor([[1., -1.], [1., -1.]])
   tensor([[ 1.0000, -1.0000],
           [ 1.0000, -1.0000]])

2. 使用numpy中的数组创建tensor

   torch.tensor(np.array([[1, 2, 3], [4, 5, 6]]))
   tensor([[ 1,  2,  3],
           [ 4,  5,  6]])

3. 使用torch的api创建tensor

4. torch.empty(3, 4) 创建3行4列的空的tensor, 会用无用数据进行填充

5. torch.ones([3,4]) 创建3行4列的全为1的tensor

6. torch.zeros([3, 4]) 创建3行4列的全为0的tensor

7. torch.rand([3,4]) 创建3行4列的随机值的tensor, 随机值的区间是 [0, 1)

      >>> torch.rand(2, 3)
      tensor([[ 0.8237,  0.5781,  0.6879],
      [ 0.3816,  0.7249,  0.0998]])

4. torch.randint(low=0,high=10,size=[3,4]) 创建3行4列的随机整数的tensor, 随机值的区间是 [low, high)

      >>> torch.randint(3, 10, (2, 2))
      tensor([[4, 5],
      [6, 7]])

5. torch.randn([3,4]) 创建3行4列的随机数的tensor, 随机值的分布式均值为0, 方差为1

3. Pytorch中tensor的常用方法

1. 获取tensor中的数据(当tensor中只有一个元素可用)：tensor.item()

   In [10]: a = torch.tensor(np.arange(1))

   In [11]: a
   Out[11]: tensor([0])

   In [12]: a.item()
   Out[12]: 0

2. 转化为numpy数组

   In [55]: z.numpy()
   Out[55]:
   array([[-2.5871205],
          [ 7.3690367],
          [-2.4918075]], dtype=float32)

3. 获取形状：tensor.size()

   In [72]: x
   Out[72]:
   tensor([[    1,     2],
           [    3,     4],
           [    5,    10]], dtype=torch.int32)

   In [73]: x.size()
   Out[73]: torch.Size([3, 2])

4. 形状改变：tensor.view((3,4))。类似numpy中的reshape，是一种浅拷贝，仅仅是形状发生改变

   In [76]: x.view(2,3)
   Out[76]:
   tensor([[    1,     2,     3],
           [    4,     5,    10]], dtype=torch.int32)

5. 获取阶数：tensor.dim()

   In [77]: x.dim()
   Out[77]: 2

7. 获取最大值：tensor.max()

   In [78]: x.max()
   Out[78]: tensor(10, dtype=torch.int32)

8. 转置：tensor.t()

   In [79]: x.t()
   Out[79]:
   tensor([[    1,     3,     5],
           [    2,     4,   10]], dtype=torch.int32)

9. tensor[1,3] 获取tensor中第一行第三列的值

10. tensor[1,3]=100 对tensor中第一行第三列的位置进行赋值100

11. tensor的切片

   In [101]: x
   Out[101]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])

   In [102]: x[:,1]
   Out[102]: tensor([1.9439, 1.9575, 1.0123, 1.5939, 1.4858])

4. tensor的数据类型

1. 获取tensor的数据类型:tensor.dtype

   In [80]: x.dtype
   Out[80]: torch.int32

2. 创建数据的时候指定类型

   In [88]: torch.ones([2,3],dtype=torch.float32)
   Out[88]:
   tensor([[9.1167e+18, 0.0000e+00, 7.8796e+15],
           [8.3097e-43, 0.0000e+00, -0.0000e+00]])

3. 类型的修改

   In [17]: a
   Out[17]: tensor([1, 2], dtype=torch.int32)

   In [18]: a.type(torch.float)
   Out[18]: tensor([1., 2.])

   In [19]: a.double()
   Out[19]: tensor([1., 2.], dtype=torch.float64)

5. tensor的其他操作

1. tensor和tensor相加

   In [94]: x = x.new_ones(5, 3, dtype=torch.float)

   In [95]: y = torch.rand(5, 3)

   In [96]: x+y
   Out[96]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])
   In [98]: torch.add(x,y)
   Out[98]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])
   In [99]: x.add(y)
   Out[99]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])
   In [100]: x.add_(y)  #带下划线的方法会对x进行就地修改
   Out[100]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])

   In [101]: x #x发生改变
   Out[101]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])

注意: 带下划线的方法(比如: add_ )会对tensor进行就地修改

2. tensor和数字操作

   In [97]: x +10
   Out[97]:
   tensor([[11., 11., 11.],
           [11., 11., 11.],
           [11., 11., 11.],
           [11., 11., 11.],
           [11., 11., 11.]])

3. CUDA中的tensor

CUDA(Compute Unified Device Architecture), 是NVIDIA推出的运算平台. CUDA™是一种由NVIDIA推出的通用并行计算架构, 该架构使GPU能够解决复杂的计算问题.

torch.cuda 这个模块增加了对CUDA tensor的支持, 能够在cpu和gpu上使用相同的方法操作tensor

通过 .to 方法能够把一个tensor转移到另外一个设备(比如从CPU转到GPU)

   #device = torch.device("cuda:0" if torch.cuda.is_available() else "cpu")
   if torch.cuda.is_available():
       device = torch.device("cuda")          # cuda device对象
       y = torch.ones_like(x, device=device)  # 创建一个在cuda上的tensor
       x = x.to(device)                       # 使用方法把x转为cuda 的tensor
       z = x + y
       print(z)
       print(z.to("cpu", torch.double))       # .to方法也能够同时设置类型

   >>tensor([1.9806], device='cuda:0')
   >>tensor([1.9806], dtype=torch.float64)

通过前面的学习, 可以发现torch的各种操作几乎和numpy一样

深度学习

• 机器语言的分支, 对数据进行特征学习, 人工神经网络为基础

机器学习和深度学习的区别

• 特征抽取: 01. 人工的特征抽取的过程 02. 深度学习：自动的进行特征抽取
• 数据量: 01. 机器学习：数据少 02. 深度学习：数据多

深度学习的应用场景

1. 图像识别：物体识别场景识别人脸检测跟踪人脸身份认证自然语言处理技术
2. 机器翻译：文本识别聊天对话语音技术
3. 语音识别

神经网络

1. 人工神经网络（英语：Artificial Neural Network，ANN），简称神经网络（Neural Network，NN）或类神经网络，是一种模仿生物神经网络（动物的中枢神经系统，特别是大脑）的结构和功能的数学模型，用于对函数进行估计或近似。
   和其他机器学习方法一样, 神经网络已经被用于解决各种各样的问题, 例如机器视觉和语音识别. 这些问题都是很难被传统基于规则的编程所解决的.
2. 模拟生物的神经元，对函数进行评估或者近似。神经网络中的基础单元，相互连接，组成神经网络
3. t=f(W^TA+b) 一个神经元的功能是求得输入向量与权向量的内积后, 经一个非线性传递函数得到一个标量结果.

单项神经网络

• 最基本的神经元形式由有限个神经元构成, 所有神经元的输入向量都是同一个向量. 由于每一个神经元都会产生一个标量结果, 所以单层神经元的输出是一个向量, 向量的维数等于神经元的数目.

感知机

• 两层神经网络组成, 输出层输入层, 感知机由两层神经网络组成, 输入层接收外界输入信号后传递给输出层(输出+1正例, -1反例), 输出层是 M-P 神经元
• 作用: 把一个n维向量空间用一个超平面分割成两部分, 给定一个输入向量, 超平面可以判断出这个向量位于超平面的哪一边, 得到输入时正类或者是反类, 对应到2维空间就是一条直线把一个平面分为两个部分.

初步使用

Pytorch的入门使用

目标

1. 知道张量和Pytorch中的张量
2. 知道pytorch中如何创建张量
3. 知道pytorch中tensor的常见方法
4. 知道pytorch中tensor的数据类型
5. 知道pytorch中如何实现tensor在cpu和cuda中转化

1. 张量Tensor

张量是一个统称, 其中包含很多类型:

1. 0阶张量：标量、常数，0-D Tensor
2. 1阶张量：向量，1-D Tensor
3. 2阶张量：矩阵，2-D Tensor
4. 3阶张量
5. ...
6. N阶张量

2. Pytorch中创建张量

1. 使用python中的列表或者序列创建tensor

   torch.tensor([[1., -1.], [1., -1.]])
   tensor([[ 1.0000, -1.0000],
           [ 1.0000, -1.0000]])

2. 使用numpy中的数组创建tensor

   torch.tensor(np.array([[1, 2, 3], [4, 5, 6]]))
   tensor([[ 1,  2,  3],
           [ 4,  5,  6]])

3. 使用torch的api创建tensor

4. torch.empty(3, 4) 创建3行4列的空的tensor, 会用无用数据进行填充

5. torch.ones([3,4]) 创建3行4列的全为1的tensor

6. torch.zeros([3, 4]) 创建3行4列的全为0的tensor

7. torch.rand([3,4]) 创建3行4列的随机值的tensor, 随机值的区间是 [0, 1)

      >>> torch.rand(2, 3)
      tensor([[ 0.8237,  0.5781,  0.6879],
      [ 0.3816,  0.7249,  0.0998]])

4. torch.randint(low=0,high=10,size=[3,4]) 创建3行4列的随机整数的tensor, 随机值的区间是 [low, high)

      >>> torch.randint(3, 10, (2, 2))
      tensor([[4, 5],
      [6, 7]])

5. torch.randn([3,4]) 创建3行4列的随机数的tensor, 随机值的分布式均值为0, 方差为1

3. Pytorch中tensor的常用方法

1. 获取tensor中的数据(当tensor中只有一个元素可用)：tensor.item()

   In [10]: a = torch.tensor(np.arange(1))

   In [11]: a
   Out[11]: tensor([0])

   In [12]: a.item()
   Out[12]: 0

2. 转化为numpy数组

   In [55]: z.numpy()
   Out[55]:
   array([[-2.5871205],
          [ 7.3690367],
          [-2.4918075]], dtype=float32)

3. 获取形状：tensor.size()

   In [72]: x
   Out[72]:
   tensor([[    1,     2],
           [    3,     4],
           [    5,    10]], dtype=torch.int32)

   In [73]: x.size()
   Out[73]: torch.Size([3, 2])

4. 形状改变：tensor.view((3,4))。类似numpy中的reshape，是一种浅拷贝，仅仅是形状发生改变

   In [76]: x.view(2,3)
   Out[76]:
   tensor([[    1,     2,     3],
           [    4,     5,    10]], dtype=torch.int32)

5. 获取阶数：tensor.dim()

   In [77]: x.dim()
   Out[77]: 2

7. 获取最大值：tensor.max()

   In [78]: x.max()
   Out[78]: tensor(10, dtype=torch.int32)

8. 转置：tensor.t()

   In [79]: x.t()
   Out[79]:
   tensor([[    1,     3,     5],
           [    2,     4, 10]], dtype=torch.int32)

9. tensor[1,3] 获取tensor中第一行第三列的值

10. tensor[1,3]=100 对tensor中第一行第三列的位置进行赋值100

11. tensor的切片

   In [101]: x
   Out[101]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])

   In [102]: x[:,1]
   Out[102]: tensor([1.9439, 1.9575, 1.0123, 1.5939, 1.4858])

4. tensor的数据类型

1. 获取tensor的数据类型:tensor.dtype

   In [80]: x.dtype
   Out[80]: torch.int32

2. 创建数据的时候指定类型

   In [88]: torch.ones([2,3],dtype=torch.float32)
   Out[88]:
   tensor([[9.1167e+18, 0.0000e+00, 7.8796e+15],
           [8.3097e-43, 0.0000e+00, -0.0000e+00]])

3. 类型的修改

   In [17]: a
   Out[17]: tensor([1, 2], dtype=torch.int32)

   In [18]: a.type(torch.float)
   Out[18]: tensor([1., 2.])

   In [19]: a.double()
   Out[19]: tensor([1., 2.], dtype=torch.float64)

5. tensor的其他操作

1. tensor和tensor相加

   In [94]: x = x.new_ones(5, 3, dtype=torch.float)

   In [95]: y = torch.rand(5, 3)

   In [96]: x+y
   Out[96]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])
   In [98]: torch.add(x,y)
   Out[98]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])
   In [99]: x.add(y)
   Out[99]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])
   In [100]: x.add_(y)  #带下划线的方法会对x进行就地修改
   Out[100]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])

   In [101]: x #x发生改变
   Out[101]:
   tensor([[1.6437, 1.9439, 1.5393],
           [1.3491, 1.9575, 1.0552],
           [1.5106, 1.0123, 1.0961],
           [1.4382, 1.5939, 1.5012],
           [1.5267, 1.4858, 1.4007]])

注意: 带下划线的方法(比如: add_ )会对tensor进行就地修改

2. tensor和数字操作

   In [97]: x +10
   Out[97]:
   tensor([[11., 11., 11.],
           [11., 11., 11.],
           [11., 11., 11.],
           [11., 11., 11.],
           [11., 11., 11.]])

3. CUDA中的tensor

CUDA(Compute Unified Device Architecture), 是NVIDIA推出的运算平台. CUDA™是一种由NVIDIA推出的通用并行计算架构, 该架构使GPU能够解决复杂的计算问题.

torch.cuda 这个模块增加了对CUDA tensor的支持, 能够在cpu和gpu上使用相同的方法操作tensor

通过 .to 方法能够把一个tensor转移到另外一个设备(比如从CPU转到GPU)

   #device = torch.device("cuda:0" if torch.cuda.is_available() else "cpu")
   if torch.cuda.is_available():
       device = torch.device("cuda")          # cuda device对象
       y = torch.ones_like(x, device=device)  # 创建一个在cuda上的tensor
       x = x.to(device)                       # 使用方法把x转为cuda 的tensor
       z = x + y
       print(z)
       print(z.to("cpu", torch.double))       # .to方法也能够同时设置类型

   >>tensor([1.9806], device='cuda:0')
   >>tensor([1.9806], dtype=torch.float64)

通过前面的学习, 可以发现torch的各种操作几乎和numpy一样

前端模块化规范

• AMD CMD CommonJS
• ES6模块化规范取代之前的非标准语法, 导入使用import 共享使用export
• 配置package.json 加入 type:"module"

es6模块化三种用法

默认导出, 默认导入

• 默认导出

const n1 = 10
const n2 = 20

function show() {
  console.log(1)
}

export default {
  n1,
  show
}

• 默认导入

import m1 from './index.js'

console.log(m1)

按需导出导入

• 名称保持一致
• 可以使用 as 重新命名
• 可以和默认导出配合使用

// 按需导出
export const n1 = 'aaa'
export const n2 = 'vcv'
export function say() {}

export default {
  a: 20
}

// 按需导入,info 表示默认导出
import info, { n1 } from './index.js'

console.log(n1)

直接导入

• 直接使用import, 直接导入执行模块中的代码

Promise

• 解决回调地狱的问题, 构造函数
• 使用promise读取文件

import thenfs from 'then-fs'

thenfs.readFile('./1.txt', 'utf-8').then((res) => {
  console.log(res)
  return thenfs.readFile('./2.txt', 'utf-8')
}).then((res) => {
  console.log(res)
  return thenfs.readFile('./3.txt', 'utf-8')
}).then((res) => {
  console.log(res)
})

• 使用.catch 捕获错误 如果放到最后, 前面如果发生错误, 无法执行其他正确的程序;

使用promise.all方法

• 等待所有的异步操作完成后执行

import thenfs from 'then-fs'

const promiseArr = [
  thenfs.readFile('./1.txt', 'utf-8'),
  thenfs.readFile('./2.txt', 'utf-8'),
  thenfs.readFile('./3.txt', 'utf-8'),
]
Promise.all(promiseArr).then((res) => {
  console.log(res)
})

使用promise.race方法

• 返回执行速度最快的promise

import thenfs from 'then-fs'

const promiseArr = [
  thenfs.readFile('./1.txt', 'utf-8'),
  thenfs.readFile('./2.txt', 'utf-8'),
  thenfs.readFile('./3.txt', 'utf-8'),
]
Promise.race(promiseArr).then((res) => {
  console.log(res)
})

创建异步操作

• 失败的回调函数可以省略不写, 使用.catch来捕获

import fs from 'node:fs'

function getFile() {
  return new Promise((resolve, reject) => {
    fs.readFile(fpath, 'utf8', (err, datastr) => {
      if (err)
        return reject(err)
      resolve(datastr)
    })
  })
}

getFile('./111.txt').then((res) => {
  console.log(res)
}, (err) => {
  console.log(err.message)
})

使用async/await获取返回值

async function getfile() {
  const a = await thenfs.readFile('./1.txt', 'utf-8')
  console.log(a)
}

getfile()

• 注意事项
• 使用await必须使用async来修饰
• 在await第一次出现之前的代码都是同步执行, 之后的都是等待异步执行完成后执行

同步任务和异步任务

EventLoop

宏任务 微任务

• 宏任务

1. 异步Ajax请求
2. setTimeout,setInterval
3. 文件操作
4. 其他宏任务

• 微任务

1. Promise.then .catch,.finally
2. process.nextTick
3. 其他微任务

• 每一个宏任务执行完之后, 都会进行一次判断微任务队列中是否存在未执行的微任务, 如果存在微任务 需要将所有的微任务执行完成后在继续执行下一个宏任务

try catch 捕获错误

• 使用try catch 来捕获错误, 并且在catch中进行处理

import db from '../db/index.js'

export async function getAlluser(req, res) {
  try {
    const [rows] = await db.query('select age,username from ev_users')
    res.send({
      status: 200,
      data: rows,
      message: '数据获取成功'
    })
  }
  catch (error) {
    res.send({
      status: -1,
      message: '请求出错'
    })
  }
}

前端模块化规范

• AMD CMD CommonJS
• ES6模块化规范取代之前的非标准语法, 导入使用import 共享使用export
• 配置package.json 加入 type:"module"

es6模块化三种用法

默认导出, 默认导入

• 默认导出

const n1 = 10
const n2 = 20

function show() {
  console.log(1)
}

export default {
  n1,
  show
}

• 默认导入

import m1 from './index.js'

console.log(m1)

按需导出导入

• 名称保持一致
• 可以使用 as 重新命名
• 可以和默认导出配合使用

// 按需导出
export const n1 = 'aaa'
export const n2 = 'vcv'
export function say() {}

export default {
  a: 20
}

// 按需导入,info 表示默认导出
import info, { n1 } from './index.js'

console.log(n1)

直接导入

• 直接使用import, 直接导入执行模块中的代码

Promise

• 解决回调地狱的问题, 构造函数
• 使用promise读取文件

import thenfs from 'then-fs'

thenfs.readFile('./1.txt', 'utf-8').then((res) => {
  console.log(res)
  return thenfs.readFile('./2.txt', 'utf-8')
}).then((res) => {
  console.log(res)
  return thenfs.readFile('./3.txt', 'utf-8')
}).then((res) => {
  console.log(res)
})

• 使用.catch 捕获错误 如果放到最后, 前面如果发生错误, 无法执行其他正确的程序;

使用promise.all方法

• 等待所有的异步操作完成后执行

import thenfs from 'then-fs'

const promiseArr = [
  thenfs.readFile('./1.txt', 'utf-8'),
  thenfs.readFile('./2.txt', 'utf-8'),
  thenfs.readFile('./3.txt', 'utf-8'),
]
Promise.all(promiseArr).then((res) => {
  console.log(res)
})

使用promise.race方法

• 返回执行速度最快的promise

import thenfs from 'then-fs'

const promiseArr = [
  thenfs.readFile('./1.txt', 'utf-8'),
  thenfs.readFile('./2.txt', 'utf-8'),
  thenfs.readFile('./3.txt', 'utf-8'),
]
Promise.race(promiseArr).then((res) => {
  console.log(res)
})

创建异步操作

• 失败的回调函数可以省略不写, 使用.catch来捕获

import fs from 'node:fs'

function getFile() {
  return new Promise((resolve, reject) => {
    fs.readFile(fpath, 'utf8', (err, datastr) => {
      if (err)
        return reject(err)
      resolve(datastr)
    })
  })
}

getFile('./111.txt').then((res) => {
  console.log(res)
}, (err) => {
  console.log(err.message)
})

使用async/await获取返回值

async function getfile() {
  const a = await thenfs.readFile('./1.txt', 'utf-8')
  console.log(a)
}

getfile()

• 注意事项
• 使用await必须使用async来修饰
• 在await第一次出现之前的代码都是同步执行, 之后的都是等待异步执行完成后执行

同步任务和异步任务

EventLoop

宏任务 微任务

• 宏任务

1. 异步Ajax请求
2. setTimeout,setInterval
3. 文件操作
4. 其他宏任务

• 微任务

1. Promise.then .catch,.finally
2. process.nextTick
3. 其他微任务

• 每一个宏任务执行完之后, 都会进行一次判断微任务队列中是否存在未执行的微任务, 如果存在微任务 需要将所有的微任务执行完成后在继续执行下一个宏任务

try catch 捕获错误

• 使用try catch 来捕获错误, 并且在catch中进行处理

import db from '../db/index.js'

export async function getAlluser(req, res) {
  try {
    const [rows] = await db.query('select age,username from ev_users')
    res.send({
      status: 200,
      data: rows,
      message: '数据获取成功'
    })
  }
  catch (error) {
    res.send({
      status: -1,
      message: '请求出错'
    })
  }
}

Project Code Display

• Project deployment method has been uploaded to GitHub. Project address: GitHub Address

Technologies Used

• Python regular expressions
• BeautifulSoup4 library
• XPath parsing

Regular Expressions

• Similar to JavaScript matching methods
• Import the re package before use
• Several matching methods: match, search, compile, findall, finditer

re.match(a, b, c)

• Three parameters: matching rule, string to match, matching mode
• Matches from the first position of the string. If it satisfies, .span() returns its index position; otherwise, returns None
• result.groups() returns a tuple containing all groups of strings. Use group(num) to return a tuple with the corresponding value (starting from 1)

re.search(a, b, c)

• Also three parameters, same as above
• The method to get tuples is the same. The only difference is that search does not match from the beginning but returns the first successful match if the string contains the content to match
• Note: Only returns one match, not multiple

re.sub(a, b, c, d, e)

• Performs replacement operations
• a: Pattern string in the regular expression
• b: String to replace, can also be a function
• c: Original string
• d: Maximum number of replacements after matching, default is 0 (replace all matches)
• e: Matching mode, numeric form

re.compile(a, b)

• Compiles a regular expression for use by the match and search functions
• If using the match method, the group method can omit the parameter or use 0
• The group method's parameter value depends on the number of tuples in your regular expression
• start, end, and span methods return the index position of the matched character in the original string

findall(a, b, c, d)

• Parameters: regular expression, string to match, start position, end position
• Returns all substrings that meet the conditions in a list. If none, returns an empty list
• If there are tuples, returns characters that meet the tuple rules, which can be iterated

finditer(a, b, c)

• Parameters: matching rule, string to match, matching mode
• Similar to findall, but returns an iterator that can be used with for in

re.split(a, b, c, d)

• Splits the matching string into a list based on the matching rule
• Parameters: matching rule, string to split, number of splits (default is 0, unlimited), matching mode

Regular Expression Modifiers

• re.I: Case-insensitive matching
• re.L: Locale-aware matching
• re.S: Makes . match all characters, including newlines
• re.M: Multi-line matching, affects ^ and $
• re.U: Parses characters based on the Unicode character set. Affects \w, \W, \b, \B
• re.X: Allows more flexible formatting for better readability of regular expressions

Python Regular Expression Detailed Explanation (Super Detailed, Must Learn!)

XPath Method

• Install the lxml library first: pip install lxml
• XPath uses path expressions to navigate XML documents
• Can parse local HTML files or directly parse HTML strings

Common XPath Rules

• nodename: Selects all child nodes
• /: Selects child nodes of the current node
• //: Selects descendants of the current node
• .: Selects the current node
• ..: Selects the parent node of the current node
• @: Selects attributes

Local Display

• First method: Use etree.parse to parse locally

# coding= utf-8
from lxml import etree
html = etree.parse('./index.html', etree.HTMLParser())
print(etree.tostring(html))

• Second method: Use etree.HTML

# coding= utf-8
from lxml import etree
fp = open('./index.html', 'rb')
html = fp.read().decode('utf-8')
selector = etree.HTML(html)  # etree.HTML(source) recognizes it as an object that can be parsed by XPath
print(selector)

• Match all nodes using the //* rule
• Match all specified nodes using //node_name
• Match all child nodes by replacing // with /
• Get parent node attribute values using ../@attribute_name
• Attribute matching can use the @attribute_name method
• Text retrieval has two methods: /text() and //text(). The first directly retrieves text, while the second retrieves special characters generated by line breaks
• Retrieve attributes using /@href
• For attributes containing multiple values, use the contains() method
• Multi-attribute matching uses the and operator with the contains() method

XPath Operators

• Division and modulo are special; others are the same as basic operators
• Division uses div, e.g., 8 div 4
• Modulo uses mod, e.g., 1 mod 2
• Also, and and or represent conjunction and disjunction

Sequential Selection

• XPath has over 100 built-in functions. Refer to XPath Functions for details

Node Axis Selection

• Get the href attribute value of all a nodes under the current node: child::a/@href
• Get the attribute value of the specified element of the current node: attribute::attribute_name
• Get all child elements of the current node: child::*
• Get the attribute values of all attributes of the current node: attribute::*
• Get all child nodes of the current node: child::node()
• Get all text child nodes of the current element: child::text()
• Get all ancestor li elements of the current element (including the current element): ancestor-or-self::element

XPath Axes
XPath Pitfalls Guide

Demo Code

# coding= utf-8
from lxml import etree
# fp = open('./index.html', 'rb')
# html = fp.read().decode('utf-8')   #.decode('gbk')
# selector = etree.HTML(html)   #etree.HTML(source) recognizes it as an object that can be parsed by XPath
# print(selector)

html = etree.parse('./index.html',etree.HTMLParser())
# print(etree.tostring(html).decode('utf-8'))

all_node = html.xpath('//*')  # Get all nodes: //*
part_node = html.xpath('//li')  # Get part of the nodes: //node_name
child_node = html.xpath('//li/a')  # Match child nodes
parent_node = html.xpath('//a[@href="//ryanuo.cc"]/../@class')  # Get parent node attribute value: ../@attribute_name
attrs_node = html.xpath('//a[contains(@class,"a")]/text()')   # Match attributes containing multiple values: contains() method
# Sequential retrieval
first_node = html.xpath('//li[1]/a/text()')  # Get the first node
last_node = html.xpath('//li[last()]//text()')   # Get the last node
front_node = html.xpath('//li[position()<3]//text()')    # Get the first two nodes
end_ndoe = html.xpath('//li[last()-2]//text()')   # Get the third-to-last node

# Axis nodes
child_node_z = html.xpath('//li[position()<2]/child::a/@href')  # Get the `href` attribute value of all `a` nodes under the current node
attribute_node = html.xpath('//li[2]//attribute::lang')  # Get the attribute value of the specified element of the current node
all_child_node = html.xpath('//ul/li[last()-1]//child::*')  # Get all child elements of the current node
all_attrs_node = html.xpath('//li[1]/a/attribute::*')  # Get the attribute values of all attributes of the current node
all_child_text_node = html.xpath('//li[1]//child::text()')  # Get all text child nodes of the current element
all_child_node_node = html.xpath('//li[1]/a/child::node()')  # Get all child nodes of the current node
ancestor_self = html.xpath('//a[@title="1"]/../ancestor-or-self::li') # Get all ancestor `li` elements of the current element (including the current element)
print(ancestor_self)

BeautifulSoup4 Usage

• Beautiful Soup automatically converts input documents to Unicode and output documents to UTF-8
• Install using pip install beautifulsoup4
• Import using from bs4 import BeautifulSoup

Getting Content

• Tags have two important attributes: name and attrs
• There are three methods to get text content:
• .string method returns an iterator
• .text method returns node text
• .get_text() method returns node text

## Get title object

print(soup.title)  # <title>XPath Method</title>
# Get title content
print(soup.title.string)  # Returns an iterator
print(soup.title.text)
print(soup.title.get_text())
print(soup.find('title').get_text())

• Get objects through parent-child relationships

# print(soup.title.parent)   # Returns parent node including content
print(soup.li.child)  # Node
print(soup.li.children)  # Returns an iterator

Get the first li tag

print(soup.li.get_text())  # Matches the first one, returns all node text information
print(soup.find('li').text)
# Get `ul` child tags (empty lines are also considered children)
print(soup.ul.children)
for index, item in enumerate(soup.ul.children):
    print(index, item)

Get element attributes

• Use .attribute_name method, but can only get one
• Use element.attrs['attribute_name'] method to return a list
• If using soup.element twice, the first time gets the first matched element, the second time gets the second matched element

Get multiple elements

• find method gets one element
• find_all gets multiple elements, can use limit to limit the number, recursive = True to find descendants; recursive = False to find children
• Multi-level search: find_all returns a list that can be iterated and used with find or find_all again to get elements

Get objects by specified attributes

• id and class selectors. class is special because it's a keyword. Use class_ instead

print(soup.find(id='a'))
print(soup.find('a', id='a'))
print(soup.find_all('a', id='a'))  # Can use index to query

# `class` is a keyword, use `class_`

print('class1', soup.find_all('a', class_='a'))
print('class2', soup.find_all('a', attrs={'class': 'item'}))  # More general
print('class3', soup.find_all('a', attrs={'class': 'item', 'id': 'a'}))  # Multiple conditions

Use functions as parameters to return elements

def judgeTitle1(t):
    if t == 'a':
        return True

print(soup.find_all(class_=judgeTitle1))

• Judge by length

# Judge by length
import re  # Regular expression
reg = re.compile("item")
def judgeTitle2(t):
    # Return `t` parameter with length 5 and containing 'item'
    return len(str(t)) == 5 and bool(re.search(reg, t))
print(soup.find_all(class_=judgeTitle2))

Use CSS selectors

• select method returns a list
• Can search by tag name, attribute, tag + class + id, combination

Usage of BeautifulSoup Library in Python
Detailed Usage of BeautifulSoup Library in Python
Python Web Scraping: Extract Text with BeautifulSoup

项目代码展示

• 项目部署方法, 已发GitHub, 项目地址github地址

使用技术

• python正则匹配
• Beautifulsoup4库
• xpath解析

正则匹配

• 和JavaScript语言匹配方式类似
• 使用前需导入re包
• 有几种正则匹配的方法:match, search, compile, findall, finditer

re.match(a, b, c)

• 三个参数: 匹配的规则, 要匹配的字符串, 匹配方式
• 它是从字符串的第一个位置进行匹配如果满足使用.span()方法可以返回它所在的索引位置, 如果不满足则返回None
• 返回结果.groups()返回一个包含所有小组的字符串的元组, 使用group(num)方法可以返回一个包含对应值的元组(从1开始)

re.search(a, b, c)

• 也是三个参数, 与上面相同
• 获取元组方法也相同, 唯一的不同点就是, search不是从一开始进行匹配, 而是如果字符串中包含所要匹配的内容, 则返回第一个匹配成功的
• 注意只返回一个不是多个

re.sub(a, b, c, d, e)

• 执行替换操作
• a正则中的模式字符串
• b要替换的字符串, 也可以是一个函数
• c原始字符串
• d匹配后替换的最大次数, 默认是0表示全部匹配替换
• e匹配模式, 数字形式

re.compile(a, b)

• 用来编译正则表达式, 供match和search这两个函数使用
• 如果使用的是match方法 在获取匹配的字符时使用group方法获取参数可以省略不写也可以写0
• group方法参数的数值与你所写的正则表达式元组数有关
• start, end, span方法都是返回匹配字符在原字符串中所在的索引位置

findall(a, b, c, d)

• 参数分别表示: 正则表达式, 匹配的字符串, 指定匹配的起始位置, 结束位置
• 返回满足条件的所有子串, 列表的形式, 如不则返回空列表
• 如果由有元组则返回满足元组规则的字符 可进行遍历

finditer(a, b, c)

• 参数分别为: 匹配规则, 匹配的字符串, 匹配模式
• 和findall方法类似, 返回值使用迭代器方式返回使用for in方法

re.split(a, b, c, d)

• 按照匹配规则将匹配的字符串进行分隔以列表的形式返回
• 参数分别为: 匹配规则, 匹配字符, 切割次数默认为0, 不限制次数, 匹配模式

正则表达式修饰符

• re.I 是匹配时大小写不敏感
• re.L 做本地化识别
• re.S 使. 匹配包括换行在内的所有字符
• re.M 多行匹配影响^$
• re.U 根据Unicode字符集解析字符. 这个标志影响 \w, \W, \b, \B.
• re.X 该标志通过给予你更灵活的格式以便你将正则表达式写得更易于理解.

【Python正则表达式详解 (超详细, 看完必会!)】

xPath方法

• 使用之前先安装好lxml库pip i lxml
• xPath使用路径表达式在XML文档中进行导航
• 可以对本地的html文件进行解析也可以直接对html字符串进行解析

Xpath常用的规则

• nodename选取所有的子节点
• /选取当前节点下的子节点
• //选取当前节点的子孙节点
• . 选取当前节点
• .. 选取当前节点的父节点
• @选取属性

本地展示

• 第一种使用etree.parse方法解析本地

# coding= utf-8
from lxml import etree
html = etree.parse('./index.html',etree.HTMLParser())
print(etree.tostring(html))

• 第二种方法使用 etree.HTML 方法

# coding= utf-8
from lxml import etree
fp = open('./index.html', 'rb')
html = fp.read().decode('utf-8')
selector = etree.HTML(html)   #etree.HTML(源码) 识别为可被xpath解析的对象
print(selector)

• 匹配所有的节点 使用//*规则匹配
• 匹配所有指定的节点使用//节点名称
• 匹配所有的子节点将//换成/
• 获取父节点属性值的方法 ../@属性名
• 属性匹配可以使用@属性名的方法
• 文本获取两种方法 /text() 和 //text(), 区别第一种直接获取文本, 第二种要获取换行时产生的特殊字符
• 属性获取使用/@href获取
• 获取属性中包含多个值的情况 属性多值匹配 contains()方法
• 多属性匹配, 使用and运算符 和contains方法搭配使用

xPath运算符

• 除号和取余特殊, 其他的都与基本运算符一直
• 除号使用div 比如8 div 4
• 取余则是mod 比如1 mod 2
• 还有表示并列和或者的 and 和 or

按序选择

• xPath内置了100多种函数方法, 具体参考【xPath函数】

节点轴选择

• 获取当前节点所有子元素的a节点的href属性值 child::a/@href
• 获取当前节点的指定元素的属性值 attribute:: 属性名
• 获取当前节点的所有的子元素 child::*
• 获取当前节点 的所有属性的属性值 attribute::*
• 获取当前节点所有子节点 child::node()
• 获取当前元素所有文本子节点 child::text()
• 获取当前元素的所有父辈为li元素的节点(包括当前元素) ancestor-or-self:: 元素

xPath轴
xPath避坑指南

演示代码

# coding= utf-8
from lxml import etree
# fp = open('./index.html', 'rb')
# html = fp.read().decode('utf-8')   #.decode('gbk')
# selector = etree.HTML(html)   #etree.HTML(源码) 识别为可被xpath解析的对象
# print(selector)

html = etree.parse('./index.html',etree.HTMLParser())
# print(etree.tostring(html).decode('utf-8'))

all_node = html.xpath('//*')  # 所有节点的获取 //*
part_node = html.xpath('//li')  # 部分节点 格式：//节点名
child_node = html.xpath('//li/a')  # 匹配子节点
parent_node = html.xpath('//a[@href="//ryanuo.cc"]/../@class')  # 获取父节点属性值的方法 ../@属性名
attrs_node = html.xpath('//a[contains(@class,"a")]/text()')   # 获取属性中包含多个值的情况 属性多值匹配 contains()方法
# 按序获取
first_node = html.xpath('//li[1]/a/text()')  # 获取第一个
last_node = html.xpath('//li[last()]//text()')   # 获取最后一个节点
front_node = html.xpath('//li[position()<3]//text()')    # 获取前两个节点
end_ndoe = html.xpath('//li[last()-2]//text()')   # 获取到数第三个节点

# 轴节点
child_node_z = html.xpath('//li[position()<2]/child::a/@href')  # 获取当前节点所有子元素的a节点的href属性值
attribute_node = html.xpath('//li[2]//attribute::lang')  # 获取当前节点的指定元素的属性值
all_child_node = html.xpath('//ul/li[last()-1]//child::*')  # 获取当前节点的所有的文本节点
all_attrs_node = html.xpath('//li[1]/a/attribute::*')  # 获取当前节点 的所有属性的属性值
all_child_text_node = html.xpath('//li[1]//child::text()')  # 获取当前节点所有文本子节点
all_child_node_node = html.xpath('//li[1]/a/child::node()')  # 获取当前节点所有子元素
ancestor_self = html.xpath('//a[@title="1"]/../ancestor-or-self::li') # 获取当前元素的所有父辈为li元素的节点（包括当前元素）
print(ancestor_self)

Beautifulsoup4使用

• Beautiful Soup自动将输入文档转换为Unicode编码, 输出文档转换为utf-8编码
• 使用前安装 pip install beautifulsoup4
• 引入from bs4 import Beautifulsoup4

获取内容

• 标签有两个重要的属性name, attrs
• 文本内容的获取有三种方法
• .string方法返回一个迭代器
• .text方法返回节点文本
• .get_text()方法返回节点文本

## 获取标题对象

print(soup.title)  # <title>xPath方法</title>
# 获取标题内容
print(soup.title.string)  # 返回迭代器
print(soup.title.text)
print(soup.title.get_text())
print(soup.find('title').get_text())

• 通过上下级获得对象

# print(soup.title.parent)   # 返回父节点包括父节点中的内容
print(soup.li.child)  # Node
print(soup.li.children)  # 返回一个迭代器

获取第一个li标签

print(soup.li.get_text())  # 匹配到第一个，返回所有节点的文本信息
print(soup.find('li').text)
# 获取ul的子标签们   (空行也看成了一个children)
print(soup.ul.children)
for index, item in enumerate(soup.ul.children):
    print(index, item)

获取元素的属性

• 使用 .属性名 的方法, 但是只能获取到一个
• 使用元素.attrs['属性名']的方法返回的时一个列表
• 如果使用两次 soup.元素 第一次获取的是匹配到的第一个元素, 第二次是匹配到的第二个元素

获取多个元素

• find方法获取一个元素
• find_all获取多个元素, 可以加上limit来达到限制个数的问题, recursive = True 寻找子孙 ; recursive = False只找子
• 多层级查找 find_all返回的是一个列表 可以遍历该列表再次使用find方法或者find_all方法 进行元素的获取

通过指定的属性, 获取对象

• id和class选择器, class比较特殊, 因为是关键字 在使用class时改成class_

print(soup.find(id='a'))
print(soup.find('a', id='a'))
print(soup.find_all('a', id='a'))  # 可以使用下标查询

# class是关键字 要这么写class_

print('class1', soup.find_all('a', class_='a'))
print('class2', soup.find_all('a', attrs={'class': 'item'}))  # 更通用
print('class3', soup.find_all('a', attrs={'class': 'item', 'id': 'a'}))  # 多条件

使用函数作为参数, 返回元素

def judgeTilte1(t):
    if t == 'a':
        return True

print(soup.find_all(class_=judgeTilte1))

• 根据长度来判断

# 判断长度
import re  # 正则表达式
reg = re.compile("item")
def judgeTilte2(t):
    # 返回长度为5，且包含'item'的t参数
    return len(str(t)) == 5 and bool(re.search(reg, t))
print(soup.find_all(class_=judgeTilte2))

可以使用css选择器

• select方法返回的都是一个列表
• 可以通过标签名查找, 属性查找, 标签+类名+id, 组合查找

Python中BeautifulSoup库的用法
python beautiful soup库的超详细用法
python 爬虫 提取文本之BeautifulSoup详细用法

认识sass

• 它是一个css的预处理器, 文件的后缀为.scss

安装

npm i -g sass
# 使用
$ sass <input.scss> [output.css]

语法规则

动态变量

// 使用变量,可以在变量中使用变量
$primary-color: #1269b5;

p {
  width: 20px;
  color: $primary-color;
}

嵌套

• 使用嵌入式, 使用&符号 连接伪元素
• 属性的嵌套, 如果有多个相同前缀的属性, 使用前缀名:{后缀属性: 属性值}

.nav {
  ul {
    li {
      color: $primary-color;
    }

    a {
      text-align: center;

      &:hover {
        font-size: 20px;
      }
    }
  }
}

/* // 属性的嵌套 前缀有-可以使用  前缀名：{} */
body {
  font: {
    size: 20px;
    weight: normal;
    family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  }
}

mixin alert函数

• 可以给alert函数加参数也可以不加, 调用时使用include方法调用alert函数
• 也可以给alert函数参数定义默认值

/* // mixin */

@mixin alert($text-color, $background) {
  color: $text-color;
  background-color: $background;

  a {
    color: $primary-color;
    background-color: darken($text-color, 10%);
  }
}

.alert-warning {
  @include alert(#1269b5, #fff);
}

继承extend

/* // 继承 */

a {
  text-decoration: none;
}

.info {
  @extend a;
}

@import方法

• 导入时不需要加入后缀
• 多行注释在不压缩编译后也能显示

@import 'base';

data-type

• 使用type-of方法来判断数据类型
• 在终端输入sass -i

数字函数

• abs() 绝对值
• round() 方法 四舍五入
• ceil() 方法 向上取整 取大
• floor() 方法 向下取整 取小
• min() max() 判断大小

字符串处理方法

• to-upper-case()方法 将字符串全部改为大写
• to-lower-case()方法 全部改为小写
• str-length(变量) 输出字符串的长度
• str-index(变量, 检测的字符串) 输出当前检测字符串在变量字符串中第一次出现的索引号
• str-insert(变量, 输入插入的值, 索引位置) 在字符串的指定位置插入值

颜色函数

• adjust-hue 对颜色值进行调整, 对hsl颜色进行调整
• darken函数可以改变颜色的深度, 更暗 lignten函数更亮, 第一个参数是要转换的值, 第二个参数是改变的程度百分比
• saturate函数 颜色的饱和度 desaturate函数 减少颜色的饱和度 对hsl颜色进行处理
• opacify函数 设置不透明度
• transparentize函数 设置透明度

列表 List

• length方法, index方法 nth方法 append方法
• join方法组合 使用comma 会使用', '分隔
• map-get()方法获取 列表对应的属性值 map-keys 返回所有的key值, map-value 返回列表中的值, 判断是否存在某个属性, 使用map-has-key方法 map-merge()方法将新创建的属性加入到列表中使用map-remove方法来移除列表中的指定属性

使用interpolation方法

• #{} 格式

// 使用变量,可以在变量中使用变量
$version: '0.0.1';
/* 当前的版本号#{$version} */
$name: 'info';
$attr: 'border';

.border-#{name} {
  #{$attr}-radius: 10px;
}

控制指令

• @if

$primary-color: #1269b5;
$state: true;

.info-warp {
  @if $state {
    color: $primary-color;
  }
}

• @for, through包括最后一个值; to不包括

$colums: 4;

@for $i from 1 through $colums {
  .col-#{$i} {
    width: 100% / $colums * $i;
  }
}

• @each 遍历数组

$icons: error success info;

@each $i in $icons {
  .col-#{$i} {
    background: url('image/#{$i}.png');
  }
}

• @while 计算字符要空格

$i: 6;

@while $i>0 {
  .item-#{$i} {
    width: 5px * $i;
    color: $primary-color;
  }

  $i: $i - 2;
}

自定义函数

• 格式@function(传入的参数){@return 属性值}如果是对象可以使用map方法获取第一个参数是构造的对象属性, 第二个参数是要调用的对象参数

$color: (
  light: #fff,
  dark: #000,
);

@function color($key) {
  @return map-get($color, $key);
}

.oi {
  color: color(dark);
}

警告和错误

• @warn和@error 打印输入 在终端输出

认识sass

• 它是一个css的预处理器, 文件的后缀为.scss

安装

npm i -g sass
# 使用
$ sass <input.scss> [output.css]

语法规则

动态变量

// 使用变量,可以在变量中使用变量
$primary-color: #1269b5;

p {
  width: 20px;
  color: $primary-color;
}

嵌套

• 使用嵌入式, 使用&符号 连接伪元素
• 属性的嵌套, 如果有多个相同前缀的属性, 使用前缀名:{后缀属性: 属性值}

.nav {
  ul {
    li {
      color: $primary-color;
    }

    a {
      text-align: center;

      &:hover {
        font-size: 20px;
      }
    }
  }
}

/* // 属性的嵌套 前缀有-可以使用  前缀名：{} */
body {
  font: {
    size: 20px;
    weight: normal;
    family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  }
}

mixin alert函数

• 可以给alert函数加参数也可以不加, 调用时使用include方法调用alert函数
• 也可以给alert函数参数定义默认值

/* // mixin */

@mixin alert($text-color, $background) {
  color: $text-color;
  background-color: $background;

  a {
    color: $primary-color;
    background-color: darken($text-color, 10%);
  }
}

.alert-warning {
  @include alert(#1269b5, #fff);
}

继承extend

/* // 继承 */

a {
  text-decoration: none;
}

.info {
  @extend a;
}

@import方法

• 导入时不需要加入后缀
• 多行注释在不压缩编译后也能显示

@import 'base';

data-type

• 使用type-of方法来判断数据类型
• 在终端输入sass -i

数字函数

• abs() 绝对值
• round() 方法 四舍五入
• ceil() 方法 向上取整 取大
• floor() 方法 向下取整 取小
• min() max() 判断大小

字符串处理方法

• to-upper-case()方法 将字符串全部改为大写
• to-lower-case()方法 全部改为小写
• str-length(变量) 输出字符串的长度
• str-index(变量, 检测的字符串) 输出当前检测字符串在变量字符串中第一次出现的索引号
• str-insert(变量, 输入插入的值, 索引位置) 在字符串的指定位置插入值

颜色函数

• adjust-hue 对颜色值进行调整, 对hsl颜色进行调整
• darken函数可以改变颜色的深度, 更暗 lignten函数更亮, 第一个参数是要转换的值, 第二个参数是改变的程度百分比
• saturate函数 颜色的饱和度 desaturate函数 减少颜色的饱和度 对hsl颜色进行处理
• opacify函数 设置不透明度
• transparentize函数 设置透明度

列表 List

• length方法, index方法 nth方法 append方法
• join方法组合 使用comma 会使用', '分隔
• map-get()方法获取 列表对应的属性值 map-keys 返回所有的key值, map-value 返回列表中的值, 判断是否存在某个属性, 使用map-has-key方法 map-merge()方法将新创建的属性加入到列表中使用map-remove方法来移除列表中的指定属性

使用interpolation方法

• #{} 格式

// 使用变量,可以在变量中使用变量
$version: '0.0.1';
/* 当前的版本号#{$version} */
$name: 'info';
$attr: 'border';

.border-#{name} {
  #{$attr}-radius: 10px;
}

控制指令

• @if

$primary-color: #1269b5;
$state: true;

.info-warp {
  @if $state {
    color: $primary-color;
  }
}

• @for, through包括最后一个值; to不包括

$colums: 4;

@for $i from 1 through $colums {
  .col-#{$i} {
    width: 100% / $colums * $i;
  }
}

• @each 遍历数组

$icons: error success info;

@each $i in $icons {
  .col-#{$i} {
    background: url('image/#{$i}.png');
  }
}

• @while 计算字符要空格

$i: 6;

@while $i>0 {
  .item-#{$i} {
    width: 5px * $i;
    color: $primary-color;
  }

  $i: $i - 2;
}

自定义函数

• 格式@function(传入的参数){@return 属性值}如果是对象可以使用map方法获取第一个参数是构造的对象属性, 第二个参数是要调用的对象参数

$color: (
  light: #fff,
  dark: #000,
);

@function color($key) {
  @return map-get($color, $key);
}

.oi {
  color: color(dark);
}

警告和错误

• @warn和@error 打印输入 在终端输出

1. 使用\d将数字匹配出来 /g全局匹配

const hd = 'daw21321dasda23123123'
// 不使用正则表达式写一个方法
// console.log(Number.isNaN(parseInt('1')));
// ...将字符串转换成数组形式 Array.from()方法也可以 使用isNaN判断是否为非数字
// let news = [...hd].filter(v=>!Number.isNaN(parseInt(v)));
// 使用join方法连接
// 使用正则表达式
const news = hd.match(/\d/g).join('')
console.log(news)

正则字变量

1. 使用eval()方法
2. 使用test()方法返回的是布尔值

const hd = 'daw21321dasda23123123'
const a = '1'
const news = eval(`/${a}/`).test(hd) // true
console.log(news)

使用对象创建

1. 替换字符串中匹配到的字符

<div class="content">ryanuo.cc</div>
<script>
  let div = document.querySelector('.content')
  let a = prompt('输入字符')
  let regs = new RegExp(a, 'g')
  div.innerHTML = div.innerHTML.replace(regs, (search) => {
    return `<span style="color:red">${search}</span>`
  })
</script>

选择符 |

1. 匹配左右两侧的条件
2. 原子组() 原子表[]

const tel = '023-2312322'
console.log(/(023|020)-\d{7,8}/.test(tel)) // true
// 重复的条件使用原子组的方法{7，8}表示 7-8位的数字 \- 表示转义
const reg = /(12|34)/
const hd = '31w231'
console.log(hd.match(reg)) // null

转义

1. 在字面量里面 使用\d \. 将字符可实现转义
2. 在构造函数中\d \. 表示的是该字符 所以 必须再加一个转义符 \\d \\.

const price = '12@21'
// . 除换行外的任何字符
console.log(/\d+.\d/.test(price)) // true
let reg = new RegExp('\\d+\\.\\d+')
// \\ 双转义
console.log(reg.test(price)) // false

// 网址
const url = 'https://u.ryanuo.cc'
let reg = new RegExp(/https?:\/\/\w+\.\w+\.\w+/)
console.log(reg.test(url)) // true
console.log(/https?:\/\/\w+\.\w+/.test(url)) // true

字符边界符

1. 边界符表示开始和结尾必须满足条件 /^[a-z]$/
2. {3,6} 加入边界字符 才能控制其数量范围

<input type="text" value="" name="user" />
<script>
  document
    .querySelector("[name='user']")
    .addEventListener('keyup', function () {
      let flag = this.value.match(/^[a-z]{3,6}$/)
      console.log(flag)
    })
</script>

数值与空白元字符

1. \d 匹配数字 \D 匹配非数字
2. 在原子表中首页^表示非的意思/[^]/
3. \s 表示匹配空白和换行 \S 非空白

const hd = '张三:021-9999299,李四:022-2122122'
// 匹配所有的数字号码
console.log(hd.match(/\d{3}-\d{7,8}/g)) // ["021-9999299", "022-2122122"]
// 匹配姓名 + 表示匹配相邻的符合条件的
console.log(hd.match(/[^:\d,-\s]+/g)) // ["张三", "李四"]

w和W元字符

1. \w 匹配字母和数字 下划线
2. \W与之相反

点字符的使用

1. 匹配所有字符默认模式下，它匹配除了换行符以外的任意字符。

const hd = `wad\nawd\n`
console.log(hd.match(/.+/g)) // [wad,awd]

匹配所有字符

1. 在原子组中[\s\S] 或者[\d\D]
2. 匹配标签使用 /<span>[\s\S]+</span>/

i和g 模式修正

1. g全局匹配 i不区分大小写

const hd = `
#1 js,200元 #
#2 php,300元 #
#9 ryanuo.cc # 你好
#3 node.js,180元 #
`
const lessons = hd.match(/^\s*#\d+\s+(?:\S.*|[\t\v\f \xA0\u1680\u2000-\u200A\u202F\u205F\u3000\uFEFF])\s+#$/gm).map((v) => {
  v = v.replace(/\s*#\d+\s*/, '').replace(/\s+#/, '')
  const [name, price] = v.split(',')
  return { name, price }
})
console.log(lessons)
/*
0: {name: "js", price: "200元"}
1: {name: "php", price: "300元"}
2: {name: "node.js", price: "180元"}
length: 3 */

汉字与字符属性

1. \p表示匹配字符
2. \P 相反

lastIndex

1. lastIndex 属性用于规定下次匹配的起始位置
2. exec() 方法用于检索字符串中的正则表达式的匹配。

const hd = 'dawdaw31'
const reg = /\w/g
console.log(reg.exec(hd))
console.log(reg.lastIndex) // lastIndex 属性用于规定下次匹配的起始位置
// 将匹配到的值赋值给res 有值打印数据 否则返回null 不满足循环条件 循环
while (res = reg.exec(hd))
  console.log(res)

y模式

1. 后一次匹配都是从上一次匹配成功的下一个位置开始

const hd = `你好世界大王大大:11111111,1111231,213123212,
达瓦达,网站:u.ryanuo.cc`
const reg = /(\d+),?/y
reg.lastIndex = 9
const qq = []
// console.log(reg.exec(hd));
while (res = reg.exec(hd)) qq.push(res[1])
console.log(qq)

原子表

1. [] 匹配中括号内的所有条件
2. 原子组和原子表搭配使用

const times = '2020-02/21'
console.log(times.match(/^\d{4}[-/]\d{2}[-/]\d{2}$/)) // 2020/02-21
console.log(times.match(/^\d{4}([-/])\d{2}\1\d{2}$/)) // null
console.log(times.match(/^\d{4}([-/])\d{2}\1\d{2}$/)) // 2020/02/21

区间匹配

1. 数字区间[0-9]+ 加号表示贪婪模式
2. 字母区间[a-z]

排除匹配

1. [^] 表示排除匹配
2. \p表示匹配满足{}内的字符

// let hd = 'u.ryanuo.cc'
// console.log(hd.match(/[^u]/gi)); //[".", "m", "r", "9", "0", ".", "t", "o", "p"]
const hd = `张三:231-23123123,李四#:123-312313;`
console.log(hd.match(/[^:\w-,#;]+/g)) // 贪婪模式下的排除匹配
console.log(hd.match(/\p{sc=Han}+/gu)) // ["张三", "李四"]

原子表字符不解析

1. [.+] [()] 仅表示原来字符的意思

原子表匹配

1. s忽略换行符 *表示0个或者多个
2. [\d\D] [\s\S] 匹配所有字符

<body>
  <h1>ddawd dawd</h1>
  <h2>dwad</h2>
  <span>dasdwa adaw </span>
</body>
<script>
  let body = document.body
  // let reg = /<(\w+)>[^]+<\/\1>/gi // 注意贪婪模式
  let reg = /<(h[1-6])>[^]*<\/\1>/gi // 注意贪婪模式 *表示0个或者多个
  body.innerHTML = body.innerHTML.replace(reg, '')
</script>

原子组

1. () 表示一个整体
2. 可进行别名的编号
3. 使用原子组实现标签的替换
4. 在原子组回调函数中,各个参数表示的是 第一个是满足条件的所有内容 其他参数 依次为定义的满足原子组条件的内容

<body>
  <h1>ddawd dawd</h1>
  <h5></h5>
  <h2>dwad</h2>
  <span>dasdwa adaw </span>
</body>
<script>
  // 原子组替换
  let body = document.body
  // body.innerHTML = body.innerHTML.replace(/<(h[1-6]+)>([^]*)<\/\1>/g,`<p>$2</p>`) // 直接表示
  body.innerHTML = body.innerHTML.replace(
    /<(h[1-6]+)>([^]*)<\/\1>/g,
    (f0, f1, f2) => {
      // console.log(f0);  // 输入满足条件的所有
      // console.log(f1); // 输出第一个原子组匹配的内容
      // console.log(f2);// 输出第二个原子组匹配的内容
      return `<p>${f2}</p>`
    },
  ) // 函数表示
</script>

不记录分组

1. 使用不记录分组,就是使用原子组后 无法再去使用函数参数去调用

const url = `https://u.ryanuo.cc
    http://github.com
    httpS://ryanuo.cc`
// 使用不记录分组,就是使用原子组后 无法再去使用函数参数去调用
const reg = /https?:\/\/((?:\w+\.)?\w+\.(?:com|top))/gi
console.log(reg.test(url)) // true // 有满足条件的内容
console.log(url.match(reg)) // ["https://u.ryanuo.cc", "http://github.com", "httpS://ryanuo.cc"]
//    console.log(reg.exec(url)); // 返回满足条件的第一个内容
//    console.log(reg.lastIndex); // 记录下次开始时的索引位置
const urlA = []
while (res = reg.exec(url)) urlA.push(res[1])
console.log(urlA)

重复匹配

1. + 一个或者多个 {1,} 类似与加号
2. * 0个或者多个 {0,} 类似与*号
3. ? 0个或者1个

批量使用正则完成密码的验证

// 对表单输入的值进行验证
document.querySelector('[name=pwd')
  .addEventListener('keyup', (e) => {
    // console.log();
    const value = e.target.value
    const reg = [
      /^[a-z0-9]{5,7}$/i,
      /[A-Z]/,
      /\d/
    ]
    const state = reg.every(v => v.test(value))
    console.log(state ? '正确' : '错误')
  })

禁止贪婪

1. {2,}? 限制贪婪
2. *? 禁止贪婪

<body>
  <main>
    <span>u.ryanuo.cc1</span>
    <span>u.ryanuo.cc2</span>
    <span>u.ryanuo.cc3</span>
  </main>
</body>
<script>
  let main = document.querySelector('main')
  let reg = /<span>([^]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上
  main.innerHTML = main.innerHTML.replace(reg, (p0, p1) => {
    console.log(p0)
    return `<h2 style="color:red">${p1}</h2>`
  })
</script>

matchAll 全局匹配

<body>
  <main>
    <span>u.ryanuo.cc1</span>
    <span>u.ryanuo.cc2</span>
    <span>u.ryanuo.cc3</span>
  </main>
</body>
<script>
  // 不使用matchAll方法
  let main = document.querySelector('main')
  let reg = /<span>([^]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上
  let content = []
  // main.innerHTML = main.innerHTML.replace(reg,(p0,p1)=>{
  //     content.push(p1)
  //     return `<h2 style="color:red">${p1}</h2>`
  // })
  // console.table(content)

  // 使用matchAll方法
  let hd = main.innerHTML.matchAll(reg)
  // console.log(main.innerHTML.matchAll()); // 遍历迭代
  for (const i of hd) {
    content.push(i[1])
    // console.log(i);
  }
  console.table(content)
</script>

exec 全局匹配

1. 匹配时 g不能缺少
2. search 返回匹配的索引值

// exec方法 匹配全局
let main = document.querySelector('main')
let reg = /<span>([\s\S]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上
function fn(string, reg) {
  const content = []
  while (res = reg.exec(string))
    content.push(res)
  return content
}
console.log(fn(main.innerHTML, reg))
// exec方法 匹配全局
let main = document.querySelector('main')
let reg = /<span>([\s\S]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上
const content = []
function fn(string, reg) {
  while (res = reg.exec(string)) content.push(res)
}
fn(main.innerHTML, reg)
console.log(content)

$符

1. $` 匹配开头的第一个字符
2. $' 匹配结尾字符
3. $& 匹配自身

// let tel = '2020/12/23'
// console.log(tel.replace(/\//g,'-')); // 2020-12-23
// let tel = '(021)9999999 (023)4444444'
// console.log(tel.replace(/[(]+(\d{3})[)](\d{7})/g,'$1-$2')); //021-9999999 023-4444444
const tel = '%Harry='
console.log(tel.replace(/\w+/g, '$`')) // $` 匹配开头的第一个字符 %%=
console.log(tel.replace(/\w+/g, '$\'')) // $' 匹配结尾字符 %==
console.log(tel.replace(/\w+/g, '$&')) // $& 匹配自身
console.log(tel.replace(/\w+/g, '$`$`$&$\'$\'')) // $& 匹配自身

原子组的别名

1. 格式 ?<别名>
2. 调用 <别名>

<body>
  <main>
    <a href="http://u.ryanuo.cc">博客</a>
    <a href="https://baidu.com">百度</a>
    <a href="https://github.com">Github</a>
  </main>
</body>
<script>
  let main = document.querySelector('main')
  let reg = /<a.*?href=(['"])(?<link>.*?)\1>(?<title>.*?)<\/a>/gi
  // 进行迭代遍历
  for (const i of main.innerHTML.matchAll(reg)) {
    // console.log(i);
    console.table(i.groups)
  }
</script>

断言匹配 ?=

1. (?=) 表示在之前条件的后面满足该断言匹配的内容
2. (?<=) 表示前面是条件的匹配内容
3. (?!) 表示后面不是某个条件的内容
4. (?<!) 表示前面不是某个条件的内容

<body>
  <main>
    <a href="http://u.ryanuo.cc">博客</a>
    <a href="https://baidu.com">百度</a>
    <a href="https://github.com">Github</a>
  </main>
</body>
<script>
  let main = document.querySelector('main')
  let reg = /(?<=href=(['"]))(.*?)(?=\1>)/gi
  main.innerHTML = main.innerHTML.replace(reg, 'https://ryanuo.cc')
</script>

手机号码断言隐藏

const users = `
李四：12323212232
张三：12322131122
`
const reg = /(?<=\d{7})\d{4}/g
console.log(users.replace(reg, '*'.repeat(4)))

正则字符串提取数字

1. 使用\d将数字匹配出来 /g全局匹配

const hd = 'daw21321dasda23123123'
// 不使用正则表达式写一个方法
// console.log(Number.isNaN(parseInt('1')));
// ...将字符串转换成数组形式 Array.from()方法也可以 使用isNaN判断是否为非数字
// let news = [...hd].filter(v=>!Number.isNaN(parseInt(v)));
// 使用join方法连接
// 使用正则表达式
const news = hd.match(/\d/g).join('')
console.log(news)

正则字变量

1. 使用eval()方法
2. 使用test()方法返回的是布尔值

const hd = 'daw21321dasda23123123'
const a = '1'
const news = eval(`/${a}/`).test(hd) // true
console.log(news)

使用对象创建

1. 替换字符串中匹配到的字符

<div class="content">ryanuo.cc</div>
<script>
  let div = document.querySelector('.content')
  let a = prompt('输入字符')
  let regs = new RegExp(a, 'g')
  div.innerHTML = div.innerHTML.replace(regs, (search) => {
    return `<span style="color:red">${search}</span>`
  })
</script>

选择符 |

1. 匹配左右两侧的条件
2. 原子组() 原子表[]

const tel = '023-2312322'
console.log(/(023|020)-\d{7,8}/.test(tel)) // true
// 重复的条件使用原子组的方法{7，8}表示 7-8位的数字 \- 表示转义
const reg = /(12|34)/
const hd = '31w231'
console.log(hd.match(reg)) // null

转义

1. 在字面量里面 使用\d \. 将字符可实现转义
2. 在构造函数中\d \. 表示的是该字符 所以 必须再加一个转义符 \\d \\.

const price = '12@21'
// . 除换行外的任何字符
console.log(/\d+.\d/.test(price)) // true
let reg = new RegExp('\\d+\\.\\d+')
// \\ 双转义
console.log(reg.test(price)) // false

// 网址
const url = 'https://u.ryanuo.cc'
let reg = new RegExp(/https?:\/\/\w+\.\w+\.\w+/)
console.log(reg.test(url)) // true
console.log(/https?:\/\/\w+\.\w+/.test(url)) // true

字符边界符

1. 边界符表示开始和结尾必须满足条件 /^[a-z]$/
2. {3,6} 加入边界字符 才能控制其数量范围

<input type="text" value="" name="user" />
<script>
  document
    .querySelector("[name='user']")
    .addEventListener('keyup', function () {
      let flag = this.value.match(/^[a-z]{3,6}$/)
      console.log(flag)
    })
</script>

数值与空白元字符

1. \d 匹配数字 \D 匹配非数字
2. 在原子表中首页^表示非的意思/[^]/
3. \s 表示匹配空白和换行 \S 非空白

const hd = '张三:021-9999299,李四:022-2122122'
// 匹配所有的数字号码
console.log(hd.match(/\d{3}-\d{7,8}/g)) // ["021-9999299", "022-2122122"]
// 匹配姓名 + 表示匹配相邻的符合条件的
console.log(hd.match(/[^:\d,-\s]+/g)) // ["张三", "李四"]

w和W元字符

1. \w 匹配字母和数字 下划线
2. \W与之相反

点字符的使用

1. 匹配所有字符默认模式下，它匹配除了换行符以外的任意字符。

const hd = `wad\nawd\n`
console.log(hd.match(/.+/g)) // [wad,awd]

匹配所有字符

1. 在原子组中[\s\S] 或者[\d\D]
2. 匹配标签使用 /<span>[\s\S]+</span>/

i和g 模式修正

1. g全局匹配 i不区分大小写

const hd = `
#1 js,200元 #
#2 php,300元 #
#9 ryanuo.cc # 你好
#3 node.js,180元 #
`
const lessons = hd.match(/^\s*#\d+\s+(?:\S.*|[\t\v\f \xA0\u1680\u2000-\u200A\u202F\u205F\u3000\uFEFF])\s+#$/gm).map((v) => {
  v = v.replace(/\s*#\d+\s*/, '').replace(/\s+#/, '')
  const [name, price] = v.split(',')
  return { name, price }
})
console.log(lessons)
/*
0: {name: "js", price: "200元"}
1: {name: "php", price: "300元"}
2: {name: "node.js", price: "180元"}
length: 3 */

汉字与字符属性

1. \p表示匹配字符
2. \P 相反

lastIndex

1. lastIndex 属性用于规定下次匹配的起始位置
2. exec() 方法用于检索字符串中的正则表达式的匹配。

const hd = 'dawdaw31'
const reg = /\w/g
console.log(reg.exec(hd))
console.log(reg.lastIndex) // lastIndex 属性用于规定下次匹配的起始位置
// 将匹配到的值赋值给res 有值打印数据 否则返回null 不满足循环条件 循环
while (res = reg.exec(hd))
  console.log(res)

y模式

1. 后一次匹配都是从上一次匹配成功的下一个位置开始

const hd = `你好世界大王大大:11111111,1111231,213123212,
达瓦达,网站:u.ryanuo.cc`
const reg = /(\d+),?/y
reg.lastIndex = 9
const qq = []
// console.log(reg.exec(hd));
while (res = reg.exec(hd)) qq.push(res[1])
console.log(qq)

原子表

1. [] 匹配中括号内的所有条件
2. 原子组和原子表搭配使用

const times = '2020-02/21'
console.log(times.match(/^\d{4}[-/]\d{2}[-/]\d{2}$/)) // 2020/02-21
console.log(times.match(/^\d{4}([-/])\d{2}\1\d{2}$/)) // null
console.log(times.match(/^\d{4}([-/])\d{2}\1\d{2}$/)) // 2020/02/21

区间匹配

1. 数字区间[0-9]+ 加号表示贪婪模式
2. 字母区间[a-z]

排除匹配

1. [^] 表示排除匹配
2. \p表示匹配满足{}内的字符

// let hd = 'u.ryanuo.cc'
// console.log(hd.match(/[^u]/gi)); //[".", "m", "r", "9", "0", ".", "t", "o", "p"]
const hd = `张三:231-23123123,李四#:123-312313;`
console.log(hd.match(/[^:\w-,#;]+/g)) // 贪婪模式下的排除匹配
console.log(hd.match(/\p{sc=Han}+/gu)) // ["张三", "李四"]

原子表字符不解析

1. [.+] [()] 仅表示原来字符的意思

原子表匹配

1. s忽略换行符 *表示0个或者多个
2. [\d\D] [\s\S] 匹配所有字符

<body>
  <h1>ddawd dawd</h1>
  <h2>dwad</h2>
  <span>dasdwa adaw </span>
</body>
<script>
  let body = document.body
  // let reg = /<(\w+)>[^]+<\/\1>/gi // 注意贪婪模式
  let reg = /<(h[1-6])>[^]*<\/\1>/gi // 注意贪婪模式 *表示0个或者多个
  body.innerHTML = body.innerHTML.replace(reg, '')
</script>

原子组

1. () 表示一个整体
2. 可进行别名的编号
3. 使用原子组实现标签的替换
4. 在原子组回调函数中,各个参数表示的是 第一个是满足条件的所有内容 其他参数 依次为定义的满足原子组条件的内容

<body>
  <h1>ddawd dawd</h1>
  <h5></h5>
  <h2>dwad</h2>
  <span>dasdwa adaw </span>
</body>
<script>
  // 原子组替换
  let body = document.body
  // body.innerHTML = body.innerHTML.replace(/<(h[1-6]+)>([^]*)<\/\1>/g,`<p>$2</p>`) // 直接表示
  body.innerHTML = body.innerHTML.replace(
    /<(h[1-6]+)>([^]*)<\/\1>/g,
    (f0, f1, f2) => {
      // console.log(f0);  // 输入满足条件的所有
      // console.log(f1); // 输出第一个原子组匹配的内容
      // console.log(f2);// 输出第二个原子组匹配的内容
      return `<p>${f2}</p>`
    },
  ) // 函数表示
</script>

不记录分组

1. 使用不记录分组,就是使用原子组后 无法再去使用函数参数去调用

const url = `https://u.ryanuo.cc
    http://github.com
    httpS://ryanuo.cc`
// 使用不记录分组,就是使用原子组后 无法再去使用函数参数去调用
const reg = /https?:\/\/((?:\w+\.)?\w+\.(?:com|top))/gi
console.log(reg.test(url)) // true // 有满足条件的内容
console.log(url.match(reg)) // ["https://u.ryanuo.cc", "http://github.com", "httpS://ryanuo.cc"]
//    console.log(reg.exec(url)); // 返回满足条件的第一个内容
//    console.log(reg.lastIndex); // 记录下次开始时的索引位置
const urlA = []
while (res = reg.exec(url)) urlA.push(res[1])
console.log(urlA)

重复匹配

1. + 一个或者多个 {1,} 类似与加号
2. * 0个或者多个 {0,} 类似与*号
3. ? 0个或者1个

批量使用正则完成密码的验证

// 对表单输入的值进行验证
document.querySelector('[name=pwd')
  .addEventListener('keyup', (e) => {
    // console.log();
    const value = e.target.value
    const reg = [
      /^[a-z0-9]{5,7}$/i,
      /[A-Z]/,
      /\d/
    ]
    const state = reg.every(v => v.test(value))
    console.log(state ? '正确' : '错误')
  })

禁止贪婪

1. {2,}? 限制贪婪
2. *? 禁止贪婪

<body>
  <main>
    <span>u.ryanuo.cc1</span>
    <span>u.ryanuo.cc2</span>
    <span>u.ryanuo.cc3</span>
  </main>
</body>
<script>
  let main = document.querySelector('main')
  let reg = /<span>([^]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上
  main.innerHTML = main.innerHTML.replace(reg, (p0, p1) => {
    console.log(p0)
    return `<h2 style="color:red">${p1}</h2>`
  })
</script>

matchAll 全局匹配

<body>
  <main>
    <span>u.ryanuo.cc1</span>
    <span>u.ryanuo.cc2</span>
    <span>u.ryanuo.cc3</span>
  </main>
</body>
<script>
  // 不使用matchAll方法
  let main = document.querySelector('main')
  let reg = /<span>([^]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上
  let content = []
  // main.innerHTML = main.innerHTML.replace(reg,(p0,p1)=>{
  //     content.push(p1)
  //     return `<h2 style="color:red">${p1}</h2>`
  // })
  // console.table(content)

  // 使用matchAll方法
  let hd = main.innerHTML.matchAll(reg)
  // console.log(main.innerHTML.matchAll()); // 遍历迭代
  for (const i of hd) {
    content.push(i[1])
    // console.log(i);
  }
  console.table(content)
</script>

exec 全局匹配

1. 匹配时 g不能缺少
2. search 返回匹配的索引值

// exec方法 匹配全局
let main = document.querySelector('main')
let reg = /<span>([\s\S]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上
function fn(string, reg) {
  const content = []
  while (res = reg.exec(string))
    content.push(res)
  return content
}
console.log(fn(main.innerHTML, reg))
// exec方法 匹配全局
let main = document.querySelector('main')
let reg = /<span>([\s\S]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上
const content = []
function fn(string, reg) {
  while (res = reg.exec(string)) content.push(res)
}
fn(main.innerHTML, reg)
console.log(content)

$符

1. $` 匹配开头的第一个字符
2. $' 匹配结尾字符
3. $& 匹配自身

// let tel = '2020/12/23'
// console.log(tel.replace(/\//g,'-')); // 2020-12-23
// let tel = '(021)9999999 (023)4444444'
// console.log(tel.replace(/[(]+(\d{3})[)](\d{7})/g,'$1-$2')); //021-9999999 023-4444444
const tel = '%Harry='
console.log(tel.replace(/\w+/g, '$`')) // $` 匹配开头的第一个字符 %%=
console.log(tel.replace(/\w+/g, '$\'')) // $' 匹配结尾字符 %==
console.log(tel.replace(/\w+/g, '$&')) // $& 匹配自身
console.log(tel.replace(/\w+/g, '$`$`$&$\'$\'')) // $& 匹配自身

原子组的别名

1. 格式 ?<别名>
2. 调用 <别名>

<body>
  <main>
    <a href="http://u.ryanuo.cc">博客</a>
    <a href="https://baidu.com">百度</a>
    <a href="https://github.com">Github</a>
  </main>
</body>
<script>
  let main = document.querySelector('main')
  let reg = /<a.*?href=(['"])(?<link>.*?)\1>(?<title>.*?)<\/a>/gi
  // 进行迭代遍历
  for (const i of main.innerHTML.matchAll(reg)) {
    // console.log(i);
    console.table(i.groups)
  }
</script>

断言匹配 ?=

1. (?=) 表示在之前条件的后面满足该断言匹配的内容
2. (?<=) 表示前面是条件的匹配内容
3. (?!) 表示后面不是某个条件的内容
4. (?<!) 表示前面不是某个条件的内容

<body>
  <main>
    <a href="http://u.ryanuo.cc">博客</a>
    <a href="https://baidu.com">百度</a>
    <a href="https://github.com">Github</a>
  </main>
</body>
<script>
  let main = document.querySelector('main')
  let reg = /(?<=href=(['"]))(.*?)(?=\1>)/gi
  main.innerHTML = main.innerHTML.replace(reg, 'https://ryanuo.cc')
</script>

手机号码断言隐藏

const users = `
李四：12323212232
张三：12322131122
`
const reg = /(?<=\d{7})\d{4}/g
console.log(users.replace(reg, '*'.repeat(4)))

方法的重载

好处

• 减少方法名称的记忆
• 可以忽略参数的自动类型转换

定义

方法的重载是指一个类中定义了多个相同名字的方法，需要每个方法具有不同的参数类型或者参数类型的相同个数不同，调用的时候可以根据该方法的参数类型或者个数类型区分对应的方法;方法的重载和返回值类型，修饰词没有关系

适用场景

当一个类中出现相同的功能时,但是需要的参数不同 参数 类型不同 个数不同

要求

1. 必须在同一个类中
2. 方法名的相同
3. 参数列表不同 (不同型 同型不同个 顺序)
4. 返回值不同

递归

1. 在调用过程中不断的调用自己

public class text5 {
    public static void main(String[] args){
        int a = 1;
        System.out.println(add(a));
    }
    static int add(int a){
        return a==5?5:a+add(a+1);
    }
}

斐波那契

{% folding red, java %}

public class text7 {
    public static void main(String[] args) {
        System.out.println("请月份数：");
        Scanner s = new Scanner(System.in);
        int n = s.nextInt();
        System.out.println("第" + n + "个数：" + f(n));
//        for (int n=1;n<50;n++){
//            System.out.println("第"+n+"个数：" + f(n));
//        }
    }
    public static long f(int n) {
        return n==1 || n==2 ? 1 : f(n - 1) + f(n - 2);
    }
}

{% folding red, python %}

# -*- coding:utf-8 -*-
def f(n):
    return n if n < 2 else f(n - 1) + f(n - 2)
if __name__ == '__main__':
    num = input('请输入:')
    print(f(int(num)))

进制转换

1. 思路: 将输入数除2判断 商是否等于0 如果等于0则终止返回，不等于0 返回余数+方法*10 每次执行方法返回的值都要乘10 最后将每次计算的都加起来

//十进制准换二进制
import java.util.Scanner;
public class text9 {
    public static void main(String[] args) {
        System.out.println("请输入十进制数：");
        Scanner sc = new Scanner(System.in);
        int num = sc.nextInt();
        System.out.println(toBin(num));
    }
    static int toBin(int num) {
        return num == 0 ? 0 : num % 2 + toBin(num / 2) * 10;
    }
}

面向对象

1. 封装 权限 访问接口
2. 继承 原有的基础之上扩展性 兼容 单继承
3. 多态 符合规则的继续大范围扩展 向上造型 向下造型
4. 抽象

类和对象的概念

1. 对象: 实际存在的事物
2. 类: 实际存在的事物进行抽象形成的模板,描述对象的共同特征

对象的创建和使用

1. 类定义之后，就有了模板 模板可以创建对象 了可以创建任意多个对象
2. 创建类 new 构造方法()
3. 如果想使用创建的对象 需要使用变量来承接
4. 不赋值有默认值，主动赋值默认值消失

JVM内存管理

1. 栈: 先进后出 （在程序运行的过程中存放局部变量和运行中的方法）线性地址连续
2. 方法区：已被加载的类信息，常量，静态变量;
3. 堆: 虚拟机启动的时候,创建堆;存放对象;地址可以不连续
4. c语言中指针是操作存储空间 java不可以操作堆地址 只能使用堆中的信息，栈中引用是指是对象的地址;打印出来的不是地址，这个变量是基本类型局部变量

构造方法Constructor

1. 定义: 构造方法是类中一种特殊的方法，通过构造方法可以完成对象的创建，以及对象属性的初始化操作
2. 修饰词 类名(参数列表){方法体}构造方法没有返回值类型，构造方法的方法名和类名相同, 构造方法同来创建对象，并且为对象初始化实例变量,一个类中可以定义多个构造方法，需要符合方法的重载，实质是有返回值，返回值类型是类，类中不写构造方法，默认系统会自动生成一个无参构造方法

作用

1. 创建对象
2. 初始化对象（方法中必须赋值）

public class text5 {
  int year;
  int month;
  int day;
  public text5(int y, int m, int d) {
    // TODO 自动生成的构造函数存根
    year = y;
    month = m;
    day = d;  // 就近原则this
  }
  void show() {
    System.out.println(year + "-" + month + "-" + day);
  }
}

// 构造方法
public class text6 {
  public static void main(String[] args) {
    // TODO 自动生成的方法存根
//    创建日期对象
    text5 d5 = new text5(2021,7,22);
    d5.show();
    System.out.print("------------");
  }
}

方法的重載

构造方法也有方法的重载

空指针异常

1. 引用为空
2. 引用对象=> 空指针错误 java.lang.NullPointerException

package demo1;
public class text10 {
  public static void main(String[] args) {
    text8 d = new text8(2000,10,2);
    text9 t9 = new text9();
    text8 w = new text8();
    w.year = 1999;
    w.month = 5;
    w.day = 4;
    t9.name = "张三";
    t9.id = "001";
    t9.birth = d;
    Wife n = new Wife("李四","002",w);
    System.out.println(n.birth.ShowDate());
    System.out.println(t9.birth.ShowDate());
  }
}
//
package demo1;

public class text8 {
  int year;
  int month;
  int day;

  public text8() {
    // TODO 自动生成的构造函数存根

  }
  text8(int y,int m, int d){
    year=y;
    month=m;
    day=d;
//    System.out.println(ShowDate());
  }
  String ShowDate(){
    return year+"-"+month+"-"+day;
  }
}
//
package demo1;

public class text9 {
  String name;
  String id;
  text8 birth;
  public text9() {
    // TODO 自动生成的构造函数存根
  }
}
//
package demo1;

public class Wife {
  String name;
  String id;
  text8 birth;
  public Wife() {
    // TODO 自动生成的构造函数存根
  }
  public Wife(String string, String string2, text8 d) {
    // TODO 自动生成的构造函数存根
    name = string;
    id = string2;
    birth = d;
  }
}

封装

在面向对象程式设计方法中，封装（英语：Encapsulation）是指一种将抽象性函式接口的实现细节部份包装、隐藏起来的方法

• 封装的优点

1. 良好的封装能够减少耦合。

2. 类内部的结构可以自由修改。

3. 可以对成员变量进行更精确的控制。

4. 隐藏信息，实现细节。

5. 提供公共的入口 使用set修改 和 get访问 方法

public class Product {
  private int pro_id;
  private String pro_name;
  private int pro_price;
  public Product() {
    // TODO 自动生成的构造函数存根
  }
//  设置
  public void setId(int i) {
    pro_id = i;
  }
  public void setName(String i) {
    pro_name = i;
  }
  public void setPrice(int i) {
    pro_price = i;
  }
//  查看
  public int getId() {
    return pro_id;
  }
  public String getName() {
    return pro_name;
  }
  public int getPrice() {
    return pro_price;
  }
//  有参封装
  Product(int i,String n,int p){
    pro_id = i;
    pro_name = n;
    pro_price = p;
  }
//  返回所有的情况
  String ShowProduct(){
    return "商品id为："+pro_id+"\n商品名称为："+pro_name+"\n商品价格为"+pro_price;
  }
}

// 调用
public class Build {
  public static void main(String[] args) {
    Product p1 = new Product();
    p1.setId(1);
    p1.setName("手机");
    p1.setPrice(12000);
    Product p2 = new Product(2,"电脑",22222);
    System.out.println(p2.ShowProduct());
    System.out.println(p1.getPrice());  // 获取单个商品的信息 使用get方法
    System.out.println(p2.ShowProduct());
  }
}

this 关键字

1. this本质是对象的地址，this关键字指向的是当前对象的引用
2. this 内容相同 每个this指向对象的地址 都在堆中
3. 本质就是一个变量或者引用，存储在对象的内部
4. this本身的内容就是该对象的地址值
5. this关键字来区分局部变量和实例变量。
6. 在构造方法中 使用this() = new 构造方法 只能在构造方法中的第一行使用

方法的重载

好处

• 减少方法名称的记忆
• 可以忽略参数的自动类型转换

定义

方法的重载是指一个类中定义了多个相同名字的方法，需要每个方法具有不同的参数类型或者参数类型的相同个数不同，调用的时候可以根据该方法的参数类型或者个数类型区分对应的方法;方法的重载和返回值类型，修饰词没有关系

适用场景

当一个类中出现相同的功能时,但是需要的参数不同 参数 类型不同 个数不同

要求

1. 必须在同一个类中
2. 方法名的相同
3. 参数列表不同 (不同型 同型不同个 顺序)
4. 返回值不同

递归

1. 在调用过程中不断的调用自己

public class text5 {
    public static void main(String[] args){
        int a = 1;
        System.out.println(add(a));
    }
    static int add(int a){
        return a==5?5:a+add(a+1);
    }
}

斐波那契

{% folding red, java %}

public class text7 {
    public static void main(String[] args) {
        System.out.println("请月份数：");
        Scanner s = new Scanner(System.in);
        int n = s.nextInt();
        System.out.println("第" + n + "个数：" + f(n));
//        for (int n=1;n<50;n++){
//            System.out.println("第"+n+"个数：" + f(n));
//        }
    }
    public static long f(int n) {
        return n==1 || n==2 ? 1 : f(n - 1) + f(n - 2);
    }
}

{% folding red, python %}

# -*- coding:utf-8 -*-
def f(n):
    return n if n < 2 else f(n - 1) + f(n - 2)
if __name__ == '__main__':
    num = input('请输入:')
    print(f(int(num)))

进制转换

1. 思路: 将输入数除2判断 商是否等于0 如果等于0则终止返回，不等于0 返回余数+方法*10 每次执行方法返回的值都要乘10 最后将每次计算的都加起来

//十进制准换二进制
import java.util.Scanner;
public class text9 {
    public static void main(String[] args) {
        System.out.println("请输入十进制数：");
        Scanner sc = new Scanner(System.in);
        int num = sc.nextInt();
        System.out.println(toBin(num));
    }
    static int toBin(int num) {
        return num == 0 ? 0 : num % 2 + toBin(num / 2) * 10;
    }
}

面向对象

1. 封装 权限 访问接口
2. 继承 原有的基础之上扩展性 兼容 单继承
3. 多态 符合规则的继续大范围扩展 向上造型 向下造型
4. 抽象

类和对象的概念

1. 对象: 实际存在的事物
2. 类: 实际存在的事物进行抽象形成的模板,描述对象的共同特征

对象的创建和使用

1. 类定义之后，就有了模板 模板可以创建对象 了可以创建任意多个对象
2. 创建类 new 构造方法()
3. 如果想使用创建的对象 需要使用变量来承接
4. 不赋值有默认值，主动赋值默认值消失

JVM内存管理

1. 栈: 先进后出 （在程序运行的过程中存放局部变量和运行中的方法）线性地址连续
2. 方法区：已被加载的类信息，常量，静态变量;
3. 堆: 虚拟机启动的时候,创建堆;存放对象;地址可以不连续
4. c语言中指针是操作存储空间 java不可以操作堆地址 只能使用堆中的信息，栈中引用是指是对象的地址;打印出来的不是地址，这个变量是基本类型局部变量

构造方法Constructor

1. 定义: 构造方法是类中一种特殊的方法，通过构造方法可以完成对象的创建，以及对象属性的初始化操作
2. 修饰词 类名(参数列表){方法体}构造方法没有返回值类型，构造方法的方法名和类名相同, 构造方法同来创建对象，并且为对象初始化实例变量,一个类中可以定义多个构造方法，需要符合方法的重载，实质是有返回值，返回值类型是类，类中不写构造方法，默认系统会自动生成一个无参构造方法

作用

1. 创建对象
2. 初始化对象（方法中必须赋值）

public class text5 {
  int year;
  int month;
  int day;
  public text5(int y, int m, int d) {
    // TODO 自动生成的构造函数存根
    year = y;
    month = m;
    day = d;  // 就近原则this
  }
  void show() {
    System.out.println(year + "-" + month + "-" + day);
  }
}

// 构造方法
public class text6 {
  public static void main(String[] args) {
    // TODO 自动生成的方法存根
    text5 d5 = new text5(2021,7,22);
    d5.show();
    System.out.print("------------");
  }
}

方法的重載

构造方法也有方法的重载

空指针异常

1. 引用为空
2. 引用对象=> 空指针错误 java.lang.NullPointerException

package demo1;
public class text10 {
  public static void main(String[] args) {
  text8 d = new text8(2000,10,2);
  text9 t9 = new text9();
  text8 w = new text8();
  w.year = 1999;
  w.month = 5;
  w.day = 4;
  t9.name = "张三";
  t9.id = "001";
  t9.birth = d;
  Wife n = new Wife("李四","002",w);
  System.out.println(n.birth.ShowDate());
  System.out.println(t9.birth.ShowDate());
  }
}
//
package demo1;

public class text8 {
  int year;
  int month;
  int day;

  public text8() {
    // TODO 自动生成的构造函数存根

  }
  text8(int y,int m, int d){
    year=y;
    month=m;
    day=d;
//    System.out.println(ShowDate());
  }
  String ShowDate(){
    return year+"-"+month+"-"+day;
  }
}
//
package demo1;

public class text9 {
  String name;
  String id;
  text8 birth;
  public text9() {
    // TODO 自动生成的构造函数存根
  }
}
//
package demo1;

public class Wife {
  String name;
  String id;
  text8 birth;
  public Wife() {
    // TODO 自动生成的构造函数存根
  }
  public Wife(String string, String string2, text8 d) {
    // TODO 自动生成的构造函数存根
    name = string;
    id = string2;
    birth = d;
  }
}

封装

在面向对象程式设计方法中，封装（英语：Encapsulation）是指一种将抽象性函式接口的实现细节部份包装、隐藏起来的方法

• 封装的优点

1. 良好的封装能够减少耦合。

2. 类内部的结构可以自由修改。

3. 可以对成员变量进行更精确的控制。

4. 隐藏信息，实现细节。

5. 提供公共的入口 使用set修改 和 get访问 方法

public class Product {
  private int pro_id;
  private String pro_name;
  private int pro_price;
  public Product() {
    // TODO 自动生成的构造函数存根
  }
//  设置
  public void setId(int i) {
    pro_id = i;
  }
  public void setName(String i) {
    pro_name = i;
  }
  public void setPrice(int i) {
    pro_price = i;
  }
//  查看
  public int getId() {
    return pro_id;
  }
  public String getName() {
    return pro_name;
  }
  public int getPrice() {
    return pro_price;
  }
//  有参封装
  Product(int i,String n,int p){
    pro_id = i;
    pro_name = n;
    pro_price = p;
  }
//  返回所有的情况
  String ShowProduct(){
    return "商品id为："+pro_id+"\n商品名称为："+pro_name+"\n商品价格为"+pro_price;
  }
}

// 调用
public class Build {
  public static void main(String[] args) {
    Product p1 = new Product();
    p1.setId(1);
    p1.setName("手机");
    p1.setPrice(12000);
    Product p2 = new Product(2,"电脑",22222);
    System.out.println(p2.ShowProduct());
    System.out.println(p1.getPrice());  // 获取单个商品的信息 使用get方法
    System.out.println(p2.ShowProduct());
  }
}

this 关键字

1. this本质是对象的地址，this关键字指向的是当前对象的引用
2. this 内容相同 每个this指向对象的地址 都在堆中
3. 本质就是一个变量或者引用，存储在对象的内部
4. this本身的内容就是该对象的地址值
5. this关键字来区分局部变量和实例变量。
6. 在构造方法中 使用this() = new 构造方法 只能在构造方法中的第一行使用

1. Tkinter 是使用 python 进行窗口视窗设计的模块。Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口。作为 python 特定的GUI界面，是一个图像的窗口，tkinter是python 自带的，可以编辑的GUI界面，我们可以用GUI 实现很多直观的功能，比如想开发一个计算器，如果只是一个程序输入，输出窗口的话，是没用用户体验的。所有开发一个图像化的小窗口，就是必要的。

Label标签

1. 创建好主窗口才能在上面放置各种控件元素
2. tk.Lable(window,text="文本内容"，bg='背景颜色',font=('字体family',字体大小)),width=标签宽度,height=标签高度 以字符的大小为单位
3. window.title('窗口名称')
4. window.geometry('窗口的大小')
5. 放置标签x.pack()或者x.place()

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上设定标签
l = tk.Label(window, text='你好！this is Tkinter', bg='green', font=('Arial', 12), width=30, height=2)
# 说明： bg为背景，font为字体，width为长，height为高，这里的长和高是字符的长和高，比如height=2,就是标签有2个字符这么高

# 第5步，放置标签
l.pack()    # Label内容content区域放置位置，自动调节尺寸
# 放置lable的方法有：1）l.pack(); 2)l.place();

# 第6步，主窗口循环显示
window.mainloop()
# 注意，loop因为是循环的意思，window.mainloop就会让window不断的刷新，如果没有mainloop,就是一个静态的window,传入进去的值就不会有循环，mainloop就相当于一个很大的while循环，有个while，每点击一次就会更新一次，所以我们必须要有循环
# 所有的窗口文件都必须有类似的mainloop函数，mainloop是窗口文件的关键的关键。

Button窗口部件

1. 定义一个函数功能（内容自己自由编写），供点击Button按键时调用，调用命令参数command=函数名

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x
# 第4步，在图形界面上设定标签
# 说明： bg为背景，font为字体，width为长，height为高，这里的长和高是字符的长和高，比如height=2,就是标签有2个字符这么高
var = tk.StringVar()  # 将label标签的内容设置为字符类型，用var来接收hit_me函数的传出内容用以显示在标签上
l = tk.Label(window, textvariable=var, bg='green', fg='white', font=('Arial', 12), width=30, height=2)
# 说明： bg为背景，fg为字体颜色，font为字体，width为长，height为高，这里的长和高是字符的长和高，比如height=2,就是标签有2个字符这么高
l.pack()
# 定义一个函数功能（内容自己自由编写），供点击Button按键时调用，调用命令参数command=函数名
on_hit = False
def hit_me():
    global on_hit
    if on_hit == False:
        on_hit = True
        var.set('you hit me')
    else:
        on_hit = False
        var.set('')
# 第5步，在窗口界面设置放置Button按键
b = tk.Button(window, text='hit me', font=('Arial', 12), width=10, height=1, command=hit_me)
# 第5步，放置标签
# x.pack()  # Label内容content区域放置位置，自动调节尺寸
b.pack()
# 放置lable的方法有：1）l.pack(); 2)l.place();

# 第6步，主窗口循环显示
window.mainloop()
# 注意，loop因为是循环的意思，window.mainloop就会让window不断的刷新，如果没有mainloop,就是一个静态的window,传入进去的值就不会有循环，mainloop就相当于一个很大的while循环，有个while，每点击一次就会更新一次，所以我们必须要有循环
# 所有的窗口文件都必须有类似的mainloop函数，mainloop是窗口文件的关键的关键。

Entry窗口部件

1. Entry是tkinter类中提供的的一个单行文本输入域，用来输入显示一行文本，收集键盘输入(类似 HTML 中的 text)

e1 = tk.Entry(window, show='*', font=('Arial', 14))   # 显示成密文形式
e2 = tk.Entry(window, show=None, font=('Arial', 14))  # 显示成明文形式
e2.pack()

Text窗口部件

1. Text是tkinter类中提供的的一个多行文本区域，显示多行文本，可用来收集(或显示)用户输入的文字(类似 HTML 中的 textarea)，格式化文本显示，允许你用不同的样式和属性来显示和编辑文本，同时支持内嵌图象和窗口。
2. insert 在焦点处插入 ，end 在文本末尾插入数据

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上设定输入框控件entry框并放置
e = tk.Entry(window, show=None)  # 显示成明文形式
e.pack()

# 第5步，定义两个触发事件时的函数insert_point和insert_end（注意：因为Python的执行顺序是从上往下，所以函数一定要放在按钮的上面）
def insert_point():  # 在鼠标焦点处插入输入内容
    var = e.get()
    t.insert('insert', var)

def insert_end():  # 在文本框内容最后接着插入输入内容
    var = e.get()
    t.insert('end', var)

# 第6步，创建并放置两个按钮分别触发两种情况
b1 = tk.Button(window, text='insert point', width=10,
               height=2, command=insert_point)
b1.pack()
b2 = tk.Button(window, text='insert end', width=10,
               height=2, command=insert_end)
b2.pack()

# 第7步，创建并放置一个多行文本框text用以显示，指定height=3为文本框是三个字符高度
t = tk.Text(window, height=3)
t.pack()

# 第8步，主窗口循环显示
window.mainloop()

Listbox窗口部件

1. Text是tkinter类中提供的的列表框部件，显示供选方案的一个列表。listbox能够被配置来得到radiobutton或checklist的行为。
2. lb.get(lb.curselection()) 获取列表选中文本的值
3. 可以使用insert将值遍历到listbox中

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签label用以显示并放置
var1 = tk.StringVar()  # 创建变量，用var1用来接收鼠标点击具体选项的内容
l = tk.Label(window, bg='green', fg='yellow', font=('Arial', 12), width=10, textvariable=var1)
l.pack()

# 第6步，创建一个方法用于按钮的点击事件
def print_selection():
    value = lb.get(lb.curselection())  # 获取当前选中的文本
    var1.set(value)  # 为label设置值

# 第5步，创建一个按钮并放置，点击按钮调用print_selection函数
b1 = tk.Button(window, text='print selection', width=15, height=2, command=print_selection)
b1.pack()

# 第7步，创建Listbox并为其添加内容
var2 = tk.StringVar()
var2.set((1, 2, 3, 4))  # 为变量var2设置值
# 创建Listbox
lb = tk.Listbox(window, listvariable=var2)  # 将var2的值赋给Listbox
# 创建一个list并将值循环添加到Listbox控件中
list_items = [11, 22, 33, 44]
for item in list_items:
    lb.insert('end', item)  # 从最后一个位置开始加入值
lb.insert(1, 'first')  # 在第一个位置加入'first'字符
lb.insert(2, 'second')  # 在第二个位置加入'second'字符
lb.delete(2)  # 删除第二个位置的字符
lb.pack()

# 第8步，主窗口循环显示
window.mainloop()

Radiobutton窗口部件

1. 代表一个变量，它可以有多个值中的一个。点击它将为这个变量设置值，并且清除与这同一变量相关的其它radiobutton。类似于单选
2. tk.Radiobutton(window, text='Option A', variable=var, value='A', command=print_selection)

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签label用以显示并放置
var = tk.StringVar()    # 定义一个var用来将radiobutton的值和Label的值联系在一起.
l = tk.Label(window, bg='yellow', width=20, text='empty')
l.pack()

# 第6步，定义选项触发函数功能
def print_selection():
    l.config(text='you have selected ' + var.get())

# 第5步，创建三个radiobutton选项，其中variable=var, value='A'的意思就是，当我们鼠标选中了其中一个选项，把value的值A放到变量var中，然后赋值给variable
r1 = tk.Radiobutton(window, text='Option A', variable=var, value='A', command=print_selection)
r1.pack()
r2 = tk.Radiobutton(window, text='Option B', variable=var, value='B', command=print_selection)
r2.pack()
r3 = tk.Radiobutton(window, text='Option C', variable=var, value='C', command=print_selection)
r3.pack()

# 第7步，主窗口循环显示
window.mainloop()

Checkbutton窗口部件

1. 代表一个变量，它有两个不同的值。点击这个按钮将会在这两个值间切换，选择和取消选择。
2. l.config 将值显示在标签上

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签label用以显示并放置
l = tk.Label(window, bg='yellow', width=20, text='empty')
l.pack()

# 第6步，定义触发函数功能
def print_selection():
    if (var1.get() == 1) & (var2.get() == 0):  # 如果选中第一个选项，未选中第二个选项
        l.config(text='I love only Python ')
    elif (var1.get() == 0) & (var2.get() == 1):  # 如果选中第二个选项，未选中第一个选项
        l.config(text='I love only C++')
    elif (var1.get() == 0) & (var2.get() == 0):  # 如果两个选项都未选中
        l.config(text='I do not love either')
    else:
        l.config(text='I love both')  # 如果两个选项都选中

# 第5步，定义两个Checkbutton选项并放置
var1 = tk.IntVar()  # 定义var1和var2整型变量用来存放选择行为返回值
var2 = tk.IntVar()
c1 = tk.Checkbutton(window, text='Python', variable=var1, onvalue=1, offvalue=0,
                    command=print_selection)  # 传值原理类似于radiobutton部件
c1.pack()
c2 = tk.Checkbutton(window, text='C++', variable=var2, onvalue=1, offvalue=0, command=print_selection)
c2.pack()

# 第7步，主窗口循环显示
window.mainloop()

Scale窗口部件

1. 尺度（拉动条），允许你通过滑块来设置一数字值。

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签label用以显示并放置
l = tk.Label(window, bg='green', fg='white', width=20, text='empty')
l.pack()

# 第6步，定义一个触发函数功能
def print_selection(v):
    l.config(text='you have selected ' + v)

# 第5步，创建一个尺度滑条，长度200字符，从0开始10结束，以2为刻度，精度为0.01，触发调用print_selection函数
s = tk.Scale(window, label='try me', from_=0, to=10, orient=tk.HORIZONTAL, length=200, showvalue=0,tickinterval=2, resolution=0.01, command=print_selection)
s.pack()

# 第7步，主窗口循环显示
window.mainloop()

Canvas窗口部件

1. 画布，提供绘图功能(直线、椭圆、多边形、矩形) 可以包含图形或位图，用来绘制图表和图，创建图形编辑器，实现定制窗口部件。

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建 500 * 200 大小的画布并放置各种元素
canvas = tk.Canvas(window, bg='green', height=200, width=500)
# 说明图片位置，并导入图片到画布上
image_file = tk.PhotoImage(file='pic.gif')  # 图片位置（相对路径，与.py文件同一文件夹下，也可以用绝对路径，需要给定图片具体绝对路径）
image = canvas.create_image(250, 0, anchor='n',image=image_file)        # 图片锚定点（n图片顶端的中间点位置）放在画布（250,0）坐标处
# 定义多边形参数，然后在画布上画出指定图形
x0, y0, x1, y1 = 100, 100, 150, 150
line = canvas.create_line(x0-50, y0-50, x1-50, y1-50)                   # 画直线
oval = canvas.create_oval(x0+120, y0+50, x1+120, y1+50, fill='yellow')  # 画圆 用黄色填充
arc = canvas.create_arc(x0, y0+50, x1, y1+50, start=0, extent=180)      # 画扇形 从0度打开收到180度结束
rect = canvas.create_rectangle(330, 30, 330+20, 30+20)                  # 画矩形正方形
canvas.pack()

# 第6步，触发函数，用来一定指定图形
def moveit():
    canvas.move(rect, 2, 2) # 移动正方形rect（也可以改成其他图形名字用以移动一起图形、元素），按每次（x=2, y=2）步长进行移动

# 第5步，定义一个按钮用来移动指定图形的在画布上的位置
b = tk.Button(window, text='move item',command=moveit).pack()

# 第7步，主窗口循环显示
window.mainloop()

Menu窗口部件

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签用以显示内容并放置
l = tk.Label(window, text='      ', bg='green')
l.pack()

# 第10步，定义一个函数功能，用来代表菜单选项的功能，这里为了操作简单，定义的功能比较简单
counter = 0

def do_job():
    global counter
    l.config(text='do ' + str(counter))
    counter += 1

# 第5步，创建一个菜单栏，这里我们可以把他理解成一个容器，在窗口的上方
menubar = tk.Menu(window)

# 第6步，创建一个File菜单项（默认不下拉，下拉内容包括New，Open，Save，Exit功能项）
filemenu = tk.Menu(menubar, tearoff=0)
# 将上面定义的空菜单命名为File，放在菜单栏中，就是装入那个容器中
menubar.add_cascade(label='File', menu=filemenu)

# 在File中加入New、Open、Save等小菜单，即我们平时看到的下拉菜单，每一个小菜单对应命令操作。
filemenu.add_command(label='New', command=do_job)
filemenu.add_command(label='Open', command=do_job)
filemenu.add_command(label='Save', command=do_job)
filemenu.add_separator()  # 添加一条分隔线
filemenu.add_command(label='Exit', command=window.quit)  # 用tkinter里面自带的quit()函数

# 第7步，创建一个Edit菜单项（默认不下拉，下拉内容包括Cut，Copy，Paste功能项）
editmenu = tk.Menu(menubar, tearoff=0)
# 将上面定义的空菜单命名为 Edit，放在菜单栏中，就是装入那个容器中
menubar.add_cascade(label='Edit', menu=editmenu)

# 同样的在 Edit 中加入Cut、Copy、Paste等小命令功能单元，如果点击这些单元, 就会触发do_job的功能
editmenu.add_command(label='Cut', command=do_job)
editmenu.add_command(label='Copy', command=do_job)
editmenu.add_command(label='Paste', command=do_job)

# 第8步，创建第二级菜单，即菜单项里面的菜单
submenu = tk.Menu(filemenu)  # 和上面定义菜单一样，不过此处实在File上创建一个空的菜单
filemenu.add_cascade(label='Import', menu=submenu, underline=0)  # 给放入的菜单submenu命名为Import

# 第9步，创建第三级菜单命令，即菜单项里面的菜单项里面的菜单命令（有点拗口，笑~~~）
submenu.add_command(label='Submenu_1', command=do_job)  # 这里和上面创建原理也一样，在Import菜单项中加入一个小菜单命令Submenu_1

# 第11步，创建菜单栏完成后，配置让菜单栏menubar显示出来
window.config(menu=menubar)

# 第12步，主窗口循环显示
window.mainloop()

Frame 窗口部件

1. 框架，用来承载放置其他GUI元素，就是一个容器，是一个在 Windows 上分离小区域的部件, 它能将 Windows 分成不同的区,然后存放不同的其他部件. 同时一个 Frame 上也能再分成两个 Frame, Frame 可以认为是一种容器.

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签用以显示内容并放置
tk.Label(window, text='on the window', bg='red', font=('Arial', 16)).pack()   # 和前面部件分开创建和放置不同，其实可以创建和放置一步完成

# 第5步，创建一个主frame，长在主window窗口上
frame = tk.Frame(window)
frame.pack()

# 第6步，创建第二层框架frame，长在主框架frame上面
frame_l = tk.Frame(frame)# 第二层frame，左frame，长在主frame上
frame_r = tk.Frame(frame)# 第二层frame，右frame，长在主frame上
frame_l.pack(side='left')
frame_r.pack(side='right')

# 第7步，创建三组标签，为第二层frame上面的内容，分为左区域和右区域，用不同颜色标识
tk.Label(frame_l, text='on the frame_l1', bg='green').pack()
tk.Label(frame_l, text='on the frame_l2', bg='green').pack()
tk.Label(frame_l, text='on the frame_l3', bg='green').pack()
tk.Label(frame_r, text='on the frame_r1', bg='yellow').pack()
tk.Label(frame_r, text='on the frame_r2', bg='yellow').pack()
tk.Label(frame_r, text='on the frame_r3', bg='yellow').pack()

# 第8步，主窗口循环显示
window.mainloop()

messageBox窗口部件

1. 类似于弹窗的操作

 tkinter.messagebox.showinfo(title='Hi', message='你好！')  # 提示信息对话窗
    tkinter.messagebox.showwarning(title='Hi', message='有警告！')       # 提出警告对话窗
    tkinter.messagebox.showerror(title='Hi', message='出错了！')         # 提出错误对话窗
    print(tkinter.messagebox.askquestion(title='Hi', message='你好！'))  # 询问选择对话窗return 'yes', 'no'
    print(tkinter.messagebox.askyesno(title='Hi', message='你好！'))     # return 'True', 'False'
    print(tkinter.messagebox.askokcancel(title='Hi', message='你好！'))  # return 'True', 'False'

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入
import tkinter.messagebox  # 要使用messagebox先要导入模块

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第5步，定义触发函数功能
def hit_me():
    tkinter.messagebox.showinfo(title='Hi', message='你好！')  # 提示信息对话窗
    tkinter.messagebox.showwarning(title='Hi', message='有警告！')       # 提出警告对话窗
    tkinter.messagebox.showerror(title='Hi', message='出错了！')         # 提出错误对话窗
    print(tkinter.messagebox.askquestion(title='Hi', message='你好！'))  # 询问选择对话窗return 'yes', 'no'
    print(tkinter.messagebox.askyesno(title='Hi', message='你好！'))     # return 'True', 'False'
    print(tkinter.messagebox.askokcancel(title='Hi', message='你好！'))  # return 'True', 'False'

# 第4步，在图形界面上创建一个标签用以显示内容并放置
tk.Button(window, text='hit me', bg='green', font=('Arial', 14), command=hit_me).pack()

# 第6步，主窗口循环显示
window.mainloop()

• 参考文章

tkinter是什么

1. Tkinter 是使用 python 进行窗口视窗设计的模块。Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口。作为 python 特定的GUI界面，是一个图像的窗口，tkinter是python 自带的，可以编辑的GUI界面，我们可以用GUI 实现很多直观的功能，比如想开发一个计算器，如果只是一个程序输入，输出窗口的话，是没用用户体验的。所有开发一个图像化的小窗口，就是必要的。

Label标签

1. 创建好主窗口才能在上面放置各种控件元素
2. tk.Lable(window,text="文本内容"，bg='背景颜色',font=('字体family',字体大小)),width=标签宽度,height=标签高度 以字符的大小为单位
3. window.title('窗口名称')
4. window.geometry('窗口的大小')
5. 放置标签x.pack()或者x.place()

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上设定标签
l = tk.Label(window, text='你好！this is Tkinter', bg='green', font=('Arial', 12), width=30, height=2)
# 说明： bg为背景，font为字体，width为长，height为高，这里的长和高是字符的长和高，比如height=2,就是标签有2个字符这么高

# 第5步，放置标签
l.pack()    # Label内容content区域放置位置，自动调节尺寸
# 放置lable的方法有：1）l.pack(); 2)l.place();

# 第6步，主窗口循环显示
window.mainloop()
# 注意，loop因为是循环的意思，window.mainloop就会让window不断的刷新，如果没有mainloop,就是一个静态的window,传入进去的值就不会有循环，mainloop就相当于一个很大的while循环，有个while，每点击一次就会更新一次，所以我们必须要有循环
# 所有的窗口文件都必须有类似的mainloop函数，mainloop是窗口文件的关键的关键。

Button窗口部件

1. 定义一个函数功能（内容自己自由编写），供点击Button按键时调用，调用命令参数command=函数名

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x
# 第4步，在图形界面上设定标签
# 说明： bg为背景，font为字体，width为长，height为高，这里的长和高是字符的长和高，比如height=2,就是标签有2个字符这么高
var = tk.StringVar()  # 将label标签的内容设置为字符类型，用var来接收hit_me函数的传出内容用以显示在标签上
l = tk.Label(window, textvariable=var, bg='green', fg='white', font=('Arial', 12), width=30, height=2)
# 说明： bg为背景，fg为字体颜色，font为字体，width为长，height为高，这里的长和高是字符的长和高，比如height=2,就是标签有2个字符这么高
l.pack()
# 定义一个函数功能（内容自己自由编写），供点击Button按键时调用，调用命令参数command=函数名
on_hit = False
def hit_me():
    global on_hit
    if on_hit == False:
        on_hit = True
        var.set('you hit me')
    else:
        on_hit = False
        var.set('')
# 第5步，在窗口界面设置放置Button按键
b = tk.Button(window, text='hit me', font=('Arial', 12), width=10, height=1, command=hit_me)
# 第5步，放置标签
# x.pack()  # Label内容content区域放置位置，自动调节尺寸
b.pack()
# 放置lable的方法有：1）l.pack(); 2)l.place();

# 第6步，主窗口循环显示
window.mainloop()
# 注意，loop因为是循环的意思，window.mainloop就会让window不断的刷新，如果没有mainloop,就是一个静态的window,传入进去的值就不会有循环，mainloop就相当于一个很大的while循环，有个while，每点击一次就会更新一次，所以我们必须要有循环
# 所有的窗口文件都必须有类似的mainloop函数，mainloop是窗口文件的关键的关键。

Entry窗口部件

1. Entry是tkinter类中提供的的一个单行文本输入域，用来输入显示一行文本，收集键盘输入(类似 HTML 中的 text)

e1 = tk.Entry(window, show='*', font=('Arial', 14))   # 显示成密文形式
e2 = tk.Entry(window, show=None, font=('Arial', 14))  # 显示成明文形式
e2.pack()

Text窗口部件

1. Text是tkinter类中提供的的一个多行文本区域，显示多行文本，可用来收集(或显示)用户输入的文字(类似 HTML 中的 textarea)，格式化文本显示，允许你用不同的样式和属性来显示和编辑文本，同时支持内嵌图象和窗口。
2. insert 在焦点处插入 ，end 在文本末尾插入数据

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上设定输入框控件entry框并放置
e = tk.Entry(window, show=None)  # 显示成明文形式
e.pack()

# 第5步，定义两个触发事件时的函数insert_point和insert_end（注意：因为Python的执行顺序是从上往下，所以函数一定要放在按钮的上面）
def insert_point():  # 在鼠标焦点处插入输入内容
    var = e.get()
    t.insert('insert', var)

def insert_end():  # 在文本框内容最后接着插入输入内容
    var = e.get()
    t.insert('end', var)

# 第6步，创建并放置两个按钮分别触发两种情况
b1 = tk.Button(window, text='insert point', width=10,
               height=2, command=insert_point)
b1.pack()
b2 = tk.Button(window, text='insert end', width=10,
               height=2, command=insert_end)
b2.pack()

# 第7步，创建并放置一个多行文本框text用以显示，指定height=3为文本框是三个字符高度
t = tk.Text(window, height=3)
t.pack()

# 第8步，主窗口循环显示
window.mainloop()

Listbox窗口部件

1. Text是tkinter类中提供的的列表框部件，显示供选方案的一个列表。listbox能够被配置来得到radiobutton或checklist的行为。
2. lb.get(lb.curselection()) 获取列表选中文本的值
3. 可以使用insert将值遍历到listbox中

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签label用以显示并放置
var1 = tk.StringVar()  # 创建变量，用var1用来接收鼠标点击具体选项的内容
l = tk.Label(window, bg='green', fg='yellow', font=('Arial', 12), width=10, textvariable=var1)
l.pack()

# 第6步，创建一个方法用于按钮的点击事件
def print_selection():
    value = lb.get(lb.curselection())  # 获取当前选中的文本
    var1.set(value)  # 为label设置值

# 第5步，创建一个按钮并放置，点击按钮调用print_selection函数
b1 = tk.Button(window, text='print selection', width=15, height=2, command=print_selection)
b1.pack()

# 第7步，创建Listbox并为其添加内容
var2 = tk.StringVar()
var2.set((1, 2, 3, 4))  # 为变量var2设置值
# 创建Listbox
lb = tk.Listbox(window, listvariable=var2)  # 将var2的值赋给Listbox
# 创建一个list并将值循环添加到Listbox控件中
list_items = [11, 22, 33, 44]
for item in list_items:
    lb.insert('end', item)  # 从最后一个位置开始加入值
lb.insert(1, 'first')  # 在第一个位置加入'first'字符
lb.insert(2, 'second')  # 在第二个位置加入'second'字符
lb.delete(2)  # 删除第二个位置的字符
lb.pack()

# 第8步，主窗口循环显示
window.mainloop()

Radiobutton窗口部件

1. 代表一个变量，它可以有多个值中的一个。点击它将为这个变量设置值，并且清除与这同一变量相关的其它radiobutton。类似于单选
2. tk.Radiobutton(window, text='Option A', variable=var, value='A', command=print_selection)

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签label用以显示并放置
var = tk.StringVar()    # 定义一个var用来将radiobutton的值和Label的值联系在一起.
l = tk.Label(window, bg='yellow', width=20, text='empty')
l.pack()

# 第6步，定义选项触发函数功能
def print_selection():
    l.config(text='you have selected ' + var.get())

# 第5步，创建三个radiobutton选项，其中variable=var, value='A'的意思就是，当我们鼠标选中了其中一个选项，把value的值A放到变量var中，然后赋值给variable
r1 = tk.Radiobutton(window, text='Option A', variable=var, value='A', command=print_selection)
r1.pack()
r2 = tk.Radiobutton(window, text='Option B', variable=var, value='B', command=print_selection)
r2.pack()
r3 = tk.Radiobutton(window, text='Option C', variable=var, value='C', command=print_selection)
r3.pack()

# 第7步，主窗口循环显示
window.mainloop()

Checkbutton窗口部件

1. 代表一个变量，它有两个不同的值。点击这个按钮将会在这两个值间切换，选择和取消选择。
2. l.config 将值显示在标签上

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签label用以显示并放置
l = tk.Label(window, bg='yellow', width=20, text='empty')
l.pack()

# 第6步，定义触发函数功能
def print_selection():
    if (var1.get() == 1) & (var2.get() == 0):  # 如果选中第一个选项，未选中第二个选项
        l.config(text='I love only Python ')
    elif (var1.get() == 0) & (var2.get() == 1):  # 如果选中第二个选项，未选中第一个选项
        l.config(text='I love only C++')
    elif (var1.get() == 0) & (var2.get() == 0):  # 如果两个选项都未选中
        l.config(text='I do not love either')
    else:
        l.config(text='I love both')  # 如果两个选项都选中

# 第5步，定义两个Checkbutton选项并放置
var1 = tk.IntVar()  # 定义var1和var2整型变量用来存放选择行为返回值
var2 = tk.IntVar()
c1 = tk.Checkbutton(window, text='Python', variable=var1, onvalue=1, offvalue=0,
                    command=print_selection)  # 传值原理类似于radiobutton部件
c1.pack()
c2 = tk.Checkbutton(window, text='C++', variable=var2, onvalue=1, offvalue=0, command=print_selection)
c2.pack()

# 第7步，主窗口循环显示
window.mainloop()

Scale窗口部件

1. 尺度（拉动条），允许你通过滑块来设置一数字值。

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签label用以显示并放置
l = tk.Label(window, bg='green', fg='white', width=20, text='empty')
l.pack()

# 第6步，定义一个触发函数功能
def print_selection(v):
    l.config(text='you have selected ' + v)

# 第5步，创建一个尺度滑条，长度200字符，从0开始10结束，以2为刻度，精度为0.01，触发调用print_selection函数
s = tk.Scale(window, label='try me', from_=0, to=10, orient=tk.HORIZONTAL, length=200, showvalue=0,tickinterval=2, resolution=0.01, command=print_selection)
s.pack()

# 第7步，主窗口循环显示
window.mainloop()

Canvas窗口部件

1. 画布，提供绘图功能(直线、椭圆、多边形、矩形) 可以包含图形或位图，用来绘制图表和图，创建图形编辑器，实现定制窗口部件。

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建 500 * 200 大小的画布并放置各种元素
canvas = tk.Canvas(window, bg='green', height=200, width=500)
# 说明图片位置，并导入图片到画布上
image_file = tk.PhotoImage(file='pic.gif')  # 图片位置（相对路径，与.py文件同一文件夹下，也可以用绝对路径，需要给定图片具体绝对路径）
image = canvas.create_image(250, 0, anchor='n',image=image_file)        # 图片锚定点（n图片顶端的中间点位置）放在画布（250,0）坐标处
# 定义多边形参数，然后在画布上画出指定图形
x0, y0, x1, y1 = 100, 100, 150, 150
line = canvas.create_line(x0-50, y0-50, x1-50, y1-50)                   # 画直线
oval = canvas.create_oval(x0+120, y0+50, x1+120, y1+50, fill='yellow')  # 画圆 用黄色填充
arc = canvas.create_arc(x0, y0+50, x1, y1+50, start=0, extent=180)      # 画扇形 从0度打开收到180度结束
rect = canvas.create_rectangle(330, 30, 330+20, 30+20)                  # 画矩形正方形
canvas.pack()

# 第6步，触发函数，用来一定指定图形
def moveit():
    canvas.move(rect, 2, 2) # 移动正方形rect（也可以改成其他图形名字用以移动一起图形、元素），按每次（x=2, y=2）步长进行移动

# 第5步，定义一个按钮用来移动指定图形的在画布上的位置
b = tk.Button(window, text='move item',command=moveit).pack()

# 第7步，主窗口循环显示
window.mainloop()

Menu窗口部件

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签用以显示内容并放置
l = tk.Label(window, text='      ', bg='green')
l.pack()

# 第10步，定义一个函数功能，用来代表菜单选项的功能，这里为了操作简单，定义的功能比较简单
counter = 0

def do_job():
    global counter
    l.config(text='do ' + str(counter))
    counter += 1

# 第5步，创建一个菜单栏，这里我们可以把他理解成一个容器，在窗口的上方
menubar = tk.Menu(window)

# 第6步，创建一个File菜单项（默认不下拉，下拉内容包括New，Open，Save，Exit功能项）
filemenu = tk.Menu(menubar, tearoff=0)
# 将上面定义的空菜单命名为File，放在菜单栏中，就是装入那个容器中
menubar.add_cascade(label='File', menu=filemenu)

# 在File中加入New、Open、Save等小菜单，即我们平时看到的下拉菜单，每一个小菜单对应命令操作。
filemenu.add_command(label='New', command=do_job)
filemenu.add_command(label='Open', command=do_job)
filemenu.add_command(label='Save', command=do_job)
filemenu.add_separator()  # 添加一条分隔线
filemenu.add_command(label='Exit', command=window.quit)  # 用tkinter里面自带的quit()函数

# 第7步，创建一个Edit菜单项（默认不下拉，下拉内容包括Cut，Copy，Paste功能项）
editmenu = tk.Menu(menubar, tearoff=0)
# 将上面定义的空菜单命名为 Edit，放在菜单栏中，就是装入那个容器中
menubar.add_cascade(label='Edit', menu=editmenu)

# 同样的在 Edit 中加入Cut、Copy、Paste等小命令功能单元，如果点击这些单元, 就会触发do_job的功能
editmenu.add_command(label='Cut', command=do_job)
editmenu.add_command(label='Copy', command=do_job)
editmenu.add_command(label='Paste', command=do_job)

# 第8步，创建第二级菜单，即菜单项里面的菜单
submenu = tk.Menu(filemenu)  # 和上面定义菜单一样，不过此处实在File上创建一个空的菜单
filemenu.add_cascade(label='Import', menu=submenu, underline=0)  # 给放入的菜单submenu命名为Import

# 第9步，创建第三级菜单命令，即菜单项里面的菜单项里面的菜单命令（有点拗口，笑~~~）
submenu.add_command(label='Submenu_1', command=do_job)  # 这里和上面创建原理也一样，在Import菜单项中加入一个小菜单命令Submenu_1

# 第11步，创建菜单栏完成后，配置让菜单栏menubar显示出来
window.config(menu=menubar)

# 第12步，主窗口循环显示
window.mainloop()

Frame 窗口部件

1. 框架，用来承载放置其他GUI元素，就是一个容器，是一个在 Windows 上分离小区域的部件, 它能将 Windows 分成不同的区,然后存放不同的其他部件. 同时一个 Frame 上也能再分成两个 Frame, Frame 可以认为是一种容器.

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第4步，在图形界面上创建一个标签用以显示内容并放置
tk.Label(window, text='on the window', bg='red', font=('Arial', 16)).pack()   # 和前面部件分开创建和放置不同，其实可以创建和放置一步完成

# 第5步，创建一个主frame，长在主window窗口上
frame = tk.Frame(window)
frame.pack()

# 第6步，创建第二层框架frame，长在主框架frame上面
frame_l = tk.Frame(frame)# 第二层frame，左frame，长在主frame上
frame_r = tk.Frame(frame)# 第二层frame，右frame，长在主frame上
frame_l.pack(side='left')
frame_r.pack(side='right')

# 第7步，创建三组标签，为第二层frame上面的内容，分为左区域和右区域，用不同颜色标识
tk.Label(frame_l, text='on the frame_l1', bg='green').pack()
tk.Label(frame_l, text='on the frame_l2', bg='green').pack()
tk.Label(frame_l, text='on the frame_l3', bg='green').pack()
tk.Label(frame_r, text='on the frame_r1', bg='yellow').pack()
tk.Label(frame_r, text='on the frame_r2', bg='yellow').pack()
tk.Label(frame_r, text='on the frame_r3', bg='yellow').pack()

# 第8步，主窗口循环显示
window.mainloop()

messageBox窗口部件

1. 类似于弹窗的操作

 tkinter.messagebox.showinfo(title='Hi', message='你好！')  # 提示信息对话窗
    tkinter.messagebox.showwarning(title='Hi', message='有警告！')       # 提出警告对话窗
    tkinter.messagebox.showerror(title='Hi', message='出错了！')         # 提出错误对话窗
    print(tkinter.messagebox.askquestion(title='Hi', message='你好！'))  # 询问选择对话窗return 'yes', 'no'
    print(tkinter.messagebox.askyesno(title='Hi', message='你好！'))     # return 'True', 'False'
    print(tkinter.messagebox.askokcancel(title='Hi', message='你好！'))  # return 'True', 'False'

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk  # 使用Tkinter前需要先导入
import tkinter.messagebox  # 要使用messagebox先要导入模块

# 第1步，实例化object，建立窗口window
window = tk.Tk()

# 第2步，给窗口的可视化起名字
window.title('My Window')

# 第3步，设定窗口的大小(长 * 宽)
window.geometry('500x300')  # 这里的乘是小x

# 第5步，定义触发函数功能
def hit_me():
    tkinter.messagebox.showinfo(title='Hi', message='你好！')  # 提示信息对话窗
    tkinter.messagebox.showwarning(title='Hi', message='有警告！')       # 提出警告对话窗
    tkinter.messagebox.showerror(title='Hi', message='出错了！')         # 提出错误对话窗
    print(tkinter.messagebox.askquestion(title='Hi', message='你好！'))  # 询问选择对话窗return 'yes', 'no'
    print(tkinter.messagebox.askyesno(title='Hi', message='你好！'))     # return 'True', 'False'
    print(tkinter.messagebox.askokcancel(title='Hi', message='你好！'))  # return 'True', 'False'

# 第4步，在图形界面上创建一个标签用以显示内容并放置
tk.Button(window, text='hit me', bg='green', font=('Arial', 14), command=hit_me).pack()

# 第6步，主窗口循环显示
window.mainloop()

• 参考文章

为什么买车？

便利出行：拥有一辆车意味着你可以随时随地自主出行，不受公共交通的限制，节约了时间和精力。
家庭聚会：车子可以让你更轻松地与家人一起外出，去探索新的地方、享受自然风光或者参加各种活动，增进家庭关系。
提升生活质量：拥有一辆心仪的车型可以为你的生活增添色彩，让你在驾驶时感受到愉悦和满足，为日常生活增添乐趣。
自由探索：有了车子，你可以更方便地探索城市的每一个角落，发现更多美好的事物，拓展自己的视野和经历。

主要的原因还是家里真的需要一辆车了，刚好工作一年多了，就决定买车了。

选择之初

预算决策：我在15万元以下的预算范围内选择了星瑞自动车型。价格合适，而且外观符合我的品味，这是我喜欢的。

品牌倾向：我打算支持国产车，因为它们的性价比很高，而且这个品牌最近也备受关注，颇受欢迎。

配置选择：我选了2.0T，动力强劲，配置也符合我的需求，包括动力性能和舒适性等方面。

油车偏好：我决定选择传统油车而不是电动车，主要是因为我认为15万元以下的电动车性能一般，而且我有电池焦虑症，掉电一点就想冲。

车型对比

因为先选中了星瑞，所以我在同价位下选择了多个车型进行对比，以下是我选择的车型和配置的对比。

注：以上对比为个人观点，实际情况可能有所不同。

试驾体验

试驾了星瑞，感觉还是比较满意的。
首次试驾的是星瑞只此青绿（石青），后来本打算试驾星瑞青云2.0T，但经销店没有试驾车，而且暂时新款也不支持试驾，问了销售说库存很紧张。于是，我又试驾了一次星瑞尊贵版，想要多练练、多感受一下。

试驾两次后的感受是完全不同，第一次不是很敢踩油门，所以第一次试驾的感觉比较不顺手，第二次试驾的感受就比较顺手了，而且第二次试驾试驾员带我体验了下弹射起步和百公里120迅速刹停，还有车在高速的情况下猛打方向盘，该说不说这个车的操控是真的爽。

谈价购车

落地成交

为什么买车？

便利出行：拥有一辆车意味着你可以随时随地自主出行，不受公共交通的限制，节约了时间和精力。
家庭聚会：车子可以让你更轻松地与家人一起外出，去探索新的地方、享受自然风光或者参加各种活动，增进家庭关系。
提升生活质量：拥有一辆心仪的车型可以为你的生活增添色彩，让你在驾驶时感受到愉悦和满足，为日常生活增添乐趣。
自由探索：有了车子，你可以更方便地探索城市的每一个角落，发现更多美好的事物，拓展自己的视野和经历。

主要的原因还是家里真的需要一辆车了，刚好工作一年多了，就决定买车了。

选择之初

预算决策：我在15万元以下的预算范围内选择了星瑞自动车型。价格合适，而且外观符合我的品味，这是我喜欢的。

品牌倾向：我打算支持国产车，因为它们的性价比很高，而且这个品牌最近也备受关注，颇受欢迎。

配置选择：我选了2.0T，动力强劲，配置也符合我的需求，包括动力性能和舒适性等方面。

油车偏好：我决定选择传统油车而不是电动车，主要是因为我认为15万元以下的电动车性能一般，而且我有电池焦虑症，掉电一点就想冲。

车型对比

因为先选中了星瑞，所以我在同价位下选择了多个车型进行对比，以下是我选择的车型和配置的对比。

注：以上对比为个人观点，实际情况可能有所不同。

试驾体验

试驾了星瑞，感觉还是比较满意的。
首次试驾的是星瑞只此青绿（石青），后来本打算试驾星瑞青云2.0T，但经销店没有试驾车，而且暂时新款也不支持试驾，问了销售说库存很紧张。于是，我又试驾了一次星瑞尊贵版，想要多练练、多感受一下。

试驾两次后的感受是完全不同，第一次不是很敢踩油门，所以第一次试驾的感觉比较不顺手，第二次试驾的感受就比较顺手了，而且第二次试驾试驾员带我体验了下弹射起步和百公里120迅速刹停，还有车在高速的情况下猛打方向盘，该说不说这个车的操控是真的爽。

谈价购车

落地成交

On Anxiety

We feel anxious because the current version of ourselves is quite distant from our envisioned self. The growing gap between who we are and who we aspire to be largely stems from how we continually let ourselves down.

Regarding anxiety, many of us have fallen into a paradoxical loop where we seem busy but are actually riddled with anxiety. We spend nights awake, but merely scrolling through our phones, giving countless likes; we impulsively decide to learn something new, buy numerous vocabulary books that remain unopened thereafter; we get motivated to work out after being inspired, gather loads of workout plans but never execute them; we vow to read extensively, purchase stacks of books yet never crack one open. We invest significant time on social media, bookmarking what we think is useful, only for our hard drives to fill up with resources we never review. We hoard information but fail to truly engage with what we've carefully selected. We focus on collecting, forgetting that the most crucial step is to take the time to digest and absorb.

A book unread is just printed pages; a vocabulary book not studied is merely a collection of alphabetical combinations; downloaded lectures left unheard are simply worthless data—things you might have saved mindlessly, never revisiting again. Eventually, you find yourself overwhelmed with an unmanageable backlog. As you stare at piles of lectures and untouched textbooks, anxiety intensifies. Procrastination and waiting are the最容易 killers of motivation.

The best way to conquer anxiety? Face it head-on by doing the very things that make you anxious.

Action requires no perfect timing or state of mind; the present moment is eternal and all-encompassing.

On Dreams and Struggle

I firmly believe that heroes are always solitary, while minions cluster together. Pareto's Principle holds true universally: 20% of people hold 80% of the wealth, while 80% serve the remaining 20%.

Being outstanding isn't enough; becoming indispensable is key. If excellence is insufficient, strive to become irreplaceable. There are two paths to irreplaceability: doing tasks others are unwilling to do, or performing common tasks so exceptionally well that no one else can match you. Such individuals are genuinely needed in society. This journey is long and fiercely competitive, yet I will continue to strengthen myself, improving bit by bit each day, venturing into fields others avoid and mastering areas where everyone competes, to become truly irreplaceable.

Someone is indeed living the life you desire, and you too can live that life if you possess a little determination, courage, hope, and belief.

Each episode in our lives serves its purpose; there are no meaningless experiences. Therefore, refrain from lamenting why you didn't start earlier or regretting what you could have done differently. The time spent complaining or regretting would be better invested in moving forward. Sometimes, taking a wrong turn clarifies the future path; befriending the wrong people reveals the meaning of true friendship amidst hardship; loving the wrong person teaches us the essence of genuine love.

On Money

Have you considered that excessive frugality can actually be wasteful? When you spend hours arguing over cents instead of using that time to study, you're wasting valuable resources. Eating leftover food that's gone bad may lead to hospital bills that exceed the savings. Skipping health checks due to cost may result in larger medical expenses once serious illnesses are diagnosed. Thinking you're saving money by doing these things, you're unknowingly squandering your most precious asset—time—endlessly debating trivial matters.

On Relationships

The law of attraction dictates that like attracts like; you attract people similar to yourself.

In terms of dating, finding someone who helps you grow is important; finding someone who inspires mutual growth is even more critical.

As for colleagues, has anyone ever said they must become friends? True friends have no overlapping interests or benefits; they are those willing to act for one another, even sacrificing some of their own interests. The best approach is to maintain good relations with every colleague without confiding in or forming deep friendships with any.

On Love

True affection involves two people who can converse heartily; the ideal couple engages in soulful dialogue and warms each other's hearts.

Many relationships end due to misunderstandings that stem from unclear communication. Men may assume women don't want to see them, while women fear seeing each other too often may cool off the relationship. Both parties wish to sustain the bond, yet they misunderstand each other, leaving words unsaid or assuming certain things unnecessary to clarify, causing love to fade away. Misunderstandings deepen until conflicts surface. Remember, before marriage, people choose among options; post-marriage, they make judgments.

Countless romances crumble due to poor communication. Cherishing young love entails keeping lines of communication open, sharing your thoughts and feelings openly to ensure your partner feels cherished and valued.

If a past relationship made you a better person, then you did not love the wrong person. Life is inherently lonely, but we're fortunate when temporary companions walk alongside us during our solitude. While parents may accompany you for a considerable part of your adult life, to navigate life effectively, you must sometimes walk alone, explore unfamiliar places, meet new faces, endure hardships you've never experienced before. All these challenges aren't meant to break you but to fortify you, enabling you to better support those you cherish.

On Family

Temporary separations from loved ones are necessary precursors to joyful reunions.

Each individual navigates the world independently and with a sense of loneliness. Parents won't be with us forever, but gratefully, Chinese parents often stay involved in our lives for a longer period. However, to thrive in the world, relying solely on others' support isn't enough; you need to venture forth alone at times, enduring solitude to strengthen your wings, ultimately to protect and cherish those you don't want to leave behind.

On Reading and Learning

There's no fixed rhythm for studying; what suits you personally is the best method. Sometimes, getting caught up in the methodology prevents you from taking the first step. Many people spend their lives deliberating over that initial stride, never actually making it.

During study sessions, ask yourself what you aim to achieve and where you want to reach today. Without a goal, learning becomes aimless wandering; without a target, hard work appears diligent but lacks substance.

(1) When reading a book, ask yourself what you want to gain from it and proceed with questions in mind.

(2) If you're one-third into a book and still unsure about its content, it's time to put it aside.

(3) Don't take more than a week to finish a book, as extended periods can lead to forgetfulness and ineffective reading.

(4) After finishing a good book, consider reading it a second time for a more profound understanding.

Pursue Your Dreams Fearlessly

Ultimately, only you can determine your destiny. You are the master of your life and youth. Thank you for staying true to yourself.

The real experts are those who "march to their own drum," not escaping the world, but rather knowing its rules while skillfully operating outside the system. They don't flatter nor do they allow the world to change them. They undertake tasks they'd rather not do, solely to create better opportunities for pursuing their passions later on. Like nomads, they wander, yet they understand societal norms.

To embody such individuals, I believe you should cultivate several traits: acquire a specialized skill set to earn a living anywhere; avoid politics, as it's complex; and above all, have clarity about the lifestyle you desire and steadfastly pursue it.

Regarding dreams, I don't subscribe to the notion that hard work guarantees success since the world can be unpredictable. Nevertheless, this doesn't warrant resignation; people must resiliently strive towards their aspirations. Even if the world sometimes hinders a dedicated individual, holding onto your original dream signifies that you haven't aged in spirit.

• Source: Jianshu
• Author: Qianqian Whisper

Choice

Planning

Effort

Future

关于焦虑

我们之所以会觉得焦虑，无非是因为现在的自己和想象中的自己，很有距离。”而我们离想象中的自己越来越远，很大程度上都是因为我们在一点点地辜负自己。

关于焦虑，我发现我们或多或少地都陷入了一个怪圈，这个怪圈叫：我们看似忙碌，实则焦虑。看起来每天熬夜，却只是拿着手机点了无数个赞；我们总是心血来潮想学习，于是买了很多单词书，再也没有翻开过；我们总是备受刺激想健身，于是找了很多攻略，再也没有动过；我们总是信誓旦旦要读书，于是买了很多书，再也没有打开过。 我们总是花很多时间在社交网络上，把认为有用的东西另存为，直到你的硬盘存满了资料，你还是没有看过。 我们忙碌，可我们却没有真的去了解那些自己精挑细选留下的内容。我们花时间收集，却忘了最重要的其实是花时间去消化。

一本书买了不看也不过是印着字的纸而已；单词书买了不背充其量就是26个字母的排列组合；下载的演讲公开课不听也只是一堆无用的影像，可能你只是随手下载了，就再也没有去看过。于是有一天你发现，堆积的东西已经看不完了。 你看着一个个公开课、一本本单词书，无从下手从而越发焦虑。拖延和等待，是世界上最容易压垮一个人斗志的东西。

那么怎么打败焦虑？打败焦虑的最好办法，就是去做那些让你焦虑的事情。

行动这件事，从来不需要等到什么好天气什么好状态，此时此刻就是永远，此时此刻就是一切。

关于梦想和奋斗

我一直坚信，英雄，永远是孤独的，只有小喽啰才扎堆。“二八定律”永远适合在地球的每一个角落：百分之二十的人，占有百分之八十的资产；百分之八十的人，为百分之二十的人服务。

做到优秀还不够，一定要卓越，一定要无可替代才是最重要的。既然优秀不够，就让自己无可替代吧。而无可替代的方式有两种：一是做别人不愿意做的事情；二是把别人都能做好的事情做卓越。这样的人，才是这个社会真正需要的。这条路很远，有很多人都在竞争，而我还会继续让自己强大起来，每天进步一点儿，做别人不愿意做的领域，把别人都能做的领域做绝，才能无可替代。

这世上，真的有人过着你想要的生活，这生活，你也能过，你只需要一点点决心、一点点勇敢、一点点希望和一点点的相信。

没有什么路是白走的，没有什么事情是白做的，这些看似无意义的事情，都是成长的基石。在我们的生命中的每个插曲都有着自己该有的意义，所以不要抱怨为什么不早点儿做，更不要后悔要是做了什么就好了。你有后悔、抱怨的时间，不如整装待发前进起来。有时候只有走错了路，才逐渐明白自己要的未来；只有交错了朋友，才逐渐知道什么是患难见真情；只有爱错过人，才逐渐懂得真爱是什么。

关于金钱

你是否想过，一些过于节省的生活，其实就是浪费：你每天都在争论那几角钱，浪费了精力和时间去读书学习；把隔夜的剩菜热了吃，吃坏肚子去医院花更多钱；你省钱不去体检，检查出大病后不得不住院花费更多。你以为你在省钱，却不知道，真正省钱的方式，是去赚钱，是让自己变得更强大，而不是为了几角钱花自己最宝贵的时间去永无休止地争论。

关于人际

吸引力法则，你是什么样的人，就会吸引什么样的人。

关于恋爱，找一个能让你进步的人，很重要；找一个能让彼此进步的人，更重要。

关于同事，谁说过能成为朋友的？真正的朋友，是没有利益交集，是能为对方去做一些事的，是能为对方放弃一些利益的人。最好的办法，就是不得罪每个同事，也更别和任何同事掏心地做朋友。

关于爱情

真正的感情，是要两个人能聊到一起的；最好的情侣，是能用灵魂平等地交流，是能用心去温暖彼此的两个人。

很多分手的原因，都是互相没有把话讲明白。男的以为女的不愿意见到自己；而女的怕见得频繁感情降温了。双方都想维持住这段感情，却互相都不了解，话没有讲明白，甚至有些话觉得没必要讲明白，感情也就逐渐淡了。误解越深，矛盾也就浮出水面。要知道，结婚前，所有人都在做选择题；结婚后，所有人都在做判断题。

多少感情，不是败给了现实，而是败给了交流。

珍惜年轻时恋人的最好方式其实就是交流，就是把心打开，让对方看到，让他明白，这颗心，依然留着对方的爱。

生命中任何走来的人，只要她曾经让自己变得更优秀，你就没有爱错人。人生本来就孤独，任何陪过自己走完一段寂寞时光的人，都应该用心感激。

感谢那些擦肩而过的人，因为时光证明了他们不是对的人，更重要的是，上天会为你安排一个更适合的，就在不久的将来。

关于亲情

离开亲人的分别，是为了更好地团聚。

一个人行走在这个世界上，都是孤独的。父母不会陪你一辈子，幸福的是，中国的父母，会在你成年之后依旧陪伴你很长一段时间。可是，想要在这个世界更好地走，光让人搀扶着你是不够的，你总要一个人孤单地走完一些路，去一些陌生的地方，见一些没有见过的人，吃一些从未吃过的苦。这一切，不是你自己作死，只是为了让自己的羽翼丰满，能更好地陪伴那些不想离开的人。

关于读书和学习

所谓学习方法，其实没有什么固定的节奏，适合自己的，才是最好的；有效果的，才是最好的。有时候由于太纠结如何走，竟然连第一步都没有迈出去。这世界上，有多少人，为了第一步能走得潇洒霸气，却一辈子没有迈出第一步。

在每次学习的时候，你是否问过自己，今天要达到什么目标，要走到哪里。没有目的的旅行只能叫漫游，没有目标的学习只是叫看起来很努力。形式什么的，根本没必要纠结，适合自己就好。

读书只能增加自己的见识和文化积淀，是不能让你暴富的，但至少能让你拥有一个体面的生活和一份得体的收入。

（1）在看一本书的时候，问问自己，你想要从中得到什么，然后带着问题去翻阅目录和文字。

（2）如果一本书读了三分之一了还不知道在讲什么，放手吧。

（3）一本书不要超过一周读完，否则太长时间容易读了前面忘记后面，无效阅读。

（4）读完一本书后，如果觉得是好作品，第二遍才是真正的阅读。

勇敢去追求梦想

这世上，除了自己，没有人能决定你的命运。你才是自己生活和青春的主宰者。感谢你，勇敢地做了自己。

其实真正的高手是“特立独行的猪”，并不是去逃避这个世界；是知道这个世界的规则，但有能力游离于这个体系之外，有智慧地区别自己想要的和不得不做的。他们不阿谀奉承，更不愿意被世界改变；他们会做自己不愿意做的，只是为了以后更好地去做自己愿意做的；他们像浪迹天涯的游子一样，但也知道这个社会的规则。

我的总结是，做这样的人，你需要有这样几个特征：一是拥有一技之长，让自己无论去哪儿都能赚到钱；二是不去搞政治，这玩意太复杂；三是明白自己想要的生活，坚定地去追。

关于梦想，我一直不相信努力就能成功的鬼话，因为这个世界很诡异，时势才造英雄。有时候一个很努力的人，毁掉他的，是这个社会。但是，不代表我们就应该自暴自弃，人总要坚强地为自己的理想奋斗过，只要你还记得当年的梦想，那么你就没有变老。

• 来源：简书
• 作者：芊芊细语123

选择

计划

努力

未来

Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

master：默认开发分支 orgin：默认远程版本分支 head：指向当前分支

git配置

• 设置用户名

git config --global user.name "username" //用户名为登录用户名

• 设置邮箱

git config --global user.email "注册时的邮箱"

代码指令

• 克隆github上的仓库源码到本地

git clone [url]

git仓库的创建

git初始化

git init

查看文件是否变更

git status

添加文件到缓存区

git add .   // 或者git add filename
git rm . //删除缓存文件

注在指定文件夹使用git指令

添加备注

git commit -m "这里写备注内容"

推送文件到远程仓库master

git push origin master

查看历史记录

git log

回溯操作

git reset --head 目标版本号

查看文件具体更改内容

git diff

• 可查看修改了哪些内容

分支操作

查看分支

git branch

创建分支

git branch 分支名

删除分支

git branch -d 分支名

切换分支

git checkout 分支名

合并分支

git merge 分支名

远程仓库

解除远程仓库链接

git remote rm origin

链接到远程仓库

git remote add origin [url]

拉取远程内容

git fetch //或者
git pull

查看远程仓库与本地仓库关系

git remote show origin

标签指令

查看标签

git tag

添加标签

git tag [name]

添加标签tag，比如v1.0等
删除本地标签

git tag -d <tagname>

删除远程仓库标签

git push origin :refs/tags/<tagname>

上传单个tag

git push origin [tagname]

• 上传所有标签

git push origin --tags

参考

Git的奇技淫巧

Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

master：默认开发分支 orgin：默认远程版本分支 head：指向当前分支

git配置

• 设置用户名

git config --global user.name "username" //用户名为登录用户名

• 设置邮箱

git config --global user.email "注册时的邮箱"

代码指令

• 克隆github上的仓库源码到本地

git clone [url]

git仓库的创建

git初始化

git init

查看文件是否变更

git status

添加文件到缓存区

git add .   // 或者git add filename
git rm . //删除缓存文件

注在指定文件夹使用git指令

添加备注

git commit -m "这里写备注内容"

推送文件到远程仓库master

git push origin master

查看历史记录

git log

回溯操作

git reset --head 目标版本号

查看文件具体更改内容

git diff

• 可查看修改了哪些内容

分支操作

查看分支

git branch

创建分支

git branch 分支名

删除分支

git branch -d 分支名

切换分支

git checkout 分支名

合并分支

git merge 分支名

远程仓库

解除远程仓库链接

git remote rm origin

链接到远程仓库

git remote add origin [url]

拉取远程内容

git fetch //或者
git pull

查看远程仓库与本地仓库关系

git remote show origin

标签指令

查看标签

git tag

添加标签

git tag [name]

添加标签tag，比如v1.0等
删除本地标签

git tag -d <tagname>

删除远程仓库标签

git push origin :refs/tags/<tagname>

上传单个tag

git push origin [tagname]

• 上传所有标签

git push origin --tags

参考

Git的奇技淫巧

How to Install

Preparation

Prepare a USB drive to create a Deepin boot disk. Before installing the system with the Deepin image from the official website, check if there is free disk space on the computer, typically requiring about 25 GB. If not, partition the disk.

Partitioning Method/Steps

1.Right-click on "This PC" and select "Manage".
2.Click on "Disk Management".
3.Right-click on the disk you want to partition and select "Shrink Volume".
4.Click "Shrink" (shrink by approximately 102400MB).
5.The available space should show as 100 GB, indicating that the preparation is complete.
Click "Finish".

For instructions on creating a bootable USB drive, visit the official Deepin website.

How to Install? Click here

Troubleshooting After Installation

No Sound

1.Check if the computer can detect the input and output of the sound card.

Method: Settings > Sound > Advanced Settings - Check for available output and input devices.

2.Verify if the sound card is physically damaged, causing the system to be unable to read physical information. Use the following commands to check for similar feedback related to the sound card:

sudo lspci | grep audio
sudo lspci -v

3.Modify the grub file to add an instruction:

GRUB_CMDLINE_LINUX_DEFAULT="${your_existing_configuration_here} snd_hda_intel.dmic_detect=0"

Instruction:

# Enter root mode
su
cd /etc/default/
vi grub
# Add the code snd_hda_intel.dmic_detect=0 to the grub file
# 1. Press "i" on the keyboard to enter insert mode, modify and add the code
# 2. Press "esc" and then type ":wq!" to save the changes
reboot # Restart the system

Wi-Fi Issue

Problem with the network card driver, unable to connect to Wi-Fi
Delete the file iwlwifi.conf (path: /etc/modprobe.d/iwlwifi.conf)

# First, enter root mode in sequence
su
cd /etc/modprobe.d/
rm -f iwlwifi.conf # Forcefully delete the file
ls # Check if the file is deleted
reboot # Reboot the system

如何安装

准备工作

准备一个u盘，用来制作deepin启动盘，在deepin官网安装镜像文件并制作u盘安装系统前，检查电脑是否有空闲的硬盘空间，大概需要25g ，没有要进行分盘操作

分盘方法/步骤

1.右键点击此电脑，点击管理。2.点击磁盘管理。3.鼠标右键点击你要进行分区的磁盘，点击压缩卷。4.点击压缩（压缩大概102400MB）。5.显示可用空间为100g即可，准备工作就完成了
点击完成即可。
制作U盘操作看官网deepin官网

如何安装？点击

安装后遇到问题

无声音

1.检查电脑是否能够检测到声卡的输入输出

方法：设置里面-声音-高级设置-看是否有输出输入设备

2.确认声卡是否出现物理损坏导致的物理信息无法被系统读取。代码指令如下,(看是否有类似的声卡反馈)

sudo lspci | grep audio
sudo lspci -v

3.修改grub文件里面的文件 添加一个指令即可

GRUB_CMDLINE_LINUX_DEFAULT="${这里你的原有配置不要动} snd_hda_intel.dmic_detect=0"

指令如下：

#进入root模式
su
cd /etc/default/
vi grub
# 将此代码snd_hda_intel.dmic_detect=0 加入grub即可
# 1.按键盘i 进入插入模式，修改添加代码后
#2.【esc】然后 按【：】输入 【w！】
reboot #重启即可

wifi 异常

1.网卡驱动的问题，无法链接wifi

需要删除 iwlwifi.conf 此文件（路径：/etc/modprobe.d/iwlwifi.conf）

#首先进入root模式,按顺序即可
su
cd /etc/modrobe.d/
rm -f iwlwifi.conf #强制删除文件
ls #检查文件是否删除
reboot #重启系统

vs code 的常用快捷键

1. 注释：

• 单行注释：[ctrl+k,ctrl+c] 或 ctrl+/

• 取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)

• 多行注释：[alt+shift+A]

• 多行注释：/**

2. 移动行：alt+up/down

3. 显示/隐藏左侧目录栏 ctrl + b

4. 复制当前行：shift + alt +up/down

5. 删除当前行：shift + ctrl + k

6. 控制台终端显示与隐藏：ctrl + ~

7. 查找文件/安装vs code 插件地址：ctrl + p

8. 代码格式化：shift + alt +f

9. 新建一个窗口 : ctrl + shift + n

10. 行增加缩进: ctrl + [

11. 行减少缩进: ctrl + ]

12. 裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x

13. 字体放大/缩小: ctrl + ( + 或 - )

14. 拆分编辑器 : ctrl + 1/2/3

15. 切换窗口 : ctrl + shift + left/right

16. 关闭编辑器窗口 : ctrl + w

17. 关闭所有窗口 : ctrl + k + w

18. 切换全屏 : F11

19. 自动换行 : alt + z

20. 显示git : ctrl + shift + g

21. 全局查找文件：ctrl + shift + f

22. 显示相关插件的命令(如：git log)：ctrl + shift + p

23. 选中文字：shift + left / right / up / down

24. 折叠代码： ctrl + k + 0-9 (0是完全折叠)

25. 展开代码： ctrl + k + j (完全展开代码)

26. 删除行 ： ctrl + shift + k

27. 快速切换主题：ctrl + k / ctrl + t

28. 快速回到顶部 ： ctrl + home

29. 快速回到底部 : ctrl + end

30. 格式化选定代码 ：ctrl + k / ctrl +f

31. 选中代码 ： shift + 鼠标左键

32. 多行同时添加内容（光标） ：ctrl + alt + up/down

33. 全局替换：ctrl + shift + h

34. 当前文件替换：ctrl + h

35. 打开最近打开的文件：ctrl + r

36. 打开新的命令窗：ctrl + shift + c

vs code 的常用插件

1. Auto Rename Tag 修改html标签，自动帮你完成尾部闭合标签的同步修改，和webstorm一样。

2. Auto Close Tag 自动闭合HTML标签

3. Beautiful 格式化代码的工具

4. Dash Dash是MacOS的API文档浏览器和代码段管理器

5. Ejs Snippets ejs 代码提示

6. ESLint 检查javascript语法错误与提示

7. File Navigator 快速查找文件

8. Git History(git log) 查看git log

9. Gulp Snippets 写gulp时用到，gulp语法提示。

10. HTML CSS Support 在HTML标签上写class智能提示当前项目所支持的样式

11. HTML Snippets 超级好用且初级的H5代码片段以及提示

12. Debug for Chrome 让vs code映射chrome的debug功能，静态页面都可以用vscode来打断点调试.配饰稍微复杂一点

13. Document this Js的注释模板

14. jQuery Code Snippets jquery提示工具

15. Html2jade html模板转pug模板

16. JS-CSS-HTML Formatter 格式化

17. Npm intellisense require 时的包提示工具

18. Open in browser 打开默认浏览器

19. One Dark Theme 一个vs code的主题

20. Path Intellisense 自动路径补全.默认不带这个功能

21. Project Manager 多个项目之间快速切换的工具

22. Pug(Jade) snippets pug语法提示

23. React Components 根据文件名创建反应组件代码。

24. React Native Tools reactNative工具类为React Native项目提供了开发环境。

25. Stylelint css/sass代码审查

26. Typings auto installer 安装vscode 的代码提示依赖库，基于typtings的

27. View In Browser 默认浏览器查看HTML文件（快捷键Ctrl+F1可以修改）

28. Vscode-icons 让vscode资源目录加上图标.必备

29. VueHelper Vue2代码段（包括Vue2 api.vue-router2.vuex2）

30. Vue 2 Snippets vue必备vue代码提示

31. Vue-color vue语法高亮主题

32. Auto-Open Markdown Preview markdown文件自动开启预览

33. EverMonkey 印象笔记

34. atom one dark atom的一个高亮主题(个人推荐)

常用的电脑快捷键

1. ctrl + shift + delete 快速清除浏览器缓存

2. ctrl + alt + delete 快速进入任务管理器页面

3. window + L 快速锁定电脑

4. window + d 所有窗口最小化

5. window + e 打开我的资源管理器(我的电脑)

6. window + f 快速打开搜索窗口

7. alt + tab 快速查看打开的应用与窗口

vs code 的常用快捷键

1. 注释：

• 单行注释：[ctrl+k,ctrl+c] 或 ctrl+/

• 取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)

• 多行注释：[alt+shift+A]

• 多行注释：/**

2. 移动行：alt+up/down

3. 显示/隐藏左侧目录栏 ctrl + b

4. 复制当前行：shift + alt +up/down

5. 删除当前行：shift + ctrl + k

6. 控制台终端显示与隐藏：ctrl + ~

7. 查找文件/安装vs code 插件地址：ctrl + p

8. 代码格式化：shift + alt +f

9. 新建一个窗口 : ctrl + shift + n

10. 行增加缩进: ctrl + [

11. 行减少缩进: ctrl + ]

12. 裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x

13. 字体放大/缩小: ctrl + ( + 或 - )

14. 拆分编辑器 : ctrl + 1/2/3

15. 切换窗口 : ctrl + shift + left/right

16. 关闭编辑器窗口 : ctrl + w

17. 关闭所有窗口 : ctrl + k + w

18. 切换全屏 : F11

19. 自动换行 : alt + z

20. 显示git : ctrl + shift + g

21. 全局查找文件：ctrl + shift + f

22. 显示相关插件的命令(如：git log)：ctrl + shift + p

23. 选中文字：shift + left / right / up / down

24. 折叠代码： ctrl + k + 0-9 (0是完全折叠)

25. 展开代码： ctrl + k + j (完全展开代码)

26. 删除行 ： ctrl + shift + k

27. 快速切换主题：ctrl + k / ctrl + t

28. 快速回到顶部 ： ctrl + home

29. 快速回到底部 : ctrl + end

30. 格式化选定代码 ：ctrl + k / ctrl +f

31. 选中代码 ： shift + 鼠标左键

32. 多行同时添加内容（光标） ：ctrl + alt + up/down

33. 全局替换：ctrl + shift + h

34. 当前文件替换：ctrl + h

35. 打开最近打开的文件：ctrl + r

36. 打开新的命令窗：ctrl + shift + c

vs code 的常用插件

1. Auto Rename Tag 修改html标签，自动帮你完成尾部闭合标签的同步修改，和webstorm一样。

2. Auto Close Tag 自动闭合HTML标签

3. Beautiful 格式化代码的工具

4. Dash Dash是MacOS的API文档浏览器和代码段管理器

5. Ejs Snippets ejs 代码提示

6. ESLint 检查javascript语法错误与提示

7. File Navigator 快速查找文件

8. Git History(git log) 查看git log

9. Gulp Snippets 写gulp时用到，gulp语法提示。

10. HTML CSS Support 在HTML标签上写class智能提示当前项目所支持的样式

11. HTML Snippets 超级好用且初级的H5代码片段以及提示

12. Debug for Chrome 让vs code映射chrome的debug功能，静态页面都可以用vscode来打断点调试.配饰稍微复杂一点

13. Document this Js的注释模板

14. jQuery Code Snippets jquery提示工具

15. Html2jade html模板转pug模板

16. JS-CSS-HTML Formatter 格式化

17. Npm intellisense require 时的包提示工具

18. Open in browser 打开默认浏览器

19. One Dark Theme 一个vs code的主题

20. Path Intellisense 自动路径补全.默认不带这个功能

21. Project Manager 多个项目之间快速切换的工具

22. Pug(Jade) snippets pug语法提示

23. React Components 根据文件名创建反应组件代码。

24. React Native Tools reactNative工具类为React Native项目提供了开发环境。

25. Stylelint css/sass代码审查

26. Typings auto installer 安装vscode 的代码提示依赖库，基于typtings的

27. View In Browser 默认浏览器查看HTML文件（快捷键Ctrl+F1可以修改）

28. Vscode-icons 让vscode资源目录加上图标.必备

29. VueHelper Vue2代码段（包括Vue2 api.vue-router2.vuex2）

30. Vue 2 Snippets vue必备vue代码提示

31. Vue-color vue语法高亮主题

32. Auto-Open Markdown Preview markdown文件自动开启预览

33. EverMonkey 印象笔记

34. atom one dark atom的一个高亮主题(个人推荐)

常用的电脑快捷键

1. ctrl + shift + delete 快速清除浏览器缓存

2. ctrl + alt + delete 快速进入任务管理器页面

3. window + L 快速锁定电脑

4. window + d 所有窗口最小化

5. window + e 打开我的资源管理器(我的电脑)

6. window + f 快速打开搜索窗口

7. alt + tab 快速查看打开的应用与窗口

test page ✌

digraph example1 {
    1 -> 2 -> { 4, 5 };
    1 -> 3 -> { 6, 7 };
}

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

+--------+   +-------+    +-------+
    |        | --+ ditaa +--> |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |     {d}|   |       |    |       |
    +---+----+   +-------+    +-------+
        :                         ^
        |       Lots of work      |
        +-------------------------+

@startgantt
[Prototype design] requires 15 days
[Test prototype] requires 10 days
-- All example --
[Task 1 (1 day)] requires 1 day
[T2 (5 days)] requires 5 days
[T3 (1 week)] requires 1 week
[T4 (1 week and 4 days)] requires 1 week and 4 days
[T5 (2 weeks)] requires 2 weeks
@endgantt

test page ✌