戈小荷

React 基础

Thu, 09 May 2024 00:00:00 GMT

::github{repo="gehongyan/ReactTutorials"}

本文档是 React 的基础教程，主要包含安装 React 应用程序的开发环境、创建应用程序、根据业务编写代码、测试与部署等内容。

开发环境

安装 Node.js

要开发 React 应用程序，首先需要安装 Node.js。Node.js 是一个 JavaScript 运行环境。可以在 Node.js 官网下载到 Node.js 的开发环境。

开发工具

主流的 React 开发工具有 Visual Studio Code、JetBrains WebStorm 等。

Visual Studio Code 是一款开源的轻量级的代码编辑器，支持多种语言与扩展，是一款非常适合前端开发的工具。

Visual Studio Code 插件

以 Visual Studio Code 为例，为了后续开发的遍历，可以安装一些主流的插件，如：

ES7+ React/Redux/React-Native snippets：提供了一些便于 React 开发的代码片段。
Simple React Snippets：提供了一些 React 开发的代码片段。
Prettier - Code formatter：提供了代码格式化的功能。
ESLint：提供了 JavaScript 代码检查的功能。
Stylelint：提供了 CSS 代码检查的功能。
SonarLint：提供了代码质量检查的功能。

创建 React 应用程序

Vite 是一个由原生 ESM 驱动的 Web 开发构建工具，它的目标是快速提供合适的开发环境。此处以使用 Vite 创建 React 应用程序为例，首先通过 npm 包管理器安装 Vite 全局工具。

npm install --global create-vite

然后通过 Vite 创建 React 应用程序。

npm create vite@latest

如果命令中不包含额外的参数，Vite 会进行交互式的操作，根据提示选择创建 React 应用程序。输入应用程序名称后选择框架和语言，即可在当前工作目录下创建 React 应用程序。本项目以应用程序名称为 app，框架为 React，语言为 TypeScript 为例。 TypeScript 是 JavaScript 的超集，提供了类型检查的功能，可以提高代码的可维护性。

模板项目结构

创建 React 应用程序后，会生成如下的项目结构：

├── public/              # 静态资源
│   └── vite.svg         # Vite 图标
├── src/                 # 应用程序源码
│   ├── assets/          # 资源
│   │   └── react.svg    # React 图标
│   ├── App.css          # 组件 App 的样式
│   ├── App.tsx          # 组件 App 的代码
│   ├── index.css        # 入口文件的样式
│   ├── index.tsx        # 入口文件的模块
│   └── vite-env.d.ts    # Vite 环境变量
├── .eslintrc.cjs        # ESLint 配置
├── .gitignore           # Git 忽略文件
├── index.html           # 入口文件
├── package.json         # 包管理文件
├── README.md            # 项目说明
├── tsconfig.json        # TypeScript 配置
├── tsconfig.node.json   # Node.js TypeScript 配置
└── vite.config.ts       # Vite 配置

包管理器

npm 是 Node.js 的包管理器，用于管理 Node.js 的依赖包。 dependencies 节点下记录的是应用程序的依赖包，devDependencies 节点下记录的是开发环境的依赖包。

版本号前的 ^ 符号表示允许更新到次要版本，~ 符号表示允许更新到补丁版本。例如，^1.2.3 表示允许更新到 1.x.x 的任意版本，~1.2.3 表示允许更新到 1.2.x 的任意版本，而 1.2.3 则表示只能使用 1.2.3 版本。

运行示例程序

运行 React 应用程序，首先需要安装依赖。

cd app
npm install

npm install 命令会安装 package.json 中的依赖，此过程会创建 node_modules 目录，存放依赖的包。还会创建 package-lock.json 文件，存放依赖的版本信息。package-lock.json 文件记录的是当前实际安装的依赖版本。

安装依赖后，可以运行 React 应用程序。

npm run dev

npm run 命令会执行 package.json 中 scripts 字段中的命令，dev 是其中一个命令，用于启动开发服务器。此处的 dev 脚本的值是 vite，即启动 Vite 开发服务器，因此该命令实际和 vite 命令等价。

观察控制台输出，可以看到 React 应用程序的启动信息，如 Local: http://localhost:5173/ 便可以在浏览器中打开该地址访问应用程序。

package.json 中的 scripts 字段中还有其他脚本，如 build、lint、preview 等。

build 脚本调用了 tsc && vite build，即先对 TypeScript 源码进行编译，然后构建应用程序。
lint 脚本调用了 eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0，即对当前名录下的 .ts 和 .tsx 文件进行 ESLint 检查。--report-unused-disable-directives 用于检查未使用的 ESLint 禁用指令，--max-warnings 0 用于设置最大警告数为 0，即任何警告都会导致脚本失败。
preview 脚本调用了 vite preview，即启动 Vite 预览服务器，预览构建后的应用程序。该命令主要用于预览构建后的应用程序，可以用于测试构建后的应用程序，不应直接用于生产环境。生产环境下应使用一个更完整的服务器应用来托管应用程序。

编写 React 代码

React 是一个用于构建用户界面的 JavaScript 库。

入口文件

index.html 是 React 应用程序的入口文件，其中包含一个 div 元素，用于挂载 React 应用程序，以及一个 script 元素，用于加载 React 应用程序的入口模块。

<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>

main.tsx 是 React 应用程序的入口模块，用于在 React 应用程序中渲染一个 App 组件。

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
)

ReactDOM.createRoot(document.getElementById('root')!)：这是 React 18 中引入的新的渲染 API。createRoot 方法创建一个根 React 节点，并将其挂载到指定的 DOM 元素上，将 React 应用程序挂载到 id 为 root 的 DOM 元素上。
.render(<React.StrictMode><App /></React.StrictMode>)：这个方法用于在前面创建的根节点上渲染 React 组件。
<React.StrictMode>：React 严格模式，这是一个用于检查 React 应用程序中潜在问题的工具。它不会影响生产构建，但在开发模式下，它会激活额外的检查和警告。它包裹了 App 组件，所以这些检查和警告将应用于 App 组件及其所有子组件。
<App />：这是要渲染的 React 组件。在这个例子中，App 是应用程序的根组件。

组件

React 应用程序是由组件组成的，组件是 React 应用程序的基本单元。组件是一个函数或一个类，用于描述用户界面的一部分。组件可以嵌套，形成一个组件树。目前主流的 React 开发方式是函数组件。

函数组件是一个函数，接收一个 props 参数，返回一个 React 元素。React 元素是一个描述用户界面的对象，可以是一个 DOM 元素、一个组件等。

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo"/>
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo"/>
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

function 用于声明一个函数，App 是函数的名称，函数体是函数的实现。return 返回了一个 React 元素。

useState 是一个 React Hook，用于在函数组件中添加状态。因为函数组件是无状态的，所以需要使用 Hook 来添加状态。 useState(0) 返回一个数组，第一个元素 count 是状态的值，第二个元素 setCount 是更新状态的函数。这里的状态是一个数字，初始值为 0。useState(0) 的参数是状态的初始值，这里的初始值是 0。

<img src={viteLogo} className="logo" alt="Vite logo" /> 是一个图片元素，src 属性是图片的地址，className 属性是图片的类名，alt 属性是图片的描述。这里的 src 属性使用了一个变量 viteLogo，这个变量是一个图片的地址，通过 import 引入。变量需要使用大括号 {} 包裹。

<button onClick={() => setCount((count) => count + 1)}>count is {count}</button> 是一个按钮元素，onClick 属性是点击事件的处理函数，调用了 setCount 函数，更新了 useState 定义的状态。按钮的文本 count is {count} 使用了一个变量 count，这个变量是一个状态的值，通过大括号 {} 包裹。状态的更新会自动触发对应的组件的重新渲染。

<></> 是一个 React 片段，用于包裹多个元素。React 要求一个组件只能返回一个根元素，所以需要使用片段来包裹多个元素。

export default App 用于导出组件，这样其他模块就可以引入该组件。

样式

App.css 是 App 组件的样式文件，用于描述 App 组件的样式。

默认生成的 App.css 包含了以下几个部分。

#root {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

#root 是一个 ID 选择器，用于选择 id 为 root 的元素。max-width 属性设置元素的最大宽度为 1280 像素， margin 属性设置元素的外边距为 0，padding 属性设置元素的内边距为 2rem，这里的 rem 单位是相对于根元素的字体大小， text-align 属性设置元素的文本对齐方式为居中。

