目录

整套源码下载 

1、app前端+springboot后台源码 

2、pc端+springboot后台源码

 3、pc端+app端+springboot后台合集源码

一、前言

二、用到的技术

三、开发使用的IDE 

四、搭建开发环境 

前端：

第一步：安装nvm

第二步：安装nodejs

后端：

第一步：安装jdk

​编辑 第二步：安装mysql

 五、启动项目

前端：

第一步：将下载下来的项目解压缩，目录结构如下图，bookmanagerapp是前端vue项目，bookmanagerserver是后端springboot项目。

 第二步：用webstorm或vscode打开bookmanagerapp，项目目录结构如下

第三步：安装node依赖包

第四步：启动项目

第五步：运行项目

第六步：打包apk 

后端：

第一步：打开项目

 第二步：修改数据库连接

 第三步：启动项目

第四步：初始化用户

六、图书借阅app使用说明

 （一）主界面

（二）查找图书

（三）图书卡片

 （四）更多列表

 （五）我的书架

（六）个人中心

 （七）我的借阅

 （八）修改密码

 （九）修改联系方式

 （十）设置

 （十一）退出系统

七、需要注意的几个问题

1、android文件夹的配置问题

 2、网络ip的配置问题

3、常用命令 

八、结语

整套源码下载 

1、app前端+springboot后台源码 

基于vue3+ionic6+capacitor的图书借阅app-HTML5文档类资源-CSDN下载前些时候，水壶哥使用vue开发了一套《图书管理系统》，这套系统只有pc端，联想到当前更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/leonMary/85832854

2、pc端+springboot后台源码

基于vue3+element-plus+springboot+mybatis+jpa+mysql的图书管理系统源码毕业设计论文_基于vue的毕业论文-管理软件文档类资源-CSDN下载本系统作为vue3初学者的入门系统，通过开发经典的《图书管理系统》模拟项目，使vue3的初学者快速掌基于vue的毕业论文更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/leonMary/85453740

 3、pc端+app端+springboot后台合集源码

基于vue3+element+ionic6+capacitor+springboot+mysql图书管理系统pc端+app端合集-管理软件文档类资源-CSDN下载前些时候，水壶哥使用vue开发了一套《图书管理系统》，这套系统只有pc端，联想到当前更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/leonMary/85833121

 温馨提示：下载pc端+app端合集有优惠呦

一、前言

        前些时候，水壶哥使用vue开发了一套《图书管理系统》，这套系统只有pc端，联想到当前社会是智能社会，任何系统基本都配有移动端，所以本着再次让大家学到新技术的目的，水壶哥又开发了一套《图书管理系统》的移动端，这套系统采用vue+ionic+capacitor框架，是一套基于vue和ionic的入门系统，虽然是入门，但所用到的技术绝对是当今主流，后台依然采用《图书管理系统》的后台，没有任何变化。另外，此系统还可作为计算机系大学生毕业设计参考项目，使广大学子轻松搭建属于自己的毕业设计项目。

二、用到的技术

        前端：vue3、ionic6、capacitor、nodejs、nvm（node管理工具）

        后端：springboot、jpa、mybatis

        数据库：mysql5.7.38

三、开发使用的IDE 

        前端：webstorm（版本号2020.3）如果没有webstorm，推荐使用vscode

        后端：idea（版本号2020.3）如果没有idea，推荐使用eclipse 

四、搭建开发环境 

前端：

第一步：安装nvm

        nvm是node管理工具，可以同时管理多个版本的node，在需要的时候，切换不同版本。将下载的资源包解压，进入其中的nvm文件夹，如下图： 

        双击nvm-setup.exe进行安装。

        注意：一定要将nvm安装到c盘根目录，否则会出现意想不到的问题

        安装完成后在命令行输入nvm，可以看到一些关于nvm的使用说明

