雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码
分享到：

前端之旅 第6页

去分类设置中添加分类描述吧

vue 异步动态组件加载方案

2021-04-03admin阅读(1402)评论(0)

今天想到一个方案, 想动态加载不同的组件, 尝试了几种办法,

先看看官方文档说: https://cn.vuejs.org/v2/guide/components-dynamic-async.html

这里的异步组件工厂函数也可以返回一个如下格式的对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

 

大概看明白了, 然后我们尝试一下, 上才艺:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style lang="less" scoped></style>
<template>
  <div class="page">
    <component v-bind:is="componentFile" />
  </div>
</template>
 
<script>
/** 名片定制
* Created by iyahe@qq.com
* Date: 2021/4/3
* Time: 12:25
* Description:
*/
export default {
  name: "index",
  mixins: [],
  data() {
    return {
      componentFile: null
    }
  },
  computed: {},
  watch: {},
  components: {},
  methods: {
    async render () {
      const pathName = await this.getName();
      this.componentFile =  ()  => ({
        component: import(`./${pathName}`),
        loading: { template: '<div>组件加载中</div>' },
        error:  { template: '<div>组件加载错误</div></div>' },
        delay: 200,
        timeout: 10000
      });
    },
    async getName(){
     return new Promise(resolve => {
       setTimeout(_=>{
         resolve('page/auto')
       }, 1000)
     })
    }
  },
  async created() {
    await this.render()
  },
  mounted() {}
}
</script>

通过setTimeout模拟一个异步获取组件名称, 然后加载组件!

 

 

泰山VR全景-带你一睹泰山风景-泰山之巅

2021-03-26admin阅读(4767)评论(0)

特别说明:

该360度全景是在泰山之巅天街附近拍摄，这里可以观看泰山全貌，从南天门到天街上山的这段路程，是大量的游人，香客上山必经之路，人来人往，热闹非凡，您可以全视角观看这段路程壮丽景观。

真的很期待有一天能亲自登上山顶去看看~

全景作品来自 芊云全景摄影师: pano360

https://vr.he29.com/v3/tour/1666.html

VR全景怎么发?教你使用手机来拍摄VR照片-体验720全景乐趣。

2021-03-21admin阅读(4723)评论(0)

文章来源: https://9kvr.cn/article/content/53.html

VR全景是基于全景图像的真实场景虚拟现实技术，是虚拟现实技术中非常核心的部分。全景是把相机环360°拍摄的一组或多组照片拼接成一个全景图像，通过计算机技术实现全方位互动式观看的真实场景还原展示方式。

首先准备工作:

  1. 1. 准备一个安卓手机

安卓使用安卓手机下载谷歌相机App;
谷歌相机下载方法: 可以自己去百度;

建议下载酷安app安装太极将谷歌相机安装在太极app中

因为 国内安卓手机兼容性问题, 谷歌相机在大部分手机上会闪退, 太极 app 可以阻止手机 app 闪退
酷安地址: https://www.coolapk.com/
app 如图, 谷歌相机如图;
下载 酷安 后, 直接搜索 谷歌相机  即可安装
安装成功后打开 谷歌相机 app, 如果闪退;
则在酷安 搜索: 太极  下载太极app
下载成功后,  使用 太极 创建应用, 然后找到谷歌相机 创建即可;
创建成功后即可打开 谷歌相机 app, 选择拍摄全景
然后根据手机提示, 将准心对准 app 上面的点, 即可自动拍摄, 直至所有点全部拍摄完成, 等待合成后, 全景照片就完成了!
然后我们就可以 上传到 芊云全景 进行制作了;
制作成功后, 我们就可以把全景照片分享给好友, 进行 720 旋转查看了。

三种微信小程序VR实现方法

2021-03-15admin阅读(16060)评论(0)

经常有人会问我小程序里怎么实现vr, 今天简单介绍两种小程序里vr的实现方法; 给大家提供参考;

第一种: 使用 photo-sphere-viewer 插件

文档地址: https://photo-sphere-viewer.js.org/

很简单的加载一张全景图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>芊云全景VR预览全景</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
  <script src="//cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #viewer {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
