前端技术周记-CSDN博客

2021年3月第3周

本周落地
下周计划
自我反思

本周落地

完成的进度如下：
Azure DevOps截图
对我来说Resolved和closed的区别在于前者是完成了，但是还没有总结。

HTML的学习
按期完成了p26-36的学习
CSS的学习
视频看完了，书还没有开始
JavaScript的学习
跃进式地看到了96，书还没有开始
~~算法的学习~~
暂时搁置，等到H5C3JS完成之后再继续
Node的学习
依旧为了完成工具超时了很多很多很多……
读完了一本书
读后感：「水母不会冻结」读后感

学习笔记

~~2021年3月21日22点35分尚且还未完成~~

HTML

HTMLMM

CSS3

主要是讲了复合选择器：

后代选择器

语法：父类 (中间一个空格) 子类 {}

例： div p {}
子选择器

语法：父类 > 子类 {}

例： ul > li {}

子类必须是父类的下一级。
并集选择器

语法：元素1, 元素2 {}

例： ul, ol {}
伪类选择器

语法：元素1: 伪类 {}

例： a: visted {}
特殊的伪类：:focus，只能用于获取表单元素。

JavaScript

几个循环，都是老生长谈了。

NodeJS

这周看的视频讲的是用Express做Server。
express-mm

结构的修改

源码的目录结构也改了：

|- src
|	|- controllers
|	|- public
|	|- routes
|	|- app.js
|	|- server.js

目前结构变成了一个传统的MVC结构，原本的app.js被拆成了以下几个文件/文件夹：controllers, routes, app.js, server.js，每一个的作用更加单一：

controllers

具体CRUD发生的地方。

routes

每一个route文件对应一个router，例如说对于user的路由就会被单独的放在userRoute文件下，这个文件再被app.js引用，作为express使用的中间件之一。

在route文件之中，根据传来的HTTP Request去调用对应的controller函数。如：

// 引用下面用到的函数

// 默认写法
const router = express.Router();

// 检查是否是合法的id
router.param('id', checkID);

// 根据http request调用对应的CRUD函数
// 此处的默认URL地址为下方 app.use() 中使用的URL
router.route('/').get(getAllUsers).post(checkRequestBody, createUser);
router.route('/:id').get(getUser).patch(updateUser).delete(deleteUser);

// 导出路由
module.exports = router;

app.js

app相关的配置，包括使用的中间件等。

上方的route的函数使用方法如下：

// 引用user路由
const userRouter = require('./routes/userRoutes');

// 其他app相关配置
// 使用 路由 中间件
// 所有路径为 '/api/users' 的URL都会去访问 userRouter 里面的函数
app.use('/api/users', userRouter);

server.js

server的配置，包括读取config.env，配置端口，确定环境等。

插件的使用

主要是eslint和prettier。

`package.json`的更新

  "devDependencies": {
    "eslint": "^7.22.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "prettier": "^2.2.1"
  }

`eslint`的配制

{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error", { "endOfLine": "auto" }],
    "spaced-comment": "off",
    "no-console": "warn",
    "consistent-return": "off",
    "func-names": "off",
    "object-shorthand": "off",
    "no-process-exit": "off",
    "no-param-reassign": "off",
    "no-return-await": "off",
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "prefer-destructuring": ["error", { "object": true, "array": false }],
    "no-unused-vars": ["error", { "argsIgnorePattern": "req|res|next|val" }]
  }
}