avant-propos
Cet article enregistre principalement les problèmes rencontrés par les individus dans le développement du projet de l'entreprise. Le contenu principal : lors du développement du projet vue, la page jsp d'origine et ses js et css associés doivent être transplantés intacts dans le projet vue.
Si l'article est ambigu, veuillez le signaler pour éviter d'induire plus de personnes en erreur ! !
texte
origine
Dans le développement du nouveau projet vue, la technologie clé de l'ancien projet a été utilisée ; c'était trop de travail pour rénover la page ant-design-vue ! Ensuite, il y a les questions suivantes :
- Comment le projet vue accède-t-il à la page d'affichage jsp ?
- Comment importer js et css dans la page jsp?
- Comment obtenir les paramètres requis pour l'initialisation de la page jsp et comment traiter la requête Ajax d'origine ?
Utilisez iframe pour intégrer des pages jsp/html dans des pages de vue (résolvez les questions 1 et 2)
-
Placez la page jsp d'origine (ConfigurationEditing.html), js, css et d'autres ressources associées dans le dossier de ressources statiques du projet vue :
-
Tous les js, css, etc. introduits dans la page jsp n'ont pas besoin d'être modifiés : (mais faites attention au changement de chemin, et ajustez-le en fonction de votre propre projet)
-
Créez le fichier ConfigurationEditing.vue correspondant dans le dossier src pour intégrer la page jsp/html d'origine. Configurez ensuite la route d'accès correspondante dans le projet vue pour afficher le contenu de la page ConfigurationEditing.vue.
-
Créez une page jsp/html intégrée au composant iframe dans ConfigurationEditing.vue :
<template>
<div>
<iframe
name="iframeChild"
id="configFrame"
src="/jsp/ConfigurationEditing.jsp"
width="100%"
height="800px"
frameborder="0"
scrolling="no"
ref="iframeDom"
></iframe>
<upload-material-modal ref="uploadModal" @konvaOk="konvaOk"></upload-material-modal>
</div>
</template>
Comment passer des valeurs entre vue et contenu iframe (résoudre la question 3)
1. Utilisez postMessage (obj, ...) pour transférer des valeurs vers l'iframe (communication)
- La page vue passe la valeur à l'iframe :
methods: {
konvaOk () {
var param = {
type: 'uploadOk'
}
this.sendMesForIframe(param)
},
// 获取iframe实例, postMessage传值
sendMesForIframe (value) {
const mapFrame = this.$refs['iframeDom']
const iframeWin = mapFrame.contentWindow
iframeWin.postMessage(value, '*')
}
},
- La page jsp/html dans l'iframe reçoit la valeur passée par vue :
$(function () {
// 监听vue页面传递过来的值
window.addEventListener('message', messageEvent => {
// 判断是不是父窗口传来的值
if (messageEvent.source !== window.parent.window.parent) return
console.log(messageEvent.data,'vue页面所传的值')
if (messageEvent.data.type === 'uploadOk') {
// 判断传来值的类型后执行其他函数
resetModalMaterialList()
}
})
})
- jsp/html dans iframe passe la valeur à vue :
/**
* 图片上传
*/
$('#ssi-upload').click(function () {
var labelId = 1
var message = {
type: 'uploadClick',
labelId: labelId
}
window.parent.postMessage(message, '*') // 向vue传值
})
- Vue reçoit la valeur passée par iframe :
mounted: function () {
var that = this
window.addEventListener('message', function (e) {
var message = e.data
console.log(message, 'iframe传递过来的数据')
if (message.type === 'uploadClick') {
var labelId = message.labelId
console.log(labelId)
}
})
},
2. Créez une instance vue sur la page vue et montez-la sur l'objet window.La page intégrée dans l'iframe obtient la valeur de la page vue via l'instance window.parent.vue. (méthode 2)
- Le code de la page vue : (créer une instance vueThis lors de la création du cycle de vie vue)
<script>
export default {
name: 'ConfigurationEditing',
data () {
return {
lang: Vue.ls.get(APP_LANGUAGE), // 请求的语言zh -CN
reqPath: process.env.VUE_APP_API_BASE_URL_NEW, // 用于内嵌jsp页面的Ajax的路径
regionId: 1
}
},
methods: {
showID (id) {
console.log(id)
}
},
// 计算属性
computed: {
...mapState({
userToken: (state) => state.user.token // 计算属性也可以被内嵌的jsp/html获取
})
},
created () {
window.vueThis = this // 挂载vue实例
}
}
</script>
- La page jsp/html intégrée peut obtenir les variables et les fonctions définies dans vue via window.parent.vueThis : (obtenir la valeur de vue)
$(function () {
var lang = window.parent.vueThis.lang
var rePath = window.parent.vueThis.rePath
var regionId = window.parent.vueThis.regionId
var userToken = window.parent.vueThis.userToken // 获取到的token可以用于内嵌的jsp/html页面的ajax请求头中
window.parent.vueThis.showID(regionId) // 调用vue中函数
})
De même, la page vue peut également obtenir la valeur ou appeler la fonction qu'elle contient via l'instance iframe :
// 方法
iframeOK (res) {
var switchFrame = this.$refs['iframeDom']
var switchIframeWin = switchFrame.contentWindow // 获取到iframe窗口实例
switchIframeWin.StageObj.prototype.saveConfiguration(1) // 调用iframe中jsp/html页面定义的函数
},
d'autres problèmes
1. Après intégration, la requête Ajax de la page jsp peut être utilisée normalement !
Remarque : Certains paramètres pertinents de la requête dans la requête ajax peuvent être obtenus via les méthodes décrites ci-dessus, telles que : l'en-tête de la requête (par exemple : jeton, langue, etc.), les paramètres de la requête et le chemin de la requête.
2. Lorsque la page jsp est intégrée dans la page vue, lorsque la page jsp est placée dans le dossier statique, changez le suffixe en .html (la fin de .jsp ne peut pas être utilisée), cela n'a aucun effet sur la page jsp !
Raison : Il ne semble pas y avoir de problème avec l'intégration de pages jsp dans l'iframe du projet vue local ! Mais lorsque le projet vue est déployé sur le serveur, car la page jsp est une ressource statique stockée dans un dossier statique, lors de l'utilisation d'iframe, la page jsp ne peut pas être prévisualisée mais téléchargée en tant que fichier statique.
Solution : iframe peut prévisualiser les types de fichiers image, pdf et html, alors changez le suffixe du fichier .jsp en suffixe .html et déployez-le sur le serveur.