<div id="viewer"></div>
<script>
  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: '全景图地址'
  });
</script>
</body>
</html>

具体的详细用法可以查看开发文档, 这个插件可以实现很多功能, 包括热点, 视角, 等等, 感兴趣可以试试

2. 第二种, 使用 krpano

文档地址: https://krpano.com/home/

krpano 是收费软件, 需要授权才可以使用, 并且比较复杂一些, 感兴趣的可以去搜索相关资料

初始化一张全景, 需要先使用krpano引擎把全景做切片,

1
2
3
4
5
6
7
embedpano({
          swf: "tour.swf",
          xml: "playxml.html"
          html5: "only+webgl+preserveDrawingBuffer",
          mobilescale: 0.5,
          passQueryParameters: true
});

所有的配置及参数都在 xml 文件中;

具体可查看: https://krpano.com/docu/xml/

 

第三种: 将全景图上传到芊云全景制作生成h5链接, 直接 iframe 加载

WechatIMG7

首选打开芊云全景: https://vr.he29.com

根据提示上传制作h5, 制作完成后点击复制链接, 可以得到一个h5链接:

例如: https://vr.he29.com/d/604e4cceefc5e06.html

 

重点来了, 可以直接在地址栏上加上参数: https://vr.he29.com/d/604e4cceefc5e06.html?h=1

就可以屏蔽全景上面有关 芊云全景的一些UI信息, 这样嵌入网页就很ok了~

最终效果如下:

使用ffmpeg.wasm在前端html网页上压缩视频解决方案

2021-03-12admin阅读(8903)评论(0)

大名鼎鼎 的 ffmpeg 一直在用, 用来压缩转码视频特别方便, 今天偶然间发现, 居然可以在网页上压缩视频, 于是简单的尝试了一下: 做出记录:

github仓库地址: https://github.com/ffmpegwasm/ffmpeg.wasm

首先, 我用手机拍了一段视频, 一共有30M

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script>
<style>
      html, body {
          margin: 0;
          width: 100%;
          height: 100%
      }
      body {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
</style>
</head>
<body>
<h3>视频前端压缩方案</h3>
<video id="output-video" controls></video><br/>
<input type="file" id="uploader">
<p id="message"></p>
<script>
const { createFFmpeg, fetchFile } = FFmpeg;
const message = document.getElementById('message');
const ffmpeg = createFFmpeg({
log: true,
progress: ({ ratio }) => {
message.innerHTML = `Complete: ${(ratio * 100.0).toFixed(2)}%`;
},
});
const transcode = async ({ target: { files }  }) => {
const { name } = files[0];
message.innerHTML = 'Loading ffmpeg-core.js';
await ffmpeg.load();
message.innerHTML = 'Start transcoding';
ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
await ffmpeg.run('-i', name,  'output.mp4');
message.innerHTML = 'Complete transcoding';
const data = ffmpeg.FS('readFile', 'output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], {
type: 'video/mp4'
}));
}
document.getElementById('uploader').addEventListener('change', transcode);
</script>
</body>
</html>

压缩之后, 一共是 2.3 M, 就是速度有点慢, 效果还可以, 中途会下载一个 25M 左右的js文件,  因此, 不建议在移动端使用!

上面代码粘贴到html可以直接使用

要SSR? NUXT项目从初始化到部署服务器流程全记录

2021-03-01admin阅读(4108)评论(0)

首先,简单介绍一下, nuxt.js 是什么

Nuxt.js 是一个 Vue.js的SSR通用框架，最常用的就是用来作SSR（服务器端渲染）。
首先说下 SSR，最近很热的词，意为 Server Side Rendering（服务端渲染），目的是为了解决单页面应用的 SEO 优化 的问题，对于普通的一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，在国内, 百度/搜狗/等等的搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息(谷歌可以抓取vue等框架信息)。这也就是我们使用 nuxt.js 的主要原因,

目前常见的SSR开源框架(方式)有三个:

  1. nuxt.js 官网从仓库: https://github.com/nuxt/nuxt.js
  2. vue 官方的SSR方式: https://ssr.vuejs.org/zh/
  3. vue-hackernews-2.0, https://github.com/vuejs/vue-hackernews-2.0

