nest.js - geting start

Installation

1

npm i -g @nestjs/cli

Create a new project

1

nest new project-name

Create a new module

1

nest g module module-name

Create a new controller

1

nest g controller controller-name

Create a new service

1

nest g service service-name

Create a new pipe

1

nest g pipe pipe-name

Create a new resource

1

nest g resource resource-name

Database

Nest.js is database agnostic, you can use any database you want. For example, you can use TypeORM, Sequelize, Mongoose, etc.

Install TypeORM with mysql driver

1

npm install --save @nestjs/typeorm typeorm mysql2

Troubleshooting

Error: Nest can’t resolve dependencies of the SearchHistoryService (?). Please make sure that the argument “SearchHistoryRepository” at index [0] is available in the SearchHistoryModule context.

1. 如果这个错误发生在一个module中（即不存在Module之间相互引用的情况），那么很可能是Module文件中缺少imports。加上下面这句：

1
2
3
4
5
6
7
8
9
10
11
12

import { Module } from '@nestjs/common';
import { SearchHistoryService } from './search_history.service';
import { SearchHistoryController } from './search_history.controller';
import { TypeOrmModule } from '@nestjs/typeorm';
import { SearchHistory } from './entities/search_history.entity';

@Module({
  imports: [TypeOrmModule.forFeature([SearchHistory])], // 这一句不能少！！！这个问题困扰了我一整天！
  controllers: [SearchHistoryController],
  providers: [SearchHistoryService],
})
export class SearchHistoryModule {}

2. 如果这个错误发生在module交叉引用中，比如A module中的service引用了B module的service，那么需
   要：

• 在B module中exports需要被引用的service
• 在A module中imports B module

1
2
3
4
5

// A module
imports: [BModule],

// B module
exports: [BService],

Database data was deleted after start nest.js

将app.module.ts中的synchronize设置为false，这样每次启动都不会删除数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'xxx',
      host: 'xxx',
      port: 1234,
      username: 'xxx',
      password: 'xxx',
      database: 'xxx',
      entities: [xxx],
      logging: true,
      synchronize: false, // 这里设置为false！！！切记
    }),
    XXXModule,
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

TypeError: Cannot read property ‘setState’ of undefined

相信很多初学React的同学都差不多遇到过这个错误。

在js中，function中的this代表调用这个函数的object，也就是谁调用这个函数，那么this就指向谁，这个object可以是window，可以使document，也可以是button。

这个特性导致了React中一个常见的的找不到this的问题，且看下面的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React, {Component} from "react";

class ThisTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'zdd',
    }
  }

  handleClick() {
    this.setState({
      name: 'ddz',
    })
  }

  render() {
    return (
      <button onClick={this.handleClick}>hello</button>
    )
  }
}

export default ThisTest;

以上代码运行的时候会出现如下错误：

TypeError: Cannot read property 'setState' of undefined

为啥呢？

我们来分析一下，函数handleClick中有一个this，而ES6 Class中的方法默认不绑定this，所以出错了。怎么解决？两个办法：

方法一：将handleClick改为箭头函数，因为箭头函数中的this指向该函数所在的组件，如下：

1
2
3
4
5

handleClick = () => {
  this.setState({
    name: 'ddz',
  })
};

方法二：用bind函数将调用的函数绑定到组件上，一般我们在constructor中做这个绑定，上面的代码可以变为：

1
2
3
4
5
6
7
8
9
10
11

class ThisTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'zdd',
    };

    // 添加下面一行。
    this.handleClick = this.handleClick.bind(this);
  }
}

当然网上还有其他方法，比如使用React.createClass来创建组件，这样会自动将this绑定到组件上，但这种创建组件的方法已经不推荐使用了，或者在render函数中绑定this，如下：

1

<button onClick={this.handleClick.bind(this)}>hello</button>

或者直接将箭头函数写在调用处，如下：

1

<button onClick={() => this.handleClick}>hello</button>

这两种方法会有轻微的性能问题，因为每次render函数调用时都会重新分配handleClick这个函数。

推荐第一种方法，简单方便，没有副作用。