.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.react:hover {
    filter: drop-shadow(0 0 2em #61dafbaa);
}

.logo 是一个类选择器，用于选择类名为 logo 的元素。height 属性设置元素的高度为 6em， padding 属性设置元素的内边距为 1.5em，will-change 属性设置元素之后会发生变化的属性为 filter， transition 属性设置元素的过渡效果为 filter 300ms，即 filter 属性的变化时间为 300 毫秒。

.logo:hover 是一个伪类选择器，用于选择鼠标悬停在类名为 logo 的元素上的元素。 filter 属性设置元素的滤镜效果为 drop-shadow(0 0 2em #646cffaa)，

@keyframes logo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: no-preference) {
    a:nth-of-type(2) .logo {
        animation: logo-spin infinite 20s linear;
    }
}

@keyframes logo-spin 是一个关键帧动画，用于定义一个旋转动画。from 关键字表示动画的开始状态， to 关键字表示动画的结束状态。transform 属性设置元素的变换效果为 rotate(0deg)，即元素的旋转角度为 0 度到 360 度。

@media (prefers-reduced-motion: no-preference) 是一个媒体查询，用于根据用户的偏好设置应用样式。 prefers-reduced-motion 是一个用户偏好设置，表示用户所设置的是否偏好减弱动画。根据文档 prefers-reduced-motion - CSS：层叠样式表 | MDN，no-preference 表示用户未修改系统动画相关特性， reduce 意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除。在 Windows 11 中，影响该值的设置位于「设置 - 辅助功能 - 视觉效果 - 动画效果」。

模块样式

但传统的 CSS 有一个问题，就是全局作用域。一个 CSS 文件中的样式会对整个页面生效，这样会导致样式冲突，不利于组件化开发，类名称的弱关联也不利于样式的维护。

CSS Modules 是一种解决方案，它是一种 CSS 的模块化方案，可以解决全局作用域的问题。CSS Modules 会将 CSS 文件中的类名转换为一个哈希值，这样就可以保证类名的唯一性，避免样式冲突。

要将 App.css 转换为 CSS Module，首先需要将文件重命名为 App.module.css，然后在 App.tsx 中更改样式文件的引入，最后根据需要修改样式文件中的类名，例如，将 read-the-docs 类名修改为 readTheDocs。

- import './App.css'
+ import styles from './App.module.css'

这样就可以使用 styles 对象来引用 CSS Module 中的类名。

  <>
    <div>
      <a href="https://vitejs.dev" target="_blank" rel="noopener">
- <img src={viteLogo} className={styles.logo} alt="Vite logo" />
+       <img src={viteLogo} className={styles.logo} alt="Vite logo" />
      </a>
      <a href="https://react.dev" target="_blank" rel="noopener">
- <img src={reactLogo} className="logo react" alt="React logo" />
+       <img src={reactLogo} className={`${styles.logo} ${styles.react}`} alt="React logo" />
      </a>
    </div>
    <h1>Vite + React</h1>
- <div className="card">
+   <div className={styles.card}>
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
      <p>
        Edit <code>src/App.tsx</code> and save to test HMR
      </p>
    </div>
- <p className="read-the-docs">
+   <p className={styles.readTheDocs}>
      Click on the Vite and React logos to learn more
    </p>
  </>

更改文件后，可以发现 Vite 为我们自动更新了预览视图，这是因为 Vite 支持热模块替换（HMR）。但修改后的组件并没有像原来一样保持居中，这是因为 CSS Module 会将类名转换为哈希值，不支持现有的 #root ID 选择器。如果需要使用 ID 选择器，可以使用 :global 关键字，保留样式的原始全局性。

- #root {
+ :global(#root) {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }

路由

安装路由组件

React 是一个单页面应用程序（SPA）框架，单页面应用程序是指一个页面加载后，不会因为用户的操作而进行页面的重新加载。当需要切换页面时，只会更新页面的部分内容，而不会重新加载整个页面，这便需要路由来管理页面的切换。

React Router 是一个用于管理 React 应用程序路由的库，它提供了一些组件，用于在 React 应用程序中实现路由功能。

首先需要安装 React Router，这是我们第一次添加依赖。

npm install react-router-dom

这会在 package.json 中的 dependencies 节点下添加 react-router-dom 依赖。

+ "react-router-dom": "^6.23.0"

现在，我们可以根据文档的指南为我们的应用程序添加路由能力。

整理代码结构

为了让页面结构更清晰，我们先整理以下目录结构。

在 src 目录下创建 features 文件夹，用于存放各个页面组件。

将组件 App 重命名为 Home，并移动到 features/home 目录下，此操作建议使用 IDE 的重构/重命名功能，这样，相关的引用也会被自动更新。操作完成后，访问浏览器检查所有的引用是否正常。

重新创建 App 组件，用于包裹整个应用程序，这样可以在 App 组件中添加路由。

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./features/home/Home.tsx";

const router = createBrowserRouter(
  [
    {
      path: `/`,
      element: <Home/>
    }
  ]
);

export default function App() {
  return (
    <RouterProvider router={router}
                    fallbackElement={<p>Loading...</p>}
    />
  );
}

if (import.meta.hot) {
  import.meta.hot.dispose(() => router.dispose());
}

新的 App 模块道出了一个 RouterProvider 组件，用于提供路由功能。RouterProvider 组件接收一个 router 属性，这个属性是一个路由对象，用于管理路由。router 对象是通过 createBrowserRouter 函数创建的，这个函数接收一个路由配置数组，返回一个路由对象。路由配置数组中的每个元素都是一个路由配置对象，包含了路由的路径和对应的元素。

createBrowserRouter 函数返回的路由对象有一个 dispose 方法，用于清理路由对象。在开发模式下，当模块被热替换时，会调用 dispose 方法，清理路由对象。

现在，应用程序的路由已经配置好了，但是还需要在入口文件中引入 App 组件。由于重构操作，main.tsx 中的原来的 <App /> 也被重命名为 <Home />，所以需要将其改为 <App />。重新导入模块 App 并使用它。

- import Home from './features/home/Home.tsx'
+ import App from './App.tsx'

  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
- <Home />
+     <App />
    </React.StrictMode>,
  )

现在，重新访问 http://localhost:5173/ ，可以看到页面上仍然正常显示着 Home 组件的内容，但此时已经是通过路由管理的。

创建新页面

现在，我们来创建一个新的页面，用于展示一个关于页面。

在 features/about 目录下创建组件 About.tsx。

function About() {
  return (
    <>
      <h1>About</h1>
      <p>This is a simple app to demonstrate how to create a simple app using Vite and React.</p>
    </>
  );
}

export default About;

然后，我们需要在 App 组件中添加一个新的路由配置，用于展示 About 页面。

import About from "./features/about/About.tsx";

const router = createBrowserRouter(
  [
    {
      path: `/`,
      element: <Home/>
    },
    {
      path: `/about`,
      element: <About/>
    }
  ]
);

钩子

React Hook 是 React 16.8 中引入的新特性，用于在函数组件中添加状态和副作用。此处对一些常用的钩子进行简单介绍。

`useState`

用于在函数组件中添加状态，可以视为一个组件内部的变量。状态是一个组件可以改变的值，它可以影响组件的行为和渲染输出。 useState 接受一个参数，这个参数是状态的初始值，然后返回一个包含两个元素的数组。第一个元素是当前的状态值，第二个元素是一个函数，用于更新状态值。调用这个更新函数并传入一个新的值时，React 会重新渲染组件，并使用新的值作为状态。

以 Home.tsx 为例。

我们使用 useState 创建了一个新的状态变量 count，并给它设置了初始值 0。我们还得到了一个函数 setCount，用于更新 count 的值。当用户点击按钮时，我们调用 setCount 来增加 count 的值，这会触发组件的重新渲染。

`useEffect`

用于在函数组件中执行副作用操作。副作用操作包括数据获取、订阅或手动修改 DOM 等等。这些操作通常在组件渲染后执行，以不影响组件的渲染性能。

useEffect 接受两个参数：一个是执行副作用的函数，另一个是依赖数组。当依赖数组中的值发生变化时，副作用函数就会被执行。如果不提供依赖数组，那么副作用函数会在每次渲染后都执行。

以 Effect.tsx 为例。

在这个例子中，我们使用 useEffect 来更新 document 的 title。当 count 变化时，副作用函数就会被重新执行，更新 document 的 title。当组件卸载或者下一次 useEffect 执行前，清理函数会被调用，将 document 的 title 重置为 React App。

需要注意的是，在开发模式下，我们启用了 React 严格模式，这会导致 useEffect 中的副作用函数被调用两次。严格模式下，React 会在渲染过程中执行两次副作用函数，以确保副作用函数的纯净性，即相同的输入应始终产生相同的输出，这有助于帮我们发现一些潜在的问题。

`useContext`

用于在函数组件中访问 React 上下文。React 上下文是一个全局的数据存储区，用于在组件树中传递数据，而无需通过 props 显式传递。

以 Context.tsx 为例。

useContext 接受一个 context 对象（React.createContext 的返回值）作为参数，并返回该 context 的当前值。当前的 context 值是由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value 决定的。

`useReducer`

用于在函数组件中管理复杂的状态逻辑。useReducer 类似于 Redux 中的 reducer，它接受一个 reducer 函数和一个初始状态，并返回一个当前状态和一个 dispatch 函数。

useReducer 可以理解为是一种状态机，reducer 函数接收当前的状态和一个 action，返回一个新的状态。

以 Reducer.tsx 为例。

我们首先定义了一个 reducer 函数，它接受当前的 state 和一个 action，根据 action 的类型返回新的 state 。然后我们使用 useReducer，传入 reducer 函数和初始状态，得到当前的 state 和一个 dispatch 函数。在按钮的点击事件中，我们调用 dispatch 函数，传入一个 action 对象，触发 state 的更新。

`useMemo`

用于在函数组件中缓存计算结果，通过记忆计算结果来避免在每次渲染时都进行重计算，优化性能。 useMemo 接受两个参数：一个是创建记忆值的函数，另一个是依赖数组。当依赖数组中的值发生变化时， useMemo 就会返回一个新的记忆值。如果依赖数组中的值没有变化，那么 useMemo 就会返回上一次的记忆值。

以 Memo.tsx 为例。

我们有一个复杂的计算函数 expensive 和 expensiveWithoutMemo，它们都会根据 count 的值进行计算。expensive 使用了 useMemo，而 expensiveWithoutMemo 没有。当我们改变输入框的值时，组件会重新渲染，但 count 的值并没有改变。对于 expensive 函数，由于 count 没有改变，useMemo 会返回上一次计算的结果，不会重新计算。但对于 expensiveWithoutMemo 函数，每次组件渲染时都会重新计算。因此，通过使用 useMemo，我们可以避免在每次渲染时都进行复杂的计算，从而优化性能。

`useCallback`

用于在函数组件中缓存回调函数，通过记忆回调函数来避免在每次渲染时都创建新的回调函数，优化性能。 useCallback 接受两个参数：一个是创建函数的函数，另一个是依赖数组。当依赖数组中的值发生变化时，useCallback 就会返回一个新的函数实例。如果依赖数组中的值没有变化，那么 useCallback 就会返回上一次的函数实例。

以 Callback.tsx 为例。

我们使用 useCallback 创建了一个记忆的 increment 函数。只有当 count 变化时，useCallback 才会返回一个新的 increment 函数。如果 count 没有变化，那么 useCallback 就会返回上一次的 increment 函数。这样，即使组件重新渲染，increment 函数的引用也不会变化，除非 count 变化。

这就是 useCallback 的主要用途：它可以帮助我们避免在每次渲染时都创建新的函数，从而优化性能。但是，需要注意的是，useCallback 本身也有一定的开销，因此，只有在必要的时候（例如，当函数作为依赖项传递给其他 Hooks，或者当函数传递给性能敏感的子组件时）才应该使用它。

`useRef`

用于在函数组件中创建一个可变的引用。useRef 返回一个可变的对象，这个对象的 current 属性可以存储任意值。这个对象在组件的整个生命周期中保持不变，不会因为组件的重新渲染而改变。

以 Ref.tsx 为例。

我们使用 useRef 创建了一个 ref，并将其赋值给了一个输入框。然后，当按钮被点击时，我们使用 ref 来让输入框获取焦点。

需要注意的是，useRef 返回的 ref 对象有一个 current 属性，用于存储 ref 的值。在这个例子中，current 属性的值就是输入框的 DOM 节点。

Redux

Redux 是一个用于管理 JavaScript 应用程序状态的开源库。它提供了一种在应用程序中以一种可预测的方式来管理和更新状态的方法。Redux 特别适用于那些由于其状态在很多组件之间共享而变得复杂的 JavaScript 应用程序。

Redux 的核心概念包括：

Store：在 Redux 中，整个应用程序的状态被存储在一个对象树中，这个对象树被称为 Store。
Action：Action 是描述发生了什么的普通对象。它是改变状态的唯一途径。每个 Action 都有一个 type 字段，用来描述 Action 的类型。
Reducer：Reducer 是一个纯函数，它接收当前的状态和一个 Action，然后返回一个新的状态。在 Redux 中，所有的状态更新逻辑都在 Reducer 中完成。

Redux 的工作流程如下：

发起 Action：应用程序中的某个事件触发了一个 Action。
Reducer 计算新的状态：Store 调用 Reducer 函数，并传入当前的状态和触发的 Action。Reducer 函数根据 Action 的类型计算出新的状态。
Store 更新状态：Store 将新的状态保存下来。然后，Store 会通知所有的监听器，状态已经更新。

Redux 的主要优点是它提供了一种可预测的状态管理方法，使得状态的更新在任何时候都是可追踪的。此外，由于 Redux 的状态存储在一个单一的 Store 中，这使得在调试和测试应用程序时更加方便。

安装 Redux Toolkit 和 React Redux

Redux Toolkit 是一个官方的 Redux 工具包，它提供了一些工具和库，用于简化 Redux 的使用。 React Redux 是一个用于在 React 应用程序中使用 Redux 的库。

npm install @reduxjs/toolkit react-redux

定义根 State 和 Dispatch 类型

创建 src/app/store.ts 文件

import { Action, ThunkAction, configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

// 从 store 本身推断出 `RootState` 和 `AppDispatch` 类型
export type RootState = ReturnType<typeof store.getState>

// 推断出类型: { counter: CounterState }
export type AppDispatch = typeof store.dispatch

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>

定义 Hooks 类型

创建 src/app/hooks.ts 文件

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

// 在整个应用程序中使用，而不是简单的 `useDispatch` 和 `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

定义 Slice State 和 Action

每个 Slice 都包含了一个 Reducer 函数，用于处理 Action，并且可以包含一些额外的 Reducer 函数，用于处理其他的 Action。

编写模块代码

可以参考组件 Counter。

API 调用

axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。

npm install axios

可以参考 Timestamp 模块。

在 timestampAPI.ts 文件中，定义了一个异步函数 getTimestamp，用于获取当前时间戳。

import axios from "axios";

export interface WorldTimeApiDto {
  abbreviation: string;
  client_ip: string;
  datetime: string;
  day_of_week: number;
  day_of_year: number;
  dst: boolean;
  dst_from: string | null;
  dst_offset: number;
  dst_until: string | null;
  raw_offset: number;
  timezone: string;
  unixtime: number;
  utc_datetime: string;
  utc_offset: string;
  week_number: number;
}

export async function getTimestamp() {
  const response = await axios.get("http://worldtimeapi.org/api/timezone/Asia/Shanghai");
  const dto = response.data as WorldTimeApiDto;
  return Date.parse(dto.datetime);
}

如果需要配置请求头，可以在 axios 实例中配置。

await axios.get("http://worldtimeapi.org/api/timezone/Asia/Shanghai", {
  headers: {
    "Content-Type": "application/json"
  }
});

组件库

Ant Design 是一个用于构建 React 应用程序的 UI 组件库。

npm install antd

安装完成后，即可在需要引用 Ant Design 的组件时进行引用，并参考文档进行调用。

可以参考组件 AntDesign。

图表库

Ant Design Charts 是一个基于 Ant Design 设计体系的图表库，是 AntV 的 React 版本。

npm install @ant-design/charts

安装完成后，即可在需要引用 Ant Design Charts 的组件时进行引用，并参考文档进行调用。

可以参考组件 Chart。

部署

发布应用程序时，需要将应用程序构建为生产版本，并将构建后的文件部署到服务器上。

构建

构建应用程序时，需要使用 build 脚本。

npm run build

构建完成后，默认情况下，Vite 会在 dist 目录下生成一个生产版本的应用程序，该位置可以在 vite.config.ts 中配置。

此时，便可以通过 preview 脚本来预览构建后的应用程序。

部署

部署应用程序时，需要将构建后的文件部署到服务器上。

此处以编写 DockerFile 将应用程序部署到 Docker 容器内的 Nginx 服务器为例。

FROM node:22-alpine as build
WORKDIR /app
COPY /app/package*.json ./
RUN npm install
COPY /app/ ./
RUN npm run build

FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

在 DockerFile 文件中，首先使用 Node 镜像作为构建环境，安装依赖并构建应用程序，然后使用 Nginx 镜像作为运行环境，将构建后的文件复制到 Nginx 的静态文件目录中，并暴露 80 端口。

Avalonia 中的 Prism

Sun, 31 Mar 2024 00:00:00 GMT

::github{repo="gehongyan/AvaloniaTutorials"}

本文源码位于仓库子目录 AvaloniaPrism。

添加对 Prism 的引用

安装 Prism 库

dotnet add package Prism.Avalonia
dotnet add package Prism.DryIoc.Avalonia

在 App.xaml.cs 中添加 Prism 的引用
```
using Prism.Ioc;
using Prism.DryIoc;
```
在 App.xaml.cs 中修改基类为 PrismApplication
```
public partial class App : PrismApplication
```

实现抽象方法 RegisterTypes

/// <inheritdoc />
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
}

/// <inheritdoc />
protected override AvaloniaObject CreateShell()
{
    return Container.Resolve<MainWindow>();
}

删除 OnFrameworkInitializationCompleted

在 Initialize 中初始化 Prism

public override void Initialize()
{
    AvaloniaXamlLoader.Load(this);
    base.Initialize(); // <-- 添加此行
}

视图与视图模型的绑定

添加视图 MainView 及其视图模型 MainViewModel，在 MainView 中添加 prism:ViewModelLocator.AutoWireViewModel="True"，最后在 MainWindow 中引用该视图。运行引用程序，可以发现，MainView.DataContext 被自动填充了 MainViewModel 的实例。这是因为 Prism 会对设置了 AutoWireViewModel 为 True 的视图根据约定自动发现并绑定视图与视图模型。

不妨先看一下 Prism 绑定视图模型的源码：

/// <summary>
/// Automatically looks up the viewmodel that corresponds to the current view, using two strategies:
/// It first looks to see if there is a mapping registered for that view, if not it will fallback to the convention based approach.
/// </summary>
/// <param name="view">The dependency object, typically a view.</param>
/// <param name="setDataContextCallback">The call back to use to create the binding between the View and ViewModel</param>
public static void AutoWireViewModelChanged(object view, Action<object, object> setDataContextCallback)
{
   // Try mappings first
   object viewModel = GetViewModelForView(view);

   // try to use ViewModel type
   if (viewModel == null)
   {
       // check type mappings
       var viewModelType = GetViewModelTypeForView(view.GetType());

       // check platform View to ViewModel resolver
       if (viewModelType == null)
           viewModelType = _defaultViewToViewModelTypeResolver(view);

       // fallback to convention based
       if (viewModelType == null)
           viewModelType = _defaultViewTypeToViewModelTypeResolver(view.GetType());

       if (viewModelType == null)
           return;

       viewModel = _defaultViewModelFactoryWithViewParameter != null ? _defaultViewModelFactoryWithViewParameter(view, viewModelType) : _defaultViewModelFactory(viewModelType);
   }

   setDataContextCallback(view, viewModel);
}

它首先查看是否为该视图注册了映射，如果没有，则会回退到基于约定的方法。

GetViewModelForView

该方法尝试从 Dictionary<string, Func<object>> _factories 中寻找键为指定视图类型名称的键值对，其值为对应的视图模型的生成委托。这是最短完成解析的路径，因为这需要我们手动注册视图与视图模型生成委托的映射关系。

Register 的其中一个重载中访问了 _factories 索引器的 set 方法，将视图类型名称与视图模型生成委托的键值对添加到 _factories 中。因此，我们可以在 RegisterTypes 中手动指定视图与视图模型生成委托的绑定关系。

ViewModelLocationProvider.Register(typeof(MainView).FullName, () => new MainViewModel());

GetViewModelTypeForView

该方法尝试从 Dictionary<string, Type> _typeFactories 中寻找键为指定视图类型名称的键值对，其值为对应的视图模型类型。

Register 的另一个重载中访问了 _typeFactories 索引器的 set 方法，将视图类型名称与视图模型类型的键值对添加到 _typeFactories 中。因此，我们可以在 RegisterTypes 中手动指定视图与视图模型类型的绑定关系。也存在另一个泛型重载，可以直接指定视图与视图模型类型的绑定关系。

ViewModelLocationProvider.Register<MainView, MainViewModel>();
ViewModelLocationProvider.Register(typeof(MainView).FullName, typeof(MainViewModel));

尝试从 Func<object, Type> _defaultViewToViewModelTypeResolver 生成视图模型类型。

这是由各个平台各自实现的默认视图模型类型生成委托，目前仅有 MAUI 设置了该解析器。

尝试从 Func<Type, Type> _defaultViewTypeToViewModelTypeResolver 生成视图模型类型。

这是最后的回退方案，它会根据视图类型名称生成视图模型类型名称，然后尝试从程序集中加载该视图模型类型。该生成委托的默认逻辑为：

string viewName = viewType.FullName;
viewName = viewName.Replace(".Views.", ".ViewModels.");
string viewAssemblyName = viewType.GetTypeInfo().Assembly.FullName;
string suffix = viewName.EndsWith("View") ? "Model" : "ViewModel";
string viewModelName = string.Format(CultureInfo.InvariantCulture, "{0}{1}, {2}", viewName, suffix, viewAssemblyName);
return Type.GetType(viewModelName);
}

以 viewType 为 typepf(MainView) 为例：

viewName 为 AvaloniaPrism.Views.MainView
viewName 中的 .Views. 被替换为 .ViewModels.，得到 AvaloniaPrism.ViewModels.MainView
viewAssemblyName 为 AvaloniaPrism, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null
如果 viewName 以 View 结尾，则 suffix 为 Model，否则为 ViewModel
viewModelName 为 AvaloniaPrism.ViewModels.MainViewModel, AvaloniaPrism, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null
通过 Type.GetType(viewModelName) 获取到 MainViewModel 的类型

可以发现，要想实现自动转换，视图与视图模型之间需要遵循一定的约定：

视图模型位于与视图类型相同的程序集中
视图模型在一个名为 .ViewModels 的子命名空间中
视图位于一个名为 .Views 的子命名空间中
视图模型名称与视图名称相对应，并以 "ViewModel" 结尾

如果获取到了视图模型的类型，则通过 Activator.CreateInstance 创建视图模型的实例，并通过setDataContextCallback 将其赋值给视图的 DataContext 属性。

依赖注入

Prism 中的依赖注入主要是由 DryIoc 完成的，Microsoft.Extensions.DependencyInjection 则是在付费商用许可中提供。因此，此处仅介绍 Avalonia 中 DryIoc 的使用。

