- 博客(114)
- 收藏
- 关注
RSS订阅原创 vue3专栏项目 -- 七、编辑和删除文章
说到编辑和删除，就涉及到权限问题，那就是一个登录用户应该只能更新或者删除自己创建的文章，别人的文章他是没有权限进行更新或删除的，所以对于更新和删除这两件事在任何系统中都要特别注意权限这个要素当登录用户有权限的时候，我们希望在文章详情页底部显示编辑和删除按钮，可以用他们来进行对应的操作，那么什么时候是有权限的呢，当这篇文章的作者是当前用户的时候，就说明当前用户对这篇文章是有权限的。接口文档中，我们可以看到在获取单独文章的接口中我们有一个属性叫author，它底下的_id就指代独一无二的作者；
2024-05-17 15:14:28
1185
原创 vue3专栏项目 -- 六、上传组件（下）
之前我们有做过上传前验证的类似代码，但是我们这里就把它抽象成通用的函数，验证关键是验证文件的格式和大小，所以我们做个通用参数。如下，我们把之前验证文件格式的代码抽离出来放在generateFitUrl中了，后续哪里要用到这个验证逻辑就直接调用这个函数即可然后我们还在上传前的验证函数beforeUploadCheck中写了验证文件大小和类型的逻辑，如下，这个函数中我们要接用户选择的文件即file以及我们定义的合法规则condition（这个condition中有我们定义的合法的类型和大小），然后开始逻辑。
2024-05-16 16:53:33
770
2
原创 vue3专栏项目 -- 六、上传组件（上）
我们的template中有button和file类型的input（给隐藏input），然后我们是通过点击这个button去触发该input的click点击事件，这个点击事件就会弹出让你选择文件的弹窗。然后此时input在变化即change，说明此时在上传文件，那么我们就给个change事件，这个事件是上传的重点在这个change事件中，我们要做的流程就是：获取上传的文件-->建表单数据-->发起请求，把选择的文件传给对应API。
2024-05-15 22:30:02
1133
原创 vue3专栏项目 -- 五、权限管理（下）
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
2024-05-15 12:33:30
992
原创 vue3专栏项目 -- 五、权限管理（上）
前面我们主要是在获取数据上下功夫，到目前为止我们已经能获取首页和详情页的数据了，现在我们将数据转移到权限管理上来，也就是说我们要处理用户登录、注册等一系列的行为，在这部分会接触挺多新知识，比如vuex怎样发送post请求、token是什么、jwt的工作原理、jwt和session的区别、怎样持久化获取用户的状态、针对不同请求的权限管理、怎样显示全局数据提示等，可谓非常多的知识，而且是是SPA中非常核心的内容，这里要学好。
2024-05-14 15:59:35
897
原创 vue3专栏项目 -- 四、前后端结合（下）
在接触后端API以后就遇到了越来越多的异步请求，现在我们就使用async 和 await 改造异步请求。
2024-05-13 21:18:20
960
原创 vue3专栏项目 -- 四、前后端结合（上）
HTTP动词：· GET（select）：从服务器取出资源（一项或多项）· POST （create）：在服务器新建一个资源· PUT （update）：在服务器更新资源· PATCH （update）：在服务器更新资源· DELETE（delete）：从服务器删除资源。
2024-05-12 20:38:48
723
原创 vue3专栏项目 -- 三、使用vue-router 和 vuex（下）
我们现在有3个页面了，分别是首页、登录页、专栏详情页，这三个页面中都有一些共同的数据需要获取和处理，现在我们的做法是把这些共用的数据都保存在一个全局的js对象中全局对象的弊端：·数据不是响应式的·数据修改无法追踪·不符合组件开发的原则状态管理工具的基本原则：·一个类似object 的全局数据结构 - 称为store （里面的数据是不能随便更改的，只能通过action修改）·只能调用一些特殊的方法来实现数据修改（所以store中的数据变化是可追溯可控制的）
2024-05-11 21:53:02
687
原创 Vue3专栏项目 -- 三、使用vue-router 和 vuex（上）
一种Web应用程序或网站·在和用户交互的时候不会跳转到其他的页面·由JS实现URL变换和动态变换HTML的内容SPA应用的优点：·速度快，第一次下载完成静态文件，跳转不需要再次下载·体验好，整个交互趋于无缝，更倾向于原生应用·为前后端分离提供了实践场所。
2024-05-10 23:37:53
914
原创 Vue3专栏项目 -- 二、自定义From组件（下）
现在我们还需要一个整体的表单在单击某个按钮的时候可以循环的验证每个input的值，最后我们还需要有一个事件可以得到最后验证的结果，从而进行下一步的操作如下，我们应该有一个form表单包裹着全部的input表单；然后有一个提交按钮；点击这个按钮触发一个事件去验证包裹的这些input，从而获取验证的结果。这里有一个难点就是获取每一个input的验证结果。
2024-05-10 17:27:48
842
原创 Vue3专栏项目 -- 二、自定义Form组件（上）
说到表单我们就不得不提到验证，我们需要过滤掉一系列方法的输入，最早的时候这个功能一般是在服务器端完成，假如有错误服务器会返回并且渲染一些错误，这样做费时费力，所以说在现在的web应用中，表单一般会在前端进行验证，它会适时的展示用户的问题，当没问题时就发送请求，然后后端再验证一次，我们现在还没有接入后端，所以不需要考虑点击提交以后和后端的交互功能，而是只有一个关注点，那就是表单验证。所谓表单验证是表单世界里前端最重要的一个功能，将表单验证的功能封装好也算是一个难点，接下来我们来一步步完成这个任务。
2024-05-09 23:33:38
1406
原创 Vue3专栏项目 -- 一、第一个页面（下）
这个函数功能就是判断是否点击到一个dom元素的外面。这是我们当前的第一个自定义函数，我们在src中新建一个名叫hooks的文件夹，hooks的文件夹中新建一个useClickOutside.ts的文件，如下该useClickOutside函数中接收一个ref响应式对象elementRef即这个dom对象，然后定义一个响应式isClickOutside用来如isOpen那样为布尔值，然后同理，如果当前点击的dom元素在这个dom元素的外部则改变isClickOutside为false。
2024-05-08 14:54:26
901
原创 Vue3专栏项目 -- 一、第一个页面（上）
然后定义组件的属性即props，是一个数组list，这个数组即Array符合泛型ColumnProps，因为Array是数组的构造函数它不是一个类型，所以没办法把它断言成一个类型，所以需要用一个方法即PropType，PropType它接受一个泛型，即可以将Array的构造函数返回传入的ColumnProps这种泛型；然后这个avatar即图片有时候是空，我们需要它是空的时候就展示一个默认的图标，在计算属性中在返回的时候去遍历获取的数组，如果avatar不存在则返回本地的这张图。
2024-05-07 22:42:23
800
原创 vue3专栏项目 -- 项目介绍以及准备工作
然后通过vue create 自己起的项目名称，回车即可出现如下，我们选择最后那个即手动选择，因为我们还需要TS的支持。（1）之前vue2项目用的是vetur插件，现在vue3项目我们禁用掉vetur改为安装volar插件，这里遇到了vscode与它版本兼容的问题，网上有方法，我是直接升级了vscode的版本解决的。这是vue3+TS的项目，是一个类似知乎的网站，可以展示专栏和文章的详情，可以登录、注册用户，可以创建、删除、修改文章，可以上传图片等等。·权限管理：怎样在全局获取用户的权限。
2024-05-07 16:23:08
348
原创 六、项目发布 -- 4. 电子书详情页API开发、电子书列表API开发
同理如下app.get中路由、回调；回调中要连接数据库、接收前端传过来的值、到数据库中做查询，然后回调（如果回调失败返回什么JSON，如果回调成功返回什么JSON）；最后千万别忘记了关闭数据库的连接发现获取失败首先我们就要先考虑sql语句正不正确，如下fileName是undefined那我们看看前端是否传了fileName，如下确实传了，仔细检查发现是fileName写成了filename修改后可以看到详情展示成功。
2024-04-19 14:18:50
567
原创 六、项目发布-- 3. Node.js+express 编写书城首页API
前面那些准备工作做完之后，现在我们就具体来用Node.js来写一个简单的API。
2024-04-19 11:17:10
920
原创 六、项目发布 -- 2. 数据库环境准备
然后我们把我们准备的数据book.sql文件，先在记事本打开，然后复制到mysql wordbench中点击闪电图标即可，然后别忘了选中数据库上面的刷新，就可以看到book数据库中有这些表了，表中也有数据了。这样我们就把数据在数据库中准备好了，准备好了之后，后面的API就通过查询数据库向用户前台返回数据库，我们自己实现一个API，那么我们第一步导入数据就完成了，第二步，我们在nginx的sresource中我们加入了cover和img文件夹，分别是图书封面和img供我们后面API使用。
2024-04-18 17:01:52
370
原创 五、书架开发--5.书架分组功能开发
加入两个组件，一个是Dialog移出分组的弹窗，一个是ShelfGroupDialog，一个是create-api中加入这个ShelfGroupDialog接下来我们看看这个移动书籍这个对话框的实现原理如下，用ifNewGroup来判断是否是新更状态，如果是新更状态即展示下图1那种弹窗，否则展示下图2那种弹窗。
2024-04-15 19:44:42
718
原创 五、书架开发--4.电子书离线缓存功能开发
我们先定义一个方法叫downloadSelecrtedBook，用来遍历被选中的图书们，让被选中的图书们一个个去被下载，然后定义这个下载图书的方法叫downloadBook。
2024-04-15 12:05:31
802
原创 五、书架开发--3.弹出框功能开发、离线缓存功能开发
因为很多时候要知道这些被选中图书们的私密状态从而做一些逻辑判断，我们定义一个变量记录它就方便使用，不然得去一遍遍循环判断被选中图书们的状态不方便。定义一个变量叫isPrivate，因为这个变量随时会变所以用let。然后根据前面的计算属性isPrivate()判断，如果计算属性中返回的是true则说明图书们都是私密阅读状态，后面我们点击的就是开启私密阅读，所以就把定义的这个变量isPrivate置为false（表示不需要开启私密阅读此时是私密阅读状态）；
2024-04-13 19:46:18
524
原创 五、书架开发--2.书架图书列表实现
状态3表示去到书城首页。因为我们获取回来的书架数据中没有type=3的数据，我们是要手动添加进去，我们在utils下的store.js中添加两个方法，一个方法是往书架数据中添加这个type=3的数据，一个方法是删除书架数据中type=3的数据后面会用然后我们获取到这个书架数据后先用这个方法把type=3这条数据插入进去，然后再保存到vuex中然后我们添加样式接下来做方框点击，先实现点击图书展示详情页以及点击加号转到书城首页。
2024-04-13 00:32:04
1157
原创 五、书架开发--1.书架标题组件交互、获取书架数据
首先添加书架页面，到views中的store中添加一个StoreShelf表示书架然后到路由中进行注册然后书城首页的返回键我们是想要点击返回的话就跳转到书架页面，所以如下this.$router.push('/store/shelf')做书架标题组件我们在components中创建一个shelf文件夹然后创建一个书架标题组件即ShelfTitle.vue，并且在书架组件即StoreShelf.vue中引入注册使用书架标题组件。然后我们继续做书架标题组件。
2024-04-11 22:25:13
1103
原创 四、书城开发--3、书城图书部分的开发
这个categoryList就是各类图书中每类推荐的图书，如人文推荐哪几本书，体育推荐那几本书。这里这个categoryList是一个二维数组，我们是在书城首页组件中通过for循环把比如科学类给category-book组件，该组件中就科学类推荐的那几本书也循环展示完。这个category-book中是循环这类学科的推荐书籍们，在书城首页把某学科的推荐图书们的数据即:data="item"传过去。
2024-04-09 22:23:09
240
原创 四、书城开发-2、热门搜索/推荐页面的开发
背景和作用：在前端开发中，与后端接口的数据交互是一个常见的任务。然而，在接口尚未实现或无法访问的情况下，如何进行前端开发和调试呢？这就是mock.js出现的背景。mockjs主要用来拦截ajax请求，生成模拟数据。它提供了模拟接口请求和生成随机数据的能力，为前端开发者提供了便利。原理：它通过拦截XMLHttpRequest或fetch等网络请求，根据定义的规则返回模拟的数据，当开发者发起一个请求时，mockjs会检查匹配的规则，并且返回相应的模拟数据。
2024-04-09 19:02:48
702
原创 四、书城开发--1、标题搜索栏的开发
书城开发需求分析：书城首页有标题+搜索->随机推荐->猜你喜欢->热门推荐->精选->分类推荐->全部分类->分类列表还有搜索列表页、图书详情页题外话，隔了几天时间去小捣了一下vue3的项目的时候改了一下node版本，结果导致运行这个项目时出现了下面这种错误：这个node版本的东西老烦人了就说什么node sass版本啥的，我之前把node版本变成了18+的，我这里这个node sass是4.14+的，对应的node版本是14加的，所以切换回版本即可。
2024-04-08 22:00:46
1062
原创 三、阅读器开发--5、阅读器书签功能
其实是整个书签组件被吸在顶部，我们向下拖动的时候，是改变的最外层的top即index的top（index.vue是包含这个阅读器和书签组件的），但是书签组件本身没有改变top值，书签组件是跟着index移动而移动的，那么我们可以单独给书签组件一个反方向的相对位移，到了第二阶段的临界值后，整个index是向下移动的top值是正值越来越大的，此时我们让书签组件向上移动负值即反方向越来越大，这个值是等于offset的值的，只不过是取反。
2024-03-28 20:56:20
948
原创 三、阅读器开发--4、阅读器目录、全文搜索功能开发
我们前面看到了搜索返回的数据是有内容excerpt还有一个cfi的，所以我们可以把这个cfi传入display即可实现渲染到此目录和搜索功能就实现完成了。
2024-03-27 20:43:39
697
原创 三、阅读器开发--3.阅读进度开发
打印出来，如图可以看到currentLocation会给出一个start和end，就是本页开始时的定位和本页结束时的定位，会给到定位符cfi，同时里面还可以看到它有当前页准确的页数，如下当前章节index:1,location是根据我们的分页此时这个位于第一页，那个percentage就是进度百分比。即可实现点击左右箭头还是移动进度条都可以保存当前位置到本地存储中，并且点击箭头后或移动进度条后刷新还是能保存刷新前的页面，因为刷新前都保存当前位置到本地存储中了嘛，而刷新时就读取的本地存储的值进行渲染的嘛。
2024-03-26 21:43:51
1085
原创 三、阅读器的开发--1、项目准备
有时候你定义了一个对象A，然后对象里有属性B，然后你想访问到这个B的时候你需要this.$store.state.A.B就每次都要this.$store.A再点B才能访问到B就比较麻烦，vuex就提供了getters，通过这个getters.js中就可以之前需要通过this.$store.state.A.B才能访问B现在直接this.B就能访问B了，然后在store下的store.js中把这个getters.js引入进来，使用就是通过mapGetters这样的一个对象。
2024-03-23 17:30:50
1052
原创 二、阅读器的开发（初始）-- 2、阅读器开发
效果：通过拖动进度条，我们就可以快速定位到指定位置。这里我们需要通过epubjs的location对象来解决。初次打开设置时，若进度条没有加载完成会显示在加载中...同时进度条进行锁定并不能进行操作。该方法中接收一个进度条数值的参数（进度条数值用户是可以改变的，而且是根据这个进度条数值来进行确定去渲染那一页的，所以它应该作为一个参数传入），方法中要把进度条数值0-100转化为百分比；
2024-03-22 20:05:29
1701
1
原创 二、阅读器的开发（初始）-- 1、阅读器简介及开发准备工作
电子书（有txt、pdf、epub、mobi等格式）->解析（书名、作者、目录、封面、章节等）->（通过阅读器引擎）渲染 -> 功能（字号、背景色、目录、书签等）epub是现较为主流的电子书格式，mobi是亚马逊kindle的电子书格式，我们用epub，目前主流的阅读器APP对epub都有良好的支持。
2024-03-20 19:09:36
2198
原创 一、项目介绍
该项目就是运用 Vue.js+epub.js 实现的一个阅读器 ，实现阅读器、书城、书架、听书功能。阅读器的基础功能有字号选择、主题选择、进度条、目录等功能。
2024-03-20 15:29:04
139
原创 零碎知识点
回调函数里第一个参数pre是前一次reduce回来的值，第二个参数current是本次reduce回来的值。分析:reduce3次，第一次pre为0，然后+1=1，第二次pre为1，然后+1=2，第三次pre为2，然后+1=3，最后返回最后一次即第三次的最终结果3。②判断一个字符串中是否有某个字符用indexOf(某个字符)，如果不包含返回-1，如果包含则返回该字符在字符串中那个位置。1.对数组方法的掌握，对前端挺重要的 平时多积累总结，去MDN多查查多总结对数据的处理方法，毕竟前端是维护数据的。
2023-06-12 18:51:10
984
原创 JavaScript进阶(下)
如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。`this` 是 JavaScript 最具“魅惑”的知识点，不同的应用场合 `this` 的取值可能会有意想不到的结果，在此我们对以往学习过的关于【 `this` 默认的取值】情况进行归纳和总结。
2023-06-07 00:03:57
394
原创 JavaScript进阶(上)
3. 尽可能少的声明全局变量，防止全局变量被污染JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素主要使用场景： 筛选数组符合条件的元素，并返回筛选之后元素的新数组。2. 借助 `...` 获取的剩余实参，是个真数组### 箭头函数箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。
2023-06-06 22:32:26
468
原创 JS笔记--Web APIS(下)
对象history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等**使用场景**history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)- 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。const strEnd = str.replace(/前端/g, 'web') console.log(strEnd)search=笔记本。
2023-05-27 22:24:52
621
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人