JavaScript Object.prototype.groupBy

给定如下对象数组，如何按照type进行分组？

1
2
3
4
5
6
7

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

最直观的做法如下，遍历数组，然后取出每个对象的type字段，按照哈希表归类的方式进行分组，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

function groupBy(arr, key) {
  const result = [];
  for (const item of inventory) {
    const { type } = item;
    if (result[type]) {
      result[type].push(item);
    } else {
      result[type] = [item];
    }
  }

  return result;
}

当然，也可以是用reduce函数，注意下面代码中acc的初始值是{}，因为我们显示传递了{}给reduce函数。

1
2
3
4
5
6
7
8
9
10

const groupBy = (arr, key) => {
  return arr.reduce((acc, item) => {
    const group = item[key];
    if (!acc[group]) {
      acc[group] = [];
    }
    acc[group].push(item);
    return acc;
  }, {});
};

最后，你还可以使用groupBy, 只是这个方法比较新( Chrome 117 or later and Node.js 21.0.0 or later)，要注意兼容性。

1
2

const result = Object.groupBy(inventory, ({ type }) => type);
console.log(result);

output:

1
2
3
4
5
6
7
8
9
10
11
12

{
  vegetables: [ { name: 'asparagus', type: 'vegetables', quantity: 5 } ],
  fruit: [
    { name: 'bananas', type: 'fruit', quantity: 0 },
    { name: 'cherries', type: 'fruit', quantity: 5 }
  ],
  meat: [
    { name: 'goat', type: 'meat', quantity: 23 },
    { name: 'fish', type: 'meat', quantity: 22 }
  ]
}

References:

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

JavaScript Console

console对象是JavaScript的一个全局对象，它提供了控制台的操作方法和属性。控制台是浏览器提供的一个调试工具，它可以用来输出信息、查看变量的值、查看调用栈等。

colored log

In JavaScript, you can output colored logs to the console using the %c directive in console.log(). Here’s an example:

1

console.log("%cThis is a green text", "color:green; font-size: 18px");

output:

In this example, %c is used as a placeholder for the styles that are specified in the second argument. The text “This is a green text” will be displayed in green color in the console.

You can also specify multiple styles:

1

console.log("%cThis is a blue text on yellow background", "color:blue; background-color:yellow");

output:

In this example, the text will be blue and the background color will be yellow.

console.dir()

To print a deeply nested object in a more readable way, you can use console.dir().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const obj = {
  name: 'Philip',
  gender: 'male',
  address: {
    company: {
      name: 'google',
      location: {
        city: 'shanghai',
        country: 'china',
      },
    },
  },
};

console.log(obj);

output: Notice that the location object is printed as [Object] which is unreadable(unreadable in Node.js, it’s OK to run in Browser console).

1
2
3
4
5

{
  name: 'Philip',
  gender: 'male',
  address: { company: { name: 'google', location: [Object] } }
}

Usually, we resolve this by using JSON.stringify() to convert the object to a string.

1

console.log(JSON.stringify(obj));

but this method has a limitation: it only works for objects that are serializable to JSON. If the object contains circular references, it will throw an error.

1

console.dir(obj);

output:

1
2
3
4
5
6
7
8
9
10

{
  name: 'Philip',
  gender: 'male',
  address: {
    company: {
      name: 'google',
      location: { city: 'shanghai', country: 'china' }
    }
  }
}

JavaScript flatMap

flatMap is the combination of map and flat, It first maps each element using a mapping function, then flattens(only one level) the result into a new array. It’s the same as map followed by flat.

1

arr.flatMap(f); // is equal to arr.map(f).flat();

Note that flatMap only flattening one level

所以，flatMap最多只对二维数组有效，对于多维数组，可以使用arr.map(f).flat(Infinity)。

以下代码的作用是，给定一个数组，将数组中每个元素和它的2倍放到一个新数组中，并将所有结果放到一个新数组中。

1
2
3

const arr = [1, 2, 3, 4, 5];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

is equal to

1
2
3