生命周期

Prism 与大多数依赖注入容器一样，支持以下三种生命周期：

Transient：瞬态，每次请求都会创建一个新的实例
Singleton：单例，整个应用程序中只有一个实例
Scoped：作用域，在同一作用域中只有一个实例

// 瞬态
containerRegistry.Register<IFooService, FooService>();
// 单例
containerRegistry.RegisterSingleton<IFooService, FooService>();
// 作用域
containerRegistry.RegisterScoped<IFooService, FooService>();
// 通过实例注册
containerRegistry.RegisterInstance<IFooService>(new FooService());

惰性解析

默认情况下，注册服务也会同步注册其相关的 Func<IService> 服务委托及 Lazy<IService> 惰性实例。可以进一步将服务实例的解析推迟到第一次访问时，而不是在注册时立即解析。但需要注意的是，如果服务是单例的，那惰性解析不一定会带来性能提升，因为单例服务在第一次解析时就会被创建，相反，惰性解析可能会带来额外的开销。

绑定

Prism 中提供了 BindableBase 类，它实现了 INotifyPropertyChanged 接口，可以方便地实现属性绑定。

public class MainViewModel : BindableBase
{
    private string _title = "Hello World";
    public string Title
    {
        get => _title;
        set => SetProperty(ref _title, value);
    }
}

命令

Prism 中的命令主要是通过 DelegateCommand 和 CompositeCommand 实现的。

DelegateCommand

DelegateCommand 是一个泛型类，它接受一个泛型参数，表示命令的参数类型，也可以不传入参数类型，即为无参命令。

public class MainViewModel : BindableBase
{
    public DelegateCommand SayHelloCommand { get; }

    public MainViewModel()
    {
        SayHelloCommand = new DelegateCommand(SayHello);
    }

    private void SayHello()
    {
        Title = "Hello Avalonia!";
    }
}

如果需要控制命令是否可用，可以通过 CanExecute 方法返回一个布尔值来实现。

public class MainViewModel : BindableBase
{
    private string _title = "Hello World";

    public MainViewModel()
    {
        SayHelloCommand = new DelegateCommand(SayHello, CanSayHello); // <-- 修改此行
    }

    public string Title
    {
        get => _title;
        set => SetProperty(ref _title, value);
    }

    public DelegateCommand SayHelloCommand { get; }

    private void SayHello()
    {
        Title = "Hello Avalonia!";
    }

    private bool CanSayHello() // <-- 添加此方法
    {
        return !string.IsNullOrEmpty(Title);
    }
}

如果 CanExecute 依赖其它可变值，可以通过 RaiseCanExecuteChanged 方法来主动通知命令重新计算是否可用。

public class MainViewModel : BindableBase
{
    private string _title = "Hello World";

    public MainViewModel()
    {
        SayHelloCommand = new DelegateCommand(SayHello, CanSayHello);
    }

    public string Title
    {
        get => _title;
        set
        {
            SetProperty(ref _title, value);
            SayHelloCommand.RaiseCanExecuteChanged(); // <-- 添加此行
        }
    }

    public DelegateCommand SayHelloCommand { get; }

    private void SayHello()
    {
        Title = "Hello Avalonia!";
    }

    private bool CanSayHello()
    {
        return !string.IsNullOrEmpty(Title);
    }
}

也可以通过 ObservesCanExecute 来指定命令是否可执行所依赖的属性变更。

public class MainViewModel : BindableBase
{
    private bool _canSayHello = true;

    public MainViewModel()
    {
        SayHelloCommand = new DelegateCommand(SayHello)
            .ObservesCanExecute(() => CanSayHello); // <-- 修改此行
    }

    public bool CanSayHello // 添加此属性
    {
        get => _canSayHello;
        set => SetProperty(ref _canSayHello, value);
    }

    public DelegateCommand SayHelloCommand { get; }

    private void SayHello()
    {
        Title = "Hello Avalonia!";
    }
}

CompositeCommand

CompositeCommand 是一个命令集合，可以将多个命令组合成一个命令，当执行该命令时，会依次执行集合中的命令。当集合中的所有命令的 CanExecute 方法返回 true 时，CompositeCommand 的 CanExecute 方法才会返回 true。

public class MainViewModel : BindableBase
{
    public MainViewModel()
    {
        CompositeCommand = new CompositeCommand();
        CompositeCommand.RegisterCommand(new DelegateCommand(SayHello));
        CompositeCommand.RegisterCommand(new DelegateCommand(SayGoodbye));
    }

    public CompositeCommand CompositeCommand { get; }

    private void SayHello()
    {
        Title = "Hello Avalonia!";
    }

    private void SayGoodbye()
    {
        Title = "Goodbye Avalonia!";
    }
}

如果视图与视图模型可能会被销毁，则也需要考虑符合命令的取消注册。

SayHelloCompositeCommand.UnregisterCommand(new DelegateCommand(SayHello));
SayHelloCompositeCommand.UnregisterCommand(new DelegateCommand(SayGoodbye));

事件聚合器

Prism 中的事件聚合器是一个全局的事件总线，可以在不同的视图模型之间传递消息。

GetEvent 方法的泛型参数需要一个继承自 EventBase 的事件参数，框架提供了 PubSubEvent<TPayload> 可供直接使用。

PubSubEvent<TPayload> 是一个发布/订阅事件，可以通过 Publish 方法发布消息，通过 Subscribe 方法订阅消息。

如果需要操作 UI 元素，可以通过 ThreadOption.UIThread 来指定在 UI 线程上执行。

如果需要过滤指定的消息，可以通过 Subscribe 方法的的第四个参数 Predicate<TPayload> 来指定过滤条件。

public class EventsViewModel : BindableBase, IDisposable
{
    private string _receivedMessage;
    private readonly SubscriptionToken _subscriptionToken;

    public EventsViewModel(IEventAggregator eventAggregator)
    {
        PublishEventCommand = new DelegateCommand(() =>
            eventAggregator.GetEvent<PubSubEvent<string>>()
                .Publish($"Hello from Avalonia! It's {DateTime.Now} now."))
        _subscriptionToken = eventAggregator.GetEvent<PubSubEvent<string>>()
            .Subscribe(message => ReceivedMessage = $"Received message: {message}", ThreadOption.UIThread);
    }

    public DelegateCommand PublishEventCommand { get; private set; }

    public string ReceivedMessage
    {
        get => _receivedMessage;
        private set => SetProperty(ref _receivedMessage, value);
    }

    /// <inheritdoc />
    public void Dispose()
    {
        GC.SuppressFinalize(this);
        _subscriptionToken.Dispose();
    }
}

对话框服务

使用对话框服务前，需要在 App.xaml.cs 中注册对话框服务。

containerRegistry.RegisterDialog<MessageBoxView, MessageBoxViewModel>();

Prism 中提供了 IDialogService 接口服务，可以用于显示对话框。

dialogService.ShowDialog 的其中一个重载可以接收视图名称、对话框参数、回调方法。

DialogParameters parameters = new()
{
    { "title", "Dialog Title" },
    { "content", DialogContent }
};

dialogService.ShowDialog(nameof(MessageBoxView), parameters, result =>
{
    DialogContent = result.Result == ButtonResult.OK
        ? "Dialog closed by OK"
        : "Dialog closed by Cancel";
});

为 MessageBoxViewModel 实现 IDialogAware 接口，可以让感知作为对话框数据模型的参数与状态。

OnDialogOpened 方法，IDialogParameters parameters 参数上可以获取 ShowDialog 所传入的 parameters，可用于设置属性。

RequestClose 事件可以用于关闭对话框，可以传入一个 DialogResult 枚举值，表示对话框的结果，以供 ShowDialog 的回调方法使用。

区域导航

Prism 中的区域导航主要由 IRegionManager 接口提供，可以用于将指定的区域导航到指定的视图。

要使用区域导航，首先需要在 App.xaml.cs 中注册区域导航服务。

containerRegistry.RegisterForNavigation<ServicesView, ServicesViewModel>();

在视图中的 ContentControl 上添加 prism:RegionManager.RegionName 附加属性，指定区域名称。

<ContentControl prism:RegionManager.RegionName="MainRegion" />

在视图模型中，通过 IRegionManager.RequestNavigate 方法导航到指定的视图。

public class MainWindowViewModel : BindableBase
{
    private readonly IRegionManager _regionManager;

    public MainWindowViewModel(IRegionManager regionManager)
    {
        _regionManager = regionManager;
        _regionManager.RequestNavigate("MainRegion", nameof(ServicesView));
    }
}

即可让指定的区域导航至指定的视图。

INavigationAware 接口提供了参与导航的视图模型的相关信息。

OnNavigatedTo 方法在视图模型导航到时调用，可以获取导航参数。
OnNavigatedFrom 方法在视图模型导航离开时调用。
IsNavigationTarget 方法用于指示当前视图模型是否可以处理导航请求。

在请求导航时可以传入参数：

NavigationParameters parameters = new()
{
    { "at", DateTime.Now }
};
regionManager.RequestNavigate(RegionNames.ContentRegion, nameof(Views.NavigationsView), parameters);

NavigationContext 上便可获取到传入的参数。

DateTime at = navigationContext.Parameters.GetValue<DateTime>("at");

IRegionNavigationService 上提供了 IRegionNavigationJournal Journal 属性，可以用于导航历史记录的管理。 CanGoBack 和 CanGoForward 属性，可以用于判断是否可以回退或前进。 GoBack 和 GoForward 方法，可以用于回退或前进。

如果需要让某些视图不被记录在导航历史记录中，例如启动页、登录页、对话框等中，可以为其实现 IJournalAware接口，并为 PersistInHistory 方法返回 false。

区域适配器

RegionManager.RegionName 所能附加的容器必须存在对应的区域适配器，否则 Prism 无法获知如何在容器中添加或删除视图。

内置的区域适配器有：

ContentControlRegionAdapter
ItemsControlRegionAdapter

而要在其它的容器上使用区域导航，需要自定义区域适配器。

public class StackPanelRegionAdapter : RegionAdapterBase<StackPanel>
{
    public StackPanelRegionAdapter(IRegionBehaviorFactory regionBehaviorFactory)
        : base(regionBehaviorFactory)
    {
    }

    protected override void Adapt(IRegion region, StackPanel regionTarget)
    {
        region.Views.CollectionChanged += (sender, e) =>
        {
            if (e is { Action: NotifyCollectionChangedAction.Add, NewItems: not null })
            {
                foreach (Control item in e.NewItems)
                    regionTarget.Children.Add(item);
            }

            if (e is { Action: NotifyCollectionChangedAction.Remove, OldItems: not null })
            {
                foreach (Control item in e.OldItems)
                    regionTarget.Children.Remove(item);
            }
        };
    }

    protected override IRegion CreateRegion() => new SingleActiveRegion();
}

然后在 App.xaml.cs 中注册该区域适配器。

protected override void ConfigureRegionAdapterMappings(RegionAdapterMappings regionAdapterMappings)
{
    base.ConfigureRegionAdapterMappings(regionAdapterMappings);
    regionAdapterMappings.RegisterMapping(typeof(StackPanel), Container.Resolve<StackPanelRegionAdapter>());
}

模块

模块是 Prism 中的一个概念，用于将应用程序分解为更小的功能单元，以便于管理和维护。

在模块的程序集内需要定义一个模块类，实现 IModule 接口。

public class ModuleAModule : IModule
{
    public void RegisterTypes(IContainerRegistry containerRegistry)
    {
    }

    public void OnInitialized(IContainerProvider containerProvider)
    {
    }
}

在模块的定义内，可以定于仅属于该模块的服务、视图、视图模型、导航等。这使得服务的定义不再混杂在主程序集中，而是更加清晰地分离开来。

containerRegistry.RegisterForNavigation<ModuleAView, ModuleAViewModel>();
containerRegistry.Register<IDelayService, DelayService>();

在主程序集中，需要在 App.xaml.cs 中注册模块。

protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)
{
    base.ConfigureModuleCatalog(moduleCatalog);
    moduleCatalog.AddModule<ModuleAModule>();
}

模块相关的视图、视图模型、服务等会在模块初始化时被注册到容器中，以便于在模块内外使用。

如果不想让主程序包含对模块的引用，而是在程序启动时扫描目录加载模块，可以使用 DirectoryModuleCatalog。

protected override IModuleCatalog CreateModuleCatalog()
{
    const string modulePath = @".\Modules";
    if (!Directory.Exists(modulePath))
        Directory.CreateDirectory(modulePath);
    return new DirectoryModuleCatalog { ModulePath = modulePath };
}

如果需要判断某个模块是否被加载，可以通过 IModuleManager 接口上提供的方法来判断。

if (moduleManager.ModuleExists("ModuleAModule")
    && moduleManager.IsModuleInitialized("ModuleAModule"))
    regionManager.RequestNavigate(RegionNames.ContentRegion, "ModuleAView");、

JSON 序列化的自定义转换器

Mon, 15 May 2023 00:00:00 GMT

::github{repo="gehongyan/JsonConverterTutorial"}

转换器是一种将对象或值与 JSON 进行相互转换的类，一般用于实现以下几种目标：

重写内置转换器的默认行为。例如，将 DateTimeOffset 值与 Unix 时间戳进行相互转换。
为内置转换器不支持的类型提供 JSON 序列化和反序列化的支持。例如，在 .NET 6 中，内置转换器不支持将 DateOnly 或 TimeOnly 的值与 JSON 进行相互转换。
为自定义类型提供 JSON 序列化和反序列化的支持。例如，将 Person 类型与 JSON 进行相互转换。
其它需要自订序列化与反序列化行为的情况。

JSON 转换器

以重写 DateTimeOffset 类型的 JSON 序列化默认行为为例。

DateTimeOffset 的默认序列化结果与 .ToString(@"'""'yyyy-MM-ddTHH:mm:ss.FFFFFFFzzz'""'") 的结果一致，即将 DateTimeOffset 的值转换为 ISO 8601 格式的字符串。

如果我们希望将 DateTimeOffset 的值转换为 Unix 时间戳，可以通过重写 DateTimeOffset 的默认转换器来实现。

转换器的应用

主要有两种常用方法用于注册转换器：

通过 JsonSerializerOptions.Converters 属性注册转换器。

JsonSerializerOptions options = new();
options.Converters.Add(new DateTimeOffsetTimeStampConverter());
JsonSerializer.Serialize(obj, options);

通过 JsonConverterAttribute 特性注册转换器。

class Person
{
    [JsonConverter(typeof(DateTimeOffsetTimeStampConverter))]
    public DateTimeOffset BirthDate { get; set; }
}

转换器的工厂方法

如果转换器需要接受泛型参数，为多种类型提供转换支持，可以通过转换器的工厂方法来实现。

对于复杂 API 行为的支持

如有第三方 API 的行为不符合预期，可以通过转换器来实现对其行为的支持。

正则表达式及在 .NET 中的应用

Sat, 08 Apr 2023 00:00:00 GMT

::github{repo="gehongyan/RegexTutorial"}

正则表达式

正则表达式，是一种文本模式，描述了一系列匹配某个句法规则的字符串。使用正则表达式进行的任务一般可以分为两类，即检索和替换。

正则表达式的语法

普通字符

普通字符，即不具有特殊含义的字符，如字母、数字、汉字等，它们在正则表达式中的含义与在普通文本中的含义相同，如在正则表达式中，a 代表字母 a，1 代表数字 1，你 代表汉字 你。

元字符

元字符，即具有特殊含义的字符。

