"Epichust-UniMax V5 开发环境搭建 –@ acted by yuanbao at 20201102 0 整体架构后端使用 IDEA，注释掉 pom.xml 文件中对 eclipse 插件依赖前端使用 VS Code，安装 node.js。且必须用 nginx 代理，才能使得前端 ...."

yuanbao15
Dharma 64 号会员
待分类 V5 开发环境 • 0 回帖 • 559 浏览 • 2 年前

UniMax V5 开发环境搭建教程

Epichust-UniMax V5 开发环境搭建

–@ acted by yuanbao at 20201102

0 整体架构

后端使用 IDEA，注释掉 pom.xml 文件中对 eclipse 插件依赖
前端使用 VS Code，安装 node.js。
且必须用 nginx 代理，才能使得前端能够访问后端。（nginx 用同一端口同时代理前端和后端，解决跨域问题）

注意：

后台服务启动部署后，无法通过 WEB 浏览器直接使用。（能够访问和登录，但之后无法打开任何功能页面。）原因是前后端分离，需用前端项目去访问后端服务，中间有 nginx 代理。
node.js 环境配置好后，命令通过 npm -v 验证。

1 服务部署基础流程

先起后端服务
再起前端 VUE 服务
最后起 nginx，代理前端和后端
最后，访问代理的前端地址：http://loalhost 即可。

2 获取代码：

V5 后端 svn：https://61.183.71.118:6143/svn/product/trunk/Projects/prj-UnimaxMesV5
V5 前端 git：http://61.183.71.118:8188/r/project/web/uma-unimax-project.git
数据库地址：UNIMAX5_TEST/UNIMAX5_TEST@61.183.71.118:1524/orcl

3 VS Code 终端命令

前端项目代码导入 vs code。

在 IDEA 中导入 prj-UnimaxMesV5 项目代码，完成启动后台服务。此处教程忽略。

后端启动后可浏览器访问 http://localhost:19010/prj-UnimaxMesV5 验证。

3.1 项目配置修改：

修改前端项目代码 dev.env.js

ServerUrl:'"/prj-UnimaxMesV5"',

注意此处不需要写端口号（因为端口号会在 nginx 中代理掉），也不需要写前置 ip。

module.exports = merge(prodEnv, {  
 NODE_ENV: '"development"',  
 ServerUrl: '"/prj-UnimaxMesV5"',  
 WebDomain: '"/"', // 网站虚拟目录，从域名后的第一个“/”开始到最后一个“/”为止  
 WebCDNUrl: '"/"', // 网站本地js路径  
 AppName: '"prj-UnimaxMesV5"', // 网站名称  
 AppShortName: '"MesV5"', // 网站点击折叠后显示名称  
 OPEN_PROXY: false, // 是否开启代理, 重置后需重启vue-cli  
});

3.2 项目启动（命令行最好是管理员权限下执行）

1. 命令：安装依赖包

npm install
如果不成功，就用阿里镜像地址：npm install --registry=https://registry.npm.taobao.org

2. 命令：打包（非必须，VS 直接启动就不需要打包）

npm run build

3. 命令：启动前端项目

npm run start 或 npm run dev

4 Nginx

4.1 nginx.conf 关键配置

需要修改 nginx.conf 配置文件，使 nginx 同时代理 VUE 前台服务、prj-UnimaxMesV5 后台服务。

upstream mes {
	ip_hash;
	server 127.0.0.1:19010;
}

upstream expanse {
	ip_hash;
	server 127.0.0.1:8001;
}


server {
	listen        80;
	server_name   127.0.0.1;
	 
	 
	location /prj-UnimaxMesV5 {
	 
		proxy_pass http://mes/prj-UnimaxMesV5;
		proxy_connect_timeout 90;
		proxy_send_timeout 300;
		proxy_read_timeout 300;
		send_timeout 300;
		tcp_nodelay     on;
		proxy_set_header Host            $host;
		proxy_set_header X-Real-IP       $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	 
		# Handle request
	}
	
	location / {
	 
		proxy_pass http://expanse/;
		
		tcp_nodelay     on;
		proxy_set_header Host            $host;
		proxy_set_header X-Real-IP       $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	 
		#root html;
		#index index.html index.htm;
	}
	  
}

