教程：FullStackOpen2022/Part 4 为应用增加用户认证和鉴权的功能。User 应当存储在数据库中，并且每一个 Blog 应当关联创建它的 User，只有创建者才拥有删除和编辑它的权利。 本文中以 bloglist 应用为例。对应练习 4.15-4.22。 1. 添加用户 定义 User 并跨 Collection 引用 Blog 定义一个 model 来表示 User，并在 Mongoose validator 的帮助下验证用户。 models/user.js： const mongoose = require("mongoose"); const uniqueValidator = require("mongoose-unique-validator"); const userSchema = new mongoose.Schema({ username: { type: String, minLength: 3, required: true, unique: true, }, name: String, passwordHash: { type: String, minLength: 3, required: true, }, blogs: [ { type: mongoose.Schema.Types.ObjectId, ref: "Blog", }, ], }); userSchema....

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/14-calendar-picker Live Demo: 14 - Calendar Picker || Advent of JavaScript Preview: 2. Details Users should be able to: view calendar with correct days with the current day highlighted navigate through different months 3. Coding Setup React template Please be aware: this approach is fine for learning and creating simple demos but is not suitable for production....

教程：FullStackOpen2022/Part 4 软件开发的一个重要环节，就是自动化测试。 本文中以 bloglist 应用为例。对应练习 4.3-4.14。 1. 配置测试环境 通常的做法是为开发和测试定义不同的模式。而 Node 中是用 NODE_ENV 环境变量定义应用的执行模式。 在脚本中指定应用模式的方式不能在 Windows 上工作，这可以通过安装 cross-env 作为一个开发依赖包来修复。另外，如果应用是部署在 Heroku上，cross-env 作为开发依赖项可能在 web 服务器上报错，可以将 cross-env 保存为生产依赖修复这个错误。 npm install --save-dev cross-env npm i cross-env -P 通过在 package.json 中定义 npm 脚本使用跨平台兼容性的 cross-env 库来配置环境： "scripts": { "start": "cross-env NODE_ENV=production node index.js", "dev": "cross-env NODE_ENV=development nodemon index.js", "test": "cross-env NODE_ENV=test jest --verbose --runInBand" }, 对定义应用配置的模块 config.js 进行一些修改： require('dotenv').config() const PORT = process.env.PORT; const MONGODB_URI = process....

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/13-custom-modal Live Demo: 13 - Custom Modal || Advent of JavaScript Preview: 2. Details Users should be able to: Click on a point on the image, that triggers the modal Click on the x within the modal to close the modal 3. Coding This is a simple one. style.css: .hidden { display: none; } script.js: const showBtn = document....

教程：FullStackOpen2022/Part 4 优化应用结构 对于较小的应用，结构并不重要。可一旦应用开始增大，就必须建立某种结构，并将应用的不同职责分离到单独的模块中，使开发应用更加容易。 优化后的目录结构： ├── index.js ├── app.js ├── build │ └── ... ├── controllers │ └── blogs.js ├── models │ └── blog.js ├── package-lock.json ├── package.json ├── utils │ ├── config.js │ ├── logger.js │ └── middleware.js index.js：用于启动应用。 app.js：实际的应用。 controllers/blogs.js：路由处理程序。 models/blog.js：为 blogs 定义 Mongoose schema。 utils/logger.js：用于控制台的打印输出，告诉应用的运行状态。 utils/config.js：环境变量的处理，应用的其他部分可以通过导入配置模块来访问环境变量。 utils/middleware.js：自定义中间件模块。 以 bloglist 应用为例，将该应用重构。 初始 index.js： const http = require('http') const express = require('express') const app = express() const cors = require('cors') const mongoose = require('mongoose') const blogSchema = new mongoose....