元字符	含义	示例
`^`	匹配整个字符串的开始位置	`^a` 匹配 `at`，但不匹配 `cat`
`$`	匹配整个字符串的结束位置	`i$` 匹配 `hi`，但不匹配 `hit`
`.`	匹配除换行符以外的任意字符	`a.c` 匹配 `abc`，`a c`，`a1c`，`a*c` 等
`?`	匹配前一个字符 0 次或 1 次	`hi?` 匹配 `h`，`hi`，但不匹配 `hii`，`hiii` 等
`*`	匹配前一个字符 0 次或多次	`hi*` 匹配 `h`，`hi`，`hii`，`hiii` 等
`+`	匹配前一个字符 1 次或多次	`hi+` 匹配 `hi`，`hii`，`hiii` 等，但不匹配 `h`
`{n}`	匹配前一个字符 n 次	`hi{2}` 匹配 `hii`，但不匹配 `h`，`hi`，`hiii` 等
`{n,}`	匹配前一个字符 n 次或更多次	`hi{2,}` 匹配 `hii`，`hiii` 等，但不匹配 `h`，`hi` 等
`{n,m}`	匹配前一个字符 n 到 m 次	`hi{1,3}` 匹配 `hi`，`hii`，`hiii` 等，但不匹配 `h`
`[ ]`	匹配方括号中的任意字符	`[abc]` 匹配 `a`，`b`，`c`，但不匹配 `d`，`e`，`f`
`[^ ]`	匹配除方括号中的任意字符	`[^abc]` 匹配 `d`，`e`，`f` 等，但不匹配 `a`，`b`，`c`
`( )`	用于匹配或捕获	`(abc)` 匹配 `abc`，并将 `abc` 作为一个整体分组
`\\|`	用于分支选择	`a\\|b` 匹配 `a` 或 `b`，但不匹配 `ab`

字符转义

在正则表达式中，如果要匹配元字符本身，需要对元字符进行转义，即在元字符前加上反斜杠 \，使其被解释为普通字符，如 . 匹配除换行符以外的任意字符，如果要匹配 . 本身，则需要使用 \. 进行转义。

如果特殊字符出现在方括号 [] 中，则不需要转义，如 [.] 匹配 .，[*] 匹配 * 等。

如果要匹配反斜杠 \，则需要使用 \\ 进行转义。

如果有特殊字符不便于输入与显示，可以使用 \xhh 的形式进行转义，其中 hh 为 ASCII 码的十六进制表示，如 \x2e 转义为 .，\x66 转义为 f 等。也可以使用 \uXXXX 的形式进行转义，其中 XXXX 为 Unicode 码的十六进制表示，如 \u002e 转义为 .，\u0066 转义为 f 等。

还有一些预留的转义字符，以下是常用的转义字符：

转义字符	含义	等价于
`\n`	换行符	`\x0a` 或 `\u000a`
`\r`	回车符	`\x0d` 或 `\u000d`
`\t`	水平制表符	`\x09` 或 `\u0009`
`\v`	垂直制表符	`\x0b` 或 `\u000b`
`\f`	换页符	`\x0c` 或 `\u000c`

字符类

字符类是一组字符的集合，用于匹配某个字符是否属于该字符类中的字符。常见的用法有：

用法	含义	示例
`[ ]`	匹配方括号中的任意字符	`[abc]` 匹配 `a`，`b`，`c`，但不匹配 `d`，`e`，`f`
`[^ ]`	匹配除方括号中的任意字符	`[^abc]` 匹配 `d`，`e`，`f` 等，但不匹配 `a`，`b`，`c`
`.`	匹配除换行符以外的任意字符	`a.c` 匹配 `abc`，`a c`，`a1c`，`a*c` 等
`\w`	匹配任意字母、数字或下划线	`\w` 匹配 `a`，`b`，`c`，`1`，`2`，`3`，`_` 等，但不匹配 `.`，`-`，`+` 等，等价于 `[a-zA-Z0-9_]`
`\W`	匹配任意非字母、数字或下划线	`\W` 匹配 `.`，`-`，`+` 等，但不匹配 `a`，`b`，`c`，`1`，`2`，`3`，`_` 等，等价于 `[^a-zA-Z0-9_]`
`\d`	匹配任意十进制阿拉伯数字	`\d` 匹配 `1`，`2`，`3`，但不匹配 `a`，`b`，`c`，`_` 等，等价于 `[0-9]`
`\D`	匹配任意非十进制阿拉伯数字	`\D` 匹配 `a`，`b`，`c`，`_` 等，但不匹配 `1`，`2`，`3` 等，等价于 `[^0-9]`
`\s`	匹配任意空白符（空格、制表符、换页符等）	`\s` 匹配空格，制表符，换页符等，但不匹配 `a`，`b`，`c`，`1`，`2`，`3`，`_` 等，等价于 `[ \t\n\r\f\v]`
`\S`	匹配任意非空白符（空格、制表符、换页符等）	`\S` 匹配 `a`，`b`，`c`，`1`，`2`，`3`，`_` 等，但不匹配空格，制表符，换页符等，等价于 `[^ \t\n\r\f\v]`
`\p{}`	Unicode 类别或命名块中的任意字符	匹配预定义的 Unicode 类别或命名块中的任意字符，如 `\p{Lu}` 匹配任意大写字母，`\p{IsCJKUnifiedIdeographs}` 匹配中日韩统一表意文字字符
`[base-[excluded]]`	字符类减法，匹配 `base` 中的任意字符，但不匹配 `excluded` 中的任意字符	`[a-z-[aeiou]]` 匹配任意小写字母，但不匹配任意元音字母，等价于 `[bcdfghjklmnpqrstvwxyz]`

定位点

用法	含义	示例
`^`	匹配整个字符串的开始位置	`^a` 匹配 `at`，但不匹配 `cat`
`$`	匹配整个字符串的结束位置	`i$` 匹配 `hi`，但不匹配 `hit`
`\b`	匹配单词边界	`\babc` 匹配 `abc`，`abc123` 中的 `abc`，但不匹配 `123abc`，`123abc123` 等
`\B`	匹配非单词边界	`\Babc` 匹配 `123abc`，`123abc123` 中的 `abc`，但不匹配 `abc`，`abc123` 等

贪婪与懒惰

贪婪与懒惰是指正则表达式匹配时的匹配策略，贪婪是指尽可能多的匹配，懒惰是指尽可能少的匹配。默认情况下，正则表达式是贪婪的，即尽可能多的匹配。如果要使用懒惰匹配，可以在量词后面加上 ?。例如，针对文本 (abc)def(ghi)，$.*$ 尝试匹配括号及括号内的内容，但是由于是贪婪的，所以会尝试匹配最长的字符串，即 (abc)def(ghi)，而不是 (abc) 或 (ghi)。如果要匹配 (abc) 或 (ghi)，可以使用 $.*?$。

分组捕获

分组捕获是指将匹配到的字符串分组，以便后续使用。分组捕获的语法是使用 () 包裹要捕获的字符串，例如，针对文本 text，使用 (.*?) 可以将匹配结果捕获为一个分组，即 text。

捕获的分组可以进行反向引用，即在后续的正则表达式中使用 \1，\2，\3 等引用之前捕获的分组。例如，针对文本 abc，使用 <(.*?)>.*?</\1> 进行匹配，可以保证匹配出来的标签是成对的。

分组可以命名，语法为 (?<name>pattern)，可以使用 \k<name> 进行反向引用。例如，针对文本 abc，使用 <(?<tag>.*?)>.*?</\k<tag>> 进行匹配，通过命名分组 tag，可以保证匹配出来的标签是成对的。

分组内的 | 表示或的关系，例如，针对文本 abc，使用 (a|b)c 可以匹配 ac 或 bc。

断言

断言是指在匹配时，不消耗字符，只判断是否匹配。断言分为四种：正向肯定断言、正向否定断言、反向肯定断言、反向否定断言。

用法	含义	示例
`(?=pattern)`	正向肯定断言，匹配 pattern 之前的位置	`abc(?=def)` 匹配后面是 `def` 的 `abc`，匹配结果中不包含 `def`
`(?!pattern)`	正向否定断言，匹配不是 pattern 之前的位置	`abc(?!def)` 匹配后面不是 `def` 的 `abc`
`(?<=pattern)`	反向肯定断言，匹配 pattern 之后的位置	`(?<=abc)def` 匹配前面是 `abc` 的 `def`，匹配结果中不包含 `abc`
`(?<!pattern)`	反向否定断言，匹配不是 pattern 之后的位置	`(?<!abc)def` 匹配前面不是 `abc` 的 `def`

例如，如要匹配括号及括号内的内容，前文使用的是 $.*$，但是这样会匹配到括号。如果要在匹配结果中去掉括号，可以使用 (?<=$).*?(?=$)。

替换

替换是使用正则表达式的另一个常见用途，使用普通字符进行替换，则会将匹配的内容替换为指定的字符串。例如，针对文本 text，使用 <(?<tag>.*?)>(.*?)</\k<tag>> 进行匹配，然后使用 result 进行替换，匹配结果为 result。使用编号组引用语法，则可以对匹配的内容替换为编号捕获组，例如，对上面的文本使用 [$1] 进行替换，匹配结果为 [text]。使用命名组引用语法，则可以对匹配的内容替换为命名捕获组，例如，对上面的文本使用 [${tag}] 进行替换，匹配结果为 [p]。

正则表达式选项

正则表达式选项是指在正则表达式中使用的一些选项，用于控制正则表达式的匹配策略。

选项	含义
`g`	全局匹配，即匹配所有符合条件的字符串
`i`	忽略大小写
`m`	多行模式，即 `^` 和 `$` 匹配每一行的开始和结束位置
`s`	单行模式，即 `.` 匹配任意字符，包括换行符
`x`	忽略空白字符，即空白字符不参与匹配

正则表达式在 .NET 中的用法

正则表达式选项

RegexOptions 枚举定义了正则表达式选项，可以按位组合，常用的选项有：

选项	含义
None	指定不设置任何选项
IgnoreCase	指定不区分大小写的匹配
Multiline	多行模式。更改 ^ 和 $ 的含义，使它们分别在任意一行的行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配
Singleline	指定单行模式。更改点 (.) 的含义，以使它与每个字符（而不是除 \n 之外的所有字符）匹配。
IgnorePatternWhitespace	消除模式中的非转义空白并启用由 # 标记的注释
RightToLeft	指定搜索从右向左而不是从左向右进行
Compiled	指定正则表达式编译为中间语言代码，而不是解释

常见方法

IsMatch：指示正则表达式在输入字符串中是否找到匹配项。
Match：在输入字符串中搜索匹配正则表达式模式的子字符串，并将第一个匹配项作为单个 Match 对象返回。
Matches：在输入字符串中搜索正则表达式的所有匹配项并返回所有匹配。
Replace：在指定的输入字符串内，使用指定的替换字符串替换与某个正则表达式模式匹配的字符串。
Split：在由正则表达式匹配定义的位置将输入字符串拆分为一个子字符串数组。

调用方式

静态方法

Regex.IsMatch(Input, Pattern);
Regex.IsMatch(Input, Pattern, RegexOptions.Compiled);

实例方法

var regex = new Regex(Pattern);
var compiledRegex = new Regex(Pattern, RegexOptions.Compiled);
regex.IsMatch(Input);
compiledRegex.IsMatch(Input);

源代码生成器

.NET 7 中新增了正则表达式源代码生成器，可以通过正则表达式生成源代码，然后直接调用源代码中的方法。

[GeneratedRegex(Pattern, RegexOptions.Compiled)]
private static partial Regex MyRegex();

// 在方法中调用
bool isMatch = MyRegex().IsMatch(Input);

在 IDE 中的用法

Visual Studio 和 JetBrains Rider 等主流代码编辑工具或集成开发环境都是支持通过正则表达式进行搜索与替换的。以替换双斜线代码注释为三斜线 XML 注释为例，可以使用以下的正则表达式进行搜索替换：

匹配：(?<!/)//(?!/)\s*(?<comment>.+)
替换：/// <summary> ${comment} </summary>

要替换为三行展开的 XML 注释，则可以使用以下的正则表达式进行搜索替换：

匹配：(?<space> +)(?<!/)//(?!/)\s*(?<comment>.+)

替换：

${space}/// <summary>
${space}///     ${comment}
${space}/// </summary>

再以为所有的属性添加 JsonPropertyName 特性为例，可以使用以下的正则表达式进行搜索替换：

匹配：(?<all>public\s(?!class)\S+\s(?<name>\S+))
替换：[JsonPropertyName("${name}")] ${all}

示例用文本 1

示例用文本 2

实用工具

正则表达式在线测试工具
- Regex101
- Regexr
正则表达式可视化工具
- Regexper

参考文献

如何在C#中设计并实现流式接口模式

Thu, 15 Jul 2021 00:00:00 GMT

本文翻译自 How to Design and Implement the Fluent Interface Pattern in C# | ASSIST Software Romania

什么是流式接口 (Fluent interface)？

流式接口（Fluent interface）是软件工程中一种面向对象 API 的实现方式，其面向广泛依赖于方法链设计，目的在于通过创建领域特定语言 (Domain-specific language, DSL) 来提高代码可读性。

前言

本文包含了多种变成概念，包括但不限于：继承、多态、方法链、领域特定语言、流式接口等。你可能不熟悉流式接口 API 这个术语，但你非常有可能在以前就已经使用过，因为它在许多面向对象的编程语言的很多框架与库中都有被一直使用过。

流式接口与扩展方法

流式接口与扩展方法都不是很简单，或者说是有时候甚至不太可能调试的模式，因为他们的中间结果在调试中都不可达。两者的语法很相似，但还是让我们看看它们之间的区别在哪里：

扩展方法

返回类型是不变的，其总会返回一个具有相同类型的对象
循环无法被阻止，开发者可以连接调用相同的方法，每次调用时方法都会被执行
语句会被一行一行执行，其结果取决于之前的操作

流式接口

每个方法的返回类型可以不同，这保证了灵活性与可扩展性
循环可以被限制，方法可以按照预先决定好的顺序连接
语句会在最后被执行，方法链用来收集数据与建立路径

主题

假如要实现一个类包含以下功能： * 下载到文件/流与从文件/流上传 * 本机计算机与 Azure Blob 存储之间的文件传输 * 异步传输，这可能不着急，但稍后可能会需要

按标准方式，实现一下接口将满足需求：

interface IBlobTransfer
{
    void BlobDownload(string connectionString, string blobName, string fileName, string filePath);
    void BlobDownload(string connectionString, string blobName, string fileName, Stream stream);
    void BlobUpload(string connectionString, string blobName, string fileName, string filePath);
    void BlobUpload(string connectionString, string blobName, string fileName, Stream stream);
}

尽管这些代码可以满足需求，但让我们以一种更好的方式来实现他们。

设计

定义自然语言句法

首先，有必要定义一个包含所有合适且允许的方法组合列表，将此组合列表应用于上述主题将会生成以下结果：

FluentBlobTransfer.Connect(..).OnBlob(..).Download(..).ToFile(..);
FluentBlobTransfer.Connect(..).OnBlob(..).Download(..).ToStream(..);
FluentBlobTransfer.Connect(..).OnBlob(..).Upload(..).FromFile(..);
FluentBlobTransfer.Connect(..).OnBlob(..).Upload(..).FromStream(..);

约束

可以发现Download.FromFile与Upload.ToStream是不合法的组合。为了阻止这样的行为，必须满足以下条件：

Download 方法应该返回一个带有以下方法签名的接口：

void ToFile(..);
void ToStream(..);

Upload方法应该返回一个带有以下方法签名的接口：

void FromFile(..);
void FromStream(..)

类图

定义接口

这是方法签名所在的位置，遵循这些简单的规则来保证成功：

第一个和最后一个方法可以是无参的
每个方法最多接受一个参数
使用描述性词汇，如最多五个单词组成的短语
覆盖所有情况，正确分割路径

interface IAzureBlob
{
    IAzureAction OnBlob(string blobBlockPath);
}

interface IAzureAction
{
    IAzureWrite Download(string fileName);
    IAzureRead Upload(string fileName);
}

interface IAzureWrite
{
    void ToFile(string filePath);
    void ToStream(Stream stream);
}

interface IAzureRead
{
    void FromFile(string filePath);
    void FromStream(Stream stream);
}

