在JSP中引入Java和Vue的实现方法
首先感谢你的阅读!本文章是我在做项目的过程中构思出来的一个不成熟的问题解决方案,人类智慧无穷无尽,我的或许不是最好的,但有可能是适合你的,或者帮助到你的方案。
文章目录
- 写在前面的一些话
- 一、cdn资源引入/本地资源引入?
- 1、cdn资源引入适合用在可以连接互联网的开发环境,使用方式如下:
- 2、本地资源引入
- 二、怎么在一个JSP页面,嵌套一个vue+element页面
- 1、实例化一个vue对象
- 2、父级JSP页面下加载子页面内容
- 3、其他可能需要解决的问题
- 1)国际化
- 2)数据双向绑定
- 总结
- 参考文档
写在前面的一些话
最近做了一个项目需求:前后端不分离的项目中,在JSP页面中,使用vue.js和主流的组件库(element UI、antDesign)优化页面交互。
当时给了几个不成熟的想法:
1、用 qiankun框架 将老项目和新前端整合,这新前端包会是一个独立包的方式。想方案的时候,思考了很久要怎么在旧项目拥有一个主应用,然后再去接上微应用?因为JSP项目中是不支持打包的,我困在里面了。现在想想,其实应该创建一个空的vue项目,不需要写什么页面内容,它唯一的功能就是:能加载微应用。
但是还有一个事情就是,前后端通信问题,因为我的项目是前后端不分离,不支持用接口拿数据。最后对原框架进行了一些分析,了解到框架取到数据之后,会放在全局变量中(即挂在window下)。并且改了数据送回后台的时候,也是通过该全局变量提交。以我本人的接触过的项目来看,大部分这种不同的系统代码之间的交互,都是会选择通过全局变量的方式。
2、用iframe嵌套,这个其实被上面的qiankun框架给进一步优化了,所以如果iframe的方式能行,大概率我会选择用qiankun而不是iframe了。以前用iframe嵌套的方式,通信也是会通过全局变量的方式。但因为DOM结构导致不完整遮罩层、用户cookie验证等问题,导致一堆bug,我都很少会用iframe了
3、用本地资源或者cdn资源引入vue.js和组建库提示:最后楼主还是选择了使用第3种方式,因为那对于我来说是最快上手,最能赶上项目进度的方案
…
一、cdn资源引入/本地资源引入?
1、cdn资源引入适合用在可以连接互联网的开发环境,使用方式如下:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 安装指定版本的vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
2、本地资源引入
我的需求是要在内部网络使用的,如果要访问互联网资源,我们要走申请流程,并且没有这个需要,于是我就选择了将vue.js和antd.js下载,作为项目js资源资源引入到页面上了。因为我们是银行的内部系统,运行环境可能不太理想,一般会选择一个向下兼容的版本,所以我选择了vue2而不是vue3。一开始我试过用vue3的,但是对应的antd组件库,报了比较多的语法错错误,遂放弃。
<!-- 引入vue.js框架 -->
<script src="xxx/path/vue@2.7.14.js"></script>
<!-- 引入element UI 组件库 -->
<script src="xxx/path/element-ui/index.js"></script>
<link rel="stylesheet" href="xxx/path/element-ui/index.css">
<!-- 引入ant design组件库 -->
<script src="xxx/path/ant-design/antd.min.js"></script>
<link rel="stylesheet" href="xxx/path/ant-design/antd.min.css">
xxx.min.js 这种一般就是经过编辑的文件,文件size会更小。但有可能会出现一些方法的丢失,也比较难去改动里面的代码,当然一般也不需要去改里面的代码
其实上面引入的资源都是文件,怎么命名,放在那个路径下面都可以根据自己需要的,但是这里需要提醒一下,就是这个资源的引入会有一个顺序,一般vue.js的引入都会在组件库之前。另外如果引入的是antd的组件库,官网也说了,需要额外引入日期处理文件,antd 1x用的moment,antd 3x用的是dayjs。找到需要的资源文件之后,直接ctrl+s 保存下来就可以了
二、怎么在一个JSP页面,嵌套一个vue+element页面
在我的理解来说,上面的问题就是:JSP页面怎么写html代码?要知道任何页面其实都是HTML+JS+CSS所以能够渲染的页面,肯定就能够创建一个vue实例。
1、实例化一个vue对象
用组件化的思维,避免在父页面改动太多的代码,而是选择在父页面引入子页面的方式进行开发,需要解决的就是只有组件通信了,前面说过了,组件通信可以用当前页面的全局变量的方式。children.jsp页面代码如下(示例):
<div id="app">
<a-button @click="handleBtnClick">{{ btnName }}<a-button>
</div>
<script>
<!-- app实例可以作为一个全局变量或者局部变量被外部页面使用 -->
var app = new Vue({
el: '#app',
data: {
btnName: '点我!'
},
methods:{
handleBtnClick(){
antd.message.info('提示!')
}
}
})
</script>
2、父级JSP页面下加载子页面内容
parent.jsp代码如下(示例):
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试页面</title>
<!-- 引入vue.js框架 -->
<script src="xxx/path/vue@2.7.14.js"></script>
<!-- 引入ant design组件库 -->
<script src="xxx/path/ant-design/antd.min.js"></script>
<script src="xxx/path/ant-design/moment.min.js"></script>
<link rel="stylesheet" href="xxx/path/ant-design/antd.min.css">
var app = undefined;
</head>
<body>
<!-- 子页面中也能使用app实例的内容,可以用来做组件通信 -->
<%@ inlcude file =”children1.jsp” %> -->
<jsp:include page=”children2.jsp” flush=”true”>
<jsp: param name=”userID”value=”2” />
<jsp:include>
// 可以在数据加载结束之后,给app实例绑定数据
console.log(app)
</body>
</html>
3、其他可能需要解决的问题
1)国际化
antd组件库的默认语言都会是英文的,所以建议在最外层的div中套一层国际化组件,指定你需要默认语言。children.jsp代码如下(示例):
<a-locale-provider :locale="locale">
<div id="app">
<a-button @click="handleBtnClick">{{ btnName }}<a-button>
</div>
</a-locale-provider>
<script>
<!-- app实例可以作为一个全局变量或者局部变量被外部页面使用 -->
var app = new Vue({
el: '#app',
data: {
btnName: '点我!',
locale: antd.locales.zh_CN //国际化设为中文
},
methods:{
handleBtnClick(){
antd.message.info('提示!')
}
}
})
</script>
2)数据双向绑定
- 可以使用Vue.set的方式。使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。
- 要注意,对于数组的处理,数组对象的某个属性修改不一定是双向绑定的。这个在官方文档和其他的博文里都有很详细的说明。
总结
1、博主本次项目开发过程,最大的问题在于与后台数据的传输,但是研究之后发现,封装的框架,都将数据存放在全局的对象中了(*_dataset),对于数据的更新和传输,就是对这个全局对象的操作。只要保证页面更新的内容,有更新的这个全局对象中就行。
2、对于数据的提交,因为jsp页面中每一个提交的按钮,都暴露了一个commit的方法,而使用组件库的的按钮是不带有这个commit方法的,博主的处理方法是:通过点击新的提交按钮,使用dispatchEvent触发框架按钮的点击时间,来提交数据。
3、
参考文档
1、Why not iframe? 2、qiankun微前端 3、Vue2官方文档 4、Element UI安装
上一篇: 九个常用 JSP 内置对象全解析
推荐阅读
-
Java 8新特性探究(十三)JavaFX 8新特性以及开发2048游戏-JavaFX历史## 跟java在服务器端和web端成绩相比,桌面一直是java的软肋,于是Sun公司在2008年推出JavaFX,弥补桌面软件的缺陷,请看下图JavaFX一路走过来的改进 从上图看出,一开始推出时候,开发者需使用一种名为JavaFX Script的静态的、声明式的编程语言来开发JavaFX应用程序。因为JavaFX Script将会被编译为Java bytecode,程序员可以使用Java代码代替。 JavaFX 2.0之后的版本摒弃了JavaFX Script语言,而作为一个Java API来使用。因此使用JavaFX平台实现的应用程序将直接通过标准Java代码来实现。 JavaFX 2.0 包含非常丰富的 UI 控件、图形和多媒体特性用于简化可视化应用的开发,WebView可直接在应用中嵌入网页;另外 2.0 版本允许使用 FXML 进行 UI 定义,这是一个脚本化基于 XML 的标识语言。 从JDK 7u6开始,JavaFx就与JDK捆绑在一起了,JavaFX团队称,下一个版本将是8.0,目前所有的工作都已经围绕8.0库进行。这是因为JavaFX将捆绑在Java 8中,因此该团队决定跳过几个版本号,迎头赶上Java 8。 ##JavaFx8的新特性 ## ###全新现代主题:Modena 新的Modena主题来替换原来的Caspian主题。不过在Application的start方法中,可以通过setUserAgentStylesheet(STYLESHEET_CASPIAN)来继续使用Caspian主题。 参考http://fxexperience.com/2013/03/modena-theme-update/ ###JavaFX 3D 在JavaFX8中提供了3D图像处理API,包括Shape3D (Box, Cylinder, MeshView, Sphere子类),SubScene, Material, PickResult, LightBase (AmbientLight 和PointLight子类),SceneAntialiasing等。Camera类也得到了更新。从JavaDoc中可以找到更多信息。 ###富文本 强化了富文本的支持 ###TreeTableView ###日期控件DatePicker 增加日期控件 ###用于 CSS 结构的公共 API
-
配置HP FC存储设备多路径驱动的方法在linux和Windows操作系统中即可实现
-
在Java JSP中实现打印功能的技巧与代码示例
-
在JSP中使用JavaScript获取Java变量的值和对象的方法
-
在JSP和Java中如何获取JavaScript的值?
-
在JSP中引入Java文件的方法
-
在JSP中引入Java和Vue的实现方法
-
在JSP中嵌入Java代码并添加HTML标签的方法
-
Java实现div元素在页面中的垂直居中方法详解
-
四种在Java中获取当前日期和时间的方法:利用java.util.Date类