标签: 必会

一，为什么要捕获异常

//确认提交
const submitWorkloadSure = async () => {
  
    let data = await WorkloadSures()
     console.log(555)
};

qianxun大约 3 分钟

typeScript中使用axios

项目一

根据名称获取动漫列表

1,定义api.type.ts （定义后台接口返回的类型）


interface ApiFormat<T> {
  /** 状态码 */
  code: number
  /** 状态文字 */
  message: string
  /** 数据 */
  data: T
}

export type Search = ApiFormat<{
  /** 当前返回页数 */
  pageindex: number
  /** 总页数 */
  pagetotal: number
  /** 动漫列表 */
  results: {
    /** 分类列表 */
    category: string
    /** 封面 */
    cover: string
    /** 首发时间 */
    date: string
    /** 介绍 */
    description: string
    /** 动漫id */
    id: string
    /** 动漫状态（更新、完结...） */
    season: string
    /** 动漫名称 */
    title: string
  }[]
}>

qianxun大约 1 分钟

Http

必看手册

https://developer.mozilla.org/zh-CN/docs/Web/HTTP

一、状态码

1.1 3xx

1.1.1 304

HTTP 304 Not Modified 说明无需再次传输请求的内容，也就是说可以使用缓存的内容。这通常是在一些安全的方法（safe），例如GET 或HEAD 或在请求中附带了头部信息： If-None-Match 或If-Modified-Since。

chensino大约 2 分钟

前端模块化

一，什么是前端模块化

模块化就是将一个复杂的应用程序，按照规范拆分成几个相互独立的文件，这些文件里面完成共同的或者类似的逻辑，通过对外暴露一些数据或者调用方法，与外部整合。

这样每个文件彼此独立，我们开发者更容易开发和维护代码，特别是当开发的项目越来越大，代码复杂性也不断增加，这对于模块化的需求也会越来越大。

模块化主要特点是：可复用性、可组合性、独立性、中心化。

所以使用模块化可以帮我们解决什么问题呢？

解决了命名冲突：因为每个模块是独立的，所以变量或函数名重名不会发生冲突
提高可维护性：因为每个文件的职责单一，有利于代码维护
性能优化：异步加载模块对页面性能会非常好
模块的版本管理：通过别名等配置，配合构建工具，可以实现模块的版本管理
跨环境共享模块：通过 Sea.js 的NodeJS版本，可以实现模块的跨服务器和浏览器共享

qianxun大约 9 分钟

Cookie的作用域domain

一级域名：aaa.com 二级域名：bbb.aaa.com 三级域名：ccc.bbb.aaa.com

如上例子： aaa.com 是 bbb.aaa.com 和 ccc.bbb.aaa.com 的父域名；bbb.aaa.com 是 ccc.bbb.aaa.com 的父域名；反过来bbb.aaa.com 和 ccc.bbb.aaa.com 是 aaa.com 的子域名；ccc.bbb.aaa.com 是 bbb.aaa.com 的子域名

划重点

在当前域名下，只能设置当前域以及父域的cookie，不能设置子域下的cookie。例如我在浏览器访问后端服务的域名为bbb.aaa.com时，我在后端就只能把cookie的域设置为当前域（缺省状态就是当前）或者设置为其父域名aaa.com,而不能设置为其子域名ccc.bbb.aaa.com,设置子域名前端SetCookie或有警告

qianxun大约 2 分钟

typeScript项目实战

一，利用typeScript实现新增，删除一行数据

这里基本涵盖了typeScript在项目中的实战用法

1,html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./style.css" />
	<title>蛋老喵</title>
</head>
<body>
	<button class="remind">随机1只喵</button>
	<table>
		<thead>
			<tr>
				<th>图片id</th>
				<th>图片预览</th>
				<th>图片高度</th>
				<th>图片宽度</th>
				<th>图片地址</th>
				<th>删除图片</th>
			</tr>
		</thead>
		<tbody id="table-body">
			<tr>
				<td>idxxx</td>
				<td><img src="./example.jpeg" /></td>
				<td>高度xx</td>
				<td>宽度xx</td>
				<td>地址xx</td>
				<td><a href="#">X</a></td>
			</tr>
		</tbody>
	</table>
	<script src="./script.js"></script>
</body>
</html>

qianxun大约 1 分钟

搞懂npm与cnpm

一，什么是npm

npm是node官方的包管理工具 cnpm 是淘宝NPM镜像官网，来自淘宝NPM镜像官网的说明：

淘宝为我们搭建了一个国内的npm服务器，它目前是每隔10分钟将国外npm仓库的所有内容“搬运”回国内的服务器上，这样我们直接访问淘宝的国内服务器就可以了，它的地址是：https://registry.npm.taobao.org

qianxun大约 2 分钟

搞懂npm与pnpm

一，什么是pnpm

performant npm ，意味“高性能的 npm”。pnpm由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。被誉为“最先进的包管理工具”

二，特点

当使用 npm 或 Yarn 时，如果你有 100 个项目，并且所有项目都有一个相同的依赖包，那么，你在硬盘上就需要保存 100 份该相同依赖包的副本。然而，如果是使用 pnpm，依赖包将被存放在一个统一的位置，因此：
1. 如果你对同一依赖包需要使用不同的版本，则仅有版本之间不同的文件会被存储起来。例如，如果某个依赖包包含 100 个文件，其发布了一个新版本，并且新版本中只有一个文件有修改，则 pnpm update 只需要添加一个新文件到存储中，而不会因为一个文件的修改而保存依赖包的所有文件。
2. 所有文件都保存在硬盘上的统一的位置。当安装软件包时，其包含的所有文件都会硬链接自此位置，而不会占用额外的硬盘空间。这让你可以在项目之间方便地共享相同版本的依赖包。
最终结果就是以项目和依赖包的比例来看，你节省了大量的硬盘空间，并且安装速度也大大提高了！

qianxun大约 2 分钟

npm与yarn的区别

一，yarn简介

yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，yarn 是为了弥补 npm 的一些缺陷而出现的。

二，npm的缺陷

npm install 下载速度慢，重新 install 时速度依旧慢
同一个项目，安装的无法保持一致性。原因是因为 package.json 文件中版本号的特点导致的，下面三个版本号在安装的时候代表不同的含义。
```
"5.0.3"     # 表示安装指定的5.0.3版本
"~5.0.3"    # 表示安装5.0.X中最新的版本
"^5.0.3"    # 表示安装5.X.X中最新的版本
```
使用 npm 安装多个 js 包时，包会在同一时间下载和安装。安装过程中，其中一个包抛出了一个异常，但 npm 会继续安装其他包，所以错误信息就会在一大堆提示信息中丢失掉，以至于直到执行前，都不会发现实际发生的错误。

qianxun大约 1 分钟

vue-router4.0的基本使用

一，安装

npm install vue-router@4

二，基本用法

2.1 在项目中新建router/index.js

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import About from '@/components/About.vue'
import Home from '@/components/Home.vue'
import User from '@/components/User.vue'
import NotFound from '@/components/NotFound.vue'


//定义一些路由
//每个路由都需要映射到一份组件

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/users/:id', component: User}
]

//创建路由实例并传递routes配置
 const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
  })

  export default router

qianxun大约 1 分钟