第二步：安装nodejs

        nvm本身提供安装node的命令，在命令行输入nvm install 16.14.0就可以安装版本号为16.14.0的node，安装完成后运行命令nvmuse 16.14.0，然后在命令行输入node -v，查看当前使用的node版本。到这里node就已经安装成功，但使用nvm安装node并不是每次都能成功，如果安装node失败，可以到下面的地址手动下载node，也可以使用资源包中提供的node。

        Nodejs下载地址：Previous Releases | Node.js

        Nodejs要求版本：大于14.0.0，小于18.0.0，笔者使用的是16.14.0，下面以16.14.0为例，一定要选择zip或7z文件，如下图： 

        下载之后将其解压，然后手动将node拷贝到nvm根目录下，并将文件夹命名为v16.14.0，如下图： 

        之后在命令行运行nvmuse 16.14.0，效果是一样的。如果自己懒得下载，可以使用资源包中提供的node，如下图： 

          将node-v16.14.0-win-x64文件夹整体复制到nvm根目录下，改名为v16.14.0，效果也是一样的。

后端：

第一步：安装jdk

        自行下载jdk或使用资源包中提供的jdk，下载地址：Java Downloads | Oracle，然后配置java环境变量，具体步骤自行百度。 

 第二步：安装mysql

        使用资源包提供的mysql安装程序进行安装。具体的安装步骤自行百度一下，这里就不多介绍。

 五、启动项目

前端：

第一步：将下载下来的项目解压缩，目录结构如下图，bookmanagerapp是前端vue项目，bookmanagerserver是后端springboot项目。

 第二步：用webstorm或vscode打开bookmanagerapp，项目目录结构如下

         其中bookmanager.jks是apk签名文件，在后面打包apk的时候会用到。 

第三步：安装node依赖包

        在bookmanagerapp根目录下运行：npm install，安装完毕后项目根目录下出现node_modules文件夹，如下图： 

第四步：启动项目

        在bookmanagerapp根目录下运行：vue-cli-service serve，稍等片刻后，项目启动成功，出现如下信息：

第五步：运行项目

        在浏览器输入http://localhost:8080/，出现主界面，如下图：

         此时看到的图片和文字都是静态的，并不是从数据库中取出来，而且后面看到的大部分页面也都是静态的，只有“我的”里面的“我的借阅”、“修改密码”和“修改联系方式”和登录功能是与后台关联的，在后面会讲到，这样做一是方便没有下载《图书管理系统》的用户也能学习使用，二是本系统的目的纯粹是让初学者掌握从零开始搭建一套基于vue和ionic的手机app，并不是做一套真实的图书借阅系统。

第六步：打包apk 

        要打包apk，需要安装android studio，下载地址为：Download Android Studio and SDK tools  |  Android DevelopersThe official IDE for Android app developers.https://developer.android.google.cn/studio        安装android studio后，在项目根目录下执行：vue-cli-service build，完成后会在项目根目录生成dist文件夹，如下图：

        随后在项目根目录下运行：ionic cap sync

        最后在项目根目录下运行：ionic cap open android，打卡android studio

        在android studio界面选择如下选项：

        在弹出的界面选apk

         点击下一步后，选择项目根目录下提供的bookmanager.jks文件做为签名文件，密码都是111111

         继续下一步，选release，点Finish完成打包

        打包后的apk文件在如下目录中：

        如果要打包ios安装包，需要在苹果mac os系统打开项目，并且在项目根目录下运行：ionic cap add ios，添加ios资源包，最后在项目根目录下运行ionic cap open ios，打开xcode，用xcode打包。 

后端：

第一步：打开项目

        在idea或eclipse中打开资源包中的bookmanagerserver项目，打开后项目结构如下图所示，这时系统会自动下载maven依赖包，稍等片刻即可 

 第二步：修改数据库连接

        找到src\main\resources\application.properties文件，并修改其中的spring.datasource.url键值，将其改为自己的数据库连接，如下图所示：

 第三步：启动项目

        找到src\main\java\com\book\manager\ManagerApplication.java，右键选择Run‘ManagerApplication’启动项目，这时系统会自动创建数据库表，一共5张表，分别是book（藏书表）、bookself（书架表）、booktype（图书分类表）、borrow（借阅记录表）、users（用户表）

 

         此时项目启动成功，但依然无法进入系统，我们还要在用户表中初始化一条用户记录。

如果项目中报如下错误，请将idea的jdk设为1.8

idea中具体设置方法为：

选择File菜单下的Project Structure

 

第四步：初始化用户

        找到src\main\resources\static\init.sql文件，并依次执行“修改表字符集”的5条语句和“初始化管理员用户”的一条语句，如下图，如果不执行修改表字符集的5条语句，直接插入用户的时候会报编码错误。初始化的管理员密码是加密后的111111 。

 至此，后端服务启动完成