实现

要点

构造函数必须是私有的，不允许类的实例化
不允许继承，使用**sealed**密闭修饰符
为方法和变量使用释义正确的名称，不使用含糊歧义的名称
每个方法最多接受一个参数，别忘了我们要以_流畅的方式_实现！

入口函数

入口函数需标记为static静态，建议名称使用动词来表达意图。

实现接口与保证合适的方法链

方法链中的每一步都应该用来收集数据后指向下一个方法。通常，方法链的最后一个方法返回**void**未知类型指针，来表明方法链链尾。

请注意，FluentBlobTransfer类需要实现所有先前准备好的接口。

public sealed class FluentBlobTransfer : IAzureBlob, IAzureAction, IAzureWrite, IAzureRead
{
    private readonly string connectionString;
    private string blobBlockPath;
    private string fileName;

    private FluentBlobTransfer(string connectionString) => this.connectionString = connectionString;

    public static IAzureBlob Connect(string connectionString) => new FluentBlobTransfer(connectionString);

    public IAzureAction OnBlob(string blobBlockPath)
    {
        this.blobBlockPath = blobBlockPath;

        return this;
    }

    public IAzureWrite Download(string fileName)
    {
        this.fileName = fileName;

        return this;
    }

    public IAzureRead Upload(string fileName)
    {
        this.fileName = fileName;

        return this;
    }

    public void ToFile(string filePath)
    {
        // Code to download from Azure Blob Storage to file
    }

    public void ToStream(Stream stream)
    {
        // Code to download from Azure Blob Storage to stream
    }

    public void FromFile(string filePath)
    {
        // Code to upload from file to Azure Blob Storage
    }

    public void FromStream(Stream stream)
    {
        // Code to upload from stream to Azure Blob Storage
    }
}

请注意，传输过程的具体实现不在本文的讨论范围内。

现在你可以流畅地调用方法传输文件：

FluentBlobTransfer
    .Connect("storageAccountConnectionString")
    .OnBlob("blobName")
    .Download("fileName")
    .ToFile(@"D:\Azure\Downloads\");

探索

我最喜欢的流式接口的例子是**Microsoft.Azure.*.Fluent**库，这些库的基础指出在于它们通过不言自明的流式接口取代了过往需要记忆命令和参数的需要（不像 PowerShell 脚本）。

下一个代码片段在一个新的资源组中创建了一个新的 SQL Server 数据库，并包含了两个数据库及一些防火墙规则。

await Azure
    .Configure()
    .WithLogLevel(Level.Basic)
    .Authenticate(credentials)
    .WithSubscription("subscriptionId")
    .SqlServers
    .Define("sqlServerName")
    .WithRegion(Region.EuropeWest)
    .WithNewResourceGroup()
    .WithAdministratorLogin("sqlAdmin")
    .WithAdministratorPassword("pass")
    .WithNewDatabase("databaseOne")
    .WithNewDatabase("databaseTwo")
    .WithNewFirewallRule("0.0.0.0")
    .WithNewFirewallRule("1.1.1.1")
    .WithNewFirewallRule("2.2.2.2")
    .CreateAsync();

EntityFramework 的流式接口配置提供了一个使用优秀句法配置数据库表与字段的方式。

modelBuilder
    .Entity<Foo>()
    .HasMany(foo => foo.Bars)
    .WithOne(bar => bar.Foo)
    .HasForeignKey(bar => bar.FooId)
    .OnDelete(DeleteBehavior.Cascade);

modelBuilder
    .Entity<Foo>()
    .Property(foo => foo.Value)
    .HasDefaultValue("0123456789")
    .HasMaxLength(10)
    .IsFixedLength()
    .IsRequired();

在本文原作者的 GitHub 账户中可以浏览其他流式接口样例、探索流式方法链、访问服务本文的源代码。

结论

设计与实现一个易于解释与使用的流式接口会花费很多时间，但这样的努力非常值得。你可能会觉得它让你无法抗拒，但也要记住不是所有的都有必要以流式实现。

为可重用代码提供流式接口很方便，开发者可以不用担心“它是怎么工作的？”“我需要多少参数？”“多有少个选项？”就可以直接调用。

【字幕组】曲目表列表

Thu, 29 Apr 2021 00:00:00 GMT

♪ ANIMA -『ソードアート・オンラインアリシゼーション War of Underworld/刀剑神域 Aliciazation 异界战争』终章OP - 曲：毛蟹(LIVE LAB.) 歌：ReoNa
♪ Astronomia - Vicetone & Tony Igy
♪ Bad Apple!! feat. nomico - Alstroemeria Records
♪ Cat's dance - まらしぃ feat. 初音ミク/初音未来
♪ DAYBREAK FRONTLINE / 黎明前线 - Orangestar feat. IA
♪ from Y to Y - ジミーサムP(OneRoom) feat. 初音ミク/初音未来
♪ God knows... - TV动画『涼宮ハルヒの憂鬱/凉宫春日的忧郁』12话插曲 - 曲：神前暁/神前晓歌：平野绫
♪ Happy Birthday/生日快乐歌 - 11月26日
♪ Help me, ERINNNNNN!! - COOL&CREATE
♪ KARIN - パズドラ/智龙迷城 - まらしぃ
♪ KING - Kanaria feat. GUMI
♪ Lemon - TBS 日剧『アンナチュラル/非自然死亡』主题曲 - 米津玄師 / 米津玄师
♪ LOSER -「Honda Jade/本田杰德」电视广告- 米津玄師
♪ LovePiano - YAMAHA主办『LovePiano presents みんなのピアノ発表会/大家的钢琴发表会』印象曲 - まらしぃ［💗🎹］
♪ MEGALOVANIA -『Undertale/传说之下』Sans战斗曲 - Toby Fox
♪ Messire - まらフェス2018印象曲 - まらしぃ
♪ ODDS&ENDS/梦想碎片 - ryo(supercell) feat. 初音ミク/初音未来
♪ One Last Kiss -『シン・エヴァンゲリオン劇場版𝄇/新·福音战士剧场版𝄇』主題歌 - 宇多田ヒカル/宇多田光
♪ only my railgun - 电视动画『とある科学の超電磁砲/某科学的超电磁炮』前期OP - fripSide
♪ Sogna - まらしぃ
♪ stella=steLLa - SEGA音游『CHUNITHM』收录曲目 - まらしぃ
♪ tadu - 电视广告『FUNAI 4K有機ELテレビ/船井电机4K有机EL电视』用曲 - まらしぃ
♪ This game -『ノーゲーム・ノーライフ/NO GAME NO LIFE 游戏人生』OP - 曲：若林充歌：鈴木このみ/铃木木乃美
♪ U.N.オーエンは彼女なのか？/U.N.OWEN就是她吗？ -『東方紅魔郷/东方红魔乡』Extra面Boss：フランドール・スカーレット/芙兰朵露·斯卡蕾特主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ unravel -『東京喰種トーキョーグール/东京食尸鬼』1期OP - 曲：TK(北岛彻) 歌：TK from 凛として時雨/Tk from 凛冽时雨
♪ アイネクライネ/Eine Kleine - 东京地下铁广告活动「Color your days.」广告用曲 - 米津玄師/米津玄师
♪ アカシア/相思树 -『Pokémon Special Music Video/宝可梦系列宣传影片「GOTCHA！」』主题曲 - BUMP OF CHICKEN
♪ アマツキツネ/天狐 - 初投稿四周年纪念作 - まらしぃ feat. 鏡音リンAppend/镜音铃Append
♪ アンノウン・マザーグース/Unknown Mother-Goose - wowaka(現実逃避P) feat.初音ミク/初音未来
♪ インフェルノ/Inferno - 电视动画『炎炎ノ消防隊/炎炎消防队』1期1-14话OP - Mrs. GREEN APPLE
♪ うまぴょい伝説/马儿蹦跳传说 -『ウマ娘プリティーダービー/赛马娘 Pretty Derby』13话ED - 曲：Cygames(本田晃弘)
♪ おてんば恋娘/活泼的纯情小姑娘 -『東方紅魔郷/东方红魔乡』2面Boss：チルノ/琪露诺主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ グッバイ宣言/Goodbye宣言 - Chinozo feat. v flower
♪ コネクト/Connect - 电视动画『魔法少女まどか☆マギカ/魔法少女小圆』OP - ClariS
♪ ザナルカンドにて/To Zanarkand -『FINAL FANTASY X/最终幻想X』OP - 植松伸夫
♪ シノノメ/东云 - まらしぃ feat. 初音ミク/初音未来
♪ シャルル/Charles - バルーン(须田景凪) feat. v flower
♪ テオ/将手 - Omoi feat. 初音ミク/初音未来
♪ とある霖雨 - marasy×粗品 feat. 初音ミク/初音未来
♪ ドラマツルギー/拟剧论 - Eve
♪ ナイト・オブ・ナイツ/Night of Knights - COOL&CREATE by ビートまりお
♪ ネイティブフェイス/Native Faith -『東方風神録/东方风神录』Extra面Boss：洩矢諏訪子/洩矢诹访子主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ ハルトマンの妖怪少女/哈德曼的妖怪少女 -『東方地霊殿/东方地灵殿』Extra面BOSS：古明地こいし/古明地恋主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ ピースサイン/Peace Sign - 电视动画『僕のヒーローアカデミア/我的英雄学院』2期OP - 米津玄師/米津玄师
♪ ヒバナ/火花 - DECO*27 feat. 初音ミク/初音未来
♪ ビバハピ/Viva Happy - Mitchie M feat. 初音ミク/初音未来 (MORE MORE JUMP!)
♪ ピュアヒューリーズ～心の在処/Pure Furies ～心之所在 -『東方紺珠伝/东方绀珠传』6面BOSS：純狐/纯狐主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ フラワリングナイト/Flowering Night -『東方花映塚/东方花映塚』十六夜咲夜主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ ブリキノダンス/马口铁之舞 - 日向電工/日向电工 feat. 初音ミク/初音未来
♪ ベノム/猛毒 - かいりきベア/怪力熊 feat.flower
♪ メルト/melt - ryo(supercell) feat. 初音ミク/初音未来
♪ ようこそジャパリパークへ/欢迎来到加帕里公园 - けものフレンズ/兽娘动物园 OP - どうぶつビスケッツ/曲：大石昌良歌：动物饼干 × PPP
♪ ラーメン†デュエル/拉面†决斗 - Logical Emotion/まらしぃ
♪ ラストリモート/Last Remote -『東方地霊殿/东方地灵殿』Extra面道中曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ ロキ/ROKI - みきとP/MikitoP feat. 镜音リン
♪ ワールズエンド・ダンスホール/世末舞厅 - wowaka feat. 初音ミク/初音未来 & 巡音ルカ/巡音流歌
♪ 残酷な天使のテーゼ/残酷天使的行动纲领 - 动画『新世紀エヴァンゲリオン/新世纪福音战士』OP - 高橋洋子/高桥洋子
♪ 打打打打打打打打打打 - ヒゲドライバー/Hige Driver
♪ 地球最後の告白を/地球最后的告白 - kemu feat. GUMI
♪ 東方妖怪小町/东方妖怪小町 -『東方永夜抄/东方永夜抄』ラストワード/Last Word 主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ 対決のテーマ/对决主题 - 名探偵コナン/名侦探柯南 - 大野克夫
♪ 風神少女/风神少女 -『東方文花帖/东方文花帖』審判「浄頗梨審判 ‐射命丸文‐」/审判「净颇梨审判 -射命丸文-」摄影用曲5 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ 感電/感电 -『MIU404』主題歌 - 米津玄師/米津玄师
♪ 怪物 -『BEASTARS/动物狂想曲』第2期OP - YOASOBI
♪ 紅蓮華/红莲华 -动画『鬼滅の刃/鬼灭之刃』OP - 曲：草野華余子歌：LiSA
♪ 輝く針の小人族～ Little Princess/辉光之针的小人族～ Little Princess -『東方輝針城/东方辉针城』6面BOSS：少名針妙丸/少名针妙丸主题其 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ 回レ！雪月花/旋转吧！雪月花 -『機巧少女は傷つかない/机巧少女不会受伤』ED - 歌組雪月花(茅野愛衣/原田ひとみ/小倉唯)/歌组雪月花(茅野爱衣/原田瞳/小仓唯) - ヒゲドライバー/Hige Driver
♪ 魂のルフラン/魂之轮回 - 剧场版动画『新世紀エヴァンゲリオンシト新生/新世纪福音战士剧场版死与新生』主题曲 - 高橋洋子/高桥洋子
♪ 君の知らない物語/你不知道的故事 -『化物語/化物语』ED / 曲：ryo 歌：supercell
♪ 霖と五線譜 - まらしぃ feat. 初音ミク/初音未来
♪ 六兆年と一夜物語/六兆年零一夜的故事 - kemu feat. IA
♪ 炉心融解 / iroha feat. 鏡音リン/镜音铃
♪ 夢、時々.../梦、时时... - まらしぃ feat. 初音ミクAppend/初音未来Append
♪ 偶像に世界を委ねて～ Idoratrize World/寄世界于偶像～ Idoratrize World -『東方鬼形獣/东方鬼形兽』6面BOSS：埴安神袿姫/埴安神袿姬主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ 僕のために泣いてくれ - まらしぃ feat. 初音ミク/初音未来
♪ 千本桜/千本樱 - 黒うさP feat. 初音ミク/初音未来
♪ 千本桜/千本樱 - 黒うさP/黑兔P feat. 初音ミク/初音未来
♪ 青く駆けろ！/奔跑吧！蓝色！- 宝矿力水特网络视频『バーチャル東京サプライ少女2020 青く駆けろ！』篇 - まらしぃ feat. 初音ミク/初音未来
♪ 青空のラプソディ/青空狂想曲 - 电视动画『小林さんちのメイドラゴン/小林家的龙女仆』OP - fhána
♪ 人生のメリーゴーランド/人生的旋转木马 - 动画电影『ハウルの動く城/哈尔的移动城堡』OP - 久石譲/久石让
♪ 砂の惑星/砂之行星 - ハチ/米津玄师 feat. 初音ミク/初音未来
♪ 上海紅茶館～ Chinese Tea/上海红茶馆～ Chinese Tea -『東方紅魔郷/东方红魔乡』3面道中主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ 少女綺想曲～ Capriccio/少女绮想曲～ Capriccio -『東方永夜抄/东方永夜抄』4面BOSS：博麗靈夢/博丽灵梦主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ 十年越しのラストピース/跨越十年最后的碎片 - 触手猴与kemu十年友谊纪念曲 - まらしぃ x kemu feat. 初音ミク/初音未来
♪ 太陽曰く燃えよカオス/太阳说燃烧吧混沌 -『這いよれ！ニャル子さん/潜行吧!奈亚子』1期&OVA OP - 後ろから這いよれ隊G(ニャルラトホテプ/クトゥグア/暮井珠緒)/从后匍匐而来队G(奈亚子/克子/暮井珠绪)
♪ 天ノ弱/天之弱 - 164 feat. GUMI
♪ 崖っぷちのオーマイガール - まらしぃ feat. 初音ミク/初音未来
♪ 炎 - 剧场版动画『「鬼滅の刃」無限列車編/鬼灭之刃无限列车篇』主题曲 - 曲：梶浦由记歌：LiSA
♪ 夜に駆ける/向夜晚飞奔 - 小说『タナトスの誘惑/塔纳托斯的诱惑』及『夜に溶ける/溶于夜中』印象曲 - YOASOBI
♪ 幽雅に咲かせ、墨染の桜　～ Border of Life/幽雅地绽放吧，墨染的樱花　～ Border of Life -『東方妖々夢/东方妖妖梦』6面BOSS：西行寺幽々子/西行寺幽幽子主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN
♪ 月まで届け、不死の煙/飘上月球，不死之烟 -『東方永夜抄/东方永夜抄』Extra面BOSS：藤原妹紅/藤原妹红主题曲
♪ 竹取飛翔～ Lunatic Princess/竹取飞翔～ Lunatic Princess -『東方永夜抄/东方永夜抄』6面BOSS：蓬莱山輝夜/蓬莱山辉夜主题曲 - 上海アリス幻樂団/上海爱丽丝幻乐团/ZUN

【ASP.NET】ASP.NET MVC 5 入门概述

Wed, 14 Oct 2020 00:00:00 GMT

分离关注点的通用设计原则

分离关注点是开发时的指导原则1。此原则主张应根据软件执行的工作类型将软件分离。例如，假设应用程序中包含两个逻辑，其中一个逻辑标识要显示给用户的注意事项，另一个以特定方式设置这些注意事项的格式，使其更加显眼。负责选择为哪些事项设置格式的行为应与负责设置格式的行为区分开，因为这两种行为只是碰巧彼此相关联的独立关注点。

从体系结构上来说，按此原则有逻辑地构建应用程序应将核心业务行为与基础结构及用户界面逻辑区分开。理想情况下，业务规则和逻辑应单独位于一个项目中，且该项目不依赖于应用程序中的其他项目。此区分操作可帮助确保该业务模型易于测试，且可在不与低级别实现详细信息紧密耦合的情况下逐步改进。在应用程序体系结构的使用层背后，关注点分离是核心设计思想。

ASP.NET MVC 概述

ASP.NET MVC 是使用 MVC 设计模式构建 Web 应用和 API 的框架2。其中：

Model：模型
View：视图
Controller：控制器

MVC 模式

模型-视图-控制器 (MVC) 设计模式将应用程序分成 3 个主要组成部分：模型、视图和控制器。此模式有助于实现关注点分离。使用此模式，用户请求被路由至控制器，控制器负责使用模型来执行用户操作且/或检索查询结果，控制器选择要显示给用户的视图，并为其提供所需的模型数据。

下图显示 3 个主要组件及其相互引用关系：

模型责任

模型 (Model) 表示应用程序和任何应由其执行的业务逻辑或操作的状态。业务逻辑应与保持应用程序状态的任何实现逻辑共同封装在模型中。强类型视图通常使用 ViewModel 类型，旨在包含要在该视图上显示的数据。控制器从模型创建并填充 ViewModel 实例。

视图责任

视图 (View) 负责通过用户界面展示内容。它们使用 Razor 视图引擎在 HTML 标记中嵌入 .NET 代码。视图页面中应尽可能少得包含逻辑处理，且其中的任何逻辑都必须与展示内容相关。如果发现需要在视图文件中执行大量逻辑以显示复杂模型中的数据，请考虑使用 View Component、ViewModel 或视图模板来简化视图。

控制器责任

控制器 (Controller) 是处理用户交互、使用模型并最终选择呈现视图的组件。在 MVC 应用程序中，视图仅显示信息；控制器处理并响应用户输入和交互。在 MVC 模式中，控制器是初始入口点，负责选择要使用的模型类型和要呈现的视图，控制应用如何响应给定请求，并因此得名。

控制器不应由于责任过多而变得过于复杂。要阻止控制器逻辑变得过于复杂，请将业务逻辑推出控制器并推入域模型。

创建 ASP.NET MVC Web 应用程序（.NET Framework）

有关如何创建并运行 ASP.NET MVC Web 应用程序的指南可参考：

入门与 ASP.NET MVC 5 | Microsoft Docs

ASP.NET MVC Web 应用程序的目录结构

Visual Studio 会在创建 ASP.NET MVC Web 应用程序时自动添加一些文件与目录结构，但这并不是固定的目录结构。事实上，那些处理大型应用程序的开发人员通常跨多个项目来分割应用程序，以便使应用程序更易于管理，默认的项目结构哦确实提供了一个很好的默认目录约定，是的应用程序的关注点更加清晰。

本站点介绍涉及 ASP.NET Code MVC Web 应用程序会采用在默认目录结构基础上再添加一些其它实用文件夹的以下目录结构：

{解决方案名称}
└── {项目名称}                     # 命名空间
    ├── App_Code/                  # 公共业务类
    ├── App_Data/                  # 本地数据文件
    ├── App_Start                  # 部分配置代码，如：路由、捆绑、Web API
    │   ├── BundleConfig.cs        # 打包器配置
    │   ├── FilterConfig.cs        # 过滤器配置
    │   ├── RouteConfig.cs         # 路由配置
    │   └── WebApiConfig.cs        # Web API 配置
    ├── Areas                      # 区域
    │   └── {区域名称}             # 定义区域
    │       ├── Controllers/       # 区域控制器
    │       ├── Data/              # 区域本地数据
    │       ├── Scripts/           # 区域脚本
    │       ├── Views/             # 区域视图
    │       └── {区域名称}AreaRegistration.cs  # 区域注册配置
    ├── Asserts/                   # 自定义资源，如本地图片等非代码内容
    ├── Content/                   # 用于存储 CSS 样式等非脚本内容
    ├── Controllers                # 控制器
    │   └── {名称}Controllers.cs   # 控制器名称
    ├── fonts/                     # 自定义字体，主要用于 Bootstrap 模板系统引用
    ├── Migrations/                # Entity Framework Code First 所生成与使用的迁移代码
    ├── Models/                    # 模型
    ├── Scripts/                   # Javascript 库与脚本
    ├── Views                      # 视图
    │   ├── {名称}                 # 视图子文件夹
    │   │   └── {视图名称}         # 单视图
    │   ├── Shared                 # 共享视图文件夹
    │   │   ├── _Layout.cshtml     # 共享母版视图
    │   │   └── Error.cshtml       # 共享错误页视图
    │   └── _ViewStart.cshtml      # 呈现视图前运行的代码
    ├── favicon.ico                # 站点图标
    ├── Global.asax                # ASP.NET 应用程序的入口点 [4]
    ├── packages.config            # NuGet 包引用列表
    ├── Startup.cs                 # ASP.NET Core 应用程序的入口点，由 OWIN 提供 [4]
    └── Web.config                 # ASP.NET Web 应用程序配置信息

关键文件解析

~/Global.asax.cs

Global.asax.cs文件是一个特殊文件，其中包含 ASP.NET 应用程序生命周期事件的事件处理程序5。默认地，Global.asax.cs包含了Application_Start()方法，该方法在 MVC 应用程序启动时会被调用。Global.asax.cs默认代码如下：

using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace {命名空间}
{
    public class MvcApplication : HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();                        // 注册所有区域
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);  // 注册所有全局过滤器
            RouteConfig.RegisterRoutes(RouteTable.Routes);              // 注册所有传统路由信息
            BundleConfig.RegisterBundles(BundleTable.Bundles);          // 注册所有捆绑器配置
        }
    }
}

