Web全栈开发笔记
文章平均质量分 95
本专栏为赫大《Full Stack Web Development》学习笔记。
Github主页:https://github.com/xudonghuang1998/Full-Stack-Web-Development-2020
资料来源:https://fullstackopen.com/en/
旭日东歌
Stay hungry. Stay foolish.
展开
-
Web全栈开发学习笔记—Part5 测试 React 应用—d.端到端测试
目录CypressWriting to a formSome things to noteTesting new note formControlling the state of the databaseFailed login testBypassing the UIChanging the importance of a note接下来研究一种使用端到端End to End(E2E)测试,将系统作为一个整体的测试方法。可以使用浏览器和测试库对 web 应用进行.转载 2021-01-10 08:37:20 · 280 阅读 · 0 评论 -
Web全栈开发学习笔记—Part5 测试 React 应用—c.测试React 应用
目录Running testsTest file locationSearching for content in a componentDebugging testsClicking buttons in testsTests for the Togglable componentTesting the formsTest coverageFrontend integration testsSnapshot testing除了 Jest 之外还需要另一个测试库帮转载 2021-01-09 08:59:41 · 346 阅读 · 0 评论 -
Web全栈开发学习笔记—Part5 测试 React 应用—a.props.children 与 proptypes
目录Displaying the login form only when appropriateThe components children, aka. props.childrenState of the formsReferences to components with refOne point about componentsPropTypesESlintDisplaying the login form only when appropriate【在合适的时转载 2021-01-09 03:49:17 · 413 阅读 · 1 评论 -
Web全栈开发学习笔记—Part5 测试 React 应用—a.完成前台的登录功能
目录Creating new notesSaving the token to browsers local storage之前主要关注于后端,但前端目前还不支持后端用户管理。目前前端能够展示已经存在的 Note,并且允许用户切换 Note 的重要程度。由于我们在第四章节的修改,新的 Note 不能再添加了:因为在新建 Note 前,后端现在需要 token 来验证用户。现在将实现前台的用户管理功能的一部分。首先从用户登录开始,假设还不会从前端来添加用户。登录表单已经添加到了页面顶端转载 2021-01-08 11:11:36 · 189 阅读 · 0 评论 -
Web全栈开发学习笔记—Part4 测试 Express 服务端程序, 以及用户管理—d.密钥认证
目录Limiting creating new notes to logged in usersError handling现在将让后端支持基于令牌的认证下面的时序图描述了基于令牌认证的原理: 用户首先在 React 中通过登录表单登录 这会使得 React 代码将用户名和密码通过/api/login作为一个 HTTP POST 请求发送给服务器。 如果用户名和密码是正确的,服务器会生成一个token,用来标识登录的用户。这个 Token 是数字化签名的,也就是它不..转载 2021-01-08 02:26:06 · 628 阅读 · 0 评论 -
Web全栈开发学习笔记—Part4 测试 Express 服务端程序, 以及用户管理—c.用户管理
目录References across collectionsMongoose schema for usersCreating usersCreating a new notePopulate为增加用户认证和鉴权的功能。用户 应当存储在数据库中,并且每一个 便笺 应当关联到创建它的 用户。只有 便笺 的创建者才有删除和编辑它的权利。从向数据库添加用户信息开始。User和Note是典型的一对多关系关系型数据库来实现会显得比较直白。每个资源都会有独立的数据库表,而创...转载 2021-01-08 00:44:17 · 251 阅读 · 0 评论 -
Web全栈开发学习笔记—Part4 测试 Express 服务端程序, 以及用户管理—b.测试后端应用
目录Test environmentsupertestRunning tests one by oneasync/awaitasync/await in the backendMore tests and refactoring the backendError handling and async/awaitEliminating the try-catchOptimizing the beforeEach functionRefactoring tests现在转载 2021-01-07 11:02:35 · 466 阅读 · 0 评论 -
Web全栈开发学习笔记—Part4 测试 Express 服务端程序, 以及用户管理—a.从后端结构到测试入门
Project structure【项目结构】进入“测试”之前,修改 Node.js 项目的结构。 优化之后,得到如下结构:├── index.js├── app.js├── build│ └── ...├── controllers│ └── notes.js├── models│ └── note.js├── package-lock.json├── package.json├── utils│ ├── config.js│ ├── logger转载 2021-01-06 22:42:39 · 127 阅读 · 0 评论 -
Web全栈开发学习笔记—Part3 用NodeJS和Express写服务端程序—d.ESLint与代码检查
我们通常希望对存储在应用数据库中的数据应用一些约束,比如不应该接受缺少或空的content属性的便笺。在路由处理程序中检查便笺的有效性:app.post('/api/notes', (request, response) => { const body = request.body if (body.content === undefined) { return response.status(400).json({ error: 'content missing' })..转载 2021-01-05 22:12:18 · 314 阅读 · 0 评论 -
Web全栈开发学习笔记—Part3 用NodeJS和Express写服务端程序—c.将数据存入MongoDB
Debugging Node applications【调试Node应用】调试 Node 应用比调试在浏览器中运行的 JavaScript 稍微困难一些。 将数据打印到控制台是一种可靠的方法,即使是最顶尖的开源开发者也会usethismethod。Visual Studio CodeVisual Studio Code代码调试器在某些情况下可能很有用。 你可以像这样在调试模式下启动应用:注意,应用不应该在另一个控制台中运行,否则该端口将会冲突。注意更新版本的Vis...转载 2021-01-05 05:59:37 · 620 阅读 · 0 评论 -
Web全栈开发学习笔记—Part3 用NodeJS和Express写服务端程序—b.把应用部署到网上
接下来,将之前制作的前端连接到我们自己的后端。前面的部分中,前端可以从作为后端的 json 服务器向地址http://localhost:3001/notes索取便笺列表。现在后端有一个稍微不同的 url 结构,便笺可以从http://localhost:3001/api/notes中获取到。修改src/services/notes.js中的baseUrl属性 :import axios from 'axios'const baseUrl = 'http://localhos...转载 2021-01-04 04:59:19 · 413 阅读 · 0 评论 -
Web全栈开发学习笔记—Part3 用NodeJS和Express写服务端程序—a.Node.js 与 Express
目录Simple web serverExpressWeb and expressnodemonRESTFetching a single resourceDeleting resourcesPostmanReceiving dataAbout HTTP request typesMiddleware现在重点转向后端,也就是转向服务器端的功能实现。在NodeJS基础上构建的后端,是基于 Google 的Chrome V8引擎的 JavaScript 运..转载 2021-01-03 07:50:28 · 587 阅读 · 0 评论 -
Web全栈开发学习笔记—Part2 与服务端通信—e.给React应用加点样式
目录Improved error messageInline styles当前应用的外观是相当朴素的。现在向 React 应用添加样式。以传统的方式将 CSS 放在一个单独的文件中来添加到我们的应用; 先不使用CSS preprocessor。在src目录下添加一个新的index.css文件,然后通过导入index.js文件将其添加到应用中:import './index.css'让我们在index.CSS文件中添加如下 CSS 规则:h1 { color...转载 2021-01-02 01:30:25 · 200 阅读 · 1 评论 -
Web全栈开发学习笔记—Part2 与服务端通信—d.在服务端将数据Alert出来
目录RESTSending Data to the ServerChanging the importance of notesExtracting communication with the backend into a separate moduleCleaner syntax for defining object literalsPromises and errorsGet a full fake REST API with zero coding in less t转载 2021-01-01 05:27:46 · 354 阅读 · 0 评论 -
Web全栈开发学习笔记—Part2 与服务端通信—c.从服务器获取数据
目录The browser as a runtime environmentnpmAxios and promisesEffect-hooksThe development runtime environment此前一直围绕“前端” ,即客户端(浏览器)功能。 之后将开始研究“后端” ,即服务器端功能。 先熟悉在浏览器中执行的代码如何与后端通信。使用JSON 服务器作为服务器。在项目的根目录中创建一个名为db.json的文件,其内容如下:{ "notes": [..转载 2020-12-31 07:38:43 · 314 阅读 · 0 评论 -
Web全栈开发学习笔记—Part2 与服务端通信—b.表单
目录Filtering Displayed Elements继续扩展应用,允许用户添加新的便笺。为了让页面在添加新便笺时更新,最好将便笺存储在App组件的状态中。导入useState函数,并使用它定义一个状态,这个状态用props传进来的初始便笺数组作为状态初始化。import React, { useState } from 'react'import Note from './components/Note'const App = (props) => { const.转载 2020-12-31 00:00:00 · 122 阅读 · 0 评论 -
Web全栈开发学习笔记—Part2 与服务端通信—a.从渲染集合到模块学习
目录console.logProtip: Visual Studio Code snippetsJavaScript ArraysRendering collectionsKey-attributeMapAnti-pattern: array indexes as keysRefactoring modulesWhen the application breaksconsole.logWhat's the difference between an experie转载 2020-12-30 09:14:58 · 310 阅读 · 0 评论 -
Web全栈开发学习笔记—Part1 React入门—d.深入React 应用调试
Complex state【复杂状态】之前的示例,应用状态很简单,因为它仅由单个整数组成。 如果需要一个更复杂的状态,最简单和最好的方法是多次使用 useState 函数来创建单独的状态“片段”。在下面的代码中,我们为应用创建了两个名为 left 和 right 的初始值为0的状态:const App = () => { const [left, setLeft] = useState(0) const [right, setRight] = useState(0) r转载 2020-12-29 21:31:19 · 356 阅读 · 0 评论 -
Web全栈开发学习笔记—Part1 React入门—c.组件状态,事件处理
目录Component helper functionsDestructuringPage re-renderingStateful componentEvent handlingEvent handler is a functionPassing state to child componentsChanges in state cause rerenderingRefactoring the components回到 React,从一个新的例子开始:cons转载 2020-12-29 03:05:15 · 160 阅读 · 0 评论 -
Web全栈开发学习笔记—Part1 React入门—b.JavaScript
JavaScriptJavaScript 在过去的几年里发展非常迅速,其标准的正式名称是ECMAScript。浏览器还不能支持所有 JavaScript 的最新特性,许多在浏览器中运行的代码需要从一个新版本的 JavaScript 转译到了一个更旧、更兼容的版本。现在最流行的转译方法是使用Babel。 在使用 create-React-app 创建的 React 应用中转译是自动配置好的。Node.js是一个基于谷歌的chrome V8引擎的 JavaScript 运行时环境,可以在...转载 2020-12-29 00:47:35 · 261 阅读 · 0 评论 -
Web全栈开发学习笔记—Part1 React入门—a.React简介
React 简介转载 2020-12-18 05:05:38 · 332 阅读 · 0 评论