+
+| 操作 | +所有权 | +|
|---|---|---|
|
+ Create + Read + Update + Delete + |
+ 自己的资源 | +可以(或不可以)对当前请求的自己的资源执行C|R|U|D 操作。 | +
| 任何资源 | +可以(或不可以)对任何资源执行C|R|U|D 操作,包括自己的资源。 | +
{count}
+ +{isShow ? I'm show now : null}
+ + + ); +}; +``` + + + + + +### UseEffect + +函数体用于注册事件,返回值用于注销事件 + +#### 没有第二个参数 + +1. 组件挂载(首次渲染)只执行useEffect函数体 +2. 组件更新先执行返回值函数,再执行函数体 +3. 组件卸载只执行返回值函数 + +#### 第二个参数为空数组 + +1. 组件挂载(首次渲染)只执行函数体 +2. 组件更新不执行,直接跳过 +3. 组件卸载只执行返回值函数 + +#### 第二个参数为可变值 + +1. 组件挂载(可变值初始化后)只执行函数体 +2. 只当可变值变化先执行返回值函数,再执行函数体 +3. 组件卸载只执行返回值函数 + + + +示例: 写一个拖动浏览器实时显示窗口宽度的组件,注意不要忘记把这个组件放入`App`组件中 + +```tsx +const EffectComponent: FC = () => { + const [width, setWidth] = useState(window.innerWidth); + const resizeHandle = () => { + console.log(window.innerWidth); + setWidth(window.innerWidth); + }; + useEffect(() => { + window.addEventListener("resize", resizeHandle); + return () => { + window.removeEventListener("resize", resizeHandle); + }; + }, [width]); + return ( + <> +{width}
+ + ); +}; +``` + +看一下效果 + + + + + +### useContext + +创建演示组件 + +```tsx +// components/ContextDemo.tsx +... +import { LocalProps, LangType } from "../typing"; + +const langs: LangType[] = [ + { name: "en", label: "english" }, + { name: "zh-CN", label: "简体中文" } +]; + +const localContext = createContext(langs[0]); + +const LocalContextProvider: FC+ current lang is{" "} + {currentLang.label ? currentLang.label! : currentLang.name} +
+``` + +看一下效果 + + + + + +### useReducer + +```tsx +// components/ReducerDemo.tsx +... +// 初始化时默认主题名称 +const defaultThemeName: string = "dark"; + +// 主题列表 +const themes: ThemeType[] = [ + { name: "dark", label: "暗黑" }, + { name: "light", label: "明亮" } +]; + +// 过滤主题列表(删除非默认主题的isDefault属性) +const filterThemes = (data: ThemeType[]) => + data.map(theme => { + if (theme.isDefault !== undefined && !theme.isDefault) { + delete theme.isDefault; + } + return theme; + }); + +// 获取初始化主题列表(设置初始化默认主题为当前默认主题),此函数用于初始化reducer的值 +const getInitThemes = (data: ThemeType[]) => { + return filterThemes( + data.map(theme => { + theme.isDefault = theme.name === defaultThemeName; + return theme; + }) + ); +}; + +// 主题操作,为了便于演示这里我们只添加了一个切换默认主题的操作 +const ThemeReducer = (state: ThemeType[], action: ThemeActionType) => { + switch (action.type) { + case "CHANGE_THEME": + return filterThemes( + state.map(theme => { + if (theme.name === action.value.name) { + return { ...theme, isDefault: true }; + } + return { ...theme, isDefault: false }; + }) + ); + default: + return filterThemes(state); + } +}; + +// 获取默认当前主题 +const getDefaultTheme = (data: ThemeType[]) => + filterThemes(data).find(theme => theme.isDefault!); + +// 创建主题列表的全局变量 +const themesContext = createContext< + [ThemeType[], Dispatch{defaultTheme.name}
+ + + ); +}; + +export default { + useTheme, + useThemesReducer, + getThemeText, + ThemeContextProvider, + ThemeSelector +}; +``` + +```tsx +// index.tsx +current theme is {ReducerDemo.getThemeText(currentTheme)}
+``` + + diff --git a/src/assets/posts/typeorm-fixtures-cli.md b/src/assets/posts/typeorm-fixtures-cli.md new file mode 100644 index 0000000..e97a755 --- /dev/null +++ b/src/assets/posts/typeorm-fixtures-cli.md @@ -0,0 +1,442 @@ +依赖于[faker.js](https://github.com/marak/Faker.js/)，typeorm-fixtures-cli允许您在开发或测试项目时创建大量的数据填充/假数据。它为您提供了一些基本工具，使您可以轻松地以编写用于生成复杂数据的易于读写的规则，以便团队中的每个人都可以根据需要生成自己的测试数据。 + +## 安装 + +#### NPM + +```bash +npm install typeorm-fixtures-cli --save-dev +``` + +#### Yarn + +```bash +yarn add typeorm-fixtures-cli --dev +``` + +## 开发步骤 + +```bash +# 安装依赖 +npm install + +# 构建编译文件 +npm run build +``` + +## 示例 + +`fixtures/Comment.yml` + +```yaml +entity: Comment +items: + comment{1..10}: + fullName: '{{name.firstName}} {{name.lastName}}' + email: '{{internet.email}}' + text: '{{lorem.paragraphs}}' + post: '@post*' +``` + +`fixtures/Post.yml` + +```yaml +entity: Post +items: + post1: + title: '{{name.title}}' + description: '{{lorem.paragraphs}}' + user: '@user($current)' + post2: + title: '{{name.title}}' + description: '{{lorem.paragraphs}}' + user: '@user($current)' +``` + +`fixtures/User.yml` + +```yaml +entity: User +items: + user1: + firstName: '{{name.firstName}}' + lastName: '{{name.lastName}}' + email: '{{internet.email}}' + profile: '@profile1' + __call: + setPassword: + - foo + user2: + firstName: '{{name.firstName}}' + lastName: '{{name.lastName}}' + email: '{{internet.email}}' + profile: '@profile2' + __call: + setPassword: + - foo +``` + +`fixtures/Profile.yml` + +```yaml +entity: Profile +items: + profile1: + aboutMe: <%= ['about string', 'about string 2', 'about string 3'].join(", ") %> + skype: skype-account> + language: english + profile2: + aboutMe: <%= ['about string', 'about string 2', 'about string 3'].join(", ") %> + skype: skype-account + language: english +``` + +## 创建填充 + +此库的最基本功能是将扁平的yaml文件转换为对象 + +```yaml +entity: User +items: + user0: + username: bob + fullname: Bob + birthDate: 1980-10-10 + email: bob@example.org + favoriteNumber: 42 + + user1: + username: alice + fullname: Alice + birthDate: 1978-07-12 + email: alice@example.org + favoriteNumber: 27 +``` + +### Fixture范围 + +第一步是创建一个对象的多个副本，以便从yaml文件中删除重复的规则。 + +您可以通过在fixture名称中定义范围来实现： + +```yaml +entity: User +items: + user{1..10}: + username: bob + fullname: Bob + birthDate: 1980-10-10 + email: bob@example.org + favoriteNumber: 42 +``` + +现在它将生成十个用户，ID为user1到user10。相当不错，但我们只有10条相同的名字，用户名和电子邮件的数据，这还不是很花哨。 + +### Fixture引用 + +您还可以指定对先前创建的fixture列表的引用： + +```yaml +entity: Post +items: + post1: + title: 'Post title' + description: 'Post description' + user: '@user1' +``` + +### Fixture列表 + +您也可以指定值列表而不是范围： + +```yaml +entity: Post +items: + post{1..10}: + title: 'Post title' + description: 'Post description' + user: '@user($current)' +``` + +在一个设置了范围的案例中（例如，用户{1..10}），`($current)`将为user1返回1，为user2返回2。。。 + +current在迭代中也可以用作字符串值： + +```yaml +entity: Post +items: + post{1..10}: + title: 'Post($current)' + description: 'Post description' +``` + +``Post($current)` 将返回Post1为post1，Post2为post2。。。 + +您可以使用基本数学运算符来改变此输出： + +```yaml +entity: Post +items: + post{1..10}: + title: 'Post($current*100)' + description: 'Post description' +``` + +``Post($current*100)` 将返回post100 for post1，Post200 for post2。。。 + +### 调用方法 + +有时如果你想要调用一个方法来初始化更多数据，你可以像使用属性一样执行此操作，使用方法名称并为其提供一组参数。 + +```yaml +entity: User +items: + user{1..10}: + username: bob + fullname: Bob + birthDate: 1980-10-10 + email: bob@example.org + favoriteNumber: 42 + _call: + setPassword: + - foo +``` + +## 处理关联 + +```yaml +entity: User +items: + user1: + # ... + +entity: Group +items: + group1: + name: '<{names.admin}>' + owner: '@user1' + members: + - '@user2' + - '@user3' + +``` + +如果要创建10个user和10个group并让每个用户拥有一个组，则可以在使用fixture ranges时,使用`($current)`将其替换为每次迭代的当前ID： + +```yaml +entity: User +items: + user1: + # ... + +entity: Group +items: + group{1..10}: + name: 'name' + owner: '@user($current)' + members: + - '@user2' + - '@user3' + +``` + +如果您想要一个随机用户而不是一个固定用户，您可以使用通配符定义一个引用： + +```yaml +entity: User +items: + user1: + # ... + +entity: Group +items: + group{1..10}: + name: 'name' + owner: '@user*' + members: + - '@user2' + - '@user3' + +``` + +或者 + +```yaml +entity: User +items: + user1: + # ... + +entity: Group +items: + group{1..10}: + name: 'name' + owner: '@user{1..2}' # @user1 or @user2 + members: + - '@user2' + - '@user3' + +``` + +## 高级指南 + +### Parameters + +You can set global parameters that will be inserted everywhere those values are used to help with readability. For example: + +```yaml +entity: Group +parameters: + names: + admin: Admin +items: + group1: + name: '<{names.admin}>' # <--- set Admin + owner: '@user1' + members: + - '@user2' + - '@user3' +``` + +### Faker数据 + +本库整合了[faker.js](https://github.com/marak/Faker.js/)库。使用{{foo}}，您可以调用Faker数据提供者来生成随机数据。 + +```yaml +entity: User +items: + user{1..10}: + username: '{{internet.userName}}' + fullname: '{{name.firstName}} {{name.lastName}}' + birthDate: '{{date.past}}' + email: '{{internet.email}}' + favoriteNumber: '{{random.number}}' + _call: + setPassword: + - foo +``` + +### EJS模板 + +本库与[EJS](https://github.com/mde/ejs)整合 + +```yaml +entity: Profile +items: + profile1: + aboutMe: <%= ['about string', 'about string 2', 'about string 3'].join(", ") %> + skype: skype-account> + language: english +``` + +### 加载处理器 + +处理器允许您在持久化之前和(或)之后处理对象。处理器必须实现：`IProcessor` + +```typescript +import { IProcessor } from 'typeorm-fixtures-cli'; +``` + +下面是一个示例： + +`processor/UserProcessor.ts` + +```typescript +import { IProcessor } from 'typeorm-fixtures-cli'; +import { User } from '../entity/User'; + +export default class UserProcessor implements IProcessor
+
+* 命令和选项的bash-completion快捷方式.
+* [更多api](https://github.com/yargs/yargs/blob/master/docs/api.md).
+
+### 安装
+
+稳定版本:
+```bash
+npm i yargs
+```
+
+最新版本:
+```bash
+npm i yargs@next
+```
+
+### 用法 :
+
+#### 简单示例
+
+````javascript
+#!/usr/bin/env node
+const argv = require('yargs').argv
+
+if (argv.ships > 3 && argv.distance < 53.5) {
+ console.log('Plunder more riffiwobbles!')
+} else {
+ console.log('Retreat from the xupptumblers!')
+}
+````
+
+```bash
+$ ./plunder.js --ships=4 --distance=22
+Plunder more riffiwobbles!
+
+$ ./plunder.js --ships 12 --distance 98.7
+Retreat from the xupptumblers!
+```
+
+#### 比较复杂的案例
+
+```javascript
+#!/usr/bin/env node
+require('yargs') // eslint-disable-line
+ .command('serve [port]', 'start the server', (yargs) => {
+ yargs
+ .positional('port', {
+ describe: 'port to bind on',
+ default: 5000
+ })
+ }, (argv) => {
+ if (argv.verbose) console.info(`start server on :${argv.port}`)
+ serve(argv.port)
+ })
+ .option('verbose', {
+ alias: 'v',
+ default: false
+ })
+ .argv
+```
+
+运行上面的示例并加上 `--help` 选项以查看应用程序的帮助。
+
+## TypeScript
+
+yargs 的类型定义在 [@types/yargs][type-definitions]包中,请先安装此包
+
+```
+npm i @types/yargs --save-dev
+```
+
+### TypeScript用法示例
+
+TypeScript的定义 需要考虑到 yargs的 `type` 键以及`demandOption`/`default`(如果存在的话)。
+
+`.options()`定义如下：
+
+```typescript
+#!/usr/bin/env node
+import * as yargs from 'yargs';
+
+const argv = yargs.options({
+ a: { type: 'boolean', default: false },
+ b: { type: 'string', demandOption: true },
+ c: { type: 'number', alias: 'chill' },
+ d: { type: 'array' },
+ e: { type: 'count' },
+ f: { choices: ['1', '2', '3'] }
+}).argv;
+```
+
+则`argv`返回的值的类型会像下面这样子：
+
+```typescript
+{
+ [x: string]: unknown;
+ a: boolean;
+ b: string;
+ c: number | undefined;
+ d: (string | number)[] | undefined;
+ e: number;
+ f: string | undefined;
+ _: string[];
+ $0: string;
+}
+```
+
+您可能希望为应用程序定义一个接口，描述解析`argv`后将采用的形式：
+
+```typescript
+interface Arguments {
+ [x: string]: unknown;
+ a: boolean;
+ b: string;
+ c: number | undefined;
+ d: (string | number)[] | undefined;
+ e: number;
+ f: string | undefined;
+}
+```
+
+要改进`choices`选项类型，您还可以指定它的类型：
+
+```typescript
+type Difficulty = 'normal' | 'nightmare' | 'hell';
+const difficulties: ReadonlyArray,
protected em: EntityManager,
protected factory: DBFactoryHandler