# TS_写作专栏

**Repository Path**: HEXOS/ts-writing-columns

## Basic Information

- **Project Name**: TS_写作专栏
- **Description**: 运用Typescript结合vue3来构成写作专栏
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2020-12-06
- **Last Updated**: 2023-07-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


### 介绍

1. 采用组件化开发，实现多个非直接耦合，功能内聚的组件，提高项目可维护性，可迭代性。
2. 模仿类似文章专栏的功能需求，学习，前端常用组件的思路，了解 vue3 结合 ts 开发的经验。

### 组件思路

#### teleport

1. 为什么用 teleport 为了避免其它组件样式干扰，将组件渲染至根节点的另一个节点上，实现样式的隔离

#### validateform 组件

   **亮点**：实现了父组件的自定义： **v-model**

1. 那为什么要用这个 v-model 就是为了之后验证表单的组件，能够拿到这里面的 input 组件的值。进行验证等操作。
2. 首先去给子组件添加这个，modelValue 的的 props 属性，子组件的 input 绑定这个 modevalue 这个值；本质上这个打破了之前的 vue 组件单向数据流。
3. 子组件更新内容的时候，在子组件去向外发送一个叫 update:modelValue 的事件，并将更新的内容，通过 context.emit 来发送这个事件。
4. 此时父组件来用 v-model,实现了父子组件的数据双向绑定。
   实现思路：就是运用这个 **Mitt 库，**为什么要用这个 mitt 库就是因为这里是，validatefrom 的**父子组件**，里的**子组件是以插槽**的形式，拿不到子组件的值，所以借助 mitt 库。
   我想让 validateform 这个子组件去循环验证规则，如果都通过了，才可以，所以是子组件向外发送事件，然后由父组件去执行，然后再去利用之前通过 v-model 所绑定获取的值，就可以去验证这些结果了。
   其实这个逻辑就是，validateform 里面有多个 input 组件，我需要去，循环验证每个 input 组件里的，验证函数的结果，通过父组件的验证函数，只有都通过了，才可以，去通过。

#### loading 组件

1. 这个组件设计首先得考虑遮罩层 ：运用 fix 定位，然后就是，四个方向都为 0，然后，在利用 z-index,由于 fix 和 absolute 都是脱离了，文档流并触发了 BFC，所以需要设置 z-index，防止它被其它元素所覆盖，之后就是属性考虑有提示词，还要有背景颜色等，同时在 setup 生命周期里去，创建节点，挂载到根页面里，这里的话，需要去配合拦截器，，没有它，就没有办法控制整个组件的显示和隐藏了，所以发出异步请求之前，显示组件，发出请求后，再去触发 commit，使组件消失。

#### 弹出窗组件

1. 这个也是属于这个**全局的组件**
2. 首先要明确为什么，就是因为要对删除操作做出确认
3. 分析 属性，显示隐藏，确认删除，取消删除事件，
4. 由于子组件无法触发事件，单向数据流，就是子组件来定义发送事件，父组件来监听这个事件，并做具体事件的函数，子组件只是来定义这个事件，并去发送事件的。
5. 对于 ref 对象的理解就是说这个，父组件为了能够给子组件传递属性的值，一般选取这个响应式的值。
6. 梳理一下删除的逻辑，首先当我点击这个删除按钮会触发一个事件就是，首先要让显示值为 false，并且会去触发这个 action 删除文章的一个逻辑。
7. **bug** 就是首先触发这个 action 的名字你得写对，还有这个就是，做组件不要急，你都没给 Button 添加事件你是怎么来，让这个 alert 框展示的，对吧，还有你 <teleport ><teleprt 传送门是传的是到这个 id 号，#不要忘记了，还有你是给 Body 添加这个节点，不是给文档添加节点，你写 JSONP 的时候也用到了这个了 document.body 记住。
8. **思路**： 就是首先这个组件里根据这个弹框样式，就知道应该是有这个，title,还应该有显示的属性，并且应该向父组件发射两个，点击取消的事件，还有一个成功删除的事件。
9. 父组件在点击这个删除后会触发一个函数这个函数就是去触发 action 删除文章后，并在一段事件后跳转至专栏页。

### 重点：权限管理

