m0_64931189的博客

同理如下app.get中路由、回调；回调中要连接数据库、接收前端传过来的值、到数据库中做查询，然后回调（如果回调失败返回什么JSON，如果回调成功返回什么JSON）；最后千万别忘记了关闭数据库的连接发现获取失败首先我们就要先考虑sql语句正不正确，如下fileName是undefined那我们看看前端是否传了fileName，如下确实传了，仔细检查发现是fileName写成了filename修改后可以看到详情展示成功。

前面那些准备工作做完之后，现在我们就具体来用Node.js来写一个简单的API。

然后我们把我们准备的数据book.sql文件，先在记事本打开，然后复制到mysql wordbench中点击闪电图标即可，然后别忘了选中数据库上面的刷新，就可以看到book数据库中有这些表了，表中也有数据了。这样我们就把数据在数据库中准备好了，准备好了之后，后面的API就通过查询数据库向用户前台返回数据库，我们自己实现一个API，那么我们第一步导入数据就完成了，第二步，我们在nginx的sresource中我们加入了cover和img文件夹，分别是图书封面和img供我们后面API使用。

接下来做项目的构建以及上线发布，包括后台API的编写。

加入两个组件，一个是Dialog移出分组的弹窗，一个是ShelfGroupDialog，一个是create-api中加入这个ShelfGroupDialog接下来我们看看这个移动书籍这个对话框的实现原理如下，用ifNewGroup来判断是否是新更状态，如果是新更状态即展示下图1那种弹窗，否则展示下图2那种弹窗。

我们先定义一个方法叫downloadSelecrtedBook，用来遍历被选中的图书们，让被选中的图书们一个个去被下载，然后定义这个下载图书的方法叫downloadBook。

因为很多时候要知道这些被选中图书们的私密状态从而做一些逻辑判断，我们定义一个变量记录它就方便使用，不然得去一遍遍循环判断被选中图书们的状态不方便。定义一个变量叫isPrivate，因为这个变量随时会变所以用let。然后根据前面的计算属性isPrivate()判断，如果计算属性中返回的是true则说明图书们都是私密阅读状态，后面我们点击的就是开启私密阅读，所以就把定义的这个变量isPrivate置为false（表示不需要开启私密阅读此时是私密阅读状态）；

状态3表示去到书城首页。因为我们获取回来的书架数据中没有type=3的数据，我们是要手动添加进去，我们在utils下的store.js中添加两个方法，一个方法是往书架数据中添加这个type=3的数据，一个方法是删除书架数据中type=3的数据后面会用然后我们获取到这个书架数据后先用这个方法把type=3这条数据插入进去，然后再保存到vuex中然后我们添加样式接下来做方框点击，先实现点击图书展示详情页以及点击加号转到书城首页。

首先添加书架页面，到views中的store中添加一个StoreShelf表示书架然后到路由中进行注册然后书城首页的返回键我们是想要点击返回的话就跳转到书架页面，所以如下this.$router.push('/store/shelf')做书架标题组件我们在components中创建一个shelf文件夹然后创建一个书架标题组件即ShelfTitle.vue，并且在书架组件即StoreShelf.vue中引入注册使用书架标题组件。然后我们继续做书架标题组件。

在views下的store中加入详情页组件和书城列表组件。

背景和作用：在前端开发中，与后端接口的数据交互是一个常见的任务。然而，在接口尚未实现或无法访问的情况下，如何进行前端开发和调试呢？这就是mock.js出现的背景。mockjs主要用来拦截ajax请求，生成模拟数据。它提供了模拟接口请求和生成随机数据的能力，为前端开发者提供了便利。原理：它通过拦截XMLHttpRequest或fetch等网络请求，根据定义的规则返回模拟的数据，当开发者发起一个请求时，mockjs会检查匹配的规则，并且返回相应的模拟数据。

书城开发需求分析：书城首页有标题+搜索->随机推荐->猜你喜欢->热门推荐->精选->分类推荐->全部分类->分类列表还有搜索列表页、图书详情页题外话，隔了几天时间去小捣了一下vue3的项目的时候改了一下node版本，结果导致运行这个项目时出现了下面这种错误：这个node版本的东西老烦人了就说什么node sass版本啥的，我之前把node版本变成了18+的，我这里这个node sass是4.14+的，对应的node版本是14加的，所以切换回版本即可。

其实是整个书签组件被吸在顶部，我们向下拖动的时候，是改变的最外层的top即index的top（index.vue是包含这个阅读器和书签组件的），但是书签组件本身没有改变top值，书签组件是跟着index移动而移动的，那么我们可以单独给书签组件一个反方向的相对位移，到了第二阶段的临界值后，整个index是向下移动的top值是正值越来越大的，此时我们让书签组件向上移动负值即反方向越来越大，这个值是等于offset的值的，只不过是取反。

我们前面看到了搜索返回的数据是有内容excerpt还有一个cfi的，所以我们可以把这个cfi传入display即可实现渲染到此目录和搜索功能就实现完成了。

打印出来，如图可以看到currentLocation会给出一个start和end，就是本页开始时的定位和本页结束时的定位，会给到定位符cfi，同时里面还可以看到它有当前页准确的页数，如下当前章节index:1,location是根据我们的分页此时这个位于第一页，那个percentage就是进度百分比。即可实现点击左右箭头还是移动进度条都可以保存当前位置到本地存储中，并且点击箭头后或移动进度条后刷新还是能保存刷新前的页面，因为刷新前都保存当前位置到本地存储中了嘛，而刷新时就读取的本地存储的值进行渲染的嘛。

在vue lic3.0后创建的项目中，它会自动去帮我们安装git，进行git的初始化。

有时候你定义了一个对象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这样的一个对象。

效果：通过拖动进度条，我们就可以快速定位到指定位置。这里我们需要通过epubjs的location对象来解决。初次打开设置时，若进度条没有加载完成会显示在加载中...同时进度条进行锁定并不能进行操作。该方法中接收一个进度条数值的参数（进度条数值用户是可以改变的，而且是根据这个进度条数值来进行确定去渲染那一页的，所以它应该作为一个参数传入），方法中要把进度条数值0-100转化为百分比；

电子书（有txt、pdf、epub、mobi等格式）->解析（书名、作者、目录、封面、章节等）->（通过阅读器引擎）渲染 -> 功能（字号、背景色、目录、书签等）epub是现较为主流的电子书格式，mobi是亚马逊kindle的电子书格式，我们用epub，目前主流的阅读器APP对epub都有良好的支持。

该项目就是运用 Vue.js+epub.js 实现的一个阅读器 ，实现阅读器、书城、书架、听书功能。阅读器的基础功能有字号选择、主题选择、进度条、目录等功能。