~/App_Start/RouteConfig.cs

路由概述

RouteConfig.cs文件配置了 ASP.NET 应用程序的传统路由信息5。

ASP.NET MVC 框架中的路由主要有两种用途：

匹配传入的请求（该请求不匹配服务器文件系统中的文件），并把这些请求映射到控制器操作
构造传出的 URL，用来响应控制器操作

代码功能分析

以下是此文件默认代码：

using System.Web.Mvc;
using System.Web.Routing;

namespace {命名空间}
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            // {resource}.axd 表示扩展名为 .axd 所有资源，如 WebResource.axd
            // {*pathInfo} 表示匹配任何路径
            // IgnoreRoute("{resource}.axd/{*pathInfo}") 方法通知路由系统忽略处理 ASP.NET 的 Web 资源文件
            // 如：WebResource.axd 或 ScriptResource.axd
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",                        // 路由名称
                url: "{controller}/{action}/{id}",      // 路由模板
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }     // 默认路由参数值
            );
        }
    }
}

这样的默认配置代码制定了一个名为 Default 的路由模板，它接受形如URL/{controller}/{action}/{id}的请求，其中：

{controller}为控制器名称，未提供时的默认值为Home
{action}为动作名称，未提供时的默认值未Index
{id}为一URL参数，UrlParameter.Optional表示包含可选参数的只读值

例如：

当 URL 请求为URL本身时，路由会将请求传递至 HomeController.Index() 方法
当 URL 请求为URL/Contact/Find/35时，路由会将请求传递至 ContactController.Find(35) 方法

有关 ASP.NET MVC 路由的更多帮助可参考：

~/App_Start/BundleConfig.cs

捆绑与缩减概述

捆绑和缩减是可以在 ASP.NET 4.5 中使用的两种技术来提高请求加载时间。捆绑和缩减减少了对服务器的请求数并减小了请求资产（如 CSS 和 JavaScript）的大小，从而缩短了加载时间6。

捆绑是 ASP.NET 4.5 中引入的一项新功能，可轻松地将多个文件组合或捆绑到一个文件中。捆绑器可以创建 CSS、JavaScript 和其他捆绑包。较少的文件意味着 HTTP 请求更少，从而可以提高首页加载性能。

缩减对 JavaScript 或 CSS 执行各种不同的代码优化，如删除不必要的空白和注释并缩短变量名称为一个字符。例如考虑下面的 JavaScript 函数

AddAltToImg = function (imageTagAndImageID, imageContext) {
    ///<signature>
    ///<summary> Adds an alt tab to the image
    // </summary>
    //<param name="imgElement" type="String">The image selector.</param>
    //<param name="ContextForImage" type="String">The image context.</param>
    ///</signature>
    var imageElement = $(imageTagAndImageID, imageContext);
    imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

缩减之后，该函数将缩减为以下内容：

AddAltToImg=function(n,t){var i=$(n,t);i.attr("alt",i.attr("id").replace(/ID/, ""))}

控制捆绑与缩减

web.config中的configuration/system.web/compilation的debug值会影响捆绑与缩减功能的启用或禁用，将debug值设置为false可以启用捆绑与缩减。

<system.web>
    <compilation debug="true" />
    <!-- 为了清晰起见，其它与本节介绍的内容无关的行被省略，但不表示不应该包含其它行 -->
</system.web>

另外，BundleTable类中的的EnableOptimizations可以覆盖web.config中的debug配置。

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));

    // 为了清晰起见，其它与本节介绍的内容无关的代码被省略，但不表示不应该包含其它代码
    BundleTable.EnableOptimizations = true;
}

代码功能分析

BundleConfig.cs文件的默认代码如下：

using System.Web.Optimization;

namespace IoTJissen
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

此代码对bundles使用Add()方法创建了 5 个捆绑包，其中：

参数为ScriptBundle的为 JavaScript 捆绑包
参数为StyleBundle的为 CSS 捆绑包

ScriptBundle与StyleBundle的参数皆为捆绑包的虚拟路径。

Bundle类的Include方法接收若干个带有路径的文件匹配字符串，捆绑器在捆绑时会遵循以下约定：

如果FileX.min.js和FileX.js同时存在，则在发布时选择FileX.js进行捆绑，在调试时选择FileX.min.js进行捆绑
忽略仅由 IntelliSense 使用的 "-vsdoc" 文件（如 jquery-1.7.1-vsdoc.js）

使用{version}通配符可以通配版本号，这将允许开发人员在使用 NuGet 更新脚本版本时无需更改捆绑器或视图页面中的引用代码。

要使用已经创建好的捆绑包，可以在视图页使用如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    @* 为了清晰起见，其它与本节介绍的内容无关的代码被省略，但不表示不应该包含其它代码 *@
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @* 为了清晰起见，其它与本节介绍的内容无关的代码被省略，但不表示不应该包含其它代码 *@
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

例如，@Scripts.Render("~/bundles/jquery")引用了虚拟路径为~/bundles/jquery的 JavaScript 捆绑包，进而引用了~/Scripts/jquery-{version}.js，在调试时会进一步匹配~/Scripts/jquery-3.4.1.js，且在更新 jQuery 时无需对上述代码做出任何改动。

有关捆绑与缩减的更多帮助可参考：

绑定和缩减 | Microsoft Docs

~/Views/Shared/_Layout.cshtml

使用母版页为不同的页面创建一致的布局

大多数站点都具有一致的外观和布局，大多数网站都由含页眉、导航、动态内容、页脚等几个部分，且每个站点内的各个页面也都遵循基本固定的布局，具有大量相似的元素或结构。建此布局的低效方法是在每个页面上分别定义标题、导航栏和页脚，但每次都要复制相同的标记。如果要更改某些内容（例如，更新页脚），则必须单独更改每个页面。

在 ASP.NET 网页中，可以定义为网站上的页面提供总体容器的母版页面。例如，母版页可以包含页眉、导航区和页脚，并包含一个占位符，其中包含动态内容。然后，可以定义单独的内容页，其中只包含该页的标记和代码。内容页面不必是完整的 HTML 页面；它们甚至不必有<body>元素。它们会在页面中或其它位置设置一行代码，告诉 ASP.NET 要在其中显示内容时使用的母版页。下面的图片显示了此关系的具体工作原理：

母版页名称需以前导下划线（_）开始，如果页的名称以下划线开头，则 ASP.NET 不会直接将该页发送到浏览器。此约定允许您定义站点所需的页面，但用户不能直接请求该页面。

有关如何在 ASP.NET 中使用母版页的更多帮助可参考：

介绍 ASP.NET 网页-创建一致的布局 | Microsoft Docs

参考

【ASP.NET】安装 ASP.NET 网页应用程序所需的开发环境

Wed, 14 Oct 2020 00:00:00 GMT

安装 Visual Studio 并配置工作负载

1. 下载并启动 Visual Studio Installer

Visual Studio IDE、代码编辑器、Azure DevOps 和 App Center - Visual Studio

其中，Community 2019 是针对开发人员个人可免费下载用于学术用途，并且是开放源代码的版本。

2. 选择以下工作负载安装 Visual Studio Community 2019（注意调整安装目标位置）

Web 和云
- ASP.NET 和 Web 开发（使用 ASP.NET Core、ASP.NET、HTML/Javascript 和包括 Docker 支持的容器生成 Web 应用程序）
其它工具集
- 数据存储和处理（使用 SQL Server，Azure Data Lake 或 Hadoop 连接、开发和测试数据解决方案）

注意确认右侧安装详细信息中数据存储和处理下的 SQL Server Data Tools 为已勾选。

3. 启动 Visual Studio Community 2019 并登录个人微软账户，免费激活面向个人用于学术用途的 Visual Studio Community 许可证

安装 SQL Server 2019 Express 与 SSMS

1. 下载并依向导安装 SQL Server 2019 Express

SQL Server 下载 | Microsoft

其中：

SQL Server 2019 Developer 是一个全功能免费版本，许可在非生产环境下用作开发和测试数据库。
SQL Server 2019 Express 是 SQL Server 的一个免费版本，非常适合用于桌面、Web 和小型服务器应用程序的开发和生产。

有关使用安装向导进行数据库服务安装的指南可参考：

使用图形用户界面安装 - SQL Server | Microsoft Docs

2. 下载并依向导安装 SQL Server Management Studio (SSMS)

下载 SQL Server Management Studio (SSMS) - SQL Server Management Studio (SSMS) | Microsoft Docs

启动 SSMS 连接本地数据库并配置 sa 账户

1. 启动 SSMS，使用 Windows 身份验证连接本地数据库实例

有关如何使用 SQL Server Management Studio (SSMS) 连接和查询 SQL Server 实例的指南可参考：

连接和查询 SQL Server 实例 - SQL Server Management Studio (SSMS) | Microsoft Docs

2. 启用数据库实例的 SQL Server 和 Windows 身份验证模式

有关如何使用 SQL Server 和 Windows 身份验证模式的指南可参考：

更改服务器身份验证模式 - SQL Server | Microsoft Docs

【曲谱】霊知の太陽信仰～ Nuclear Fusion

Thu, 08 Oct 2020 00:00:00 GMT

灵知的太阳信仰～ Nuclear Fusion

东方地灵殿 6面BOSS 灵乌路空主题曲まらしぃさん在2020/9/11的ニコ生演奏的版本