解释：上面配置中，如此定义的原因是，我前端 vue 服务的端口为 8001，后端服务端口为：19010.

nginx 代理的端口为 80，根据后缀确定代理访问到哪个 url。

需要根据自己的端口情况修改 nginx.conf。

4.2 nginx 相关命令

启动（后可接 -c 指定配置文件，如 start nginx -c conf/nginx-fps.conf）

start nginx

重载配置（有时候可能重载不成功，最好是杀掉进程后手动重启）

.\nginx.exe -s reload

关闭（貌似无效）

_{.\nginx.exe -s quit}
_{.\nginx.exe -s close}

tips：nginx 关闭无法通过命令有效关闭，可在 windows 任务管理器中手动关闭，或者 taskkill 命令。

4.3 验证服务是否正常启动和代理

分别访问验证

前端：http://localhost:8001

后端：http://localhost:23010/prj-UnimaxMesV5

代理后：http://localhost （以后要使用的服务是代理后的）

依次验证，若能正常访问说明对应的服务启动 ok，否则对应服务找启动问题。

5 页面请求逻辑

菜单 url

浏览器访问的是前端 VUE 项目，其菜单地址和 APP 的情况相似，取自 MTS_MENU 表但不是 REL 字段，仍然是 HREF 字段。

url 格式为：

_{platform!gopage.m?topage=xx.xxx.jsp} 不再使用
umabasedata/employeeInfo/pmbbEmployee 是一个文件路径地址，后面其实是省略了.vue 后缀，故 vue 文件需要这样放置。

页面内请求 url

前端访问后台请求的 url 格式不变，仍然是使用封装了 vue 的 axios 的 $http，方式为 post 或 get；

url 格式为：controllerName!methodName.m

e.g.

this.$http  
.post(  
 "pmbbEmployeeExpenseController!input.m",  
 qs.stringify({  
 id: this.editInput[0].id, // 传参  
 })  
)  
.then((res) => {  
 // 可写请求返回数据后的逻辑  
});

附：前端打包、启动过程报错记录

在 npm install 前可设置阿里镜像：npm config set registry https://registry.npm.taobao.org

1> npm 报错如下

error code ELIFECYCLE 824 error errno 1

解决：

npm cache clean –force
rm -rf node_modules （需要 linux 命令行或手动分别删除此文件夹和文件）
rm -rf package-lock.json
npm install

2> npm 报错如下

npm ERR! network request to https://registry.npm.taobao.org/adm-zip failed, reason: getaddrinfo ENOTFOUND registry.npm.taobao.org

原因：可能是内网环境设置了代理网络造成，需要为 npm 取消代理。

解决：

npm config delete proxy
npm config delete https-proxy

3> 服务启动时，警告：

"export ‘default’ (imported as ‘errorMessage’) was not found in ‘element-ui-verify/dist/error-message.js’

把该 vue 文件删掉，即不再警告。也可以不处理不影响。据前端组答复，这些 T 开头的文件是抄的别处的，没有用到。

4> 启动后浏览器访问前端项目，页面卡在加载页无法跳转进入登录页，且报错

Uncaught ReferenceError: exports is not defined component.js:21

可能原因：es6 标准导致，打包的不能几种格式 import/export，也可能是 babel 依赖的问题导致。

** 解决：** 注释掉.babelrc 文件中 module:false 这一行，然后重新 build start。

6 vue 页面（见其他笔记）

文档：UniMaxFPS 平台版本升级记录（v4-v5）

0 打赏

打赏 2 积分后可见