目录
第一步：将下载下来的项目解压缩，目录结构如下图，bookmanagerapp是前端vue项目，bookmanagerserver是后端springboot项目。
第二步：用webstorm或vscode打开bookmanagerapp，项目目录结构如下
整套源码下载
1、app前端+springboot后台源码
https://download.csdn.net/download/leonMary/858328542、pc端+springboot后台源码
https://download.csdn.net/download/leonMary/85453740
3、pc端+app端+springboot后台合集源码
温馨提示：下载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和业务逻辑问题，请大家不必过于纠结，能忽略则忽略，如有必要可以自行修改。
扫一扫
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