1. token,这里有一个小的问题就是自己错误在于自己在拿到这个 ref 的值得时候没有赋予 val 值。
2. 这里的业务逻辑就是说这个客户这里登录成功后向服务器这里发出一个 post 请求，然后，拿到一个 token，那么这个到底是干什么的。
3. 这里回顾一下，session 怎么来实现登录的，首先在博客项目里，我先通过制定的登录路由，登录，验证通过后，服务器这里创建对应的 session 来将其信息进行保存并存储在这个 Redis 里，之后向客户端这里返回一个 cookie：对应的 sessionid，然后，浏览器存储，当访问需要登录权限的路由时，客户端将 sessionid 通过 cookie 带上，然后通过服务器的验证后就可以返回对应的信息。弊端是什么想一想。
4. **jwt**： 一句话，就是信息都存储在客户端 ，而不是存储在服务器里，每次登录成功后，返回一个 token 字段，然后客户端下次访问需要验证的路由时，带上它通过 axios.commn-header，服务器反向验证，通过后就可以直接返回相应的信息了，好处就是减轻服务器压力.
5. **亮点**：那么现在我每次刷新，都会重新登录我该怎么来持久化这个状态呢，这里的逻辑就是说这个每次下次登录首页刷新时区判断一下当前未登录，并且，token 值存在，这个值被我存储到了 storage 里，再次添加 token 头字段，进行权限认证通过后，通过访问用户信息的路由，就可以去拿到对应的信息了，并将信息返回并渲染至界面上。

### 优化点

1. 记录发送过的请求，防止重复的请求，用表示符号，每次发送一个请求的时候就是，将标识至反，然后就判断标识，所以可以不必重复的请求，但是单个的请求，布尔值不满足这个问题，所以我需要去做一个数组，每次请求过后的文章 id 号就 push 到数组里， 每次再次访问就去判断一下是否包含了这个文章 id,有了，就不用请求，如果不再这个 id 号。
2. 原先结构： 为
   ```js
   const columns=[{id: '1' ,post: [{id: '2_1'},{id: '2-2'}] },{id: '2' ,post:[22]} ]  专栏1里面有多个post文章每个文章也有其对应的属性
   现在 const posts= {'1': {...post},'2': { ...post} }  这样我就不需要去遍历了，这样直接通过定位将时间复杂度降为o(1)

   ```
3. 其实本质上思想类似于 redux 的 Normalizing state shape

### 文件上传组件

1. 首先明确一下由于文件上传的格式一般是二进制数据，所以的话需要这个采取 multipart/form-data ，支持二进制数据，难点和亮点就是说通过 javascript 来模拟这个文件上传。
2. 首先来明确一下这个思路就是，我在点击一个 button 按钮的时候，，想触发这个 input 的上传文件，那么就在点击 button 的时候，给 input 去添加一个 click 事件即可，这里有一个泛型的应用就是可以去给这个 ref 对象去传递一个**泛型**，这里不是特别的理解，
3. 这个组件的属性必然要有一个 action 就是你往哪里去串，这个 url 所以这个必然是 props 的属性。
4. **设计思路**就是首先我需要拿到这个 input file 这个 dom 节点，之后，**问题**： 拿到这个 dom 节点后，记得要把这个 ref 值往外导出，不然这个 dom 节点上你拿不到，你所定义的这个值，自然也拿不到这个 dom 节点。拿到这个 dom 节点后，当你去触发这个事件的时候，就会拿到这个 files 这个上传的文件，之后，去创建一个 form data 之后再去，将数据 append 到里面，最终在前端通过 post 请求，传递数据，以及设置这个数据类型以这个 mutiply-formdata 的数据格式发送请求。
5. **亮点**： **具名插槽**的使用，何时用就是在你需要自定义模板的时候，去用，就是我在子组件里去通过定义 slot，并定义这个内容，然后父组件在向子组件传递内容的时候，借助于 template 模板来使用这个，并通过 v-slot 来确定往哪个插槽里去传递内容。
6. **亮点**： 如何在父组件中拿到子组件里，的值，，就是如何将子组件里的值，传递到这个父组件里面，，就是结合文档，子组件去定义一个需要向外传递的值，然后父组件在插槽里拿到这个值取渲染你刚才传递的这个照片。
7. 如何来禁止这个属性继承，考点： 如何来让父组件的属性继承到子组件里，通过绑定这个 $attrs,就是在做这个希望让这个上传组件的样式进行自定义，那么我们就需要，在父组件定义属性，比如类名，还有内容。
8. **自定义一个上传组件**就是更具不同的状态，结合具名插槽，传递这个不同的状态，所对应的元素。
9. 记录一下**小 bug**,就是说由于我最终是想去在上传成功的状态去，传递我所定义的成功是展示图片的插槽，但是我在 finnaly 最后又去重新赋值为这个状态为 ready 导致成功的插槽内容始终没有展示。
10. **创建文章逻辑**： 我是如何将这个 image 的 id 号和展示文章的 Id 号所对应的就是通过这个，
11. **bug**: 自己在做的时候发现自己，把 post 的请求发出返回的结果没有注意这个格式，就是自己，因为后端的返回结果其实是把这个数据都放在了 data 里而我是直接跳过了这个 data 直接就继续找到了这个 data。

