m0_64931189的博客

说到编辑和删除，就涉及到权限问题，那就是一个登录用户应该只能更新或者删除自己创建的文章，别人的文章他是没有权限进行更新或删除的，所以对于更新和删除这两件事在任何系统中都要特别注意权限这个要素当登录用户有权限的时候，我们希望在文章详情页底部显示编辑和删除按钮，可以用他们来进行对应的操作，那么什么时候是有权限的呢，当这篇文章的作者是当前用户的时候，就说明当前用户对这篇文章是有权限的。接口文档中，我们可以看到在获取单独文章的接口中我们有一个属性叫author，它底下的_id就指代独一无二的作者；

之前我们有做过上传前验证的类似代码，但是我们这里就把它抽象成通用的函数，验证关键是验证文件的格式和大小，所以我们做个通用参数。如下，我们把之前验证文件格式的代码抽离出来放在generateFitUrl中了，后续哪里要用到这个验证逻辑就直接调用这个函数即可然后我们还在上传前的验证函数beforeUploadCheck中写了验证文件大小和类型的逻辑，如下，这个函数中我们要接用户选择的文件即file以及我们定义的合法规则condition（这个condition中有我们定义的合法的类型和大小），然后开始逻辑。

我们的template中有button和file类型的input（给隐藏input），然后我们是通过点击这个button去触发该input的click点击事件，这个点击事件就会弹出让你选择文件的弹窗。然后此时input在变化即change，说明此时在上传文件，那么我们就给个change事件，这个事件是上传的重点在这个change事件中，我们要做的流程就是：获取上传的文件-->建表单数据-->发起请求，把选择的文件传给对应API。

我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：

前面我们主要是在获取数据上下功夫，到目前为止我们已经能获取首页和详情页的数据了，现在我们将数据转移到权限管理上来，也就是说我们要处理用户登录、注册等一系列的行为，在这部分会接触挺多新知识，比如vuex怎样发送post请求、token是什么、jwt的工作原理、jwt和session的区别、怎样持久化获取用户的状态、针对不同请求的权限管理、怎样显示全局数据提示等，可谓非常多的知识，而且是是SPA中非常核心的内容，这里要学好。

在接触后端API以后就遇到了越来越多的异步请求，现在我们就使用async 和 await 改造异步请求。

HTTP动词：· GET（select）：从服务器取出资源（一项或多项）· POST （create）：在服务器新建一个资源· PUT （update）：在服务器更新资源· PATCH （update）：在服务器更新资源· DELETE（delete）：从服务器删除资源。

我们现在有3个页面了，分别是首页、登录页、专栏详情页，这三个页面中都有一些共同的数据需要获取和处理，现在我们的做法是把这些共用的数据都保存在一个全局的js对象中全局对象的弊端：·数据不是响应式的·数据修改无法追踪·不符合组件开发的原则状态管理工具的基本原则：·一个类似object 的全局数据结构 - 称为store （里面的数据是不能随便更改的，只能通过action修改）·只能调用一些特殊的方法来实现数据修改（所以store中的数据变化是可追溯可控制的）

一种Web应用程序或网站·在和用户交互的时候不会跳转到其他的页面·由JS实现URL变换和动态变换HTML的内容SPA应用的优点：·速度快，第一次下载完成静态文件，跳转不需要再次下载·体验好，整个交互趋于无缝，更倾向于原生应用·为前后端分离提供了实践场所。

现在我们还需要一个整体的表单在单击某个按钮的时候可以循环的验证每个input的值，最后我们还需要有一个事件可以得到最后验证的结果，从而进行下一步的操作如下，我们应该有一个form表单包裹着全部的input表单；然后有一个提交按钮；点击这个按钮触发一个事件去验证包裹的这些input，从而获取验证的结果。这里有一个难点就是获取每一个input的验证结果。

说到表单我们就不得不提到验证，我们需要过滤掉一系列方法的输入，最早的时候这个功能一般是在服务器端完成，假如有错误服务器会返回并且渲染一些错误，这样做费时费力，所以说在现在的web应用中，表单一般会在前端进行验证，它会适时的展示用户的问题，当没问题时就发送请求，然后后端再验证一次，我们现在还没有接入后端，所以不需要考虑点击提交以后和后端的交互功能，而是只有一个关注点，那就是表单验证。所谓表单验证是表单世界里前端最重要的一个功能，将表单验证的功能封装好也算是一个难点，接下来我们来一步步完成这个任务。

这个函数功能就是判断是否点击到一个dom元素的外面。这是我们当前的第一个自定义函数，我们在src中新建一个名叫hooks的文件夹，hooks的文件夹中新建一个useClickOutside.ts的文件，如下该useClickOutside函数中接收一个ref响应式对象elementRef即这个dom对象，然后定义一个响应式isClickOutside用来如isOpen那样为布尔值，然后同理，如果当前点击的dom元素在这个dom元素的外部则改变isClickOutside为false。

然后定义组件的属性即props，是一个数组list，这个数组即Array符合泛型ColumnProps，因为Array是数组的构造函数它不是一个类型，所以没办法把它断言成一个类型，所以需要用一个方法即PropType，PropType它接受一个泛型，即可以将Array的构造函数返回传入的ColumnProps这种泛型；然后这个avatar即图片有时候是空，我们需要它是空的时候就展示一个默认的图标，在计算属性中在返回的时候去遍历获取的数组，如果avatar不存在则返回本地的这张图。

然后通过vue create 自己起的项目名称，回车即可出现如下，我们选择最后那个即手动选择，因为我们还需要TS的支持。（1）之前vue2项目用的是vetur插件，现在vue3项目我们禁用掉vetur改为安装volar插件，这里遇到了vscode与它版本兼容的问题，网上有方法，我是直接升级了vscode的版本解决的。这是vue3+TS的项目，是一个类似知乎的网站，可以展示专栏和文章的详情，可以登录、注册用户，可以创建、删除、修改文章，可以上传图片等等。·权限管理：怎样在全局获取用户的权限。