今天我们主要讲讲目前最成熟, 文档最详细, 拥有大量问题解决方案的nuxt.js

nuxt.js 优点:

  1. 基于 Vue.js
    自动代码分层
    服务端渲染
    强大的路由功能，支持异步数据
    静态文件服务
    ES6/ES7 语法支持
    打包和压缩 JS 和 CSS
    HTML头部标签管理
    本地开发支持热加载
    集成ESLint
    支持各种样式预处理器： SASS、LESS、 Stylus等

1.安装与初始化

官网文档: https://www.nuxtjs.cn/guide/installation

脚手架工具: https://github.com/nuxt/create-nuxt-app

脚手架安装成功后, yarn create nuxt-app <项目名> 创建一个项目,

之后开始选择配置:

未命名

选择完成后自动开始安装!

1
2
3
4
5
6
7
8
9
🎉  Successfully created project nuxt.js
  To get started:
cd nuxt.js
yarn dev
  To build & start for production:
cd nuxt.js
yarn build
yarn start
✨  Done in 175.37s.

2.启动项目

根据上述提示启动即可!

3. 打包编译, 怎么把项目部署到服务器

首先我们build之后, 拷贝

.nuxt

nuxt.config.js

package.json

这三个文件到服务器即可

拷贝到服务器后, 首先安装依赖, cnpm install

安装成功后, 执行 npm run start

如果没有错误, 会启动项目, 和本地启动一样, 其实这样我们就可以访问了,

开启 liunx 服务器的内外防火墙端口 , 然后浏览器直接访问: 你的 ip:端口号

4. 配置域名访问

当然只能带端口访问肯定不是我们想要的结果, 那么我们就需要配置 域名, 域名解析到服务端这些流程就不说了,

我们找到nginx的配置文件, 在 http{}模块里面新增:

1
2
3
upstream vrserver {
  server 0.0.0.0:3356;
}

其中ip地址写: 0.0.0.0:端口号

之后再新建一组 server{} ;正常nginx配置就不描述了,

比如我要配置成功: http:xxxx.com/v2/ 作为访问地址, 那就在 xxx.com的nginx 里面新建

1
2
3
4
5
location /v2/ {
  proxy_pass   http://vrserver;
  proxy_set_header Origin '';
  index  index.html index.htm;
}

新建成功后, 重启nginx, 然后访问 http:xxxx.com/v2/ 就可以访问到我们的服务了

5. 怎么让我们的 nuxt.js服务一直启动

现在如果我们关闭终端, 那服务就关闭了, 接下来我们安装 pm2, 让服务在后台一直运行

关于pm2 的介绍: http://blog.he29.com/wblog/?p=1186

然后新建一个 pm2.config.json

1
2
3
4
5
6
7
8
9
{
  "apps": {
    "name": "vr-sever",
    "script": "npm run start",
    "ignore_watch": [
      "node_modules"
    ]
  }
}

 

简单配置即可, 然后我们启动: pm2 start pm2.config.json

6 其他问题

  1. 如何配置https
  2. 如果让代码修改后自动重启

7.项目体验

目前芊云全景使用的是 nuxt.js 的服务, 具体体验请浏览:  https://vr.he29.com/v3/

制作抖音照片会唱歌-吗咿呀嘿, 除了使用Avatarify,现在官方也出滤镜支持了

2021-03-01admin阅读(2397)评论(0)

照片会唱歌已经火了一周左右了,

之前我发布了

 警惕,火爆抖音的~吗咿呀嘿~制作软件Avatarify, 需要PIN?别被锁了手机还不知情

来对目前安卓市场上一些冒牌的 Avatarify 软件提出质疑

之后又有了国产的: licolico 软件, 但是效果不尽人意;

安卓抖音吗咿呀嘿特效怎么做？摇头视频制作软件介绍

现在. 抖音自己已经出了影集:

叫做 : 吗咿呀嘿

如果搜不到, 可以: 抖音搜索/扫码: 芊云全景

打开我的抖音

第一条视频,

然后在视频上选择影集~