const arr = [1, 2, 3, 4, 5];
const result = arr.map(x => [x, x * 2]).flat();
console.log(result); // [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

看下面的例子，给定一个字符串数组，其中每个元素是一句话，我们需要将每个句子拆分成单词，并将所有单词放到一个新数组中。

1
2
3
4
5
6
7
8

const arr = [
  'It is sunny today',
  'I am happy',
  'I am learning JavaScript'
];

const result = arr.flatMap(x => x.split(' '));
console.log(result); // ["It", "is", "sunny", "today", "I", "am", "happy", "I", "am", "learning", "JavaScript"]

is equal to

1
2
3
4
5
6
7
8

const arr = [
  'It is sunny today',
  'I am happy',
  'I am learning JavaScript'
];

const result = arr.map(x => x.split(' ')).flat();
console.log(result); // ["It", "is", "sunny", "today", "I", "am", "happy", "I", "am", "learning", "JavaScript"]

Conclusion

So, When to use flatMap? When using Array.prototype.map the callback function usually return an element, but sometimes it returns an array, and you want to flatten the result. Then you can use flatMap to make the code more concise and readable.

当使用Array.prototype.map的回调函数返回数组时，你通常都要使用flatMap.

Authentication vs Authorization

Authentication and authorization are two closely related concepts, but they are not the same. They are both used to protect resources, but they do so in different ways.

In simple terms, authentication is the process of verifying who a user is, while authorization is the process of verifying what they have access to.

Comparing these processes to a real-world example, when you go through security in an airport, you show your ID to authenticate your identity. Then, when you arrive at the gate, you present your boarding pass to the flight attendant, so they can authorize you to board your flight and allow access to the plane.

• Authentication

  • Authentication is the process of verifying the identity of a user. This is typically done by asking for a username and password, but it can also be done using other methods, such as biometric data or security tokens.
  • The goal of authentication is to ensure that the person accessing a resource is who they claim to be.

• Authorization

  • Authorization is the process of verifying what a user has access to. This is typically done by checking the user’s permissions and comparing them to the resource they are trying to access.

Conclusion

• Authentication: 认证
• Authorization: 授权

以现实中住酒店为例，假设你定好了酒店并来到前台，接待员会要求你出示身份证，以确认你的身份，这就是认证。确认你的身份合法后，他们会给你一张房卡，用这张卡你就可以进入你的房间，这就是授权。

最后的最后

我已经彻底明白认证和授权的区别了，但是，这两个单词实在是太像了，我怎么区分他们呢？

• 从操作步骤上来说，认证在授权之前。
• 从单词上来说，如果按照字母顺序排序，authentication 在 authorization 之前。

这样就能记住了，你学会了吗？

javascript-avoid-comments-with-refactoring

下面这段代码是今天在Youtube上看到的一个视频中的代码, 代码的功能是从一个字符串数组中找出所有最长的字符串：比如给定字符串数组：[“aba”, “aa”, “ad”, “vcd”, “aba”]，则要求返回[“aba”, “vcd”, “aba”]。

可以看到这段代码中有很多注释，我们的目的是优化这段代码，让代码可以self explanation。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// gets all longest strings
function longestString(inputArray) {
  // initialize the longest string to first value
  let { length } = inputArray[0];
  for (let i = 1; i < inputArray.length; i++) {
    // checks if current string is longer than current longest
    if (length < inputArray[i].length) {
      length = inputArray[i].length;
    }
  }
  // filters out any values not equal to the longest string
  const strs = inputArray.filter((word) => word.length === length);

  // return the longest strings
  return strs;
}

命名优化

可以从以下几个方面入手：

1. 函数名字不够清晰，longestString是单数形式，且没有动词，一般函数名字都应该加动词，可以改为getLongestStrings - 这样我们就知道，这个函数返回的是多个字符串。而且是从输入参数中get而来的。
2. 函数的参数名字不够清晰，inputArray是一个数组，但是我们不知道这个数组的内容是什么，而且input这个单词有点多余，参数当然是input的，没必要再加上input这个单词。可以改为stringArray。

此时，我们的代码变成了这样：

1
2
3