### 全局 message 组件

1. 首先出错这个组件不止是在，某个组件中去用，全局状态下都有可能去用
2. 首先这个全局组件，需要设置一个错误的一个数据结构。一般全局组件的设计思路就是说通过 store 设置全局的状态，并通过这个拦截器，来拦截这些状态，`// 这里就是通过失败的回调得到失败的数据，并commit去触发全局错误状态的改变。`
3. 这里有一个小问题就是现在当我去点击这个取消错误提示的时候，发现，这里不去显示这个组件了这是为什么，这里对于这个全局组件的理解应该是一个函数，而不是单纯的一个组件，因为这样子我就可以去，传递一些错误的信息提示，以一种全局错误的一种调用就是我需要的时候去调用它，**亮点**：**以函数的形式来创建一个组件**，就是先创建一个应用，里面有组件，和 props 的参数，然后通过这个参数来解决这个问题，这里**考点**: watch 的应用 就是来监听这个全局错误状态的改变，一旦改变了就调用这个组件函数，并传递相应的一个参数。这里遇到的 **bug** 首先就是我发现，点击的时候没有触发相应的事件，于事猜测可能就是这个，事件没有触发因此出现了**问题**，最后发现这个事件我添加在了外部的容器导致点击，那也就是说，你点击哪个元素就给它去添加事件，你不要去给它添加事件。
   验证表单组件

### vuex

1. 对于 vuex 中的这个通过 actions 去定义获取信息的函数，然后通过在对应的组件中通过这个 commit 来触发这个 mutitions，所以通过这个来实现。
2. 这里的逻辑就是说这个通过在渲染这个一个 id 号下的所有文章的时候，通过，拿到路由里对应的 id 号然后去通过 dispatch 去触发对应的 actions 然后再去在 store 里来修改这样的状态。
3. **亮点**通过 async 和 await 来改造 actions 里的异步请求：
4. **项目中遇到了哪些困难** 怎么解决的就是在发出异步请求的时候总是返回 500 首先我打开浏览器去发现了自己 url 格式有问题，就是我 dispatch 的时候传递了错误的数据，导致最后拼接 url 的时候出现了错误。
5. 运用 **teleport** 实现组件挂载到另一个节点的时候，我还要去创建一个 div 标签，很不人性化
6. 为什么要在 setup 这个生命周期函数创建就是因为要先在组件渲染完之前创建节点。
   同时由于你每次渲染一次组件，就创建一个节点，那么就在组件渲染完毕后再去销毁这个节点。

### 文章详情页的展示

1. 首先点击按钮可以跳转至详情页，之后的话就是说这个，那就得继续来个路由，这个路由出口展示着这个详情页。
   ### 分析这个组件设计的思路：

   1. 首先我需要这个创建对应的 views 因为是视图的改变，需要创建对应的路由。
   2. 在这个 columndetail 上去创建这个链接，跳转至对应的一个界面上去。
   3. 在 onmounted 的时候去发送这个单个文章的请求来返回相应的数据。

### 编辑删除区域

1. 就是你文章详情接口返回了一个 author 数据，你要拿到这个数据里的 id 号和你登录的时候所对应的 id 号进行比对，如果一致的话，那就返回相应的数据，如果不一致的话， 那就不展示对应的编辑删除区域，
2. 编辑模式下的创建文章，必然首先要在组件渲染的时候拿到这个图片进行展示，发出相应的请求进行展示，因为你想编辑模式下，必然是让这个头图，标题，还有文章，都要拿到相应的数据进行展示。
3. 在这个 uploaded 进行数据的一个初始化，就是说这个，这里有一个问题就是说让这个在 props 里的属性进行改变的时候，进行 **watch 监听**，这样。
4. **Bug**:这里记录一下一个 bug，就是说这个我在触发 action 的改变的时候，发现拿不到数据，最后发现自己这个每次没有将自己通过发出 axios 的请求，所返回的数据返回，这就导致了，你通过触发这个 actions 始终拿不到我想要的数据。
5. 对于编辑，删除，跟新的功能，其实**通用的思想**就是设置 action, mutations 然后，去触发。
6. 对于这个更新文章的思路，就是我们在触发这个对应的 action 的时候是去拿到这个跳转时的 id 号，然后与新建文章的内容，然后进行发送这个异步的请求，就是整个这个 post 文章列表去找到对应的更新的那篇文章， 通过这个 id 号，这里我还进行了对于这个异步函数的抽象，因为会有多个请求方法，可以借助这个 axios 的类型，不同的方法，就可以进行。