【案例】js vue跳转html页面（新、独立的窗口）携带参数并请求后端接口
第一步： 创建好html页面，写入想要的页面布局；回溯到public路径下，对于新的、独立的窗口配置。这里是绝对路径，笔者这里是用vue框架，第二步：跳转html页面，并携带参数；第三步：获取html地址携带的参数。第四步：后端接口请求，正常请求即可。
·
效果图：
源码见文章最后！！！！
第一步： 创建好html页面，写入想要的页面布局；
按照自己的要求使用原生的html去实现页面就行，当然也可以在html文件中使用vue语法，案例请看最后源代码
第二步：跳转html页面，并携带参数；
也就是从view1.vue文件中跳转至history.html文件中，这里一定要用绝对路径，如果是相对路径的话，会出错，无法跳转至想要的页面，是因为vue文件在打包的过程中是要二次编译的
window.open(['../../../history.html?dvc_code_n='+`${_item.dvc_code_n}`+'&token='+`${_item.token}`+'&type='+`${_item.val}` +'&unit='+`${_item.unit}`], [_item.val+'--历史数据',"_blank"],[100,100,500,500,'no','no', 'no'])
这里是绝对路径，笔者这里是用vue框架，../../../history.html回溯到public路径下，对于新的、独立的窗口配置
参考文章
第三步：获取html地址携带的参数
//案例：
http://192.168.129.27:10008/history.html?code_n=20011n2&token=000456200&type=%E6%B9%BF%E5%BA%A6&unit=%RH
this.GetQueryString('type');
// 湿度
this.GetQueryString('unit');
// %RH
GetQueryString(name) { //
console.log(name);
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null){
if (name == 'unit') {
return unescape(r[2]); // 其它的字符转义就是用它
}
return decodeURI(r[2]); // 主要针对中文的转义
}
return null;
},
第四步：后端接口请求，正常请求即可
DetailsClick(_item) {
console.log(_item);
window.open(
'../../../history.html?dvc_code_n='+`${_item.dvc_code_n}`+'&token='+`${_item.token}`+'&type='+`${_item.val}` +'&unit='+`${_item.unit}`,
"_blank",
"width=800,height=600, top=100, left=100, titlebar=no, menubar=no, scrollbars=yes, resizable=yes, status=yes,toolbar=no, location=yes")
},
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
//这里要注意顺序，不然会出现错误，提示什么undefined
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="testHtm">
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
value-format="timestamp"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker><!--- :default-time="['00:00:00', '23:59:59']" ---->
<el-button type="primary" id="btuclick" @click="seeClick">查询</el-button>
<el-table size="mediue" class="tablegg" height="90vh" border :data="DATATable" style="width: 100%;" v-loading="loading" element-loading-text="加载中...">
<el-table-column align="center" label="序号" type="index" width="100"></el-table-column>
<el-table-column align="center" label="类型" prop="type" width=""></el-table-column>
<el-table-column align="center" label="值" prop="value" width=""></el-table-column>
<el-table-column align="center" label="单位" prop="unit" width="100"></el-table-column>
<el-table-column align="center" label="时间" prop="time" width=""></el-table-column>
</el-table>
</div>
</body>
<script>
new Vue({
el:'#testHtm',
data: function(){
return {
DATATable: [],
typeName:'',
unit: '',
value2: '',
loading: true,
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
}
},
mounted(){
// console.log(window.location.href); // 获取页面地址
// console.log(window.location.search); // 获取地址？之后的参数，包含？
// console.log(new Date().getTime());
this.typeName = this.GetQueryString('type');
this.unit = this.GetQueryString('unit');
// console.log(this.typeName, this.unit);
this.twoDaysDataEvent();
},
methods: {
twoDaysDataEvent() {
let nowtimestap = new Date().getTime()// h获取当前时间戳
this.loading = true;
const params_item = { name1: value1, name2: value2, name3: value3, name4: value5 }
this.history(params_item);
},
GetQueryString(name) {
console.log(name);
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null){
if (name == 'unit') {
return unescape(r[2]);
}
return decodeURI(r[2]);
}
return null;
},
seeClick() { // 查询
const computer_days = (start, end) => Math.ceil(Math.abs(start-end) / 86400000); // 日期之间的天数
let start = this.value2[0]; let end = this.value2[1];
console.log(start, end);
console.log(computer_days(start, end));
if (this.value2.length > 0) {
if (this.value2[1] >= new Date().getTime()) {
this.$notify({
title: '提示',
type: 'error',
message: '“结束日期” 不能大于 “当前时间”',
duration: 3000
});
return
}
//接口事件触发
}
this.loading = true;
this.DATATable = [];
const params_its = { name1: value1, name2: value2, name3: value3, name4: value5 }
this.history(params_its);
},
history(params){
const para = { name1: value1, name2: value2, name3: value3, name4: value5 }
axios.post('http://xxxx..../xxxxxxxx/apiurl',para).then(res => {
if(res.data.code == 201){
let rdd = res.data.data;
let list = []; let timestopdata = [];
if (rdd.length > 0) {
rdd.forEach(ele => {
timestopdata = JSON.parse(ele.data_day_json);
timestopdata.forEach(item => {
list.push({ type: this.typeName, value: item[1],unit: this.unit, time: this.timestampToDate(item[0]) })
})
})
}
list.reverse();
this.DATATable = list;
}else{
this.$message.warning(res.data.message)
}
this.loading = false;
})
},
timestampToDate(timestamp){
var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = date.getDate() + ' ';
var h = date.getHours() + ':';
var m = date.getMinutes() + ':';
var s = date.getSeconds();
return Y+M+D.padStart(3,'0')+h.padStart(3,'0')+m.padStart(3,'0')+String(s).padStart(2,'0') ;
}
}
});
</script>
</html>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献9条内容
所有评论(0)