只需要上传一张照片即可制作

WechatIMG361

 

 

安卓抖音吗咿呀嘿特效怎么做？摇头视频制作软件介绍~

2021-02-26admin阅读(3876)评论(0)

上一篇博客我尝试失败了, 具体内容为: http://blog.he29.com/wblog/?p=1362

于是我发现了一个国产app 也可以做类似的摇头特效; 软件地址为: http://www.licolico.cn/

但是先别着急; 我还有话要说~~

首先我们下载并且注册; 注册之后需要上传一张照片, 然后提交他们服务器开始制作!

并且可能是创业小公司, 服务器算力有限, 等半天上传成功后, 我排到了1万位之后~~

22

截止目前, 已经过了20分钟, 我还排在5000位左右, 看评论说:

有人排队完了, 然后又告诉说制作失败

所以奉劝大家, 理性玩耍~

 

2.27日更新

辣眼睛了, 我传了一张图片, 做出来啥也不是, 原本想把视频拿出来给大家看看, 结果视频还无法下载~.总之就是浪费时间~

不如有空来看看VR全景吧~

VR全景介绍:  http://vr.he29.com/open/index

VR全景版本吗咿呀嘿: https://vr.he29.com/d/603a225b2790939.html

3.1 日补充

目前 抖音 已经有吗咿呀嘿这类视频的特效了. 喜欢的去抖音滤镜里面自己找一下!!!

抖音自带 滤镜介绍: http://blog.he29.com/wblog/?p=1383

 

警惕,火爆抖音的~吗咿呀嘿~制作软件Avatarify, 需要PIN?别被锁了手机还不知情

2021-02-26admin阅读(3200)评论(0)

最近抖音大火的 玛雅雅黑, 视频, 很多人一起摇头唱歌, 背后是一个 叫 Avatarify 软件, 今天看到朋友圈也有人在玩, 我就想下载看看, 因为应用商店没有, 所以我去百度找了一下:

我发现一些问题:

  1. 首先我搜索了几个网站, 发现下载下来的安装包大小差别很大, 最大的200M, 最小的只有6M
  2. 安装之后, 居然要我输入手机的PIN码

大家可能对PIN码有些陌生, 百度百科是这样定义的:

PIN码(PIN1)是电信名词，全称Personal Identification Number。是指SIM卡的个人识别密码。
手机的PIN码是保护SIM卡的一种安全措施，防止别人盗用SIM卡，如果启用了开机PIN码，那么每次开机后就要输入4-8位数PIN码。

正常情况下, 一个APP的运行, 根本用不到让用户输入pin码, 隐约间, 我已经觉得不对劲了,

我软件是安装的 电脑的模拟器上,安装一个200M的 Avatarify 和 一个 6M的Avatarify发现居然还是2个软件,

基本可以肯定了, 这个软件是钓鱼app, 专门用来骗pin的;

1

2

刚开始我还有点疑惑, 也许人家这个PIN 可能是 其他意思, 不是手机的PIN

于是我谷歌找了一下, 发现了 Avatarify 的官网, 是 : https://avatarify.ai/ ,

官方并没有提供 安卓的下载软件, 只有 ios的

既然官方都没有提供, 怎么会有 安卓版的 , 后来我发现:

3

某些网站居然还有这么多版本的,

那几本可以肯定, 都是骗人的, 大家一定要警惕~,

不要轻易把手机PIN码泄露~

2.28日补充:

安卓手机,如果想做此类视频, 可以看看此博客: http://blog.he29.com/wblog/?p=1368

ios 手机,请直接应用商店搜索:  Avatarify 安装即可~

3.1 日补充

目前 抖音 已经有吗咿呀嘿这类视频的特效了. 喜欢的去抖音滤镜里面自己找一下!!!

puppeteer 携带cookie 访问网站抓取数据

2021-02-25admin阅读(3953)评论(0)

puppeteer 携带cookie 访问网站方法!

首先我们在浏览器登陆需要操作的网站,然后复制cookie, 以百度为例:

获取到cooike为: (已随机插入字符)

