jsp页面使用引入Vue语法
jsp页面使用引入Vue语法在你的jsp 或者html页面引入 vue<script type="text/javascript" src="${resource_path}/resource/js/axios.min.js"></script>//axios可以不引入<script type="text/javascript" src="${resource_pat
·
jsp页面使用引入Vue语法
- 在你的jsp 或者html页面引入 vue
<script type="text/javascript" src="${resource_path}/resource/js/axios.min.js"></script>
<script type="text/javascript" src="${resource_path}/resource/js/vue.min.js"></script>
- 在需要引入使用vue的 div引入 id
<div id="apps" class="menu-item" style=" padding-top: 0;">
<div id="videoCloudMeeting" @click="setUpMeetingRoom" class="menu-item icon-account bg-light-red">视频云会议</div>
</div>
注意 这个id js页面会用到
- 在项目 里编写对应的js文件
以下面代码为例 el :后面的 #apps 就是上面的 div后面的id 文件名:firstjs.js
new Vue({
el:"#apps",
data(){
return {
appId: "beb7da4ced7c42a085c3c99697f9aa42",
secretKey: "beb7da4ced7c42a085c3c99697f9aa42",
uid: "",
userInfo: {},
meetingUserData: {},
meetingRoomData: {},
http:axios
}
},
mounted(){
// console.log('mounted=======================================================')
},
methods: {
async getAccountData(){
this.userInfo={
account:window.username,
pwd:window.password
}
},
// 登录视频功能
async loginVideo () {
if (Object.keys(this.userInfo).length < 1) {
await this.getAccountData();
}
await this.http.get('http:/xxxxxxxx/api/v3/user/login',
{
params: {
appId:this.appId,
secretKey:this.secretKey,
type:1,
...(this.userInfo)
}
}
).then(res=>{
console.log("xxxx");
}).catch(err=>{
})
},
// 创建会议室
async setUpMeetingRoom () {
if (Object.keys(this.meetingUserData).length < 1) {
await this.loginVideo();
}
this.http.get("http://xxxxxxxx/api/v3/conference/create",
{
params:{
xxx: this.appId
}
}
).then(res=>{
this.invitationMeetingRoom();
});
},
// 注意下面的 反引号 如果改单引号 会导致数据获取不到 --同事改了 发现的问题
invitationMeetingRoom () {
let openUrl=`www.baidu.com?access_token=${this.xxx.xx}&xx=${this.xx}&xx=paassdkdemopc1&xx=xxx&xx=0&xxx=0&xxx=${this.xx.xx}`
console.log(openUrl)
window.open(openUrl)
}
}
})
- 最后记得 在jsp最后引入 js文件
<script type="text/javascript" src="${resource_path}/resource/js/firstjs.js"></script>
更多推荐
已为社区贡献3条内容
所有评论(0)