function getLongestStrings(stringArray) {
  
}

3. 原来的代码中有一个length变量，这个变量的名字不够清晰，并没有说明是什么长度，也无法表明是最大长度，可以改为longestStringLength。
4. 原代码中使用的是经典的for循环，在Modern JavaScript中，我们更推荐函数式编程，所以可以改为for...of循环或者使用Array.prototype.forEach，这样代码更加简洁。

此时代码变成下面的样子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function getLongestStrings(stringArray) {
  let longestStringLength = 0;

  stringArray.forEach((str) => {
    if (longestStringLength < str.length) {
      longestStringLength = str.length;
    }
  });

  const longestStrings = stringArray.filter(
    (word) => word.length === longestStringLength
  );

  return longestStrings;
}

性能优化

此时代码中有一个forEach，有一个filter，这两个函数都是遍历数组的，所以实际上我们遍历了两次数组，不够高效，将其改为一次遍历。此时代码变成下面的样子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function getLongestStrings(stringArray) {
  let longestStringLength = 0;
  let longestStrings = [];

  stringArray.forEach((str) => {
    if (str.length > longestStringLength) {
      longestStringLength = str.length;
      longestStrings = [str];
    } else if (str.length === longestStringLength) {
      longestStrings.push(str);
    }
  });

  return longestStrings;
}

使用reduce优化

多数数组的遍历方法都可以使用reduce来实现，所以我们可以将上面的代码改为使用reduce来实现。

1
2
3
4
5
6
7
8
9
10

function getLongestStrings(stringArray) {
  return stringArray.reduce((acc, str) => {
    if (str.length > acc.maxLength) {
      return { maxLength: str.length, longestStrings: [str] };
    } else if (str.length === acc.maxLength) {
      acc.longestStrings.push(str);
    }
    return acc;
  }, { maxLength: 0, longestStrings: [] }).longestStrings;
}

坦率的说，使用reduce这一版的可读性不如上一版，大家酌情使用。

reduce通常用来处理比较简单的逻辑，比如累加一个数组中所有的数字。在这种情况下，reduce通常只接受一个参数，就是待处理的数组。

1
2

const sum = [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10

如果逻辑比较复杂，那么reduce就要使用多个参数，比如上面的例子，我们实际上传入了如下两个参数，只不过我们把这两个参数封装到了一个对象中。

• longesStringLength - 用来记录当前最长的字符串的长度
• longestStrings - 用来记录当前最长的字符串

处理的时候数组longestStrings是不断变化的，如果当前字符串的长度等于longestStringLength，那么就把当前字符串加入到longestStrings中。(此过程数组元素不断增多，原有的元素还在)，如果当前字符串的长度大于longestStringLength，那么就把longestStrings清空，然后把当前字符串加入到longestStrings中。(此过程原有数组元素被清空，只有当前元素)。

此外，我们还注意到，第一个if分支有return，而第二个没有，有点奇怪，其实原本可以这样写。

1
2
3
4
5
6
7

if (str.length > acc.maxLength) {
  acc.maxLength = str.length;
  acc.longestStrings = [str];
} else if (str.length === acc.maxLength) {
  acc.longestStrings.push(str);
}
return acc;

但是，当str.length > acc.maxLength时，直接返回一个新对象也可以，这个对象会作为reduce的下一次迭代的第一个参数。

其实再进一步，我们可以在if-else中也返回一个新对象。

1
2
3
4
5
6
7
8
9
10
11
12
13

if (str.length > acc.maxLength) {
  return { maxLength: str.length, longestStrings: [str] };
}

if (str.length === acc.maxLength) {
  return {
    maxLength: acc.maxLength,
    longestStrings: [...acc.longestStrings, str],
  };
}

/// str.length < acc.maxLength
return acc;

1. 什么是cookie

In Node.js, you can use the response.setHeader method to set cookies from the server side. Here’s an example using the Express.js framework:

1
2
3
4
5
6
7
8
9
10
11

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.cookie('username', 'John Doe', { maxAge: 900000, httpOnly: true });
  res.end('Cookie has been set');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

In this example, res.cookie('username', 'John Doe', { maxAge: 900000, httpOnly: true }); sets a cookie named “username” with the value “John Doe”. The maxAge option sets the expiry time for the cookie in milliseconds. The httpOnly option is a security enhancement that restricts the cookie from being accessed by client-side scripts.

Get cookie by request header

In Node.js, you can use the request.headers.cookie property to get cookies from the client side. Here’s an example using the Express.js framework:

1
2
3
4
5
6
7
8

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const cookie = req.headers.cookie;
  console.log(cookie);
  res.end('Cookie has been set');
});