1
const str = `BIDUPSID=096AB7423345867F5A96434DCF7F5652xxx; PSTM=1613050707; BAIDUID=096AB7423345867FC1716AC2C8000E64:FG=1; __yjs_duid=1_010c56ee9c14c5449c7413d2b2f54ce61613050720132; BD_UPN=123253; BDUSS=mZIZVpEenViS1BiV1g0UW9KN0s0VHdIdFpORHFLTzFFdmw4VVlqS3ZxMjFBbGRnSVFBQUFBJCQAAAAAAAAAAAEAAAAfwWAiztLKx9Ch0KHJr8CtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALV1L2C1dS9gS; BDUSS_BFESS=mZIZVpEenViS1BiV1g0UW9KN0s0VHdIdFpORHFLTzFFdmw4VVlqS3ZxMjFBbGRnSVFBQUFBJCQAAAAAAAAAAAEAAAAfwWAiztLKx9Ch0KHJr8CtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALV1L2C1dS9gS; MCITY=-131%3A; SIGNIN_UC=70a2711cf1d3d9b1a82d2f87d633bd8a03641615255we6KklgNRBlIez6rfDqs8gZJk8SPGONUQOymGg4V8Ijt1p4j3sfH2ECI%2By%2BuuCJAlucoZcWdgY08LNwx0rNcT6JdPPnMkJmYMDPz2JIJiC%2FKxIB%2FtDdvuZYvo%2FBnmg9eActqwCoXaCySISW%2FfhIXPiWEGvMpgyyms3gleDgJAJ6CGG%2FIigl5Ql%2FrRqAYxJEcP%2BOvWT2jFoPzl3hHQsCQSYEnUu1dvfPpnrzqn45qAnMJZwTiUaVmW781AwydoHbjh7hxHOo%2FDKjD1LQWULd5fCOZ7mQcPwKh4DMAsAl0MA%2BUiVVjq8Dh4Po0fHoyYhtd54327687073570082385922989507423; H_PS_PSSID=33517_33273_31253_33595_26350; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_645EC=31caQsoMI4ia1zLkj4bk7yZz3vt8nLAkQLfdzJNoBLr5e8IjFSLVucWtweofXaj%2FsFt1; delPer=0; BD_CK_SAM=1; PSINO=2; BD_HOME=1; sug=3; sugstore=1; ORIGIN=0; bdime=20100; BA_HECTOR=0g8k2k85al04a5ah6b1g3eg000q; BAIDUID_BFESS=096AB7423345867FC1716AC2C8000E64:FG=1`;

然后我们分析 puppeteer 的 setCookie 方法, 发现需要传入一个完整的cookie, 格式如下:

1
2
3
4
5
6
{
domain: '',
name: '',
value: '',
path: ''
}

因此我们需要先处理我们拿到的cookie为这样的格式

1
2
3
4
5
6
7
8
9
10
const cookie = [];
str.split(';').map((value, index) =&gt; {
const key = value.split('=');
const item= {};
item['domain'] = '.baidu.com';
item['name'] = key[0].replace(' ', '');
item['value'] = key[1].replace(' ', '');
item['path'] = '/';
cookie.push(item);
});

然后启动puppeteer,尝试登陆结果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(async () => {
puppeteer.launch({
headless: false, // 开启界面
devtools: true, // 自动开启 F12
}).then(async browser => {
const page = await browser.newPage();
await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4181.9 Safari/537.36")
cookie.map(async (value) => {
await page.setCookie(value)
})
await page.goto('https://www.baidu.com');
const html = await page.content();
const news = [];
const $ = cheero.load(html);
$('.s-news-rank-content li').map((index,val)=> {
const title = $(val).find('.title-content-title').text()
news.push(title);
})
page.close();
console.log(news)
});
})()

执行中我们可以看到cookie已经写入成功了;抓到数据如下:

1
2
3
4
5
6
7
8
9
10
[ '10人当选全国脱贫攻坚楷模',
  '一家12口持BNO护照投奔英国被遣返',
  '美舰穿航台湾海峡 东部战区回应',
  '25岁女孩欠二十万外债抑郁失联',
  '脱贫攻坚楷模奖章设计有4个含义',
  '交通运输部回应货拉拉女生跳车事件',
  '曝中国人寿员工未配合造假被解约',
  '天文科普专家承认性骚扰并致歉',
  '业主买车位停2辆车被物业制止',
  '涉事货拉拉司机开过饭店有房有车' ]

 

