餐饮公司网站制作网络营销与直播电商

前言

需求在原来的项目基础上做浏览器3d呈现，我使用的是一个完整的框架展示3D文件，框架集成度太高，无法进行整合到自己的项目中，所以目前打算开两个服务器，进行页面跳转打开3d展示。
功能点：
1、如何跳转
2、如何传参

a标签实现新页面打开另一个项目

<a href="http://localhost:9999/" @click="transmit()" rel="nofollow noreferrer" target="_blank">新窗口打开3D文件</a>

解释：a标签可以访问外部资源  
href="http://localhost:9999/"改为我们需要的项目地址就可以了

跨域传值

方法一：适用于传递的值数据简单，保密性不高的情况下步骤一：http://~~~~?a=" "&b=" ",步骤二：新页面接收解析url地址获取后面的参数

但是我想传递的是token信息以及3D文件在服务器的URL数组，所以我用的cookie加密保存信息数据，新页面打开直接从cookie中获取解密数据
实现代码：

• 源vue项目代码
  1、封装cookie

  /* 
  * 设置cookie
  * @params c_name key
  * @params value value
  * @params expiremMinutes 过期时间 单位：分钟
  * @return null
  */
  function setCookie(c_name, value, expiremMinutes) {var exdate = new Date();exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000);document.cookie = c_name + "=" + escape(value) + ((expiremMinutes == null) ? "" : ";expires=" + exdate.toGMTString());
  }
  //escape对字符串编码函数/* 
  * 读取cookie
  * @params c_name key
  * @return value || ''
  */
  function getCookie(c_name) {if (document.cookie.length > 0) {var c_start = document.cookie.indexOf(c_name + "=");if (c_start != -1) {c_start = c_start + c_name.length + 1;var c_end = document.cookie.indexOf(";", c_start);if (c_end == -1)c_end = document.cookie.lengthreturn unescape(document.cookie.substring(c_start, c_end))}}return ""
  }/* 
  * 删除cookie
  * @params c_name 
  * @return null
  */
  function delCookie(c_name) {var exp = new Date();exp.setTime(exp.getTime() - 1);var cval = getCookie(c_name);if (cval != null) {document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString();}
  }export {setCookie,getCookie,delCookie
  }
  

  2、点击按钮时新页面打开同时把信息保存到cookie中

   <el-button><!-- <a :href="hrefapi" rel="nofollow noreferrer" target="_blank">新窗口打开3D图片</a> --><a href="http://localhost:9999/" @click="transmit()" rel="nofollow noreferrer" target="_blank">新窗口打开3D文件</a>
  </el-button>
  

  import { setCookie, getCookie, delCookie } from '@utils/cookie';data(){return{fileList: [ // 跨域3d项目传递的文件列表{url:'https://````/2020/01/06/brain_A.vtk',name: 'brain_A.vtk'},{url:'https:````/brain_B.vtk',name: 'brain_B.vtk'},{url:'https://````/brain_C.vtk',name: 'brain_C.vtk'},{url:'https://```/2020/01/06/brain_D.vtk',name: 'brain_D.vtk'}],girdertoken: '' // 跨域3d项目传递的token信息}},
  created(){// 获取token信息 项目token保存在sessionStorage中this.girdertoken = sessionStorage.getItem('token')},
  methods:{transmit(){let base64 = new this.Base64();setCookie('transmit-files', JSON.stringify(this.fileList), 10080);setCookie('transmit-token', this.girdertoken, 10080);},
  }
  

• 3d项目代码
  1、项目存在包js-cookie 所以不需要封装cookie了，但是需要解密的函数

  import cookies from 'js-cookie';
  

  2、一进入页面就需要解析 写在created里面

  data() {return {fileLists:[ // 接收平台传过来的的文件列表],token: '' , // 接收平台传过来的token};},created() {this.fileLists = JSON.parse(this.getCookie('transmit-files')) // 接收传过来的file列表this.token = cookies.get('transmit-token')},methods: {getCookie(c_name) {if (document.cookie.length > 0) {console.log('document.cookie',document.cookie)var c_start = document.cookie.indexOf(c_name + "=");if (c_start != -1) {console.log('c_start',c_start)c_start = c_start + c_name.length + 1;var c_end = document.cookie.indexOf(";", c_start);if (c_end == -1)c_end = document.cookie.lengthconsole.log('document.cookie.substring(c_start, c_end)',document.cookie.substring(c_start, c_end))return unescape(document.cookie.substring(c_start, c_end))}}return ""},
  }
  

cookie传参问题处理

1、cookie传参只有在同源的网络才可以进行传参
如上述地址都是localhost本地地址
2、cookie传参有大小限制，而且cookie中的值会随接口请求进行携带，如果携带值过长就会报403，请求头过大无法发送请求的错误

问题处理：
可以从url地址中进行传递token

window.open(path+`?token=${token}`)

网页打开即解析地址获取token存储到sessionStorage中

serilizeUrl(url){ // 解析url地址参数let urlObject = {}; // 定义一个对象用来保存最后的值if(/\?/.test(url)){// 正则test（）方法只需要待测试字符串中包含了要测试的字符串就是ture// /\?/.test(url):url中是否含有? 返回false或者truelet urlString = url.substring(url.indexOf("?")+1);// 这里调用了字符串的两个方法 indexOf()和substring()// indexOf()返回字符串中？的索引下标 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置// substring()字符串截取方法 substring(strat,end) 方法用于提取字符串中介于两个指定下标之间的字符 strat起始位置 end结束位置如果没有设置就一直截取到字符串末尾// url.substring(url.indexOf("?")+1)截取从?后面所有字符let urlArray = urlString.split("&");// 字符串的split()方法 字符串转数组,数组每一项都类似a=1的字符串for(let i=0;i<urlArray.length;i++){// 遍历每一项let urlitem=urlArray[i];let item =urlitem.split("=");// 对数组每一项进行再次分割urlObject[item[0]] = item[1];// 添加到对象中}return urlObject;}return null;},

let arr=this.serilizeUrl(window.location.href)if(arr){if(arr.token){sessionStorage.setItem('token', arr.token)this.token = arr.token}}if(sessionStorage.getItem('token')){console.log(sessionStorage.getItem('uid'))// this.uid = sessionStorage.getItem('uid')this.token = sessionStorage.getItem('token')}