Merge remote-tracking branch 'origin/main'
This commit is contained in:
jimmy committed
commit
4f5673b015
43 files changed
+1330
-210
No files matched your search
@@ -0,0 +1,38 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce**
|
||||
Steps to reproduce the behavior:
|
||||
1. Go to '...'
|
||||
2. Click on '....'
|
||||
3. Scroll down to '....'
|
||||
4. See error
|
||||
|
||||
**Expected behavior**
|
||||
A clear and concise description of what you expected to happen.
|
||||
|
||||
**Screenshots**
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
|
||||
**Desktop (please complete the following information):**
|
||||
- OS: [e.g. iOS]
|
||||
- Browser [e.g. chrome, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Smartphone (please complete the following information):**
|
||||
- Device: [e.g. iPhone6]
|
||||
- OS: [e.g. iOS8.1]
|
||||
- Browser [e.g. stock browser, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.**
|
||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like**
|
||||
A clear and concise description of what you want to happen.
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
A clear and concise description of any alternative solutions or features you've considered.
|
||||
|
||||
**Additional context**
|
||||
Add any other context or screenshots about the feature request here.
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
# Security Policy
|
||||
|
||||
## Supported Versions
|
||||
|
||||
Use this section to tell people about which versions of your project are
|
||||
currently being supported with security updates.
|
||||
|
||||
| Version | Supported |
|
||||
| ------- | ------------------ |
|
||||
| 5.1.x | :white_check_mark: |
|
||||
| 5.0.x | :x: |
|
||||
| 4.0.x | :white_check_mark: |
|
||||
| < 4.0 | :x: |
|
||||
|
||||
## Reporting a Vulnerability
|
||||
|
||||
Use this section to tell people how to report a vulnerability.
|
||||
|
||||
Tell them where to go, how often they can expect to get an update on a
|
||||
reported vulnerability, what to expect if the vulnerability is accepted or
|
||||
declined, etc.
|
||||
@@ -1,88 +1,88 @@
|
||||
import { defineConfig, type SiteConfig } from 'vitepress'
|
||||
import {defineConfig, type SiteConfig} from 'vitepress'
|
||||
// 自动导入 TDesign
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { TDesignResolver } from 'unplugin-vue-components/resolvers'
|
||||
import {TDesignResolver} from 'unplugin-vue-components/resolvers'
|
||||
|
||||
import { handleHeadMeta } from '../theme/utils/handleHeadMeta'
|
||||
import { search as zhSearch } from './zh'
|
||||
import {handleHeadMeta} from '../theme/utils/handleHeadMeta'
|
||||
import {search as zhSearch} from './zh'
|
||||
import sidebar from '../../../autoSidebar'
|
||||
|
||||
// https://vitepress.dev/reference/site-config
|
||||
export default defineConfig({
|
||||
lastUpdated: true,
|
||||
cleanUrls: true,
|
||||
ignoreDeadLinks: true,
|
||||
// sitemap: {
|
||||
// hostname: 'https://duyl328.github.io',
|
||||
// },
|
||||
// base: 'https://duyl328.github.io',
|
||||
base: process.env.BASE || '/',
|
||||
head: [
|
||||
// 谷歌分析，暂不使用
|
||||
// ['script',
|
||||
// {
|
||||
// async: '',
|
||||
// src: 'https://www.googletagmanager.com/gtag/js?id=G-MB7XVBG1TQ',
|
||||
// }],
|
||||
// [
|
||||
// 'script',
|
||||
// {},
|
||||
// `window.dataLayer = window.dataLayer || [];
|
||||
// function gtag(){dataLayer.push(arguments);}
|
||||
// gtag('js', new Date());
|
||||
// gtag('config', 'G-MB7XVBG1TQ');`,
|
||||
// ],
|
||||
|
||||
[
|
||||
'link',
|
||||
{
|
||||
rel: 'icon',
|
||||
// href: '',
|
||||
},
|
||||
],
|
||||
],
|
||||
// https://vitepress.dev/reference/site-config#transformhead
|
||||
async transformHead (context) {
|
||||
return handleHeadMeta(context)
|
||||
},
|
||||
buildEnd: (config: SiteConfig) => {
|
||||
},
|
||||
|
||||
themeConfig: {
|
||||
// https://vitepress.dev/reference/default-theme-config
|
||||
outline: [2, 4],
|
||||
|
||||
search: {
|
||||
provider: 'local',
|
||||
options: {
|
||||
locales: { ...zhSearch },
|
||||
},
|
||||
lastUpdated: true,
|
||||
cleanUrls: true,
|
||||
ignoreDeadLinks: true,
|
||||
sitemap: {
|
||||
hostname: 'https://duyl328.github.io',
|
||||
},
|
||||
|
||||
externalLinkIcon: true,
|
||||
},
|
||||
|
||||
markdown: {
|
||||
math: true,
|
||||
},
|
||||
|
||||
vite: {
|
||||
plugins: [
|
||||
// 自动更新列表
|
||||
sidebar('docs/.vitepress', '/docs/notes'),
|
||||
AutoImport({
|
||||
resolvers: [
|
||||
TDesignResolver({
|
||||
library: 'vue-next',
|
||||
})],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [
|
||||
TDesignResolver({
|
||||
library: 'vue-next',
|
||||
})],
|
||||
}),
|
||||
// base: 'https://duyl328.github.io',
|
||||
base: process.env.BASE || '/',
|
||||
head: [
|
||||
// 谷歌分析，暂不使用
|
||||
['script',
|
||||
{
|
||||
async: 'async',
|
||||
src: 'https://www.googletagmanager.com/gtag/js?id=G-E6X527581S',
|
||||
}],
|
||||
[
|
||||
'script',
|
||||
{},
|
||||
`window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-E6X527581S');`,
|
||||
],
|
||||
|
||||
[
|
||||
'link',
|
||||
{
|
||||
rel: 'icon',
|
||||
// href: '',
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
// https://vitepress.dev/reference/site-config#transformhead
|
||||
async transformHead(context) {
|
||||
return handleHeadMeta(context)
|
||||
},
|
||||
buildEnd: (config: SiteConfig) => {
|
||||
},
|
||||
|
||||
themeConfig: {
|
||||
// https://vitepress.dev/reference/default-theme-config
|
||||
outline: [2, 4],
|
||||
|
||||
search: {
|
||||
provider: 'local',
|
||||
options: {
|
||||
locales: {...zhSearch},
|
||||
},
|
||||
},
|
||||
|
||||
externalLinkIcon: true,
|
||||
},
|
||||
|
||||
markdown: {
|
||||
math: true,
|
||||
},
|
||||
|
||||
vite: {
|
||||
plugins: [
|
||||
// 自动更新列表
|
||||
sidebar('docs/.vitepress', '/docs/notes'),
|
||||
AutoImport({
|
||||
resolvers: [
|
||||
TDesignResolver({
|
||||
library: 'vue-next',
|
||||
})],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [
|
||||
TDesignResolver({
|
||||
library: 'vue-next',
|
||||
})],
|
||||
}),
|
||||
],
|
||||
},
|
||||
})
|
||||
+17
-1
@@ -5,6 +5,22 @@ editLink: false
|
||||
lastUpdated: false
|
||||
isNoComment: true
|
||||
isNoBackBtn: true
|
||||
head:
|
||||
- - meta
|
||||
- name: google-site-verification
|
||||
content: 3mPuiYC0wAVCBtDCme-qNp7JrpYrua8fPLZyFgVZA98
|
||||
- - meta
|
||||
- name: msvalidate.01
|
||||
content: 74145A0C19682BC79C3B9FC837149152
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: vitepress, 文档, 网站
|
||||
- - meta
|
||||
- property: og:title
|
||||
content: 我的主页
|
||||
- - meta
|
||||
- property: og:description
|
||||
content: 这是一个 VitePress 站点
|
||||
---
|
||||
|
||||
<!-- 之所以将代码写在 md 里面，而非单独封装为 Vue 组件，因为 aside 不会动态刷新，参考 https://github.com/vuejs/vitepress/issues/2686 -->
|
||||
@@ -15,7 +31,7 @@ isNoBackBtn: true
|
||||
class="header-anchor"
|
||||
:href="`#${post.title}`"
|
||||
:aria-label="`Permalink to "${post.title}"`"
|
||||
></a
|
||||
></a
|
||||
>
|
||||
<div class="post-date hollow-text">{{ post.date.string }}</div>
|
||||
</h2>
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- JDBC
|
||||
- Notes
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
JDBC(Java Database Connectivity)
|
||||
是一个独立于特定数据库管理系统、通用的SQL数据库存取和操作的公共接口（一组API），定义了用来访问数据库的标准Java类库，（java.sql,javax.sql）使用这些类库可以以一种标准的方法、方便地访问数据库资源。
|
||||
|
||||
@@ -15,5 +23,4 @@ JDBC的目标是使Java程序员使用JDBC可以连接任何提供了JDBC驱动
|
||||
|
||||
总结如下：
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- JDBC
|
||||
- Notes
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
JDBC接口（API）包括两个层次：
|
||||
|
||||
面向应用的API：Java API，抽象接口，供应用程序开发人员使用（连接数据库，执行SQL语句，获得结果）。
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- JDBC
|
||||
- Notes
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
## 第一种方式
|
||||
|
||||
这种方式注册的驱动数据最原始的方式，不常用
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- JDBC
|
||||
- Notes
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
| ResultSet | executeQuery(String sql) <br />执行给定的 SQL 语句，该语句返回单个 ResultSet 对象。 |
|
||||
|-----------|-------------------------------------------------------------------|
|
||||
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- JDBC
|
||||
- Notes
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
## PreparedStatement的使用
|
||||
|
||||
- 可以通过调用 Connection 对象的 preparedStatement(String sql) 方法获取 PreparedStatement 对象
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- JDBC
|
||||
- Notes
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
## JDBC中的事务
|
||||
|
||||
JDBC中的默认事务是自动提交
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## sql、DB、DBMS分别是什么，他们之间的关系？
|
||||
|
||||
DB:
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 卸载MySQL
|
||||
|
||||
1. 双击安装包，点击下一步，然后点击remove。卸载。
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 常用命令
|
||||
|
||||
退出MySQL：exit;
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 简单查询（DQL）
|
||||
|
||||
语法格式：select 字段名1 ，字段名2 ，字段名3，。。。From 表名；
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 条件查询
|
||||
|
||||
语法：
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 排序
|
||||
|
||||
语法：
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 分组函数（多行处理函数）
|
||||
|
||||
多行处理函数特点：输入多行，输出结果是一行
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
|
||||
## 连接查询分类
|
||||
根据语法出现年代划分：
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 表的创建
|
||||
|
||||
建表语句：
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 删表
|
||||
|
||||
```sql
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
语法：
|
||||
|
||||
```sql
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 约束和常见约束
|
||||
|
||||
在创建表时可以添加约束，可以给表的字段增加约束，添加约束的目的是为了表中数据的完整性、合法性、唯一性
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 存储引擎和字符集
|
||||
|
||||
MySQL 默认存储引擎是 InnoDB 方式。
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 事务概述
|
||||
|
||||
一个事务时一个完整的逻辑单元，不可再分。
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 索引作用
|
||||
|
||||
相当于一本书的目录。
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 什么是视图
|
||||
|
||||
视图是一种根据查询（也就是SELECT表达式）定义的数据库对象，用于获取想要看到和使用的局部数据。
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 什么是三范式
|
||||
|
||||
设计表的依据，按照这个三范式设计的表不会出现数据冗余。
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
---
|
||||
date: 2025-01-19
|
||||
tags:
|
||||
- Notes
|
||||
- MySql
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
|
||||
## 练习
|
||||
|
||||
基础：
|
||||
|
||||
+17
-10
@@ -1,4 +1,4 @@
|
||||
---
|
||||
---
|
||||
layout: doc
|
||||
title: 如何在Vue3的Store中使用i18n
|
||||
date: 2022-06-27
|
||||
@@ -6,6 +6,11 @@ tags:
|
||||
- 编程
|
||||
- 工作
|
||||
- 学习
|
||||
- vue
|
||||
- JavaScript
|
||||
- i18n
|
||||
- BUG
|
||||
- Blog
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
@@ -14,10 +19,12 @@ head:
|
||||
- name: keywords
|
||||
content: vue vue3 i18n js javascript
|
||||
editLink: false
|
||||
lastUpdated: true
|
||||
lastUpdated: 2025-01-20T10:08:00
|
||||
---
|
||||
|
||||
> 文章摘要
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
> :black_nib: 文章摘要
|
||||
<!-- DESC SEP -->
|
||||
|
||||
这篇文章讨论了在 Vue3 环境下使用 vue-i18n 和 element-plus 处理多语言提示时遇到的问题及解决方案。具体来说，文章描述了在使用
|
||||
@@ -39,7 +46,7 @@ i18n 方法，而不是依赖 useI18n()。
|
||||
|
||||
几乎都最新版本了
|
||||
|
||||
|
||||
|
||||
|
||||
## 问题复现
|
||||
|
||||
@@ -60,31 +67,31 @@ const { t, d, n, locale } = useI18n()
|
||||
|
||||
当在创建对应的i18n时，会先将对应的内容进行创建和导出：
|
||||
|
||||
|
||||
|
||||
|
||||
在这个文件中创建了i18n，并且对特定的配置项进行了指定，但是导出的这个i18n中有什么？
|
||||
|
||||
|
||||
|
||||
|
||||
在配置的文件中已经存在了要使用的方法，也就是导出的：`t`,`d`,`n`等，要使用的方法也在这里面
|
||||
|
||||
|
||||
|
||||
|
||||
在这个`global`中存在了对应的全局的方法，不需要通过i18n指定的方法进行引入执行，可以直接使用，所以这个就是要手动引入的内容
|
||||
|
||||
## 解决
|
||||
|
||||
|
||||
|
||||
|
||||
使用这种方法问题得到解决，不过在尝试过程中，这种两种方式使用的i18n也是有区别的
|
||||
|
||||
在引入的过程中，因为方式不同，所以引入的方法其实也不是同一个
|
||||
|
||||
|
||||
|
||||
|
||||
不过在对应的注释中也能略微看出二者的区别
|
||||
|
||||
|
||||
|
||||
|
||||
使用方法引入的‘t’应当也有特有的内容，这里只进行列举，不继续深入探讨。
|
||||
|
||||
+10
-5
@@ -1,10 +1,14 @@
|
||||
---
|
||||
---
|
||||
layout: doc
|
||||
title: JavaScript和Vue中实现表格(table)固定表头和首列
|
||||
date: 2022-08-26
|
||||
tags:
|
||||
- 编程
|
||||
- 学习
|
||||
- Html
|
||||
- JavaScript
|
||||
- vue
|
||||
- Blog
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
@@ -13,11 +17,12 @@ head:
|
||||
- name: keywords
|
||||
content: vue vue3 js javascript
|
||||
editLink: false
|
||||
lastUpdated: true
|
||||
|
||||
lastUpdated: 2025-01-20T10:09:00
|
||||
---
|
||||
|
||||
> 文章摘要
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
> :black_nib: 文章摘要
|
||||
<!-- DESC SEP -->
|
||||
这篇文章介绍了如何在 JS 或 Vue 中实现表格的列和表头固定功能，适用于不同的开发环境（如原生
|
||||
JavaScript、Vue、React、小程序等）。文章详细展示了实现这一功能的思路和具体步骤，包括使用 Vue3 和 TypeScript 结合 Less
|
||||
@@ -30,7 +35,7 @@ JavaScript、Vue、React、小程序等）。文章详细展示了实现这一
|
||||
|
||||
实际效果展示：
|
||||
|
||||
|
||||
|
||||
|
||||
## 思路概述
|
||||
|
||||
+6
-5
@@ -1,21 +1,22 @@
|
||||
---
|
||||
---
|
||||
layout: doc
|
||||
title: 在JavaScript获取Promise的状态
|
||||
date: 2022-08-09
|
||||
tags:
|
||||
- 编程
|
||||
- 学习
|
||||
- JavaScript
|
||||
- Blog
|
||||
head:
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: js javascript
|
||||
editLink: false
|
||||
lastUpdated: true
|
||||
|
||||
lastUpdated: 2025-01-20T10:08:00
|
||||
---
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
|
||||
> 文章摘要
|
||||
> :black_nib: 文章摘要
|
||||
|
||||
<!-- DESC SEP -->
|
||||
|
||||
+17
-15
@@ -1,10 +1,12 @@
|
||||
---
|
||||
---
|
||||
layout: doc
|
||||
title: Vue3新属性 — css中使用v-bind（v-bind in css）
|
||||
date: 2022-08-11
|
||||
date: 2024-08-11
|
||||
tags:
|
||||
- 编程
|
||||
- 学习
|
||||
- vue
|
||||
- Blog
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
@@ -13,11 +15,11 @@ head:
|
||||
- name: keywords
|
||||
content: vue vue3 js javascript v-bind
|
||||
editLink: false
|
||||
lastUpdated: true
|
||||
|
||||
lastUpdated: 2025-01-20T10:09:00
|
||||
---
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
> 文章摘要
|
||||
> :black_nib: 文章摘要
|
||||
|
||||
<!-- DESC SEP -->
|
||||
|
||||
@@ -37,11 +39,11 @@ LESS：与 CSS 类似，使用变量和 v-bind() 绑定数据，但在 LESS 中
|
||||
|
||||
# Vue3新属性：CSS 中的 `v-bind()`
|
||||
|
||||
## 写在前面：
|
||||
## 写在前面 {#write-in-front}
|
||||
|
||||
本文主要介绍Vue3中的新增的`v-bind()`的常用使用方式，主要包括在`css`,`less`,`scss`中的使用，可以参考官方文档查看：[Vue3官方文档](https://cn.vuejs.org/api/sfc-css-features.html#v-bind-in-css)，本文将主要通过一个demo中的使用来展示
|
||||
|
||||
## 实际使用：
|
||||
## 实际使用{#actual-use}
|
||||
|
||||
先创建一个通过的页面结构，因为是结构是通用内容，所以这里在直接进行简单的定义
|
||||
|
||||
@@ -216,19 +218,19 @@ LESS：与 CSS 类似，使用变量和 v-bind() 绑定数据，但在 LESS 中
|
||||
|
||||
首先是第一种，如果使用的话会直接报错，报错内容为：
|
||||
|
||||
|
||||
|
||||
|
||||
因为`less`的直接报错，导致定义的变量压根就没有被编译出来，从而报错
|
||||
|
||||
第二种和第三种错误一样：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
在这种使用方式中，变量可以正确承接，但是不能完成拼接的操作，导致只有变量而没有单位，并且可以看出最终都被翻译为`var(--变量名)`来执行，所以顺便也对`var()`进行了拼接测试
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -268,18 +270,18 @@ LESS：与 CSS 类似，使用变量和 v-bind() 绑定数据，但在 LESS 中
|
||||
|
||||
结果也非常让不出意外的都不行，并且在第二种方式也是直接报错的，在寻找问题的过程中，发现了更加`amazing`的事情：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
这个变量压根就没定义，或者说没被识别到，所以重新模仿`Vue`直接定义行内样式，并且使用拼接尝试：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
这种直接的拼接方式直接将所有内容都进行了拼接，再换一种思路：使用`V-bind`这个V-bind指的是数据的而不是样式：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -390,14 +392,14 @@ LESS：与 CSS 类似，使用变量和 v-bind() 绑定数据，但在 LESS 中
|
||||
|
||||
`v-bind() in css`并没有进行劫持或者其他操作，他主要完成的任务是将`v-bind()`中的内容通过自定义属性的方式进行了重新定义，在编译后代码中可以看到
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
所有的数据直接在自定义属性中进行，并且直接对应引用，自定义属性的内容的改变影响视图的效果，从而达到数据影响视图的效果，这个在使用中`less`,`css`中完全没有问题
|
||||
|
||||
但是，在`scss`中，因为编译之后`名字无法进行匹配`从而造成样式的丢失
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
可以看到，使用的名字和编译的名字并不匹配，从而出错，这个使用时需要注意
|
||||
+6
-4
@@ -1,10 +1,12 @@
|
||||
---
|
||||
---
|
||||
layout: doc
|
||||
title: Vue3中的ref为何要用.value进行值的调用？
|
||||
date: 2022-08-25
|
||||
tags:
|
||||
- 编程
|
||||
- 学习
|
||||
- vue
|
||||
- Blog
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
@@ -13,11 +15,11 @@ head:
|
||||
- name: keywords
|
||||
content: vue vue3 js javascript
|
||||
editLink: false
|
||||
lastUpdated: true
|
||||
|
||||
lastUpdated: 2025-01-20T10:09:00
|
||||
---
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
> 文章摘要
|
||||
> :black_nib: 文章摘要
|
||||
<!-- DESC SEP -->
|
||||
|
||||
这篇文章对比了 Vue2 和 Vue3 中的数据响应式处理方式，特别是如何定义和代理数据。在 Vue2 中，所有数据都通过一个统一的 data 对象进行管理，使用 Object.defineProperty 来实现响应式绑定。而在 Vue3 中，数据定义变得更加灵活，允许直接使用单一的数据类型，通过 ref 和 reactive 来创建响应式数据。虽然 ref 看似代理了普通数据，但实际上 Vue3 使用了 Proxy 技术对数据进行处理，这使得响应式机制变得更加高效和灵活。
|
||||
+6
-4
@@ -6,18 +6,20 @@ tags:
|
||||
- 编程
|
||||
- 学习
|
||||
- 设计
|
||||
- Blog
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
content: 有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。与大家共勉之。
|
||||
content: 这篇文章讨论了中英文混排时，是否应在汉字与拉丁字母之间加入空格的争议。研究和实践表明，虽然专业排版软件如Adobe InDesign通常会自动调整汉字与西文之间的间距，但许多普通用户常常手动插入半角空格以保证文本的可读性和美观。文章介绍了“空格派”在排版中的一些习惯，阐述了何时应该加空格、何时不加空格，并引用了刘昕等人关于中英文混排的标准，最后强调了空格的使用对提高文本阅读体验的重要性。
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: 文字排版 布局
|
||||
editLink: false
|
||||
lastUpdated: true
|
||||
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
> 文章摘要
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
> :black_nib: 文章摘要
|
||||
<!-- DESC SEP -->
|
||||
|
||||
这篇文章讨论了中英文混排时，是否应在汉字与拉丁字母之间加入空格的争议。研究和实践表明，虽然专业排版软件如Adobe InDesign通常会自动调整汉字与西文之间的间距，但许多普通用户常常手动插入半角空格以保证文本的可读性和美观。文章介绍了“空格派”在排版中的一些习惯，阐述了何时应该加空格、何时不加空格，并引用了刘昕等人关于中英文混排的标准，最后强调了空格的使用对提高文本阅读体验的重要性。
|
||||
+13
-8
@@ -4,18 +4,23 @@ title: TypeScript 应该被放弃吗
|
||||
date: 2024-08-04
|
||||
tags:
|
||||
- 编程
|
||||
- 学习
|
||||
- 思考
|
||||
- TypeScript
|
||||
- Blog
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
content: Turbo 8 放弃 TypeScript：作者认为 TypeScript 的类型检查反而增加了开发中的负担，并且声明类型复杂化代码，减少了开发效率。这个观点在 Reddit 和知乎引发了激烈讨论，部分评论指出 Turbo 8 并不具备广泛影响力，且作者习惯发表反向意见。TypeScript 的额外成本：第二篇文章提到，在某些场景下，TypeScript 的类型体操带来不必要的复杂度，尤其是对于小型项目，编写精确的类型定义可能比核心逻辑代码更为冗长。然而，TypeScript 相比于 JavaScript 在维护性和可扩展性上具有优势，尤其是对于框架和类库的开发者而言，尽管带来一些额外的维护成本。总体来看，放弃 TypeScript 的选择多见于小型或开源项目的维护者，而对于大多数开发者来说，TypeScript 提供的类型系统和可维护性仍然是更受欢迎的选择。
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: vue vue3 js javascript react ts typescript
|
||||
editLink: false
|
||||
lastUpdated: true
|
||||
|
||||
lastUpdated: 2025-01-20T10:09:34
|
||||
---
|
||||
|
||||
> 文章摘要
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
> :black_nib: 文章摘要
|
||||
|
||||
<!-- DESC SEP -->
|
||||
|
||||
@@ -38,10 +43,10 @@ TypeScript 的额外成本：第二篇文章提到，在某些场景下，TypeSc
|
||||
抛出这个问题主要基于22年和23年发生的一些事件：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
并且Svelte 不是第一个放弃 TypeScript 的前端框架。早在 2020 年，Deno 就迁移了一部分內部 TypeScript 代码到 JavaScript，以减少构建时间。
|
||||
|
||||
@@ -67,13 +72,13 @@ TypeScript 的额外成本：第二篇文章提到，在某些场景下，TypeSc
|
||||
|
||||
并且对于这篇文章，Reddit的评论区也是活力十足
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
并且在知乎对于这个问题的评价更加激进：
|
||||
|
||||
|
||||
|
||||
|
||||
以下是文字版本：
|
||||
|
||||
@@ -1,20 +1,21 @@
|
||||
---
|
||||
layout: doc
|
||||
title: 登录功能的思考
|
||||
date: 2024-08-05
|
||||
date: 2023-08-05
|
||||
tags:
|
||||
- 编程
|
||||
- 学习
|
||||
- 想法
|
||||
- Blog
|
||||
head:
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: 登录 架构
|
||||
editLink: false
|
||||
lastUpdated: true
|
||||
|
||||
lastUpdated: 2025-01-20T10:10:00
|
||||
---
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
> 文章摘要
|
||||
> :black_nib: 文章摘要
|
||||
<!-- DESC SEP -->
|
||||
|
||||
这篇文章介绍了如何安全地存储用户数据，包括用户名、密码哈希、邮箱等，强调使用 bcrypt 加密密码和唯一盐来提升安全性。它还详细解释了 HTTPS 如何通过加密、身份验证和数据完整性保护来确保通信安全，并探讨了前端加密与 HTTPS 的配合使用。此外，文章还讨论了如何管理 SSL/TLS 证书、Token 存储和安全性防护策略，如防止 XSS 和 CSRF 攻击。
|
||||
@@ -115,7 +116,7 @@ lastUpdated: true
|
||||
8. 然后服务器将加密后的密文发送给客户端。
|
||||
9. 客户端收到服务器发送来的密文，用客户端密钥对其进行对称解密，得到服务器发送的数据。这样HTTPS中的第二个HTTP请求结束，整个HTTPS传输完成。
|
||||
|
||||
|
||||
|
||||
|
||||
它通过以下方式保证数据的安全性：
|
||||
|
||||
@@ -3,22 +3,25 @@ layout: doc
|
||||
title: Vue还是React?
|
||||
date: 2024-08-04
|
||||
tags:
|
||||
- 编程
|
||||
- 学习
|
||||
- 思考
|
||||
- 编程
|
||||
- 思考
|
||||
- vue
|
||||
- React
|
||||
- Blog
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
content: Vue和React、Nextjs如何选择
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: vue vue3 js javascript react ts typescript
|
||||
- - meta
|
||||
- name: description
|
||||
content: 这篇文章探讨了 Vue、React 和 Next.js 之间的选择，并深入分析了 React 的一些优缺点。作者指出，虽然 Vue 在国内市场占据主导地位，React 在国外仍然保持强大的活力。但与此同时，React 面临不少批评，特别是其逐渐显现的技术债务和性能问题。文章引用了一些反对 React 的观点，强调 React 已显老化，且与其他框架相比，存在着难以兼容和过度依赖自定义模块的问题。同时，文章还提到其他框架如 Svelte 的优越性，认为它能提供类似 React 的功能，但更加简洁和高效。
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: vue vue3 js javascript react ts typescript
|
||||
editLink: false
|
||||
lastUpdated: true
|
||||
|
||||
lastUpdated: 2025-01-20T10:09:34
|
||||
---
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
> 文章摘要
|
||||
|
||||
> :black_nib: 文章摘要
|
||||
|
||||
<!-- DESC SEP -->
|
||||
|
||||
@@ -38,17 +41,17 @@ lastUpdated: true
|
||||
|
||||
但和国内相悖的是，在`JetBrains`与`StackOverflow`在2023年的数据报告中，在前端方面数据，`Node`和`React`以压倒性优势领先其他语言
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2023JavaScript趋势报告：
|
||||
|
||||
|
||||
|
||||
|
||||
和国内不同的是，`React`在国外保持着惊人的活力
|
||||
|
||||
@@ -188,7 +191,7 @@ lastUpdated: true
|
||||
> - 如果我们要有一个统治框架，难道我们不希望它没有主见吗？所以 React 真的很好，因为它基本上只是一个带有最小状态管理解决方案的渲染库。有许多其他东西建立在 React 之上，这使得它与其他框架相当。所以即使你考虑元框架，也有很多流行的框架。
|
||||
> - 如果你了解 JavaScript，你几乎了解 React 的所有内容。他不会像Angular那样有很多新的“魔法”（这里指的是Angular引入的新的改变增加了学习成本，如管道，过滤器等）
|
||||
|
||||
|
||||
|
||||
|
||||
##### 观点四：从公司架构思考问题
|
||||
|
||||
+57
-57
@@ -1,76 +1,76 @@
|
||||
---
|
||||
layout: doc
|
||||
title: 主流网站主页布局展示内容及渲染方式调研
|
||||
date: 2024-08-03
|
||||
date: 2023-08-03
|
||||
tags:
|
||||
- 设计
|
||||
- Blog
|
||||
head:
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: 设计 html 布局
|
||||
editLink: false
|
||||
lastUpdated: true
|
||||
|
||||
lastUpdated: 2025-01-20T10:09:34
|
||||
---
|
||||
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
对于大部分信息展示网站中都是通过大块的区域内容展示来展现更多信息，并且国内的对应的网站相对较老，所以UI设计以及UI风格上更加的质朴
|
||||
|
||||
如：
|
||||
![[../../../public/posts/2024/08/10002/image-20240709144917869.png]]
|
||||
|
||||
<img src="/posts/2024/08/10002/image-20240709144917869.png" alt="/posts/2024/08/10002/image-20240709144917869.png" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
根据几个常见的网址论坛可以看出，对于信息的展示主要通过以下几种方式：
|
||||
|
||||
## **标签（板块）**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
大多数论坛网站中在主页显眼位置，主要方便用户快速进入不同的模块或专题，将网站的主要内容和业务展示到用户最先注意到的范围内。
|
||||
|
||||
## 轮播图
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
相对于在通过标签直接进行展示，轮播图的使用在整体调研的网站中占比较低，并且多为较为老旧的UI，并且现在的大环境下用户只想了解希望得到的信息，找到目标信息后，点击查看，得到想要的信息，离开网站。
|
||||
|
||||
@@ -78,25 +78,25 @@ lastUpdated: true
|
||||
|
||||
## 排行（热门）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
最新、最近回复、热门、精选、排行
|
||||
|
||||
@@ -106,11 +106,11 @@ lastUpdated: true
|
||||
|
||||
## 实时新闻（信息）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
在大多数网站中该内容反而并不常见，可能对于论坛平台，更多的是需要有效的信息，而不是新的信息
|
||||
|
||||
@@ -122,49 +122,49 @@ lastUpdated: true
|
||||
|
||||
### 列表形式
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 列表形式（展示更多信息）
|
||||
|
||||
|
||||
|
||||
|
||||
--------
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 问答形式
|
||||
|
||||
|
||||
|
||||
|
||||
### 卡片形式
|
||||
|
||||
|
||||
|
||||
|
||||
### 预览形式
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
综合已经搜索到的信息来看，信息的展示通过内容的不同，也有不同的展示方式，大部分使用的是列表形式，并且尽量展示少的正文，而是主要展示标题（可能这种方式可以增加点击率吧）
|
||||
|
||||
@@ -0,0 +1,179 @@
|
||||
---
|
||||
layout: doc
|
||||
title: tauri 中创建和管理全局 emit 任务
|
||||
date: 2025-01-21
|
||||
tags:
|
||||
- 编程
|
||||
- Blog
|
||||
- tauri
|
||||
- rust
|
||||
- argus
|
||||
- 思考
|
||||
- tokio
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
content: 本文详细介绍了如何在 Tauri 中使用全局 Emit 机制来触发错误信息传递，解决后端错误处理问题。通过创建后台异步任务和管理全局事件，实现在没有前端 command 触发的情况下，后端能够主动触发前端事件的解决方案。
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: Tauri emit Tauri错误处理 Tauri全局事件 Tauri后端 emit触发 Tauri command 与 emit Tauri异步任务管理 Tauri后端错误传递 Tauri frontend emit Tauri异步错误处理
|
||||
editLink: false
|
||||
lastUpdated: 2025-01-21T10:34:34
|
||||
---
|
||||
# Tauri 全局 Emit 任务管理与错误处理机制
|
||||
|
||||
|
||||
> :black_nib: 文章摘要
|
||||
|
||||
<!-- DESC SEP -->
|
||||
在 Tauri 中，前端通过 `listen` API 来监听特定事件，而后端则通过 `AppHandle` 中的 `emit` 方法触发这些事件。然而，由于 `AppHandle` 的生命周期问题，它不能作为全局对象存储，这就引发了一个问题：如何在没有前端 `command` 触发的情况下，从后端触发全局的 `emit`。
|
||||
|
||||
为了解决这个问题，笔者提出了一种通过创建异步任务管理器的方法。通过使用 Tokio 创建一个后台线程来监听 `mpsc` 通道，后端可以通过该通道发送全局错误消息。当错误发生时，消息通过通道发送到前端，前端通过 `emit` API 处理并展示这些信息。此方案避免了 `AppHandle` 的生命周期问题，并保证了全局事件的触发机制。
|
||||
<!-- DESC SEP -->
|
||||
## 前言{#preface}
|
||||
当在使用 `tauri` 时，可以使用其提供的 `command` 通过前端来调用后端，也可以使用 `emit` 通过后端来调用前端，当后端发生错误时，我们需要一种机制将错误信息传递到前端并进行处理。传统的 `command` 机制依赖于前端调用，而 `emit` 则更适合处理这种场景，因为它支持多个事件的触发。通过在多个地方绑定相同的事件，后端可以通过触发 `emit` 来统一通知前端进行错误处理。
|
||||
|
||||
基于此就可以做出很多事情，其中之一就是当后端运行出错时，可以通过全局的 `emit` 将错误信息传递到前端，并通过前端进行展示，或者提示用户错误错误处理，因为后端的报错是不可预知的，所以对于该 `emit` 来说，也应该是全局的，随时可以调用的。
|
||||
|
||||
## `emit` 介绍{#emit-introduce}
|
||||
我们先介绍 `tauri` 中是如何做到 `emit` 的触发和绑定的
|
||||
|
||||
#### 前端监听
|
||||
NPM 软件包提供了用于侦听全局事件和特定于 webview 的事件的 API。`@tauri-apps/api`
|
||||
|
||||
```js{9}
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
|
||||
type DownloadStarted = {
|
||||
url: string;
|
||||
downloadId: number;
|
||||
contentLength: number;
|
||||
};
|
||||
|
||||
listen<DownloadStarted>('download-started', (event) => {
|
||||
console.log(
|
||||
`downloading ${event.payload.contentLength} bytes from ${event.payload.url}`
|
||||
);
|
||||
});
|
||||
```
|
||||
|
||||
绑定方式通过对一个 '频道' 进行监听，然后来监控是否触发，可以定义接收的数据类型来传递数据
|
||||
|
||||
#### 后端触发
|
||||
```rust{4}
|
||||
use tauri::{AppHandle, Emitter};
|
||||
|
||||
#[tauri::command]
|
||||
fn download(app: AppHandle, url: String) {
|
||||
app.emit("download-started", &url).unwrap();
|
||||
for progress in [1, 15, 50, 80, 100] {
|
||||
app.emit("download-progress", progress).unwrap();
|
||||
}
|
||||
app.emit("download-finished", &url).unwrap();
|
||||
}
|
||||
```
|
||||
|
||||
后端的触发使用 `AppHandle` 中提供的 `emit` 函数，调用时
|
||||
1. 通过前端调用后端提供的指令`download` 然后将对应的链接(`url`)传递进来
|
||||
2. 而 `app: AppHandle` 则由 `tauri` 自动填充，这里的 `app` 就是软件的实例
|
||||
3. 当拿到 `app` 后，使用其 `emit` 函数进行触发，从而触发前端的监听
|
||||
|
||||
整个过程在类似点击下载，后端开始下载，并且前端需要展示下载进度的场景没有什么问题，不过还记得我们的目的吗？我们需要完成的是全局的 `emit` 的触发，并通过此完成错误的提示
|
||||
|
||||
这时就会造成一个很严重的问题 :
|
||||
|
||||
> 我们的错误是不可预知的，而前端 `emit` 的触发是需要 `AppHandle` 的，> `AppHandle` 作为 Tauri 应用的实例对象，其生命周期和应用的运行状态密切相关，因此不能存储为全局静态对象。在常规情况下，`emit` 触发需要通过 `AppHandle`，但如果依赖前端的 `command` 触发 `emit`，就会陷入循环问题。为了避免这一问题，我们采用了异步线程管理，通过 `tokio` 和 `mpsc` 通道将事件传递给前端。
|
||||
|
||||
## 想法{#think}
|
||||
我们重新整理一下现在需要做什么，现在需要将后端错误通过全局的 `emit` 进行前端，并且想要触发就需要 `AppHandle` ；并且不能将其存储为静态内容。
|
||||
|
||||
不过仔细观察官方提供的示例，我们的确无法将 `AppHandle` 进行存储，但是就像官方实例中那样，通过 `Command` 不仅可以拿到 `AppHandle` 实例，还可以通过 `while` 等循环方式让 `emit` 多次触发。
|
||||
不过我们可以在 `command` 调用时，可以通过 `takio` 创建一个消息等待的线程，并 `takio` 的消息通知渠道保存起来，通过消息通知来传递触发对应的事件
|
||||
|
||||
## 创建通用线程处理{#common-thread-processing}
|
||||
主要的思路是，创建对应的全局的后台任务处理，并通过循环等待
|
||||
|
||||
创建一个通用的任务管理器：
|
||||
``` rust:line-numbers
|
||||
pub async fn task_h<T, F>(mut rx: mpsc::Receiver<T>, f: F)
|
||||
where
|
||||
F: Fn(T),
|
||||
{
|
||||
// 无限循环确保 Receiver 一直保持活跃
|
||||
loop {
|
||||
match rx.recv().await {
|
||||
Some(task) => {
|
||||
f(task);
|
||||
}
|
||||
None => {
|
||||
// 如果通道关闭，可以选择如何处理（这里是等待并继续）
|
||||
println!("通道关闭，继续等待...");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`task_h` 函数是一个异步任务管理器，它通过 `mpsc` 通道不断接收任务并执行相应的处理。这个函数的作用是确保事件能够在后台持续触发，而不会受到生命周期的限制。`emit_global_msg` 则是一个全局任务初始化函数，它在首次调用时设置状态并启动一个新的线程来处理错误信息的传递。
|
||||
|
||||
使用时，通过将要调用的函数，传递的数据都传递过来，根据我们需求，将会是这样：
|
||||
|
||||
```rust{22}
|
||||
#[tauri::command]
|
||||
pub fn emit_global_msg(app: AppHandle) {
|
||||
let mut is_init = GLOBAL_EMIT_IS_INIT.lock().unwrap();
|
||||
if is_init.clone() {
|
||||
return;
|
||||
}
|
||||
println!("前端 emit 初始化!");
|
||||
*is_init = true;
|
||||
|
||||
let mut emit = GLOBAL_EMIT_APP_HANDLE.lock().unwrap();
|
||||
let (emit_tx, emit_rx) = mpsc::channel::<String>(100);
|
||||
*emit = Some(emit_tx);
|
||||
let f = move |info: String| {
|
||||
app.clone().emit(global_front_emit::GLOBAL_ERROR_MSG_DISPLAY, info).unwrap();
|
||||
};
|
||||
|
||||
// 在一个新的线程中启动 Tokio 运行时
|
||||
thread::spawn(move || {
|
||||
// 创建 Tokio 运行时并运行异步任务
|
||||
let runtime = tokio::runtime::Runtime::new().unwrap();
|
||||
runtime.block_on(async move {
|
||||
task_h(emit_rx, f).await;
|
||||
});
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
`GLOBAL_EMIT_APP_HANDLE` 和 `GLOBAL_EMIT_IS_INIT` 分别用于管理全局事件的发送者和初始化状态。通过 `lock` 锁定这些全局状态，确保多次调用时不会重复初始化，从而避免不必要的资源浪费和逻辑错误。
|
||||
|
||||
获取到 `AppHandle` 后，我们创建一个闭包，并将具体逻辑传入其中。由于该函数会多次触发，我们需要将 `AppHandle` 移入闭包并进行克隆使用。所有的内容准备好后，创建一个新的 `channel` 将`发送者`保存为全局对象，以供后期使用，而`接收者`交给新线程的任务处理者使用。
|
||||
|
||||
最后，通过 `thread::spawn` 启动一个新的线程，并创建一个 `tokio` 运行时来单独运行。
|
||||
|
||||
这个函数在进入运行时后，将一直循环和等待任务，`AppHandle` 会被劫持在其中
|
||||
|
||||
调用时：
|
||||
```rust{14}
|
||||
let emit_option = {
|
||||
let emit = GLOBAL_EMIT_APP_HANDLE.lock().unwrap();
|
||||
emit.clone() // 移出作用域以释放锁
|
||||
};
|
||||
|
||||
if let Some(x) = emit_option.as_ref() {
|
||||
let ms = GlobalErrorMsg {
|
||||
title: "标题".parse().unwrap(),
|
||||
msg: "内容".parse().unwrap(),
|
||||
duration: 5000,
|
||||
kind: crate::structs::global_error_msg::GlobalErrorMsgTypeEnum::Success,
|
||||
};
|
||||
let result = JsonUtil::stringify(&ms).expect("数据序列化失败!");
|
||||
let qqq = x.send(result).await;
|
||||
if qqq.is_err() {
|
||||
println!("发送失败！");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
通过拿到保存的`发送者`，并调用其中的 `send` 函数将数据传递到封装的函数中，以完成函数调用。
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
date: 2024-01-21
|
||||
title: VitePress 链接使用
|
||||
---
|
||||
# 完成跳转 ，可以点击返回
|
||||
|
||||
[返回](vitepress-note-use.md)
|
||||
@@ -0,0 +1,621 @@
|
||||
---
|
||||
layout: doc
|
||||
title: VitePress 笔记使用
|
||||
date: 2025-01-20
|
||||
tags:
|
||||
- 学习
|
||||
- VitePress
|
||||
- Blog
|
||||
- Markdown
|
||||
editLink: false
|
||||
lastUpdated: 2025-01-20T10:09:34
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
content: 本文介绍了如何使用 vitepress
|
||||
---
|
||||
|
||||
> :black_nib: 文章摘要
|
||||
|
||||
<!-- DESC SEP -->
|
||||
本文介绍了如何使用 vitepress
|
||||
<!-- DESC SEP -->
|
||||
|
||||
## 内部链接
|
||||
内部链接将转换为单页导航的路由链接。此外，子目录中包含的每个 `index.md` 都会自动转换为 `index.html`，并带有相应的 URL `/`。
|
||||
[vitepress-link-jump](vitepress-link-jump.md) <!-- 可以添加 .md -->
|
||||
```html
|
||||
[VitePress 链接跳转](./VitePress 链接跳转.md)
|
||||
```
|
||||
|
||||
## YAML front matter
|
||||
任何包含 [YAML](https://yaml.org/) front matter 块的文件都将是 由 Jekyll 作为特殊文件处理。前言必须是第一件事 ，并且必须采用在三短划线 线。下面是一个基本示例：
|
||||
|
||||
``` markdown
|
||||
---
|
||||
layout: post
|
||||
title: Blogging Like a Hacker
|
||||
---
|
||||
```
|
||||
|
||||
### frontmatter 配置
|
||||
|
||||
示例：
|
||||
``` markdown
|
||||
---
|
||||
title: Docs with VitePress
|
||||
editLink: true
|
||||
---
|
||||
```
|
||||
可以通过 Vue 表达式中的 `$frontmatter` 全局变量访问 frontmatter 数据：
|
||||
|
||||
``` Vue
|
||||
{{ $frontmatter.title }}
|
||||
```
|
||||
|
||||
> 该内容由 Vue 渲染： **{{ $frontmatter.title }}**
|
||||
|
||||
|
||||
## head
|
||||
|
||||
- 类型：`HeadConfig[]`
|
||||
|
||||
指定要为当前页面注入的额外 head 标签。将附加在站点级配置注入的头部标签之后。
|
||||
|
||||
yaml
|
||||
|
||||
``` markdown
|
||||
---
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
content: hello
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: super duper SEO
|
||||
---
|
||||
```
|
||||
|
||||
|
||||
## layout
|
||||
|
||||
- 类型：`doc | home | page`
|
||||
- 默认值：`doc`
|
||||
|
||||
指定页面的布局。
|
||||
|
||||
- `doc`——它将默认文档样式应用于 markdown 内容。
|
||||
- `home`——“主页”的特殊布局。可以添加额外的选项，例如 `hero` 和 `features`，以快速创建漂亮的落地页。
|
||||
- `page`——表现类似于 `doc`，但它不对内容应用任何样式。当想创建一个完全自定义的页面时很有用。
|
||||
|
||||
|
||||
``` yaml
|
||||
---
|
||||
layout: doc
|
||||
---
|
||||
```
|
||||
|
||||
|
||||
## navbar
|
||||
|
||||
- 类型：`boolean`
|
||||
- 默认值：`true`
|
||||
|
||||
是否显示导航栏。
|
||||
|
||||
``` yaml
|
||||
---
|
||||
navbar: false
|
||||
---
|
||||
```
|
||||
|
||||
## sidebar
|
||||
|
||||
- 类型：`boolean`
|
||||
- 默认值：`true`
|
||||
|
||||
是否显示 侧边栏
|
||||
|
||||
```
|
||||
---
|
||||
sidebar: false
|
||||
---
|
||||
```
|
||||
|
||||
## aside
|
||||
|
||||
- 类型：`boolean | 'left'`
|
||||
- 默认值：`true`
|
||||
|
||||
定义侧边栏组件在 `doc` 布局中的位置。
|
||||
|
||||
将此值设置为 `false` 可禁用侧边栏容器。
|
||||
将此值设置为 `true` 会将侧边栏渲染到右侧。
|
||||
将此值设置为 `left` 会将侧边栏渲染到左侧。
|
||||
|
||||
```yaml
|
||||
---
|
||||
aside: false
|
||||
---
|
||||
```
|
||||
|
||||
## lastUpdated
|
||||
|
||||
- 类型：`boolean | Date`
|
||||
- 默认值：`true`
|
||||
|
||||
是否在当前页面的页脚中显示最后更新时间的文本。如果指定了日期时间，则会显示该日期时间而不是上次 git 修改的时间戳。
|
||||
|
||||
``` yaml
|
||||
---
|
||||
lastUpdated: false
|
||||
---
|
||||
```
|
||||
|
||||
|
||||
> [!TIP]
|
||||
> 你必须提交 markdown 文件才能看到最后更新时间。
|
||||
|
||||
## Emoji
|
||||
|
||||
输入：
|
||||
```html
|
||||
:tada: :100:
|
||||
```
|
||||
输出：
|
||||
|
||||
:tada: :100:
|
||||
## 自定义容器
|
||||
自定义容器可以通过它们的类型、标题和内容来定义。
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
::: info
|
||||
This is an info box.
|
||||
:::
|
||||
|
||||
::: tip
|
||||
This is a tip.
|
||||
:::
|
||||
|
||||
::: warning
|
||||
This is a warning.
|
||||
:::
|
||||
|
||||
::: danger
|
||||
This is a dangerous warning.
|
||||
:::
|
||||
|
||||
::: details
|
||||
This is a details block.
|
||||
:::
|
||||
```
|
||||
|
||||
**输出**
|
||||
::: info
|
||||
This is an info box.
|
||||
:::
|
||||
|
||||
::: tip
|
||||
This is a tip.
|
||||
:::
|
||||
|
||||
::: warning
|
||||
This is a warning.
|
||||
:::
|
||||
|
||||
::: danger
|
||||
This is a dangerous warning.
|
||||
:::
|
||||
|
||||
::: details
|
||||
This is a details block.
|
||||
:::
|
||||
|
||||
## 自定义标题
|
||||
可以通过在容器的 "type" 之后附加文本来设置自定义标题。
|
||||
|
||||
**输入**
|
||||
|
||||
``` md
|
||||
::: danger STOP
|
||||
危险区域，请勿继续
|
||||
:::
|
||||
|
||||
::: details 点我查看代码
|
||||
```js
|
||||
console.log('Hello, VitePress!')
|
||||
```
|
||||
**输出**
|
||||
|
||||
::: danger STOP
|
||||
危险区域，请勿继续
|
||||
:::
|
||||
|
||||
::: details 点我查看代码
|
||||
```js
|
||||
console.log('Hello, VitePress!')
|
||||
```
|
||||
:::
|
||||
|
||||
## GitHub 风格的警报
|
||||
|
||||
```markdown
|
||||
> [!NOTE]
|
||||
> Useful information that users should know, even when skimming content.
|
||||
|
||||
> [!TIP]
|
||||
> Helpful advice for doing things better or more easily.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Key information users need to know to achieve their goal.
|
||||
|
||||
> [!WARNING]
|
||||
> Urgent info that needs immediate user attention to avoid problems.
|
||||
|
||||
> [!CAUTION]
|
||||
> Advises about risks or negative outcomes of certain actions.
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> Useful information that users should know, even when skimming content.
|
||||
|
||||
> [!TIP]
|
||||
> Helpful advice for doing things better or more easily.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Key information users need to know to achieve their goal.
|
||||
|
||||
> [!WARNING]
|
||||
> Urgent info that needs immediate user attention to avoid problems.
|
||||
|
||||
> [!CAUTION]
|
||||
> Advises about risks or negative outcomes of certain actions.
|
||||
|
||||
## 在代码块中实现行高亮
|
||||
**输入**
|
||||
```` md
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
除了单行之外，还可以指定多个单行、多行，或两者均指定：
|
||||
|
||||
- 多行：例如 `{5-8}`、`{3-10}`、`{10-17}`
|
||||
- 多个单行：例如 `{4,7,9}`
|
||||
- 多行与单行：例如 `{4,7-13,16,23-27,40}`
|
||||
|
||||
**输入**
|
||||
```` md
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
data () {
|
||||
return {
|
||||
msg: `Highlighted!
|
||||
This line isn't highlighted,
|
||||
but this and the next 2 are.`,
|
||||
motd: 'VitePress is awesome',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
data () {
|
||||
return {
|
||||
msg: `Highlighted!
|
||||
This line isn't highlighted,
|
||||
but this and the next 2 are.`,
|
||||
motd: 'VitePress is awesome',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
也可以使用 `// [!code highlight]` 注释实现行高亮。
|
||||
**输入**
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!' // [!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!' // [!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
## 代码块中聚焦
|
||||
|
||||
在某一行上添加 `// [!code focus]` 注释将聚焦它并模糊代码的其他部分。
|
||||
此外，可以使用 `// [!code focus:<lines>]` 定义要聚焦的行数。
|
||||
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Focused!' // [!!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Focused!' // [!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中的颜色差异 {#colored-diffs-in-code-blocks}
|
||||
|
||||
在某一行添加 `// [!code --]` 或 `// [!code ++]` 注释将会为该行创建 diff，同时保留代码块的颜色。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Removed' // [!!code --]
|
||||
msg: 'Added' // [!!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Removed' // [!code --]
|
||||
msg: 'Added' // [!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 高亮“错误”和“警告” {#errors-and-warnings-in-code-blocks}
|
||||
|
||||
在某一行添加 `// [!code warning]` 或 `// [!code error]` 注释将会为该行相应的着色。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Error', // [!!code error]
|
||||
msg: 'Warning' // [!!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Error', // [!code error]
|
||||
msg: 'Warning' // [!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 行号 {#line-numbers}
|
||||
|
||||
可以通过以下配置为每个代码块启用行号：
|
||||
|
||||
```js
|
||||
export default {
|
||||
markdown: {
|
||||
lineNumbers: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
查看 [`markdown` 选项](../reference/site-config#markdown) 获取更多信息。
|
||||
|
||||
可以在代码块中添加 `:line-numbers` / `:no-line-numbers` 标记来覆盖在配置中的设置。
|
||||
|
||||
还可以通过在 `:line-numbers` 之后添加 `=` 来自定义起始行号，例如 `:line-numbers=2` 表示代码块中的行号从 2 开始。
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
```ts {1}
|
||||
// 默认禁用行号
|
||||
const line2 = 'This is line 2'
|
||||
const line3 = 'This is line 3'
|
||||
```
|
||||
|
||||
```ts:line-numbers {1}
|
||||
// 启用行号
|
||||
const line2 = 'This is line 2'
|
||||
const line3 = 'This is line 3'
|
||||
```
|
||||
|
||||
```ts:line-numbers=2 {1}
|
||||
// 行号已启用，并从 2 开始
|
||||
const line3 = 'This is line 3'
|
||||
const line4 = 'This is line 4'
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```ts {1}
|
||||
// 默认禁用行号
|
||||
const line2 = 'This is line 2'
|
||||
const line3 = 'This is line 3'
|
||||
```
|
||||
|
||||
```ts:line-numbers {1}
|
||||
// 启用行号
|
||||
const line2 = 'This is line 2'
|
||||
const line3 = 'This is line 3'
|
||||
```
|
||||
|
||||
```ts:line-numbers=2 {1}
|
||||
// 行号已启用，并从 2 开始
|
||||
const line3 = 'This is line 3'
|
||||
const line4 = 'This is line 4'
|
||||
```
|
||||
|
||||
## 代码组 {#code-groups}
|
||||
|
||||
可以像这样对多个代码块进行分组：
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
::: code-group
|
||||
|
||||
```js [config.js]
|
||||
/**
|
||||
* @type {import('vitepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ...
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
```ts [config.ts]
|
||||
import type { UserConfig } from 'vitepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ...
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
::: code-group
|
||||
|
||||
```js [config.js]
|
||||
/**
|
||||
* @type {import('vitepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ...
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
```ts [config.ts]
|
||||
import type { UserConfig } from 'vitepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ...
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
## 数学方程 {#math-equations}
|
||||
|
||||
现在这是可选的。要启用它，需要安装 `markdown-it-mathjax3`，在配置文件中设置`markdown.math` 为 `true`：
|
||||
|
||||
```sh
|
||||
npm add -D markdown-it-mathjax3
|
||||
```
|
||||
|
||||
```ts [.vitepress/config.ts]
|
||||
export default {
|
||||
markdown: {
|
||||
math: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
**Maxwell's equations:**
|
||||
|
||||
| equation | description |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
|
||||
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
|
||||
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
**Maxwell's equations:**
|
||||
|
||||
| equation | description |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
|
||||
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
|
||||
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
Sitemap: https://duyl328.github.io/sitemap.xml
|
||||
Reference in new issue
Block a user