精华内容
下载资源
问答
  • Vue获取页面元素的相对位置
    千次阅读
    2021-01-15 20:21:00

    今天在开发源码一处发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的我问题

    发现问题

    当我滚动到元素的位置时候,我想把元素固定在头部

    // html 结构

    • 首页推荐
    • 最新发布

    export default {

    data(){

    return {

    isFixed:false,

    }

    },

    mounted(){

    if(this.$refs.subnav.getBoundingClientRect){

    this.scrollTop(this.$refs.subnav.getBoundingClientRect())

    }

    },

    methods:{

    // 这是封装的一个方法

    scrollTop(h){

    console.log(h);

    this.utils.scrollTop((res)=>{

    this.isFixed = res.scrollH > h ? true :false;

    })

    }

    }

    }

    utils.js

    // 该函数主要功能返回,滚动的高度以及文档占比窗口高度的百分比

    utils.scrollTop 

    更多相关内容
  • 最近,一个网友问,怎么想做个数据调查报告,都被页面加载403、页面内容加载不到、vue页面劝退。什么?这点小事还解决不了?vue页面不支持?我立马甩了这篇代码给他! vue页面 403页面 二、代码分析 没改代码前的...

    来源地址:https://juejin.cn/post/7032620393622044686

    【每日一点事】

    毛豆和黄豆其实是一个东西,毛豆是年轻的时候,黄豆是已经年老的时候。
    image.png

    一、前言

    最近,一个网友问,怎么想做个数据调查报告,都被页面加载403、页面内容加载不到、vue页面劝退。什么?这点小事还解决不了?vue页面不支持?我立马甩了这篇代码给他!
    vue页面
    image.png
    403页面
    image.png

    二、代码分析

    没改代码前的代码(获取不到vue页面和403页面)

    	public static void main(String[] args) {
    		// 这里举例找了个vue页面(小牛翻译)的来测试
    		String nowHtml = "https://www.niutrans.com";
    		URL url;
    		try {
    			url = new URL(nowHtml);
    			URLConnection openConnection = url.openConnection();
    			InputStream inputStream = openConnection.getInputStream();
    			byte[] b = new byte[1024];
    			int len;
    			while ((len = inputStream.read(b)) != -1) {
    				System.out.println(new String(b, 0, len));
    			}
    			inputStream.close();
    		} catch (Exception e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    	}
    

    改动后的代码需要的依赖

    		<!-- 获取页面内容依赖 -->
    		<dependency>
    			<groupId>net.sourceforge.htmlunit</groupId>
    			<artifactId>htmlunit</artifactId>
    			<version>2.43.0</version>
    		</dependency>
    

    改动后的代码

    
    	public static void main(String[] args) {
    		// 这里举例找了个vue页面(小牛翻译、b站页面)的来测试
    		String nowHtml = "https://www.niutrans.com";
    //		String nowHtml = "https://www.bilibili.com";
    		getWebBody(nowHtml);
    	}
    
    	public static void getWebBody(String nowHtml) {
    		WebClient webClient = new WebClient(BrowserVersion.CHROME);
    		webClient.getOptions().setActiveXNative(false);// 不启用ActiveX
    		webClient.getOptions().setCssEnabled(false);// 是否启用CSS,因为不需要展现页面,所以不需要启用
    		webClient.getOptions().setUseInsecureSSL(true); // 设置为true,客户机将接受与任何主机的连接,而不管它们是否有有效证书
    		webClient.getOptions().setJavaScriptEnabled(true); // 很重要,启用JS
    		webClient.getOptions().setDownloadImages(false);// 不下载图片
    		webClient.getOptions().setThrowExceptionOnScriptError(false);// 当JS执行出错的时候是否抛出异常,这里选择不需要
    		webClient.getOptions().setThrowExceptionOnFailingStatusCode(false);// 当HTTP的状态非200时是否抛出异常,这里选择不需要
    		webClient.getOptions().setTimeout(15 * 1000); // 等待15s
    		webClient.getOptions().setConnectionTimeToLive(15 * 1000);
    		webClient.waitForBackgroundJavaScript(10 * 1000);// 异步JS执行需要耗时,所以这里线程要阻塞30秒,等待异步JS执行结束
    
    		HtmlPage page = null;
    		try {
    			page = webClient.getPage(nowHtml);// 加载网页
    		} catch (Exception e) {
    			e.printStackTrace();
    		} finally {
    			webClient.close();
    		}
    		String htmlStr = page.getBody().asXml();
    		System.out.println(htmlStr);
    	}
    

    结果展示

    image.png

    三、结论

    在页面请求中,会存在http(s)证书是否有效问题,也会存在重定向(403)页面,并且还有存在页面是靠js动态渲染的(vue页面)。因此,在获取页面内容中,我们需要考虑的诸多问题。

      HtmlUnit都解决了这些问题,并且不需要像其他工具类那样,需要再配合浏览器,安装一个浏览器装置等等。总得来说,HtmlUnit功能很全,使用起来也很方便!

    【最后】

    感谢你看到最后,如果你持有不同的看法,欢迎你在文章下方进行留言、评论。

    我是南方者,一个热爱计算机更热爱祖国的南方人。

      如果文章内容仅供学习参考,如有侵权,非常抱歉,请立即联系作者删除。

    展开全文
  • Vue页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 Vue页面又是大势所趋,写起来也不止是一个爽,当然也可以选择多页面 但即使是多页面在面对...
  • 本文主要为大家详细介绍了vue微信分享功能,vue实现当前页面分享其他页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。本文实例为大家分享了vue微信分享展示的具体代码,供大家参考,...

    本文主要为大家详细介绍了vue微信分享功能,vue实现当前页面分享其他页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

    本文实例为大家分享了vue微信分享展示的具体代码,供大家参考,具体内容如下

    首先以分享给朋友为例

    1、先看官方文档

    wx.onMenuShareAppMessage({

    title: '', // 分享标题

    desc: '', // 分享描述

    link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

    imgUrl: '', // 分享图标

    type: '', // 分享类型,music、video或link,不填默认为link

    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空

    success: function () {

    // 用户确认分享后执行的回调函数

    },

    cancel: function () {

    // 用户取消分享后执行的回调函数

    }

    });

    2、vue分享踩的坑

    * 1、微信分享中获取动态的url

    * 2、 微信二次分享自动添加的参数 form=singlemessage

    * 3、vue中各个页面都可以调用分享

    3、直接代码分析

    为了保证每个页面都可以调起微信分享,需要在vue根组件中,添加 watch监听

    代码

    watch: {

    // 监听 $route 变化调用分享链接

    "$route"(to, from) {

    let currentRouter = this.$router.currentRoute.fullPath;

    if(currentRouter.indexOf('userShare') == -1){

    //如果不是userShare分享页面,则分享另外一个接口

    this.shareOut();

    }else{

    this.shareOutTwo();

    //当前页面是userShare页面时分享调用另外一个接口

    }

    }

    },

    4、shareOut()函数

    let signStr = ''; //sha1加密字符串

    let timestamp = 1473254558; //时间戳

    let nonceStr = 'shupao';

    var obj = {

    title:"", //标题

    desc:"文字描述", //描述

    link:"http://www.XXXXXX.com/wx/pub/sr/simpleRegister.do",

    imgUrl:"http://XXXXXXXXX.com/picactive.jpg"

    };

    this.$ydkAjax({

    SENTYPE: "GET",

    url: this.$domain + '/wx/pub/common/getJsApiTicket.json', //自己服务器获取jsapi_ticket接口

    params: null,

    successFc: (response) => {

    //拼接sha1加密字符串

    signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' + window.location.href;

    var signature = SHA1(signStr);

    wx.config({

    debug: false,

    appId: "wx6957b3a945a05e90", //appId

    timestamp: timestamp, //时间戳

    nonceStr: nonceStr, //加密需要字符串(自己定义的)

    signature: signature, //sha1加密后字符串

    jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage']

    });

    wx.ready(function () {

    //分享到朋友圈"

    wx.onMenuShareTimeline({

    title: obj.title,

    link: obj.link, // 分享链接

    imgUrl: obj.imgUrl, // 分享图标

    success: function () {

    // console.log('分享到朋友圈成功')

    },

    cancel: function () {

    // console.log('分享到朋友圈失败')

    }

    });

    //分享给朋友

    wx.onMenuShareAppMessage({

    title: obj.title, // 分享标题

    desc: obj.desc, // 分享描述

    link: obj.link, // 分享链接

    imgUrl: obj.imgUrl, // 分享图标

    success: function () {

    // console.log('分享到朋友成功')

    },

    cancel: function () {

    // console.log('分享到朋友失败')

    }

    });

    })

    },

    isLayer: false

    })

    5、需要注意的事

    *1、url是直接通过 window.location.href 获取的,不是使用 window.location.href.split(“#”)[0]来获取, 因为我的vue项目是通过hash模式来进行路由跳转的 , 直接使用 window.location.href.split(“#”)[0]会导致签名失败

    //拼接sha1加密字符串

    signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' + window.location.href

    *2、而且我们要在当前页面分享出去之后 , 其他用户打开之后 不是当前分享出去的页面 ,这就需要 调整 shareOut()函数中 obj对象中的 link参数为其他页面链接

    6、link参数

    上述 5 问题中的加密字符串汇总的 url 和 分享对象中 link中的页面链接可以不用保持一样,因为本来就是要在当前页面分享出去其他页面的链接。网上我看到有人说这两个必须要保持一样,其实没有必要, 除非你只是简单的在vue项目中的其中一个页面做分享 , 然后只分享当前页面才需要让二者保持一致性。

    相关推荐:

    展开全文
  • Jsoup 抓取页面的数据  需要使用的是jsoup-1.7.3.jar包 如果需要看文档我下载请借一步到官网:http://jsoup.org/   这里贴一下我用到的 Java工程的测试代码  package com.javen.Jsoup; import java.io....
  • 关于vue页面跳转后,如何每次进入页面时都能获取后台数据watch+mouted首先说问题。一.页面的数据来自后台,即会发起请求从后台取值。二.子组件的数据刷新的问题,即每次进入父组件的时候,其相关子组件的数据需要...

    关于vue的页面跳转后,如何每次进入页面时都能获取后台数据

    watch+mouted

    首先说问题。

    一.页面的数据来自后台,即会发起请求从后台取值。

    二.子组件的数据刷新的问题,即每次进入父组件的时候,其相关子组件的数据需要重新从后台取值。

    1.答:

    关于第一个问题。一般来讲我们会在vue的created的生命周期中实现,向后台发起请求获取数据。

    但是这样会带来一个问题。

    1.1.我需要每次进入页面的时候都从后台获取数据!

    而created事件很明显是不能实现的。

    稍微解释下

    首先理解单页面应用,个人理解,最后的vue项目打完包后只有一个index.html。说明单页面应用就是字面上的意思,只有一个页面的应用!

    那么页面跳转是什么?借助路由模拟页面跳转。

    情景描述:单页面应用中假设现有A、B两个页面,用户进入页面首先进入A页面,此时A创建,触发一系列生命周期包括created。再由A经路由跳到B,此时B创建,触发一系列生命周期包括created。用户操作到这一步都没有任何问题。

    问题开始,用户从B页面经过路由跳回A,此时A不会触发created!因为已经触发过了!所以A不会向后台发起请求获取数据。同样,当再次从A跳到B时,B也不会经过created。

    一般来讲,这种情况属于正常的,但是,如果A、B的数据来源必须经过后台请求,即从A跳往B的时候,实际上提交了与B相关的数据到了后台,然后后台处理后与B页面之前的数据不同!此时如果B页面没有从后台请求数据,必然是错误的!

    解决方案:我个人的解决方案。

    监听路由,在需要每次进入都要从后台获取新数据的页面例如B页面,监听路由的变化

    e0361af9d3b9e6152708e52ca145610f.png

    init方法即为每次进入此页面都需要执行的方法,请求数据的方法也在里面。

    2.答:

    关于第二个问题。一般来讲子组件的数据来源有两种。

    2.1由父组件传入子组件:

    这种情况使用第一个问题的解决方案后,在init方法中加载出子组件需要的数据再传入子组件即可解决。

    2.2由子组件自己向后台发起请求获取最新数据:

    这种情况,有点类似第一个问题,子组件需要有一个init方法,而不是将获取数据的方法直接写在created中,应该在created中调用init。父组件的init方法中,调用子组件的init方法。

    父组件:

    6625ef4a9a8a8675590a83cc7ab66db0.png

    d2f5edc7da580148a25431891937cb2b.png

    efc6620996d7e8d3fe2cade3eb6c3843.png

    子组件:

    07fe8f808fec81714f2d90d27b8d29f6.png

    以上为个人解决方案,

    如果各位看到的朋友有更好的想法,望请指点。有其他的方案也希望能讨论讨论。

    展开全文
  • 主要介绍了浅谈Vue路由快照实现思路及其问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 获取HTML源码

    千次阅读 2019-10-22 17:52:52
    参考资料:https://www.jianshu.com/p/f6f3f00cd923 <template> <div id="pp" @click="printDom"> <tit01 /> <base01 /> <list01 /> <floor01 />.../div>...
  • Vue页面实现打印功能

    2021-11-05 20:24:05
    实现打印功能,需要安装一个插件vue-print-nb,使用方法如下 ...3.页面使用 ** 需要打印的内容 <div id="printMe">我需要被打印</div> **点击打印,即可预览和打印内容 <buttom v-print="#pri..
  • VUE页面跳转传多个参数

    千次阅读 2020-12-23 05:03:13
    Nextexport default {data() {rerurn {year: '', day: ''}},methods: {goNext() {this.$router.push({name: 'test', params: {year: this.year, day: this.day}})}}}A页面传递{{this.$route.params.year}}{{this.$...
  • 今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我的实现代码总结如下:项目使用的是vue-...
  • 最近在评估项目时,要开启评估平台,查看平台和保存平台,感觉非常繁琐,开发了一款可以获取评估平台数据,查看项目排期和直接保存数据到数据库的chrome插件,由于我需要使用之前vue封装的一个日历插件,这里就用vue...
  • 一般需要实现这些,你可以使用 vue的服务端渲染。 如果在已经有的项目上改动。改成这个工作量就会比较大。 一般在已有的项目上想要改成,能被搜索引擎抓取,还有一种办法。 既然 搜索引擎抓取 只会抓取 title 这些,...
  • 由于vue站点有不同的url和参数,处理搜索引擎访问代理转发时需要修改如下配置即可抓取带参数的页面数据 location / { if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|...
  • Vue页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 Vue页面又是大势所趋,写起来也不止是一个爽,当然也可以选择多页面 但...
  • vue-:锤子页面源代码

    2021-03-23 10:38:54
    锤子商城的技术栈是棱角分明,罗永浩的产品,感觉还是挺简洁美观页面商品数据是通过爬虫抓取然后写入数据库的注:。项目数据与锤子商品数据并无关系,并不是通过代理代理请求的锤子商城接口 技术栈 vue2 + vuex + ...
  • 上一篇说了vue页面解决解决SEO的问题 只是用php预处理了meta标签 但是依然没有内容填充,所以对于内容抓取依然有些乏力,只是解决了从无到有的问题 那接下来可以更进一步的预填充内容了 预填充内容 这里依然...
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼我们都知道我们网站的页面要想被...一、查看百度蜘蛛是否抓取页面的方法这就要查看它的日记文件,一般是以log为后缀。百度蜘蛛是百度用于抓取网页的程序叫,我们查看网...
  • 学习seo的人经常在网上看到一句话:搜索引擎蜘蛛跟浏览器差不多,都是抓取页面。那么到底哪些一样哪些不一样?Ethan就通过浏览器帮助大家理解搜索引擎蜘蛛怎样抓取页面。首先看一张图,是用firebug(firefox浏览器的...
  • 当出现404页面怎么办?应该如何处理404页面?我们都知道404页面是用户在输入错误的链接时,显示的返回页面,但是作为SEOer来说,一切与用户有关的事,我们都不能忽略, 当用户已经点击进来,难道要因为出现的404页面...
  • 提到VUE大家都很熟悉,VUE可以做很多东西,包括SPA单页面应用,WEBAPP应用,小程序应用等等,但是你们有没有考虑过过,使用VUE来制作一款抓取网页数据(文字+截屏)的扩展呢?敢想就要敢做,Let's Go !   1. 开发...
  • component: studentInfo, meta: { title: 'title2' } } ] }) 二、js入口文件main.js中添加代码: router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title ...
  • 使用 Vue.js 开发的聚合应用。通过爬虫抓取平时浏览的网站,省去逐个点开网页的时间。
  • 此外我还试过用 vue-meta 设置单页面的meta,facebook一样没有抓取 如图所示,只能拿到index.html页面写的title和网址。 请问,vue页面分享到到facebook 并设置显示的标题和图片等元素该怎么做呢?
  • 上两个星期做了一个公司用于推广的小活动,选择了Vue的单页面应用。【Vue页面应用+微信网页开发】套餐赠送了超值大坑,在这里给大家分享一下我的辛酸,啊不,填坑记录。主要是前端填坑的实现,后台方面没有太多...
  • 需求:vue 前端做错误日志捕捉记录 import Vue from 'vue' import { errorLog } from '@/utils/global' /** #处理Vue异常的方法 #处理错误信息, 进行错误上报 #err错误对象 #vm Vue实例 #`info` 是 Vue 特定的错误...
  • vue调用打印机打印页面

    万次阅读 热门讨论 2019-02-27 17:40:22
    这里使用的是一个vue的插件vue-print-nb 1.npm installvue-print-nb --save。 2.因为是插件,所以要use一下。 3.给要打印的区块添加一个id,这时候给点击打印的按钮添加一个指令v-print,指定为要打印的区域id...
  • 前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说。 1.SSR服务器渲染; 2.静态化; 3.预渲染prerender-spa-plugin; 4....
  • 更好的 SEO:传统的 spa 页面数据都是异步加载,搜索引擎爬虫无法抓取,服务端渲染(SSR)使搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,解决 vue 项目的 seo 问题 更快的内容到达时间 (首屏加载更快):请求...
  • 这种方法主要针对于前端处理。后端返回的数据是一个list,前端去将这个list变为excel表格,这个导出表格后端也可以做。 ...<el-button @click="downLoad">下载excel</el-button> <script>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,049
精华内容 1,619
关键字:

vue抓取页面