通过Note模型的find方法从数据库中检索对象。该方法的参数是一个表示搜索条件的对象。由于参数是一个空对象{}，我们得到了notes集合中存储的所有笔记。 搜索条件遵循Mongo搜索查询syntax。

rm -rf package-lock.json rm -rf node_modules npm cache clean --force npm install

让我们在路由之后添加以下中间件，用于捕捉向不存在的路由发出的请求。对于这些请求，中间件将返回一个 JSON 格式的错误信息。

HTTP GET 请求应该是 安全的 。 特别是，约定俗成的是，GET 和 HEAD 方法不应具有除检索以外的行动意义。这些方法应该被认为是 " 安全的 "。。 安全意味着执行的请求不能在服务器中引起任何 副作用 。我们所说的副作用是指数据库的状态不能因为请求而改变，而且响应必须只返回服务器上已经存在的数据。

如果内容属性有一个值，笔记将基于收到的数据。如前所述，在服务器上生成时间戳比在浏览器中生成时间戳更好，因为我们不能相信运行浏览器的主机有正确的时钟设置。现在，date 属性的生成是由服务器完成的。

如果删除资源是成功的，也就是说，笔记存在并且被删除了，我们用状态代码 204 无内容 来响应请求，并且在响应中不返回数据。 对于在资源不存在的情况下应该向 DELETE 请求返回什么状态码，目前还没有达成共识。实际上，唯一的两个选择是 204 和 404。为了简单起见，我们的应用在这两种情况下都会用 204 来响应。

无论如何，我们可以通过 覆盖默认的 NOT FOUND 信息 来提供一个关于发送 404 错误的原因的线索。

Representational State Transfer，又称 REST，于 2000 年在 Roy Fielding 的 论文 中提出。REST 是一种架构风格，旨在建立可扩展的网络应用。 我们不打算深入研究 Fielding 对 REST 的定义，也不打算花时间去思考什么是 RESTful 和什么不是。相反，我们将采取一个更 狭窄的观点，只关注 RESTful APIs 在网络应用中的典型理解。事实上，REST 的原始定义甚至不限于网络应用。

用 Node 内置的 http 网络服务器直接实现我们的服务器代码是可行的。然而，这很麻烦，特别是一旦应用的规模扩大。 许多库已经被开发出来，通过提供一个更讨人喜欢的接口来与内置的 http 模块一起工作，从而缓解 Node 的服务器端开发。这些库的目的是为我们通常需要建立后端服务器的一般使用情况提供一个更好的抽象。到目前为止，用于这一目的的最流行的库是 express。

我们已经使用了与React版本16.8.0一起引入的状态钩子，它为定义为函数的React组件--所谓的功能组件提供状态。16.8.0版本还引入了效果钩子这个新功能。按照官方文档的说法。

Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.

This is a matter of preference, and you could go either way. For this example, it is a part of ProductTable because it appears inside the ProductTable’s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own ProductTableHeader component.

This time, we can't avoid passing the position to the Square. After all, how can the Square know where to move the dragged knight if the Square doesn't know its own position? On the other hand, it still feels wrong because the Square as an entity in our application has not changed, and if it used to be simple, why complicate it? When you face this dilemma, it's time to separate the smart and dumb components.

React is not opinionated about the state management or the data flow; you can use Flux, Redux, Rx or even Backbone nah, avoid fat models and separate your reads from writes.

I'm going to do this every time I work on another component, so that I always have something to render. In a larger app, I would use a component playground like cosmos so I'd never write the components in the dark.

Meet the drag sources and the drop targets, the primary abstraction units of React DnD. They really tie the types, the items, the side effects, and the collecting functions together with your components.

In the component's render method, we are then able to access both the data obtained from the monitor, and the function obtained from the connector:

If the backend handles the DOM events, but the components use React to describe the DOM, how does the backend know which DOM nodes to listen to? Enter the connectors. The connectors let you assign one of the predefined roles (a drag source, a drag preview, or a drop target) to the DOM nodes in your render function.

For each component that needs to track the drag and drop state, you can define a collecting function that retrieves the relevant bits of it from the monitors. React DnD then takes care of timely calling your collecting function and merging its return value into your components' props.

React DnD exposes this state to your components via a few tiny wrappers over the internal state storage called the monitors. The monitors let you update the props of your components in response to the drag and drop state changes.

You're probably going to have an enumeration of the type constants in your application, similar to how you may have an enumeration of the Redux action types.

