基于vue+ionic+capacitor的图书借阅app
目录
整套源码下载
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和业务逻辑问题，请大家不必过于纠结，能忽略则忽略，如有必要可以自行修改。
基于vue+ionic+capacitor的图书借阅app相关推荐
- Java基于springboot+vue的图书馆网上图书借阅系统 nodejs前后端分离
在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括网上图书借阅系统的网络应用,在外国网上图书借阅系统已经是很普遍的方式,不过国内的管理网站可能还处于起步阶段.网上图书借 ...
- 基于微信小程序的图书借阅到期提醒功能实现+后台管理系统(SSM+mysql)-JAVA.VUE【数据库设计、论文、源码、开题报告】
功能介绍 管理员功能: (1)用户登录注册模块:所有用户在使用本系统前都要进行登录操作,登录成功后才能进入系统做其它操作.如果用户还没有登录账号就先注册一下然后再登录. (2)图书馆借阅到期提醒信息列 ...
- 基于Spring boot的图书馆图书借阅管理系统的设计与实现
作者主页:编程千纸鹤 作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享 收藏点赞不迷路 关注作者有好处 ...
- 基于Vue.js模拟酒店预订移动App
说明:vue项目用的mui框架和mintUI框架. 自己做的主要完成: 基于vue.js的移动端app,基于vue2全家桶完成选择住宿时间,房型列表和购物车等功能页面开发,后端用外部json文 件和m ...
- 【毕业设计】基于Android系统的校园图书共享APP的设计实现
设计实现基于Android的高校图书共享App以及后台系统,该App能帮助高校学生共享图书,可以分享自己平时不用的图书和租借自己想看的图书,节省购买图书的金钱和图书过多寝室不好安放的问题. App具有 ...
- springboot+基于vue的响应式代购商城APP的设计与实现 毕业设计-附源码191654
Springboot响应式代购商城APP 摘 要 近年来,随着移动互联网的快速发展,电子商务越来越受到网民们的欢迎,电子商务对国家经济的发展也起着越来越重要的作用.简单的流程.便捷可靠的支付方式.快捷 ...
- 基于java springboot android 安卓图书借阅系统源码(毕设)
开发环境及工具: 大于等于jdk1.8,大于mysql5.5,idea(eclipse),Android Studio 技术说明: springboot mybatis html vue.js boo ...
- 基于PHP+MySQL的图书馆图书借阅系统
基本每一个高校都有自己的图书馆,图书馆是一个知识的海洋,所以基本每个学生都喜欢到图书的海洋中选择自己喜欢的图书进行阅读,但是很多时候可能不能够一直呆在图书馆看书,所以就要对图书进行借阅并在规定的时间内 ...
- 基于vue.js开发的demo—天气APP
一.图例及代码 花了两天的时间学习了vue.js教程及API,练习着完成了一款天气app,界面如下,希望对刚入门的你有帮助! 详细代码下面会贴出主要的,你也可以直 ...
最新文章
- [codeforces]Round #538 (Div. 2) F. Please, another Queries on Array?
- ASP.net:查找框设默认
- 深度学习之自编码器AutoEncoder
- 基于web的甘特图，易度甘特图edogantt!
- 血压测量：很重要的事情！
- Windows_API_函数 参考大全
- HTML5 CSS3 Transform 笔记 (scale不起作用)
- 139_Power BI之某制造企业HR相关数据年度复盘
- docker 拷贝镜像文件
- 土地调查图斑编号_土地年度变更调查“图斑类型”说明
- PHP获取＜textarea＞换行空白格处理
- 玩转GD32F3x0开发板 （二）
- 十八款好用的电脑视频剪辑软件
- JavaScript经典笔试题
- npm run dev之后 可爱（e’xin）的warning，error们
- WMware安装win10
- Android 练习项目 ——简单记账软件的实现
- 利用Windows 计划任务定时将本地文件复制到共享文件夹
- 2020-11-17 胸口碎大石般的徒手冒泡排序
- C++题解：【NOIP2006PJ】Jam的计数法(count)