jeesite移动端和后端项目开发配置以及部署（前后端分离内网映射）

本文链接：https://blog.csdn.net/qq_22175485/article/details/142042220

jeesite移动端和后端项目开发配置以及部署（花生壳 + nginx内网穿透访问）

前言

前言

这里从下载项目到开发，再到部署的详细过程，并且通过花生壳进行内网穿透，nginx进行代理访问，可进行访问移动端和后端。

JeeSite v5.x开发环境配置

下载地址：https://gitee.com/thinkgem/jeesite5，可通过git或下载压缩包进行下载，这里使用的通过压缩包方式进行下载：

下载的压缩包进行解压；
使用IntelliJ IDEA工具，File >> Open，选择jeesite5-v5.8文件夹，点击OK,选择Trust Project；
在root项目的pom.xml中，modules中注释掉以下代码

	<modules>
		<module>../parent</module>
		<module>../common</module>
		<module>../modules</module>
		<module>../web</module>
		<!--<module>../web-api</module>
		<module>../web-fast</module>-->
	</modules>

在web项目的resources>>config下的application.yml修改端口和项目路径以及数据库的配置

server:

  port: 8980
  servlet:
    context-path: /csm #端口后面的项目名称
    register-default-servlet: false
#    encoding.enabled: true
  tomcat:
    uri-encoding: UTF-8

jdbc:

  # Mysql 数据库配置
  type: mysql
  driver: com.mysql.cj.jdbc.Driver
  url: jdbc:mysql://127.0.0.1:3306/jeesite_v5?useSSL=false&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=CONVERT_TO_NULL&serverTimezone=Asia/Shanghai&nullCatalogMeansCurrent=true
  username: root
  password: 123456
  testSql: SELECT 1

下载所需要的数据，地址：https://gitee.com/thinkgem/jeesite5/attach_files，找到jeesite_mysql_v5.6.0_2024-01-04.sql.sql.zip解压缩导入数据库；
点击右边的maven，找到JeeSite Root,打开Lifecycle下的clean，然后compile，选择Application进行运行，后端项目就启动起来，可通过http://127.0.0.1:8980/csm进行正常访问。

uniapp移动端开发环境配置

下载地址：https://gitee.com/thinkgem/jeesite-uniapp，可通过git或下载压缩包进行下载，这里使用的通过压缩包方式进行下载：

下载的压缩包进行解压，可重新命名文件夹（consumerManage）；
使用HBuilder工具，文件 >> 从本地目录导入，选择consumerManage文件夹；
配置后端的请求地址和端口，在common目录下的config.js;
前后端分离项目存在跨域问题，有两种方式进行解决，第一种是后端处理，在web项目resources>>config下的application.yml中找到accessControlAllowOrigin关键字的代码并去掉注释，第二种是前端处理，通过代理方式进行，以下代码的请求和端口是跟前端的一致，通过/csm进行代理后端的地址和端口，在根目录下的vue.config.js配置代理地址；

//config.js下的配置，
//通过请求http://127.0.0.1:8080/csm代理成http://127.0.0.1:8980/csm地址
config.baseUrlList = [
	{
		name: 'http://127.0.0.1:8080',
		baseUrl: 'http://127.0.0.1:8080/csm',
		value: '1'
	}
];

//这里是vue.config.js的配置
module.exports = {
	devServer: {
		disableHostCheck: true, //通过域名代理出现InValid hosts header
		proxy: {//代理地址可解决跨域问题 
			'/csm': {
				target: 'http://127.0.0.1:8980',//这里是实际后端ip和端口
				secure: false,
				changeOrigin: true,
			}
		}
	}
}

运行>>运行到浏览器(B) >> Chrome，控制台编译完之后可自动打开登录页面，地址：http://localhost:8080/ ；

后端打包部署

根目录下的web文件下pom.xml，将packaging由war改为jar保存，点击右端maven，找到Jeesite Root下的Lifecycle，点击clean，然后点击package，将生成的jar拷贝出来
新建一个txt文件，把一下代码复制进去，把后缀名改为run.bat，执行run.bat

@echo off
start /b javaw -jar web.jar -Dfile.encoding=utf-8 > start.log 2>&1 &

在这里插入图片描述

uniapp移动端打包部署

双击根目录下文件manifest.json，登录地址：https://dev.dcloud.net.cn/pages/common/login?uniIdRedirectUrl=%252Fpages%252Fapp%252Flist，没有账号就注册一个账号，登录之后应用管理>>我的应用，创建应用，选择uni-app，应用名称随便起，提交之后在我的应用列表中会看到刚创建的应用，在列表的中的Appid进行复制，粘贴到manifest.json文件基础配置中uni-app应用标识（Appid）,选择Web配置，index.html模板路径改为空值，路由模式为history，运行基础路径改为(./)

在这里插入图片描述

打开花生壳客户端，内网映射，点击新增映射，跳出一个网址登录，内网穿透菜单下添加映射，映射类型选择网站应用，映射协议：http，选择外网域名：xxxx.oicp.vip，外网端口不改，内网主机：127.0.0.1，端口：8080，最后确定；
打开common目录下的config.js，配置花生壳的映射的域名

config.baseUrlList = [
	{
		name: 'http://127.0.0.1:8080',
		baseUrl: 'http://127.0.0.1:8080/csm',
		value: '1'
	},
	{
		name: 'http://xxxx.oicp.vip',
		baseUrl: 'http://xxxx.oicp.vip/csm',
		value: '2'
	}
];

发行(U) >> 网站PC Web或手机H5(仅适用与uni-app)(H) >> 发行
在根目录下unpackage >> dist >> build >> web下找到发版的代码，将代码复制到nginx根目录下html文件夹
nginx配置，根目录下conf文件下，打开nginx.conf文件

	server {
		listen 8080;
		server_name 127.0.0.1;
		
		location / { #配置移动端访问
            proxy_set_header  Host  $host;
			root   html;
            index  index.html index.htm;
		}
		location ~ ^/csm/ { #这个配置后端web访问
			proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            # 追加请求
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # 请求转发
			proxy_pass http://127.0.0.1:8980;
		}
	}