基于vue+ionic+capacitor的图书借阅app

使用 ionic + cordova + vue3 实现相册选择、拍照,并上传、预览图片 阅读详情

目录

整套源码下载 

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后台源码

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

        使用资

比较 React Native 与 Vue 和 Capacitor Capacitor 是由 Ionic 团队构建的跨平台工具。它基本上可以让您将 Web 应用程序转换为 iOS 或 Android 应用程序。使用 Capacitor,您可以使用 JavaScript 代码创建移动应用程序。然后它使用您手机的本机 WebView 呈现应用程序。使用 Capacitor 的插件和 API,您可以访问相机、扬声器等原生功能。Capacitor 兼容不同的 JavaScript 框架;React、Vue、Angular 和 vanilla JS。 阅读详情

相关推荐

ionic-vue-适用于Ionic v4的Vue.js集成-Vue.js开发

Ionic-Vue用于Vue的Ionic集成适配器。 Ionic-Vue与@ ionic / vue的比较Ionic-Vue代码库已添加到Ionic内核中,并以@ ionic / vue的形式提供。 Ionic-Vue如何为Vue集成离子适配器。 Ionic-Vue与@ ionic / vue的比较Ionic-Vue代码库已添加到Ionic内核中,并以@ ionic / vue的形式提供。 但是,@ ionic / vue对Ionic v4提供的支持有限。 出色的Ionic团队一直致力于将最现代的浏览器功能引入其框架。 Vue 3稳定后,Vue的官方支持将降落。 Modus Create工程师继续维护此库,以支持想要创建美丽的社区

基于vue3+ionic6+capacitor的图书借阅app

前些时候,水壶哥使用vue开发了一套《图书管理系统》,这套系统只有pc端,联想到当前社会是智能社会,任何系统基本都配有移动端,所以本着再次让大家学到新技术的目的,水壶哥又开发了一套《图书管理系统》的移动端,这套系统采用vue+ionic+capacitor框架,是一套基于vue和ionic的入门系统,虽然是入门,但所用到的技术绝对是当今主流,后台依然采用《图书管理系统》的后台,没有任何变化。 本资源包包含:图书借阅app的vue源码、图书管理系统springboot后台server源码(该后台基于springboot+mysql+jpa+mybatis技术)、nvm(nodejs管理工具)、nodejs、jdk1.8、打包后的apk(可以直接装在手机上)以及图书借阅app的说明文档。 详细说明请参看:https://blog.csdn.net/leonMary/article/details/125507990

线上专利申请(超详细)| 签名确认

在【法人登录】页面点击【证书登录】按钮,弹出证书登录提示框,点击【确 认】按钮,进入到输入证书密码页面,点击【取消】按钮,取消本次操作。企业在提交申请时,需要增加签名,如使用企业账户点击提交,会弹出“法人、代理机构不能签名,请使用经办人签名”,这个时候就需要换个账号了。在需要签名时,将专利官网的登录方式点击法人登录,选择扫码登录,使用移动端经办人账户的扫一扫功能扫描登录。登录完成后,再点击签名,使用移动端扫一扫功能,扫描签名,输入证书号,确认签名,并提交。最后,祝大家的申请都成功!

weixin_62112323的博客 9088

python课程教学大纲-《Python语言基础》课程教学大纲

《Python语言基础》课程教学大纲课程名称:Python语言基础课程类别:专业选修课适用专业:电子信息工程考核方式:考查总学时、学分:32学时1.5学分其中讲授16学时,实验10学时,其他6学时一、课程性质、教学目标使学生在全面了解Python技术历史、现状与发展趋势的基础上,系统掌握Python基本概念、编程思想以及程序设计技术,具备熟练的Python编程技能和面向对象软件设计技术思想,完成本...

weixin_37988176的博客 3713

手把手教你用Python模拟侧信道攻击:从电磁辐射到数据窃取(附防御代码)

本文详细介绍了如何使用Python模拟侧信道攻击,从电磁辐射信号采集到数据窃取的全过程,并提供了实用的防御代码。通过实战案例,帮助安全研究员和开发者理解侧信道攻击原理,掌握信号处理与图像重建技术,同时学习有效的噪声干扰和电磁屏蔽防御措施。

weixin_28716443的博客 159

HALCON卡尺模型实战:5分钟搞定工件尺寸测量(附完整代码)

本文详细介绍了HALCON卡尺模型在工件尺寸测量中的实战应用,通过5分钟快速搭建测量系统的完整指南,包括基础配置、高级参数调优和完整代码示例。卡尺模型能自动识别边缘并计算精确尺寸,显著提升工业视觉检测的效率和一致性,特别适用于实时测量场景。

weixin_42570296的博客 456

三菱PLC FX3U温度控制系统案例

U0\G100是平均次数的设置,设置为100个数据取平均,这样数据显示更加稳定,通道1的数据显示再U0\G10里面,温度模块的数据对应是0~150°输出0~10V,对应到0~10000的数据10000是150°的66.667倍,因此把数据传送到D0后转换成浮点数,再去除以66.667,就得到实际的温度了,数据存放到D2。触摸屏软件使用EBpro软件,设计界面如下,右边的是温度的实时曲线图,左边的是温度报警表,当当前温度超过了报警温度这种时,就会在这个表格上显示对应对应的报警。(1)实时显示温度值;

u010670857的博客 4046

从零开始:手把手教你做转录组与代谢组的联合分析(含R代码)

本文详细介绍了转录组与代谢组联合分析的全流程,包括数据准备、预处理、差异分析及可视化方法,并提供了实用的R代码示例。通过多组学整合分析,研究者可以更全面地理解生物过程,适用于疾病机制和药物开发等医学研究领域。

weixin_29306317的博客 428

全功能tgbot/Telegram机器人多功能有后台版源码

trx兑换 闪兑 关键字监控 群管 usdt监控 余额查询 推广分享 等几乎常见的tg机器人功能都有。全功能tgbot/telegram机器人多功能有后台版源码-打包好的可以直接上手。

百创科技 2685

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

上一篇: 关于vue+capacitor打包android后无法访问http问题的总结
下一篇: React Native读取系统属性
西山水壶
西山水壶 新星创作者: 前端开发技术领域 新星创作者: 前端开发技术领域
博客等级 码龄18年 5010粉丝 63原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

西山水壶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值