前后端分离javaweb项目 用innosetup打包成软件安装包

前后端分离javaweb项目 用innosetup打包成软件安装包 教程

写个前言:

由于客户要求用桌面应用程序,所以javaweb项目要打成软件安装包,然后一键傻瓜式安装之后成桌面应用exe程序,点击即可运行那种。为此折腾了好几天,自己从网上找了各种办法。也是请教了公司里的很多大佬,可算是搞出来了。在 此处非常感谢各位帮助过我得大佬们。废话不多说,下面进入正题。
项目:前后端分离
前端electron-vue项目
后端springmvc架构
mysql数据库
tomcat9
jdk8
制作安装包工具 Innosetup6.0.5
以下内容的xxx 是公司名 我给屏蔽了

准备工作:

首先建议大家在虚拟机上来打包,因为会有些环境变量得改变。
虚拟机我用的是 : orcal vm virtualbox ,大家可以从网上下载 不细说了
系统win10,网上也有,怎么跑虚拟机,不细说了 我是公司一个大佬直接拷给了我一个系统
😒 别说我懒哈 时间不允许。
下面看一下我得打包目录:
在这里插入图片描述

app:里面放入整个项目

在这里插入图片描述

client里面是用的vue打包好的前端
注意事项: 我这里的前端是electron-vue 打包好生成的 如下图:
在这里插入图片描述
直接点击这个exe就可运行前端。
注意 这个exe的名字要和iss脚本文件的快捷方式名字要一样!否则打完 找不到快捷方式!
在这里插入图片描述

server里面放的是 后端打好得war包,如果是这么放的这个地方要注意配tomcat得service.bat里面的东西哦 如下图
在这里插入图片描述

也可以将后端得war包放在tomcat得webapp文件夹下,都可以,这样就不用在改service.bat里面得东西了。

other:里面放入mysql tomcat 得安装启动脚本

在这里插入图片描述
initMysqlconf.bat:

@echo off
set "pth=%~dp0"
set "pth=%pth:\=/%"
set "pth=%pth:~,-1%"
(for /f "tokens=1,2* delims=:=" %%a in ('findstr /n .* my.ini') do (
  if "%%c" neq "" (
    if /i not "%%b"=="basedir" (
      if /i not "%%b"=="datadir" (echo,%%b=%%c
      ) else echo,%%b="%pth%/software/mysqldata/"
    ) else echo,%%b="%pth%/software/mysql"
  ) else echo,%%b
))>$
move $ my.ini

install.bat:

@echo off
title 软件配置安装中,请不要手动关闭
color 0a
cd /d %~dp0
echo 配置Java、MySQL、Tomcat环境中...
set XXX_APP_HOME=%~dp0%
set XXX_MYSQL_HOME=%XXX_APP_HOME%software\mysql
set CATALINA_HOME=%XXX_APP_HOME%software\tomcat
set XXX_JAVA_HOME=%XXX_APP_HOME%software\jdk
echo 环境变量配置成功

echo MySQL安装中...
xcopy "%XXX_APP_HOME%\my.ini" "%XXX_MYSQL_HOME%" /y
del "%XXX_APP_HOME%\my.ini"
call "%XXX_MYSQL_HOME%\bin\mysqld.exe" install XXX-mysql --defaults-file="%XXX_MYSQL_HOME%\my.ini"
echo 开始启动MYSQL...
sc config XXX-mysql start=auto
net start XXX-mysql

echo Tomcat安装中...
call "%CATALINA_HOME%\bin\service.bat" install tomcat-XXX
echo 开始启动Tomcat...
sc config tomcat-XXX start=auto
net start tomcat-XXX
echo 安装完成,祝使用愉快~

uninstall.bat:

@echo off
title 删除环境配置中,请不要手动关闭
color 0a
echo 删除Java、MySQL、Tomcat中... 
echo ֹͣ关闭Tomcat
net stop tomcat-xxx
sc delete tomcat-xxx
echo ֹͣ关闭MySQL
net stop xxx-mysql 
sc delete xxx-mysql
echo 删除完成

my.ini 由于是乱码显示 我就不写在这里,想要的可以留言
在这里插入图片描述

output:文件输出目录,

就是放入打好得安装包

software:tomcat mysql jdk 以及数据库数据

在这里插入图片描述

xxx.iss :最关键得东西!就是我们要执行得打包脚本

具体代码如下

; Script generated by the Inno Setup Script Wizard.
; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!

;软件相关信息描述如下
#define MyAppName "xxx"
#define MyAppChineseName "某软件"
#define MyAppVersion "1.0.0"
#define MyAppPublisher "xxx信息公司"
#define MyAppURL "http://www.xxx.com/"