这是百度登陆后推荐的热点新闻列表, 表示我们的操作成功!

未命名

 

 

 

 

 

 

 

最终代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/**
* Created by 天明
* Date: 2021/2/25
* Time: 10:23
* Description:
*/
 
const puppeteer = require('puppeteer');
const cheero = require('cheerio')
const cookie = [];
const str = `BIDUPSID=096AB7423345867F5A96434DCF7F5652xxx; PSTM=1613050707; BAIDUID=096AB7423345867FC1716AC2C8000E64:FG=1; __yjs_duid=1_010c56ee9c14c5449c7413d2b2f54ce61613050720132; BD_UPN=123253; BDUSS=mZIZVpEenViS1BiV1g0UW9KN0s0VHdIdFpORHFLTzFFdmw4VVlqS3ZxMjFBbGRnSVFBQUFBJCQAAAAAAAAAAAEAAAAfwWAiztLKx9Ch0KHJr8CtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALV1L2C1dS9gS; BDUSS_BFESS=mZIZVpEenViS1BiV1g0UW9KN0s0VHdIdFpORHFLTzFFdmw4VVlqS3ZxMjFBbGRnSVFBQUFBJCQAAAAAAAAAAAEAAAAfwWAiztLKx9Ch0KHJr8CtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALV1L2C1dS9gS; MCITY=-131%3A; SIGNIN_UC=70a2711cf1d3d9b1a82d2f87d633bd8a03641615255we6KklgNRBlIez6rfDqs8gZJk8SPGONUQOymGg4V8Ijt1p4j3sfH2ECI%2By%2BuuCJAlucoZcWdgY08LNwx0rNcT6JdPPnMkJmYMDPz2JIJiC%2FKxIB%2FtDdvuZYvo%2FBnmg9eActqwCoXaCySISW%2FfhIXPiWEGvMpgyyms3gleDgJAJ6CGG%2FIigl5Ql%2FrRqAYxJEcP%2BOvWT2jFoPzl3hHQsCQSYEnUu1dvfPpnrzqn45qAnMJZwTiUaVmW781AwydoHbjh7hxHOo%2FDKjD1LQWULd5fCOZ7mQcPwKh4DMAsAl0MA%2BUiVVjq8Dh4Po0fHoyYhtd54327687073570082385922989507423; H_PS_PSSID=33517_33273_31253_33595_26350; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_645EC=31caQsoMI4ia1zLkj4bk7yZz3vt8nLAkQLfdzJNoBLr5e8IjFSLVucWtweofXaj%2FsFt1; delPer=0; BD_CK_SAM=1; PSINO=2; BD_HOME=1; sug=3; sugstore=1; ORIGIN=0; bdime=20100; BA_HECTOR=0g8k2k85al04a5ah6b1g3eg000q; BAIDUID_BFESS=096AB7423345867FC1716AC2C8000E64:FG=1`;
 
str.split(';').map((value, index) => {
const key = value.split('=');
const item= {};
item['domain'] = '.baidu.com';
item['name'] = key[0].replace(' ', '');
item['value'] = key[1].replace(' ', '');
item['path'] = '/';
cookie.push(item);
});
 
(async () => {
puppeteer.launch({
headless: false, // 开启界面
devtools: true, // 自动开启 F12
}).then(async browser => {
const page = await browser.newPage();
await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4181.9 Safari/537.36")
cookie.map(async (value) => {
await page.setCookie(value)
})
await page.goto('https://www.baidu.com');
const html = await page.content();
const news = [];
const $ = cheero.load(html);
$('.s-news-rank-content li').map((index,val)=> {
const title = $(val).find('.title-content-title').text()
news.push(title);
})
page.close();
console.log(news)
});
})()

 

  • 上一页
  • 1
  • ···
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • ...
  • 下一页
  • 共 16 页
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说：
  • Dawn 9年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图