In this example, const cookie = req.headers.cookie; gets the cookie from the client side and logs it to the console.

You can also use cookie-parser middleware to parse the cookie from the request header. Here’s an example using the cookie-parser middleware:

1
2
3
4
5
6
7
8
9
10

const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();
app.use(cookieParser());

app.get('/', (req, res) => {
  const { cookies } = req;
  console.log(cookies);
});

使用JavaScript操作cookie

Create cookie

Note that the cookie value cannot contain semicolons, commas, or whitespace. For a solution, use the encodeURIComponent() function to encode the value.

1

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

document.cookie will return all cookies in one string, each cookie is separated by a semicolon and a space.

Read a cookie

1

let allCookies = document.cookie;

Delete a cookie

To delete a cookie, just set the expires parameter to a passed date.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

# References
- [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)

Working Efficiently

Useful VSCode Plugins

1. Code Runner - Run code snippet or code file for multiple languages.
2. Mithril Emmet - Quickly write Html/CSS/JSX tags.

HTTP Content-Type

x-www-form-urlencoded

先看一个例子：

1
2
3
4
5
6
7
8
9

<form
  action="/urlencoded?firstname=philip&lastname=zhang"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <input name="username" type="text" value="user1" />
  <input name="password" type="text" value="pwd1" />
  <input type="submit" value="Submit" />
</form>

这里的 enctype 属性指定了表单数据的编码类型，application/x-www-form-urlencoded 是默认的编码类型，也是最常用的编码类型。当表单数据被编码为 application/x-www-form-urlencoded 时：

• 表单数据会被编码为键值对，键值对之间用 & 连接。
• 键和值之间用 = 连接。

上面的例子中，表单数据被编码为 username=user1&password=pwd1。（实际上和url中的参数格式一样，所以才叫urlencoded）

用浏览器打开这个页面，然后点击 Submit 按钮，按F12打开开发者工具，切换到 Network 选项卡，在HeadersTab可以看到请求的 Content-Type 是 application/x-www-form-urlencoded。

在PayloadTab可以看到请求的详细信息：

• Query String： firstname=philip&lastname=zhang - 对应form action中的url参数
• Form Data：username=user1&password=pwd1- 对应form体中的两个input。

但是，上面这个例子并没有展示出url-encoded的精髓，这里的encoded到底encoded了什么呢？我们来看一个更加直观的例子：

1
2
3
4
5
6
7
8
9

<form
  action="/urlencoded?firstname=philip&lastname=zhang"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <input name="username" type="text" value="foo&bar" />
  <input name="password" type="text" value="1=2?" />
  <input type="submit" value="Submit" />
</form>

这里的 username 和 password 的值中包含了 & 和 =，这些字符在url中有特殊含义，如果直接放在url中，会导致url解析错误。但是，当表单数据被编码为 application/x-www-form-urlencoded 时，这些特殊字符会被转义，所以编码后的表单数据如下图所示。

• username: foo%26bar, 其中 %26 是 & 的转义
• password: 1%3D2%3F, 其中 %3D 是 = 的转义，%3F 是 ? 的转义
  如果不转义的话那么最终的结果就是username=foo&bar&password=1=2?，此时浏览器就懵逼了。导致数据解析出错。
  

那么到底哪些字符需要编码呢？参考这里：http://www.blooberry.com/indexdot/html/topics/urlencoding.htm

multipart/form-data

application/json

text/plain

references

• MDN - HTTP Headers
• MDN - Content-Type