[Setup]
; NOTE: The value of AppId uniquely identifies this application. Do not use the same AppId value in installers for other applications.
; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
AppId={{D39EB2EE-1636-4DC1-81AC-96D914DAE712}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName=D:\上级文件夹目录\{#MyAppName}
DefaultGroupName={#MyAppName}
AllowNoIcons=yes
; Uncomment the following line to run in non administrative install mode (install for current user only.)
;PrivilegesRequired=lowest
OutputBaseFilename=PetroleumAnalysi
Compression=lzma
SolidCompression=yes
WizardStyle=modern
SetupLogging=true
;配置中文包 需要ChineseSimplified.isl这个东西,可以百度下,也可以找我要 ,然后放在innosetup的Languages目录下就好

[Languages]
Name: "chinesesimplified"; MessagesFile: "compiler:Languages\ChineseSimplified.isl"

[Files]
;拷贝项目所需文件
Source:".\app\*";DestDir:"{app}\app";Flags:igNoreversion recursesubdirs createallsubdirs
;拷贝mysql jdk tomcat
Source:".\software\*";DestDir:"{app}\software";Flags:igNoreversion recursesubdirs createallsubdirs
; NOTE: Don't use "Flags: ignoreversion" on any shared system files
Source:".\other\*";DestDir:"{app}\";Flags:igNoreversion recursesubdirs createallsubdirs

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked
Name: quicklaunchicon; Description: "{cm:CreateQuickLaunchIcon}"; GroupDescription: "{cm:CreateQuickLaunchIcon}"; Flags: unchecked

;创建打开快捷方式
[Icons]
Name: "{group}\{cm:ProgramOnTheWeb,{#MyAppName}}"; Filename: "{app}\app\client\XXX软件.exe"
Name: "{group}\{cm:UninstallProgram,{#MyAppName}}"; Filename: "{uninstallexe}"
Name: "{commondesktop}\{#MyAppChineseName}"; Filename: "{app}\app\client\XXX软件.exe"; Tasks: desktopicon;WorkingDir: "{app}"

[INI]
;修改数据库配置文件
Filename:"{app}\software\mysql\my.ini";Section:"mysqld";Key:"basedir"; String:"{app}\software\mysql"
Filename:"{app}\software\mysql\my.ini";Section:"mysqld";Key:"datadir"; String:"{app}\software\mysqldata"

[Run]
;修改服务配置文件
Filename:"{app}\initMysqlconf.bat";Description:"正在启动或配置相关程序";
Filename:"{app}\install.bat";Description:"正在启动或配置相关程序";

[UninstallRun]
Filename:"{app}\uninstall.bat";

最后点击小三角运行即可开始进行打包了!在这里插入图片描述

脚本执行完成之后 在output文件夹下就会出现打好的软件安装包了!

踩过的大坑:
一 :注意后端项目的resources.properties文件中的数据库连接地址一定要写对,比如我这里就连接的是安装之后的xxx-mysql ,那么地址就可以写本地的地址127.0.0.1,端口号要和自己脚本文件写 my.ini 的端口号一致 。
二 : 前后端分离项目,要注意前端和后端的访问地址要一致,具体可百度 前后端分离项目的联调

。。
然后,没了,想起来什么我会继续补充

### 回答1: 前后端分离项目需要把web项目中的后端代码与前端代码拆分开,其中前端代码使用JavaScript语言,包括HTML、CSS等,后端代码使用Java语言,用于处理数据库的请求等。可以使用RESTful API框架,如SpringMVC来实现前后端的解耦。 ### 回答2: 将Java Web项目拆分前后端分离项目需要执行以下步骤: 1. 分离后端代码:在原有的Java Web项目中,将后端的业务逻辑和数据访问层单独抽离出来,形独立的后端项目。这个后端项目可以是一个独立的Java项目,使用Spring Boot、Spring MVC等框架开发。后端项目负责处理请求、实现业务逻辑和与数据库交互等操作。 2. 创建前端项目:使用前端开发技术,如HTML、CSS和JavaScript,创建一个新的前端项目。可以使用流行的前端框架,如React、Angular或Vue.js等,在前端项目中负责用户界面的展示和用户交互。 3. 前后端交互:定义前后端数据交互的接口,可以使用RESTful API进行前后端通信。前端发送请求至后端,后端接收并处理请求,并将处理结果返回给前端,前端根据返回结果进行逻辑处理和界面展示。 4. 部署和联调:前端项目可以独立部署在一个Web服务器或者静态文件服务器上,后端项目则可以部署在另一个服务器上。前后端项目需要在联调过程中确保能够正常通信,前端能够访问后端接口,并正确显示数据和处理业务逻辑。 5. 优化和维护:在前后端分离项目中,前端和后端可以并行开发和优化,提高开发效率。同时,前端人员可以专注于用户界面的设计和优化,后端人员可以专注于业务逻辑和数据处理的优化。对于不同的模块和功能,可以分配不同的团队进行开发和维护。 通过以上步骤,将原有的Java Web项目拆分为前后端分离项目,可以更好地分配资源和团队,提高开发效率和项目维护性,并且使得前端和后端能够独立升级和部署。 ### 回答3: 将一个JavaWeb项目拆分为前后端分离项目,主要需要进行以下步骤: 1. 前端与后端项目分离:将原来的JavaWeb项目中的前端页面与后端代码进行拆分,分别放在两个独立的项目中。 2. 前端项目搭建:在前端项目中使用前端框架,如Vue.js、React等,搭建前端页面,并实现与后端的数据交互。 3. 后端项目搭建:使用Spring Boot、Spring MVC等框架搭建后端项目,提供接口供前端调用,并处理业务逻辑。 4. 接口定义与规范:前后端分离项目中,前端通过接口与后端进行数据交互。因此,需要定义接口的请求方式、参数、返回格式等规范,确保前后端的数据交互正常。 5. 接口调用:前端通过异步请求方式(如Ajax、Fetch等)调用后端接口,并获取返回的数据进行展示或处理。 6. 前后端联调:在开发过程中,前端需要根据定义的接口规范进行接口调用,与后端进行联调,确保前后端的数据交互正常。 7. 部署与测试:将前后端分离项目分别进行部署,并进行功能与性能测试,确保项目的稳定运行。 总结起来,将JavaWeb项目拆分为前后端分离项目,需要进行前端项目搭建、后端项目搭建、接口定义与规范、接口调用、前后端联调、部署与测试等步骤。通过这些步骤,可以将原有的JavaWeb项目改造为前后端分离项目,实现前后端的解耦与独立开发。
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值