来源： 東方地霊殿　～ Subterranean Animism

曲名： 霊知の太陽信仰～ Nuclear Fusion

译名： 灵知的太阳信仰～ Nuclear Fusion

作曲： ZUN

编排： まらしぃ

曲谱下载 | Musescore | 视频预览 | 视频参考 | 本家

::: collapse

浏览曲谱图像

:::grid{columns="1" aspect="70/99" fit="contain"} :::

哔哩哔哩视频

::bilibili{bvid="BV1bK411N7SG" title="霊知の太陽信仰～ Nuclear Fusion" p="1"}

YouTube

::youtube{id="MxPB9P17DdU" title="霊知の太陽信仰～ Nuclear Fusion"}

【ASP.NET】限制程序在同一时刻只有一个运行的实例

Sat, 26 Sep 2020 00:00:00 GMT

创建私有静态对象 _lockobject 作为互斥锁

// 互斥锁
private static object _lockobject = new object();

使用 lock 执行互斥程序，参数为 _lockobject，可以确保 lock 方法内程序在同一时刻只有一个运行的实例

public ActionResult Index() {
    String str;
    lock (_lockobject)
    {
        str = dosomething();
    }
    return View();
}

如果需要对互斥锁设置超时，可以使用 Monitor.TryEnter 方法

public ActionResult Index() {
    String str;
    if (Monitor.TryEnter(_lockobject, TimeSpan.FromSeconds(5)))
    {
        str = dosomething();
        Monitor.Exit(_lockobject);
    }
    else str = "Took too long!";
    return View();
}

参考文献

How to implement an MVC 4 web App server side mutex - Answered by McGarnagle - Stack Overflow

条码概述

Wed, 23 Sep 2020 00:00:00 GMT

一维码

简介

条形码或称条码（barcode）是将宽度不等的多个黑条和空白，按照一定的编码规则排列，用以表达一组信息的图形标识符。常见的条形码是由反射率相差很大的黑条（简称条）和白条（简称空）排成的平行线图案。条形码可以标出物品的生产国、制造厂家、商品名称、生产日期、图书分类号、邮件起止地点、类别、日期等信息，因而在商品流通、图书管理、邮政管理、银行系统等许多领域都得到了广泛的应用。

条形码种类

Barcode - Linear Barcodes

UPC/EAN/JAN码

通用产品代码（Universal Product Code，UPC），通常简称 UPC 码，是美国均匀码理事会（Uniform Code Council, UCC）制定的一种商品条码，主要在美国及加拿大使用。在其基础之上发展起来的 EAN 码则已发展成为适用范围最广的通用条码。

国际商品编码（International Article Number，IAN），即欧洲商品编码（European Article Number, EAN），原来只是欧洲范围内商品，而现在已是全球范围内产品交易的商品代码。为了适应读码器辨认的需要，这些代码又被做成大家熟知的条形码。

另外，日本于 1978 年在 EAN 的基础上开发出“JAN 码”（JAN コード，Japanese Article Number）。

本文以 UPC 码为例。

UPC 码简介

UPC 码只能用来表示 0-9 的数字。每 7 个模组表达一个字符，每个模组有空（白色）与条（黑色）两种状态。UPC码又分为 UPC-A、B、C、D、E 五种版本。此处以 UPC-A 码为例。

UPC-A 用于通用商品，是适用范围最广的一种UPC码。一共有 113 个模组。左右两个各由 9 个模组组成的空白。UPC-A码是定长码，只能表示 12 位数字。从左至右，依次是 3 个模组（101）的起始码、1 位的系统码、5 位的左侧数据码、5 个模组（01010）的中间码、5 位的右侧数据码、检查码、3个模组（101）的终止码。其中，起始码、中间码、终止码的模组长度都要长于数据码。

左侧数据码与右侧数据码的数值对应规则并不相同，左侧数据码含有奇数个模组，右侧数据码含有偶数个。黑色模组对应逻辑值为 1，白色则为 0。

对应关系表

数值左侧逻辑值右侧逻辑值

0 0001101 1110010

1 0011001 1100110

2 0010011 1101100

3 0111101 1000010

4 0100011 1011100

5 0110001 1001110

6 0101111 1010000

7 0111011 1000100

8 0110111 1001000

9 0001011 1110100

数值	左侧逻辑值	右侧逻辑值
0	0001101	1110010
1	0011001	1100110
2	0010011	1101100
3	0111101	1000010
4	0100011	1011100
5	0110001	1001110
6	0101111	1010000
7	0111011	1000100
8	0110111	1001000
9	0001011	1110100

校验码为全部 12 位数据码最后一位。如果从左至右依次将数据码前十一位命名为 N1-N11，校验码命名为 C，则校验码 C 的计算方式如下：

