JSP项目引入Vue.js+antd组件库
前后端不分离项目，使用本地资源/cdn资源方式，结合vue2框架，优化页面交互
首先感谢你的阅读！本文章是我在做项目的过程中构思出来的一个不成熟的问题解决方案，人类智慧无穷无尽，我的或许不是最好的，但有可能是适合你的，或者帮助到你的方案。
文章目录
写在前面的一些话
最近做了一个项目需求：前后端不分离的项目中，在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安装
5、vue数组双向绑定问题
前往低代码交流专区
更多推荐
13
0- 0
已为社区贡献1条内容
所有评论(0)