六、图书借阅app使用说明

 （一）主界面

        这个界面前面已经见过了，该界面部分ui模仿多看阅读主界面。

（二）查找图书

        点击主界面上方的查询文本框，页面会跳转到查找图书界面，如下图：

         这里面包含一个静态的列表页，用户可以在搜索框输入文本，下面的列表会跟随输入的关键字动态过滤。

（三）图书卡片

         在主界面点击任何一本书，即可进入图书卡片界面，如下图：

         图书卡片页面也是一个静态页面，里面包含图书的介绍、评论等内容。

 （四）更多列表

        点击主界面的“更多”，会跳转到更多列表页，如下图： 

         更多列表页包含了一个静态列表，展示了近一周借阅的排名情况。

 （五）我的书架

        点击底部导航栏的“书架”菜单，进入我的书架界面

         此界面包含一个当前用户历史借阅过的图书列表。

（六）个人中心

        点击底部导航栏的“我的”菜单，进入个人中心界面，如下图：

         个人中心界面中，签到、阅历、购物车、消息这四个功能是静态的，读者如果有兴趣可以自行开发，登录、我的借阅、修改密码、修改联系方式这四个功能是与后台服务关联的，如果要正常使用，需要启动后台服务，启动方式前面已经讲过了，在未登录的情况下，点击以上四个功能都会跳到登录界面，如下图：

         这时就可以用之前初始化的sysadmin帐号登录了，当然，如果读者也下载了图书管理系统pc端，在pc端添加完借阅记录后，会在用户表生成一条读者记录，读者记录的用户名就是身份证号，初始密码为111111，此时也可以用身份证号登录。

        假设读者没有下载图书管理系统pc端，此时可以使用sysadmin登录，帐号：sysadmin，密码：111111，登录后的界面如下：

        此时已经显示出了用户头像和昵称，并在右侧多了一个齿轮图标，后面会讲到。 

 （七）我的借阅

         登录后，点击“个人中心”页面中的“我的借阅”，跳转到借阅列表，这个列表是从后台数据库取出来的数据，是动态的。如果读者没有下载pc端的图书管理系统，这里面或许是个空列表。

 （八）修改密码

        登录后，点击“个人中心”页面中的“修改密码”，跳转到修改密码界面，如下图

        修改密码功能也是与后台相关联的，输入相关信息后，可以修改登录密码。 

 （九）修改联系方式

         登录后，点击“个人中心”页面中的“修改联系方式”，跳转到修改联系方式界面，如下图

 （十）设置

        登录后，点击“个人中心”页面中的齿轮图标，跳转到设置界面，如下图

         在这里可以修改头像，但并没有与后台关联，只是前台修改的功能。修改昵称功能是静态的。

 （十一）退出系统

        点击设置界面的“退出账号”按钮可以退出当前帐号。

七、需要注意的几个问题

1、android文件夹的配置问题

        本app系统解压后，里面的android文件夹尽量不要删除，如果不小心删除，可以通过在项目根目录下运行：ionic cap add android 命令重新添加

        添加完成后需要在AndroidManifest.xml文件中手动添加一行代码，如下图：

 否则会导致打包后的apk无法访问网络。

 2、网络ip的配置问题

        如果要顺利的将打包后的apk与后台的服务关联，需要将手机wifi设置为与后台服务所在电脑相同的局域网内 ，并将如下文件中的ip地址改为服务所在电脑的ip和端口，可以在命令行输入ipconfig查看电脑的ip地址

        如果是在浏览器上访问，则直接写成：http://localhost:端口号，即可 

3、常用命令 

        项目根目录下有个名为“常用命令”的文本文件 ，里面记录了构建打包等常用命令

八、结语

        本套系统是面向vue3+ionic6+capacitor的初学者和一些大学生用户的学习参考使用的一个小课件，并非真正的图书借阅app，不能用于实际的图书借阅，真正的图书借阅app所需功能要比这个小课件多得多，如果大家有兴趣，可以在此基础上开发真正的图书管理系统。

       另外，此系统作为学习参考使用，其中难免有一些bug和业务逻辑问题，请大家不必过于纠结，能忽略则忽略，如有必要可以自行修改。