前端知识汇总

项目详细描述，构建自己的知识体系~

React

React 进阶

Vue

Vue 进阶

JS数据结构

JavaScript数据结构与算法

项目自用封装

在开发过程中常用到的封装和工具

前端工程化

从团队效率出发，不再是一个人

知识粉碎机

一切困惑我的知识都将在此受到制裁(＾－＾)V

服务器

前端可不能只会敲页面啊！

Mongoose

Mongoose 快速入门

Mongoose 是一个用于 Node.js 环境下操作 MongoDB 数据库的对象数据建模（ODM）工具。它提供了一套简便的 API，让开发者能够更轻松地与 MongoDB 进行交互。

创建连接、schema 与 modal 定义

连接

mongoose.connect 方法连接到 MongoDB 数据库，MongoDB的默认端口号为27017，这里也可以省略会默认指向27017的端口

// 引入依赖
const mongoose = require('mongoose');

// 连接到 MongoDB 数据库，mydatabase 为数据库的名称
mongoose.connect('mongodb://localhost:27017/mydatabase', {
   useNewUrlParser: true, // 设置 useNewUrlParser: true，手动启用新解析器，从而避免旧解析器的兼容性问题
   useUnifiedTopology: true // 同上，消除兼容性的警告使用
});

// 通过 on 方法监听连接相应的事件，open、close、error等，具体可查官方文档
mongoose.connect.on("open", () => {
  console.log("已连接")
})

HCX大约 9 分钟

Docker 容器化部署持续集成

Docker 是什么

Docker 是一个开源的平台，主要用于开发、运输和运行应用程序。Docker 使用容器技术来解决传统虚拟化技术中的一些缺陷和复杂性。

操作系统层面的虚拟化技术
隔离的进程独立于宿主和其他的隔离的进程，容器
GO 语言开发

特点：

便携性：由于容器包含所有依赖项，应用程序可以在任何地方运行，无论是开发人员的笔记本电脑、测试环境还是生产环境。
隔离性：容器之间是互相隔离的，确保一个容器的变化不会影响其他容器。这使得应用程序更安全、更稳定。
高效性：容器共享宿主操作系统的内核，相比虚拟机，启动速度更快，占用资源更少。
可扩展性：通过 Docker Compose 和 Docker Swarm 等工具，可以轻松编排和管理多个容器，支持微服务架构和大规模分布式系统。

HCX大约 6 分钟

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

// store/index.js
import { createStore } from 'vuex';

// 创建一个新的 store 实例
const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

export default store;

HCX大约 5 分钟

Vue Router

Vue-router V4

Vue Router 是官方路由库

快速起步

CDN：<script src="https://unpkg.com/vue-router@next">
NPM：npm install vue-router@next -S

在 App.vue 文件中配置路由出口

<template>
  <h1>Hello App!</h1>
  <!-- 在组件模板中使用 $route 来访问当前的路由对象 -->
  <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
  <nav>
    <!-- 创建链接 -->
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>
  <main>
    <!-- 用于渲染当前 URL 路径对应的路由组件 -->
    <RouterView />
  </main>
</template>

HCX大约 11 分钟

Vite

Vite 是开发构建工具，开发期它利用浏览器native ES Module特性导入组织代码，生产中利用 rollup 作为打包工具，它具有如下特点

光速启动
热模块替换
按需编译

安装

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

HCX大约 9 分钟

Vue3基础

Vue3 基础语法

模板语法

通过 v-bind 来绑定变量的值，通常简写为 :

通过双括弧语法在 html 元素内使用变量{{变量名}}

双括弧里渲染的是字符串，如果想要渲染一段 html 代码，使用 v-html 来实现

计算属性和侦听器

模板中不宜放入过多的逻辑，难以维护，对于任何包括响应式数据的复制逻辑，都应该使用计算属性。计算属性具有缓存性，不会进行重复计算

侦听器（监听器），侦听某个响应式数据的变化，执行一段给定逻辑

HCX大约 13 分钟

前端工程化入门

为了更好的管理团队，降低管理成本，需要将代码进行统一标准化，为新人或者初级工程师提供便捷的工具，使得其能够更好的发挥自己的作用

一、模块化和包管理

1.1 模块化解决了什么问题？

模块化的思想为分解和聚合。分解契合的是主观规律，即人为主观的进行分解，降低认识的成本，更好的分析问题。而聚合是客观规律，所见到的大部分都是模块聚合的结果

函数层面上来看分解和聚合：

比如说书写一个基本的功能函数，会针对领域内的问题进行细分出来一系列的功能函数（分解），由这些功能函数聚合成要实现的功能（聚合）

HCX大约 6 分钟

Nginx

Nginx 快速入门

Nginx（发音为"engine X"）是一个开源的高性能的 Web 服务器软件，也可以用作反向代理服务器、负载均衡器、邮件代理以及 HTTP 缓存服务器。它由俄罗斯的程序员 Igor Sysoev 于 2004 年创建，并于 2009 年成立了它的公司 Nginx Inc.。

Nginx 的设计目标是提供高性能、高并发的服务，同时具有低内存消耗。它采用事件驱动的异步架构，能够处理大量的并发连接而不会产生过多的线程或进程。这使得 Nginx 在面对高流量的情况下仍能保持稳定的性能。Nginx 还具有良好的扩展性，可以通过模块化的方式灵活地扩展和定制功能。

HCX大约 1 分钟

Linux

一、前置知识基础术语了解

Kernel

Linux 的内核，操作系统的大脑，它控制着系统硬件并制造硬件和应用程序的交互

kernel
distribution

发行版是一系列程序结合包含了 Linux 内核共同组成 Linux 操作系统，一些常见的发行版示例如：red hat Enterprise Linux Fedora, Ubantu, gen2

发行版
boot loader

在操作系统内核运行前执行的一小段程序，如 grub, isolinux

boot
service

一段运行在后台进程的程序，如 httpd, nfsd, ntpd
filesysterm

文件系统是 Linux 的一种存储方式，如 ext3, ext4
X Window system

提供了标准的工具包和协议，用于构建几乎所有的图形用户界面
desktop environment

操作系统顶部的图形用户界面
command line

命令行是一个提供输入命令的接口
Shell

命令行解释器，用于解释命令行的输入并指示操作系统去执行任何必要的任务和命令，如 bash, TC shell, Z shell

HCX大约 23 分钟

文件上传

前言

content-type

binary 数据

File 类型

form-data

组件库推荐对象包裹 raw 数据

前端请求

axios.post

后端处理

fs 文件读写
生成链接、数据存储
返回响应
工具推荐

HCX小于 1 分钟

跳转到:

飞船的妙妙屋