1 引言
1.1 编写目的
F1V3.0版本发布之后,若是想对当前的项目进行升级,升级到微服务版本,需要对已有的代码进行修改。前端方面主要涉及的修改为修改JSP、CSS、JS文件。
2 详细过程
在平台2.x版本中,我们编写代码主要存放的位置在webcontent文件夹下。例如permission模块即com.jb.f1.permission.web\webcontent\目录下。
首先我们需要对旧模块的目录进行规整,这里建议将代码文件根据文件类型进行划分
- 将JS文件放到scripts文件夹中
- CSS文件放到CSS文件中
- HTML文件放到views文件中。
在不同文件夹中再对文件进行分类,同一功能的文件放到同一个文件夹中方便查看。参照UI模块开发规范中的目录规范。
2.1 修改JSP文件头部
平台2.x版本中,我们使用的是JSP文件,在3.0版本里面,我们使用的静态的页面,所以首先要做的是将旧模块中的JSP文件修改为HTML文件。
若已经对项目进行过页面静态化,在进行过跳转至步骤2。
下面我们分步骤对旧JSP页面进行修改,这里使用一份2.X版本的jsp文件头部进行举例说明
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="bp" uri="http://www.joinbright.com/tags-jquery"%>
<%@ page import="com.jb.config.util.PlatformConfigUtil;"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<!-- 平台代码引入 -->
<bp:jquery />
<script type="text/javascript">
//import引用方式
$import("jquery/lib/superslide/superslide.js");
</script>
<!-- 标签引用CSS -->
<link rel="stylesheet" href="permission/css/reset.css" />
<!-- 标签引用JS -->
<script type="text/javascript" src="permission/scripts/new/jquery.cookie.js"></script></script>
</head>
1、删除头部JAVA标签
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="bp" uri="http://www.joinbright.com/tags-jquery"%>
<%@ page import="com.jb.config.util.PlatformConfigUtil;"%>
2、修改对平台代码旧的引用方式
之前对代码引用方式为
<bp:jquery />
对自定义文件等引用为使用$import进行引入,如:
$import("jquery/lib/superslide/superslide.js");
或者直接使用<script>
标签引入JS文件,使用<link>
标签引入CSS文件。
这里首先要进行的是将$import的引用方式修改为使用标签引用。
例如:
$import("jquery/lib/superslide/superslide.js");
修改为
<script type="text/javascript" src="jquery/lib/superslide/superslide.js"></script>
3、路径修改:平台3.0版本中前端代码的路由使用的是nginx,这里需要对文件外链文件引用路径进行修改,使用的仍然是绝对路径,不同的是需要在路径前加“/”
例:
<script type="text/javascript" src="jquery/lib/superslide/superslide.js"></script>
修改为:
<script type="text/javascript" src="/jquery/lib/superslide/superslide.js"></script>
“jquery”为模块名,后面拼入对应路径。
4、增加对3.0版本中引用文件的方式,其中包含三方组件包和平台组件包的CSS和JS文件。
<!-- 组件样式文件 -->
<link rel="stylesheet" type="text/css" href="/jquery/css/blue/widget.bundle.css">
<!-- 三方包脚本 -->
<script type="text/javascript" src="/public/dll.bundle.js"></script>
<!-- 组件包脚本 -->
<script type="text/javascript" src="/jquery/scripts/widget.bundle.js"></script>
注意:
- 需要先引入CSS文件再引入JS文件。
- 对于CSS文件,需要先引入组件样式文件再引入自定义CSS样式文件
- 对于JS文件,需要先引入三方包脚本再引入组件包脚本
5、HTML文件需要注意,其中标签需要进行修改。补全标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
防止出现样式错误的问题。
6、将修改完成的jsp文件后缀修改为html,修改完成的代码为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<!-- 平台代码引入 -->
<!-- 组件样式文件 -->
<link rel="stylesheet" type="text/css" href="/jquery/css/blue/widget.bundle.css">
<!-- 标签引用CSS -->
<link rel="stylesheet" href="/permission/css/reset.css" />
<!-- 三方包脚本 -->
<script type="text/javascript" src="/public/dll.bundle.js"></script>
<!-- 组件包脚本 -->
<script type="text/javascript" src="/jquery/scripts/widget.bundle.js"></script>
<!-- 标签引用JS -->
<script type="text/javascript" src="/jquery/lib/superslide/superslide.js"></script></script>
</head>
2.2 修改HTML文件标签中的路径
修改过文件头部后,需要对标签中的路径进行修改,这里需要修改几个地方:
- img标签中的src引用
- a标签中的href路径
这里的修改方式同2.1中的3
2.3 修改CSS文件
主要为修改图片引用路径,修改方式同2.1中的3相同。
2.4 修改JS文件
1、首先需要我们修改JS文件对外链文件的引用方式(一般写在JS文件头部或者尾部),第一步删除对平台文件的引入,以及修改引用路径,修改方式同2.1中的3
例:
//平台代码引入
$import("jquery/src/BDWidget/form/jquery.f1.bdformpanel.js");
//自定义文件引入
$import("permission/scripts/module/register/regStepBar.js");
修改为:
//删除引入平台文件
//自定义文件引入
$import("/permission/scripts/module/register/regStepBar.js");
2、修改JS代码对不同资源文件的引用路径或超链接路径,修改方式同2.1的4。这里建议在文件中搜索“.jsp”,“.html”,“.js”,“.css”,“.jpg”,“.png”等来进行关键字搜索,防止漏改。
3、修改JS文件中的服务路径,平台2.x版本中有BD、BP、AJAX三种服务引用方式,在这里我们分别介绍修改方式。
1)使用BD引用的服务路径不需要修改
2)使用BP引用的服务路径在平台2.x中写法
为“example_exampleService”,在平台3.0版本中需要配置配置项microServerName(微服务名),例如使用bpgrid则需要修改为
$("#xxx").bpgrid({
microServerName : "permission";//以permission为例
})
3)使用AJAX引用的服务路径在平台2.x中写法为“permission/register/registerUser.do”,平台3.0版本中需要对服务路径进行修改:
url : window.servicePath + serviceLink.permission + “/register/registerUser.do”
这里说明一下serviceLick变量。在组件模块目录下的F1UI_widget_libraries/src/loader/widget.variable.resources.js文件中可以对服务映射进行配置。
/**
* 服务器地址
* @type {{}}
*/
window.serviceLink = {
//zuul服务器地址
zuul: 'zuul',
//文件系统
file: 'filesys',
//模型地址
model: 'model',
//工作流
workflow: 'workflow',
//典型视图
modelviews: 'modelviews'
};
2.5 修改Nginx配置文件
修改完代码文件之后,我们需要对修改完毕的模块在Nginx的配置文件中增加路由,这里可以参看F13.0-UI Nginx的配置和使用中增加新模块的方式。