CC =（N1 + N3 + N5 + N7 + N9 + N11）× 3 + (N2 + N4 + N6 + N8 + N10）然后取个位。 C = 10 - CC (若 C 值为 10，则取 0)。

以图中条码为例，CC = (0 + 6 + 0 + 2 + 1 + 5）× 3 + (3 + 0 + 0 + 9 + 4 ) = 58，C = 2

条形码生成

在线条码发生器

二维码

简介

二维条码/二维码 （2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理。它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化等特点。二维条码/二维码能够在横向和纵向两个方位同时表达信息，因此能在很小的面积内表达大量的信息。

二维码种类

Barcode - Matrix_(2D) / Barcodes

堆叠式二维码

PDF417 条码，Portable Data File，是一种高密度、高信息含量的便携式数据文件，是实现证件及卡片等大容量、高可靠性信息自动存储、携带并可用机器自动识读的理想手段。可以用传统的线性扫码器识别，而矩阵式二维码需要图像传感器成像才能识别。

矩阵式二维码

QR Code，QR 码（Quick Response Code，快速响应矩阵图码）是，于 1994 年由日本 DENSO WAVE 公司发明，广泛应用于生活与工业生产中。

Data Matrix（数据矩阵），是一种由黑色、白色的色块（单元格）以正方形或长方形组成的二维码（也可称矩阵），于 1994 年 8 月由美国国际资料公司所研发出，主要用于零件、印制电路板等等。

MaxiCode，MaxiCode 是最初由 United Parcel Service 创建和使用的公共领域的机器可读符号系统，应用于跟踪和管理包裹的运输，使用以六角形网格排列的点表示数据。

汉信码，是一种矩阵式二维条码，我国自主研发，具有高度的汉字表示能力和汉字压缩效率，形状上呈正方向、有深色和浅色数据模块分布其间。2007 年 8 月 23 日《汉信码》国家标准正式颁布，并于 2008 年 2 月 1 日正式实施。常见于发票、追溯、筛查等。
- 国家国税总局汉信码增值税发票
- 特种行业应用发票
- 广东省水产品质量追溯体系
- 医疗卫生领域中新生儿疾病筛查

网格矩阵码，Grid Matrix Code，我国自主研发，常用于食品安全质量追溯。1

龙贝码，拥有完全自主知识产权，具有更高的信息密度、更强的加密功能、可以对所有汉字进行编码、适用于各种类型的识读器、最多可使用多达32种语言系统、具有多向编码/译码功能、极强的抗畸变性能、可对任意大小及长宽比的二维条码进行编码和译码。2

私有码制

微信小程序码，由腾讯公司发布，专用于微信小程序，信息轴向排布，具有较高的辨识度。

QR码3

版本

QR 码一共提供 40 种不同版本存储密度的结构，版本 1 为 21 × 21 模块（模块为 QR 码中的最小单元），每增加一个版本，长宽各增加 4 个模块，最大的版本 40 为 177 × 177 模块。

版本 1 & 2
版本 6 & 7
版本 14
版本 40

容量

针对模块数量最多的版本 40 来说，QR 码的最大数据容量如下表：

存储类型最大容量

数字 7089 字符

字母 4296 字符

二进制数(8bit) 2953 字节

日文汉字/假名（Shift JIS 编码） 1817 字符

中文汉字（UTF-8 编码） 984 字符

中文汉字（BIG5/GB2312 编码） 1800 字符

存储类型	最大容量
数字	7089 字符
字母	4296 字符
二进制数(8bit)	2953 字节
日文汉字/假名（Shift JIS 编码）	1817 字符
中文汉字（UTF-8 编码）	984 字符
中文汉字（BIG5/GB2312 编码）	1800 字符

容错

QR 码有容错能力，QR 码图形如果有破损，仍然可以被机器读取内容，最高可以到 30% 面积破损仍可被读取。所以 QR 码可以被广泛使用在运输外箱上。

QR 码所使用的纠错码编码算法为里德-所罗门码（Reed-Solomon codes），是一种前向错误更正的信道编码，对由校正过采样数据所产生的有效多项式。

QR 码的容错共有 4 个等级，对应的错误修正容量如下表：

容错等级最大的错误修正容量

L 等级 7%

M 等级 15%

Q 等级 25%

H 等级 30%

容错等级	最大的错误修正容量
L 等级	7%
M 等级	15%
Q 等级	25%
H 等级	30%

不同容错等级的对比如下：

结构

QR 码最大特征为其左上，右上，左下三个大型的如同“回”字的黑白间同心方图案，为 QR 码识别定位标记，失去其中一个会影响识别。而呈棋盘般分布的有别与大定位标记的较小的同心方则为其校正标记，用于校正识别，版本 1 没有校正标记，版本 2 在右下方，其中心点在左下和右上定位标记的外边框的相交点，版本10开始以每个等距的方式出现在右下校正点至左下和右上定位标记的外边框的连线、左上与左下定位标记的外边框的连线、左上与右上定位标记的外边框的连线之间、这四边线上等距点对边相连线，版本 10 等距有 1 个，版本 25 为 3 个，版本 40 为 5 个。

数据构造

在规格确定的条件下，数据按照规定的计算方式生成序列按次序放入分块中，按规定把数据分块，对每一块进行计算，得出相应的纠错码字区块，把纠错码字区块按顺序构成一个序列，添加到原先的数据码字序列后面。如：D1, D12, D23, D35, D2, D13, D24, D36, … D11, D22, D33, D45, D34, D46, E1, E23,E45, E67, E2, E24, E46, E68，……

掩膜

将掩膜图形应用于符号的编码区域，使得二维码图形中的深色和浅色（黑色和白色）区域能够比率最优的分布。

解码

光学处理 - 几何校正 - 码位读取 - 反掩码 - 确定类别 - 确定长度 - 破译 - 检错纠错 - 字符转换 - 协议执行

应用类型4

文本

物联网（英语：Internet of Things，简称IoT）是一种计算设备、机械、数字机器相互关系的系统，具备通用唯一识别码（UID），并具有通过网络传输数据的能力，无需人与人、或是人与设备的交互。

网址

https://www.gehongyan.cn/2020/09/23/iotjissen/198

名片

MECARD:
N:戈小荷,;
TEL:13800138000;
EMAIL:ge@example.com;
ADR:北京市海淀区;

位置

geo:39.9931885,116.3520637?q=北京科技大学

Wi-Fi

WIFI:
S:CMCC-asdfgh;
P:;
T:;
H:;

短信

sms:10086

电话

tel:10086

日历事件

BEGIN:VEVENT
SUMMARY:国庆节假期！
DTSTART:20200930T160000Z
DTEND:20201004T155959Z
END:VEVENT

二维码工具

生成

解码

参考

RFID 读写器程序

Tue, 22 Sep 2020 00:00:00 GMT

工程文件结构

Devices 硬件驱动
- display 数码管驱动
- fm17xx 读写器芯片驱动
- spi SPI接口驱动
- uart 串口驱动
List
- RFID.m51 自动生成的文件，记录了单片机存储器的使用情况，以及每个变量包括局部变量的位置1
Output 输出文件
- RFID 用于软件仿真的编译后文件
- RFID.hex 用于下载程序的十六进制文件
- RFID.plg 编译日志文件
Prject 项目文件夹
- RFID.uvgui Keil用户界面
- RFID.uvopt 工程配置文件
- RFID.uvproj 工程主题文件
- STARTUP.A51 项目初始化文件2
User 用户代码
- INCLUDE.H 头文件
- main.c 主函数
- stc_it.c 中断处理函数
- STC11.H STC11芯片驱动

/Devices/display/display.c

// 共阳数码管编码
uchar code table[12] =
{
    0xc0, 0xf9, 0xa4, 0xb0,     // 0, 1, 2, 3
    0x99, 0x92, 0x82, 0xf8,     // 4, 5, 6, 7
    0x80, 0x90, 0x7f, 0xbf      // 8, 9, ., -
};

// 显示当前值到数码管上
void disp(void)
{
    // 动态扫描显示
}

/User/fm17xx.c

// FM17xx 初始化
void init_FM17xx(void)
{
    // 可用于初始化 FM1702SL FM1715SL FM1722SL RC522 RC531 等
}

// 卡处理函数，参数 cmd 为指令字段
int rfid_card(uchar cmd)
{
    uchar status;
    switch (cmd)
    {
    case _FM17XX_Halt_:         // 卡片停止工作
        break;
    case _FM17XX_Request_:      // 获取当前卡片类型
        break;
    case _FM17XX_Anticoll_:     // 防冲突
        break;
    case _FM17XX_Select_:       // 选择卡
        break;
    case _FM17XX_Cmp_Key2_:     // 密钥校验与密钥解析
        break;
    case _FM17XX_Read_:         // 读取某一地址内容
        break;
    case _FM17XX_Write_:        // 写某一地址内容
        break;
    }
    return 0;
}

// 伪代码
// 根据串口命令解析数据
void rfid_deal(uchar cmd, uchar *buf)
{
    uchar status, i;    //临时变量
    uchar sector;       //扇区
    uchar block;        //块
    uchar key[6];       //密钥
    uchar rev_Data[16]; //块内容
    static uchar UID1[4] = {0, 0, 0, 0};
    static uchar beep_timer_flag;

    switch (cmd)
    {
    case 0x08:      // 读取卡号 显示当前金额依据第二块内容
        status = rfid_card(_FM17XX_Request_);
        status = rfid_card(_FM17XX_Anticoll_);
        break;
    case 0x09:      // 读取卡信息
        // 从 buf 中读区块信息
        status = rfid_card(_FM17XX_Request_);       // 识别卡类型
        status = rfid_card(_FM17XX_Anticoll_);      // 防碰撞
        if (!enable_Rfid)
        {
            // 使用上位机的处理函数
            // 调用 LED 与蜂鸣器
            // 通过串口发送卡号到上位机
            status = rfid_card(_FM17XX_Select_);    // 选卡
            status = rfid_card(_FM17XX_Cmp_Key2_);  // 密钥校验与密钥解析
            fm1702sl.buffer[0] = _FM17XX_Read_;     // 读卡
            fm1702sl.buffer[1] = block;
            if (!status)
            {
                status = rfid_card(_FM17XX_Read_);  // 读卡
                // 协议缓冲与其它处理
            }
        }
        else
        {
            // 不使用上位机的处理函数
            // 调用 LED 与蜂鸣器
            status = rfid_card(_FM17XX_Select_);    // 选卡
            status = rfid_card(_FM17XX_Cmp_Key2_);  //密钥校验与密钥解析
            fm1702sl.buffer[0] = _FM17XX_Read_;     // 读卡
            fm1702sl.buffer[1] = block;
            // 其它处理
        }
        break;
    case 0x10:      //写入块地址内容 上位机无法修改 4*SEN+3 地址内容
        status = rfid_card(_FM17XX_Request_);       // 识别卡类型
        status = rfid_card(_FM17XX_Anticoll_);      // 防碰撞
        status = rfid_card(_FM17XX_Select_);        // 选卡
        status = rfid_card(_FM17XX_Cmp_Key2_);      //密钥校验与密钥解析
        if (!status)
        {
            status = rfid_card(_FM17XX_Write_);     // 写卡
        }
        break;
    case 0x11:      //修改密钥
        status = rfid_card(_FM17XX_Request_);       // 识别卡类型
        status = rfid_card(_FM17XX_Anticoll_);      // 防碰撞
        status = rfid_card(_FM17XX_Select_);        // 选卡
        status = rfid_card(_FM17XX_Cmp_Key2_);      //密钥校验与密钥解析
        if (!status)
        {
            status = rfid_card(_FM17XX_Write_);     // 写卡
        }
        break;
    case 0x12:  //已注册卡
        while (1)
        {
            status = rfid_card(_FM17XX_Request_);   // 识别卡类型
            status = rfid_card(_FM17XX_Anticoll_);  // 防碰撞
            // 调用 LED
        }
        break;
    }
}

/User/main.c

// 系统初始化
void sys_init(void)
{
    // 初始化 MCU-port UART-int fm17xx-spi
}

// 延迟函数
void delay1(uint dlength)
{
    uint i;
    for (i = 0; i < dlength; i++)
    {
        _nop_();
        _nop_();
        _nop_();
    }
}

// 主函数
void main(void)
{
    uchar data Aread[8] = {0x01, 0x04, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff};
    uchar status;
    sys_init();                 // 系统初始化：MCU-port UART-int fm17xx-spi

    while (1)
    {
        if (enable_Rfid)        // 按照上位机发送的命令和数据处理卡片
        {
            P1 = H5;
            P2 = table[0];      // 点亮数码管最低位，显示数字'0'
            rfid_deal(fm1702sl.cmd, fm1702sl.rev_Data);
            enable_Rfid = FALSE;
            fm1702sl.read_one = 1;
            sys_init();         // 系统重新初始化
        }
        else
        {
            // 只通过读写器读卡，没有使用上位机，只读一次卡的内容
            if (fm1702sl.read_one == 1)
            {
                disp();         // 如果读过一次，则显示卡余额
                if (fm1702sl.reading > 20)
                {
                    status = rfid_card(_FM17XX_Request_);
                    if (status != 0)
                    {
                        fm1702sl.read_one = 0;
                    }
                    fm1702sl.reading = 0;
                }
            }
            //如果还没读卡，则发送 0x09 命令读取卡上信息
            else
            {
                ET0 = 0;
                rfid_deal(0x09, Aread);
                P1 = H5;
                P2 = table[0];
            }
        }
    }
}

编译程序

在 Keil C51 中打开工程RFID.uvproj

打开 Target Options...，转到Output，确认勾选Create HEX File并确认，以在编译时输出hex 文件

点击编译按钮，或使用快捷键F7开始编译，编译输出窗口中显示Creating hex file from "..OutputRFID"...及0 Error(s)，即表示编译输出成功

下载程序

使用Prolific PL2303 RS232 - USB 接口转换器连接主板与计算机，打开设备管理器检查端口号并记录备用
- 注意：如显示设备未正确识别，则需先下载并安装驱动程序：PL2303_Prolific_DriverInstaller_v1160.exe
启动STC-ISP，单片机型号选择STC11F60XE系列 - STC11F32XE，端口号选择步骤 1 中记录的端口号，点击打开程序文件，选择到工程根目录下的OutputRFID.hex，点击下载/编程，此时关闭并开启单片机电源，即可开始下载程序。

功能测试

启动专用调试工具，选择上一节步骤 1 中记录的端口号，打开串口，即可测试充值、消费、余额查询等功能。执行各项操作时，也可以观察实际收发的指令信息。

参考

RFID 与 RFID 系统概述

Sun, 20 Sep 2020 00:00:00 GMT

射频识别技术

射频识别（英语：Radio Frequency IDentification，缩写：RFID）是一种无线通信技术，可以通过无线电信号识别特定目标并读写相关数据，而无需识别系统与特定目标之间建立机械或者光学接触。

RFID 系统的基本构成

RFID 系统概述

RFID 系统的基本组成

RFID 系统是由电子标签、读写器和系统高层构成。RFID系统是一种非接触式的自动识别系统，它通过射频无线信号自动识别目标对象，并获取相关数据。RFID系统一般由以下三部分组成：

电子标签：附着在物体上，用来标识物体，由芯片和天线组成，可以存储数据与收发射频无线信号，具有唯一的电子编码，存储物体的相关信息。
读写器：用来读写物体的信息，电子标签与读写提通过射频无线信号传递信息。工作时一般先由读写器发射特定的询问信号；电子标签接收到该信号后作出应答，应答信号中含有电子标签携带的数据信息；读写器接收到应答信号后将其传输给系统高层。
系统高层：管理多个电子标签与多个读写器之间的数据处理、交换、传输、存储过程。

RFID 系统的结构框图如下图所示：

RFID 系统的分类

按频率

低频系统：30kHz ~ 300kHz，常见的有 125kHz 和 134.2kHz，用于短距传输、低数据量的场合。
高频系统：3MHz ~ 30MHz，常见的有 6.75MHz 和 13.56MHz，用于短距传输、较大数据量的场合。
微波系统：大于 300MHz，常见的有 433MHz、860/960MHz、2.45GHz 和 5.8GHz，用于多标签同时操作、较长距传输、高读写速度的场合。

按供电方式

无源供电系统：标签内无电池，利用读写器发出的波束供电，用于短距传输、长寿命、工作环境要求低的场合。
有源供电系统：标签内有电池，电池为电子标签提供全部能量，用于要求高可靠性、远距传输的场合，但寿命不长、体积较大、成本较高。
半有源供电系统：标签内有电池，但电池仅对维持数据的电路及维持芯片工作电压的电路提供支持，电子标签不工作时休眠，当进度读写器范围内受射频信号激励时，标签进入工作状态，此时其能量主要来源于读写器的射频能量，内部电池主要用于弥补射频场强的不足。

按耦合方式

电感耦合方式：读写器与标签之间的射频信号传递采用变压器模型，电磁能量通过空间高频交变磁场实现耦合，理论依据是法拉第电磁感应定律。分为密耦合系统和遥耦合系统。密耦合系统典型工作范围为 0 ~ 1cm，工作于 0 ~ 30MHz；遥耦合系统典型工作范围为 15cm ~ 1m，可工作于 135kHz、6.75MHz、13.56MHz 或 27.125MHz。
电磁反向散射方式：读写器与电子标签之前的射频信号传递采用雷达模型，读写器发射出去的电磁波碰到电子标签后，电磁波被反射，同时携带回电子标签的额信息，理论依据是电磁波空间辐射原理。适用于微博系统，典型工作频率为 433MHz、860/960MHz、2.45GHz 和 5.8GHz，典型作用距离为 1m ~ 10m 甚至更远。

按技术方式

主动广播式：电子标签主动向外发射信息，读写器相当于只收不发的接收机，电子标签采用有源工作
被动倍频式：电子标签返回读写器的频率是读写器发射频率的 2 倍，读写器发射与接受占用两个不同的频点。
被动反射调制式：读写器发射查询信号，电子标签被动接收，但电子标签返回读写器的频率于读写器发射的频率相同。

按保存信息方式分类

只读电子标签：电子标签内部只有只读存储器（Read Only Memory，ROM），其信息在集成电路生产时以只读内存工艺注入，此后信息不能更改。
一次写入电子标签：电子标签内部有 ROM 和随机存储器（Random Access Memory，RAM），这种电子标签可以写入一次数据，其标识信息可在标签制造过程中写入，也可由用户自己写入，但一旦写入就不能再更改。
现场有线可改写电子标签：用户可通过访问电子标签的存储器进行读写操作。
现场无线可改写电子标签：电子标签一般为有源类型，用户可通过特定的改写指令用无线方式改写信息。

但系统档次分类

低档系统：一般为只读标签存储少量数据，电子标签功能简单、芯片体积小、功耗小、成本低、系统不能同时读取多个电子标签。
中档系统：中档系统的电子标签数据存储量较大，数据可读可写，系统可提供更多功能。
高档系统：一般带有密码功能，电子标签带有微处理器，可实现密码的复杂验证，系统功能完善。

按照工作方式分类

全双工和半双工工作方式：全双工表示电子标签和读写器之间可以在同一时刻互相传送信息；半双工表示电子标签与读写器之间可以双向传送信息，但在同一时刻只能向同一个方向传送信息。
时序工作方式：读写器辐射出的电磁场短时间周期性地断开，这些间隔倍电子标签识别出来，并被用于从电子标签到读写器的数据传输，这是一种典型的雷达工作方式。

电子标签

基本组成

芯片：具有一定的存储容量，可以存储被识别物体的相关信息，对标签接收的信号进行解调、解码等各种处理，并把标签需要返回的信号进行编码、调制等各种处理。
天线：收集读写器发射到空间的电磁波，并把标签本身的数据信号以电磁波的形式发射出去。

结构形式

卡片型电子标签 / 射频卡
- 我国第二代身份证
- 城市一卡通
- 门禁卡
- 银行卡
标签类电子标签
- 具有粘贴功能的电子标签
- 车辆自动收费电子标签
- 钥匙扣型电子标签
- 扎带型电子标签
- 手表型 / 腕带型电子标签
植入式电子标签 / 皮下芯片植入
- 动物跟踪标签

技术参数

标签机获得能量要求
标签信息的读写速度
标签信息的传输速率
标签信息的容量
- 后台式电子标签
- 前台式电子标签
标签的封装尺寸
标签的读写距离
标签的可靠性
标签的工作频率
标签的价格

功能模块

电源电路
时钟电路
数据输入和输出模块
存储器
- 只读标签存储器（Read Only Memory，ROM）
- 一次写入标签存储器（Random Access Memory，RAM）
- 可读写标签存储器
  - 电可擦可编程只读存储器（Electrically Erasable Programmable Read-Only Memory，EEPROM）
  - 具有静止存取功能的存储器（Static RAM，SRAM）
  - 铁电存储器（Ferroelectric RAM，FRAM）
负载调制模块
天线
- 低频天线
- 高频天线
- 微波天线

封装

纸标签
塑料标签
玻璃标签

发展趋势

体积更小
成本更低
作用距离更远
无源可读写性能更加完善
适合高速移动物体的识别
多标签的读写功能
电磁场下自我保护功能更完善
智能性更强
加密特性更完善
带有其他附属功能的标签
具有杀死功能的标签
新的生产工艺
带有传感器功能

读写器

基本组成

天线：将电磁波发射到空间，并收集电子标签的无线数据信号。
射频模块：用于基带信号与射频信号的相互转换，并与天线相连。既可将频率很低的基带信号转换为射频信号，然后传输至天线；又可将天线接受地射频信号转换为频率很低的基带信号。
控制模块：对发射信号进行编码、调制等各种处理，对接收信号进行解调、解码等各种处理；执行防碰撞算法；实现与后端应用程序的规范接口。

结构形式

固定式读写器
OEM（Original Equipment Manufacturer，原始设备制造商）模块式读写器
手持便携式读写器
身份证阅读器和银行卡读卡器
工业读写器
发卡器

工作特点

电子标签与读写器之间的通信
读写器与系统高层之间的通信
读写器的识别能力
- 防碰撞识别能力
- 对移动物体的识别能力
读写器对有源电子标签的管理
读写器的适应性
应用软件的控制作用

技术参数

工作频率
输出功率
输出接口
读写器类型
工作方式
读写器优先或电子标签优先

功能模块

射频模块
基带信号处理模块
智能模块
天线
- 对称阵子天线
- 微带贴片天线
- 线圈天线
- 阵列天线
- 螺旋天线
- 八木天线

发展趋势

兼容性
接口多样化
采用新技术
- 智能天线
- 新的防碰撞算法读写器管理技术
模块化和标准化

系统高层

将许多读写器获取的数据信息有效地整合起来，完成查询、管理与数据交换等功能。

Keil 激活指南

Thu, 17 Sep 2020 00:00:00 GMT

下载链接

Keil 4 C51V901
Keil 激活工具
- 解压密码 gehongyan.cn

如何激活 Keil

以管理员身份运行 Keil
菜单栏依次点击 File - License Management...

复制 License Management 窗口内右侧的 **CID 值**备用

解压并运行 Keil 激活工具
- **注意：**激活工具会被包括 Windows 安全中心在内的安全软件认定为危险程序，请对解压文件或解压路径添加白名单/排除项后再进行解压，也可临时关闭安全软件待解压并完成后续步骤后再重新开启
- 指南：将排除项添加到 Windows 安全中心
  - 打开 Windows 安全中心
将步骤 3 中复制的 **CID 值**粘贴在激活工具 **CID 输入框**中，点击 Generate，复制下方新生成的 30 位 Key 备用

将步骤 5 中复制的 Key 粘贴在 License Management 中的 New License ID Code (LIC) 输入框中，单击输入框右侧的 Add LIC，下方显示 *** LIC Added Successfully ***，Support Period 列中有 Expires 时间为 2032 年的信息即激活成功

【曲谱】偶像に世界を委ねて～ Idoratrize World

Sun, 13 Sep 2020 00:00:00 GMT

偶像に世界を委ねて～ Idoratrize World

东方鬼形兽埴安神袿姬角色曲まらしぃさん在2020/9/7的ニコ生演奏的版本

来源： 東方鬼形獣～ Wily Beast and Weakest Creature

曲名： 偶像に世界を委ねて～ Idoratrize World

译名： 寄世界于偶像～ Idoratrize World

作曲： ZUN

编排： まらしぃ

曲谱下载 | Musescore | 视频预览 | 视频参考 | 本家

::: collapse

点击浏览曲谱图像

:::grid{columns="1" aspect="70/99" fit="contain"} :::

哔哩哔哩视频

::bilibili{bvid="BV1oa4y1L7R1" title="偶像に世界を委ねて～ Idoratrize World" p="1"}

YouTube

::youtube{id="rtwXz8KaGoE" title="偶像に世界を委ねて～ Idoratrize World"}

【曲谱】ドラマツルギー / 拟剧论

Wed, 09 Sep 2020 00:00:00 GMT

ドラマツルギー - Eve

拟剧论

曲名： ドラマツルギー 译名： 拟剧论 作曲： Eve 编排： まらしぃ

曲谱下载 | Musescore | 视频预览 | 视频参考 | 本家

::: collapse

点击浏览曲谱图像

:::grid{columns="1" aspect="70/99" fit="contain"} :::

哔哩哔哩视频

::bilibili{bvid="BV1Y54y1C7Pa" title="ドラマツルギー / 拟剧论" p="1"}

YouTube

::youtube{id="s2wJl2D6uHU" title="ドラマツルギー / 拟剧论"}

【曲谱】ナイト・オブ・ナイツ 10周年 ver.

Fri, 13 Sep 2019 00:00:00 GMT

ナイト・オブ・ナイツ 10周年 ver.

Night of Knight 10 周年版本

作曲： ZUN

编排： まらしぃ

曲谱下载 | 视频预览 | 视频参考/本家

::: collapse

点击浏览曲谱图像

:::grid{columns="1" aspect="70/99" fit="contain"} :::

哔哩哔哩视频

::bilibili{bvid="BV1pE411R7oh" title="ナイト・オブ・ナイツ 10周年 ver." p="1"}

YouTube

::youtube{id="_2Z1yNKN798" title="ナイト・オブ・ナイツ 10周年 ver."}

【曲谱】グランドピアノで東方の曲をメドレーにして弾いてみた2019

Tue, 13 Aug 2019 00:00:00 GMT

グランドピアノで東方の曲をメドレーにして弾いてみた2019（Toho medley）

幻想遊戯＜雅＞3

作曲： ZUN

编排： まらしぃ

曲谱下载 | MIDI 下载 | Musescore | 视频预览 | 视频参考/本家

::: collapse

点击浏览曲谱图像

:::grid{columns="1" aspect="70/99" fit="contain"} :::

哔哩哔哩视频

::bilibili{bvid="BV124411S78J" title="グランドピアノで東方の曲をメドレーにして弾いてみた2019" p="1"}

YouTube

::youtube{id="o7SsOBV5MaM" title="グランドピアノで東方の曲をメドレーにして弾いてみた2019"}