import了三个模块，使它们可以在该文件中使用。模块React被放入变量React，模块react-dom被放入变量ReactDOM，而定义应用主要组件的模块被放入变量App。

注意，现在必须为Note组件定义key属性，而不是像以前那样为li标签定义。

然而，这是不推荐的，即使它看起来工作得很好，也会产生想不到的问题。 在这篇文章中可以阅读更多关于这个问题的内容。

我们可以通过使用数组索引作为键来使控制台中的错误信息消失。通过向map方法的回调函数传递第二个参数，可以拿到索引。 notes.map((note, i) => ...)copy 当这样调用时，i被分配为笔记所在的数组中的索引值。

React使用数组中对象的键属性来决定如何在组件重新渲染时更新该组件生成的视图。关于这一点，更多的可以查看React文档。

创建片段的说明可以查看这里。 有用的、现成的片段也可以在市场中作为VS Code插件找到。 最重要的片段是用于console.log()命令的片段，例如，clog。这可以这样创建。 { "console.log": { "prefix": "clog", "body": [ "console.log('$1')", ], "description": "Log output to console" } }copy 使用console.log()来调试你的代码非常普遍，因此Visual Studio Code内置了这个片段。要使用它，请输入log并点击tab来自动完成。更多功能的console.log()片段扩展可以在市场中找到。

相反，当你把对象作为不同的参数用逗号隔开传递给console.log，就像我们上面的第二个例子，对象的内容被打印到开发者控制台，成为可检查的字符串。

当某些东西不工作时，不要只是猜测什么是错的。相反，要记录或使用一些其他的调试方法。

在所介绍的两种定义事件处理程序的方式中，选择哪一种主要是口味问题。

返回的函数可以被利用来定义可以用参数定制的通用功能。创建事件处理程序的hello函数可以被认为是一个工厂，它产生了定制的事件处理程序，旨在向用户问好。

Dev tools按照定义的顺序显示钩子的状态。

记录到控制台决不是调试我们的应用的唯一方法。您可以在Chrome开发者控制台的调试器中暂停应用代码的执行，方法是在代码的任何地方写下debugger命令。 一旦执行到debugger命令被执行的地方，执行将暂停。

NB 当你使用console.log进行调试时，不要用加号运算符以类似Java的方式组合objects。不是写： console.log('props value is ' + props)copy 而是用逗号把你想记录到控制台的东西分开。 console.log('props value is', props)copy 如果你使用类似Java的方式将一个字符串与一个对象连接起来，你最终会得到一个相当不可靠的日志信息。

在本课程中，我们使用state hook来为我们的React组件添加状态，这是React较新版本的一部分，从16.8.0起就可以使用。在增加钩子之前，没有办法向功能组件添加状态。需要状态的组件必须被定义为class组件，使用JavaScript的类语法。 在这个课程中，我们做了一个略显激进的决定，从第一天开始就完全使用钩子，以确保我们学习React的当前和未来风格。即使功能组件是React的未来，学习类的语法仍然很重要，因为有数十亿行的React遗留代码，你有一天可能会维护它们。这同样适用于你在互联网上偶然发现的React的文档和例子。

存储在allClicks中的那块状态现在被设置为一个数组，它包含了之前状态数组的所有项目和字母L。将新的项目添加到数组中是通过concat方法完成的，该方法并不改变现有的数组，而是返回一个数组的新副本，并将项目添加到其中。 如前所述，在JavaScript中也可以用push方法向数组中添加项。如果我们通过把项目推送到allClicks数组中，然后更新状态来添加项目，这个应用看起来仍然可以工作。 const handleLeftClick = () => { allClicks.push('L') setAll(allClicks) setLeft(left + 1) }copy 然而，不要样做。如前所述，像allClicks这样的React组件的状态是不能直接改变的。即使改变状态在某些情况下看起来是有效的，它也会导致很难调试的问题。

This article assumes that the server is started using the default configuration and that no server ports are changed.

for the exit,

got me running

existential

the @ConditionalOnProperty enables bean registration only if an environment property is present and has a specific value.

However, developing a clear understanding of each of these concepts and their role in organizing code is critical to mastering the art of programming.

The process by which the former leads to the latter may be complex, but we can apply that process using only a simple expression because that complexity is tucked away within a function.

“Starters”.

embedded servlet containers

non-functional features

You can use Spring Boot to create Java applications that can be started by using java -jar or more traditional war deployments. We also provide a command line tool that runs “spring scripts”.