F1V3.0-22 前端旧版本升级方式

最新推荐文章于 2024-08-06 14:32:25 发布

ZHBR_F1

最新推荐文章于 2024-08-06 14:32:25 发布

阅读量1k

点赞数

分类专栏：前端 F1

本文链接：https://blog.csdn.net/ZHBR_F1/article/details/73505861

版权

F1 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

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'
};