Javascript access如何从客户端返回值并显示它们_Javascript_Html_Puppeteer

Javascript access如何从客户端返回值并显示它们

javascript html

Javascript access如何从客户端返回值并显示它们,javascript,html,puppeteer,Javascript,Html,Puppeteer,我在试验木偶演员，我制作了一个简单的刮板，可以从youtube上获取信息，效果很好。我想添加的是，用标记在我的网页上显示刮板上的信息。有没有办法做到这一点？我被卡住的地方是我的名称，而avatarUrl变量作为局部变量存在于我的scrap函数中，因此我如何获取这些值并将它们插入我的标记中。为了大致了解我的尝试，我做了：document.getElementById（'nameId'）=name{ 返回新承诺（（解决、拒绝）=>{ 设置超时（（）=>{ 解析（res.json（）） }, 1000

我在试验木偶演员，我制作了一个简单的刮板，可以从youtube上获取信息，效果很好。我想添加的是，用

标记在我的网页上显示刮板上的信息。有没有办法做到这一点？我被卡住的地方是我的

名称

，而

avatarUrl

变量作为局部变量存在于我的scrap函数中，因此我如何获取这些值并将它们插入我的

标记中。为了大致了解我的尝试，我做了：

document.getElementById（'nameId'）=namename

是一个局部变量，不能在范围之外访问它。感谢您的帮助。提前谢谢

const puppeter=require（'puppeter'）；
异步函数通道（url）{
const browser=wait puppeter.launch（）；
const page=wait browser.newPage（）；
等待页面。转到（url）；
const[el]=wait page.$x（'/html/body/ytd-app/div/ytd-page-manager/ytd-browse/div[3]/ytd-c4-tabbed-header-renderer/tp-yt-app-header布局/div/tp-yt-app-header/div[2]/div/div/div[1]/div/div/div/div[1]/ytd频道名称/div/div/div/div/yt格式字符串'）；
const text=await el.getProperty（'textContent'）；
const name=await text.jsonValue（）；
const[el2]=wait page.$x（'/*[@id=“img”]'）；
const src=await el2.getProperty（'src'）；
const avatarURL=await src.jsonValue（）；
browser.close（）；
console.log({
名称
化身URL
})
返回{
名称
阿瓦塔鲁尔
}
}
刮削通道（'https://www.youtube.com/channel/UCQOtt1RZbIbBqXhRa9-RB5g')
module.exports={
"海峡",，
}

“将刮取的名称放在这里”
“将抓取的头像url放在这里”
我在我的一个项目中使用过，这是我在后端和前端所做的
节点和Express JS后端
为了从前端访问后端，您需要在后端设置路由。所有前端请求都会重定向到这些路由。欲了解更多信息，请阅读此
例如Route.js代码
const router = require("express").Router();
const { callscrapeChannel } = require("../scrape-code/scrape");

router.route("/scrapedata").get(async (req, res) => {
  const Result = await callscrapeChannel();
  return res.json(Result);
});

module.exports = router;

const puppeteer = require('puppeteer');

async function scrapeChannel(url) {

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);

  const [el] = await page.$x('/html/body/ytd-app/div/ytd-page-manager/ytd-browse/div[3]/ytd-c4-tabbed-header-renderer/tp-yt-app-header-layout/div/tp-yt-app-header/div[2]/div[2]/div/div[1]/div/div[1]/ytd-channel-name/div/div/yt-formatted-string');
  const text = await el.getProperty('textContent');
  const name = await text.jsonValue();

  const [el2] = await page.$x('//*[@id="img"]');
  const src = await el2.getProperty('src');
  const avatarURL = await src.jsonValue();

  browser.close();
  console.log({
    name,
    avatarURL
  })
  return {
    name,
    avatarURL
  }
}

async function callscrapeChannel() {
const data = await scrapeChannel('https://www.youtube.com/channel/UCQOtt1RZbIbBqXhRa9-RB5g')
return data
}


module.exports = {
 callscrapeChannel,
}



scrapchannel.js文件
const router = require("express").Router();
const { callscrapeChannel } = require("../scrape-code/scrape");

router.route("/scrapedata").get(async (req, res) => {
  const Result = await callscrapeChannel();
  return res.json(Result);
});

module.exports = router;

const puppeteer = require('puppeteer');

async function scrapeChannel(url) {

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);

  const [el] = await page.$x('/html/body/ytd-app/div/ytd-page-manager/ytd-browse/div[3]/ytd-c4-tabbed-header-renderer/tp-yt-app-header-layout/div/tp-yt-app-header/div[2]/div[2]/div/div[1]/div/div[1]/ytd-channel-name/div/div/yt-formatted-string');
  const text = await el.getProperty('textContent');
  const name = await text.jsonValue();

  const [el2] = await page.$x('//*[@id="img"]');
  const src = await el2.getProperty('src');
  const avatarURL = await src.jsonValue();

  browser.close();
  console.log({
    name,
    avatarURL
  })
  return {
    name,
    avatarURL
  }
}

async function callscrapeChannel() {
const data = await scrapeChannel('https://www.youtube.com/channel/UCQOtt1RZbIbBqXhRa9-RB5g')
return data
}


module.exports = {
 callscrapeChannel,
}



在您的server.js文件中
const express = require("express");
const cors = require("cors");
const scrapeRoute = require("./Routes/routes");
require("dotenv").config({ debug: process.env.DEBUG });
const port = process.env.PORT || 5000;
const app = express();
app.use(cors());
app.use(express.json());
app.use("/api", scrapeRoute);
app.listen(port, () => {
  console.log(`server is running on port: http://localhost:${port}`);
});


您需要的依赖项（package.json）
前端
在前端，我使用了。您需要向后端发送get请求。你所要做的就是


<html>
  <head>
  <script>
   async function callScrapeData(){
      await fetch(`http://localhost:5000/api/scrapedata`)
    .then((res) => { 
     return new Promise((resolve, reject) => {
       setTimeout(()=> {
        resolve(res.json())
       }, 1000)
     })
        
}).then((response) => {
  console.log(response)
document.getElementById("nameId").innerHTML = response.name
document.getElementById("avatartUrlId").innerHTML = response.avatarURL
}

)
    }

  </script>
  </head>
  <body>
    <div>
      <h1>scrape</h1>
      <p id="nameId"></p>
      <p id="avatartUrlId"></p>
      <button onclick="callScrapeData()">click</button>
    </div>
    </body>
    </html>




异步函数callScrapeData（）{
待命(`http://localhost:5000/api/scrapedata`)
.然后（（res）=>{
返回新承诺（（解决、拒绝）=>{
设置超时（（）=>{
解析（res.json（））
}, 1000)
})
})。然后（（响应）=>{
console.log（响应）
document.getElementById（“nameId”）.innerHTML=response.name
document.getElementById（“avatarturId”）.innerHTML=response.avatarURL
}
)
}
刮


点击

记住，我的后端服务器正在端口5000上运行
输出

上面的代码只是一个示例，我已经对其进行了修改，以适合您的问题。我希望这对你有所帮助。这很简单。如果你有任何问题，请告诉我
注意：我假设您的后端有一个server.js文件，并且配置正确。
那么您试图在前端显示废弃的数据？如果您已经编写了路由器代码，请向我们显示您的路由器代码？是的，名称和头像URL@ksaha是否设置了任何路由？对不起，我无法处理否，我没有设置任何路由@ksaI正在获取错误标识符“scrapeChannel”已经声明
@ksabackend？还是在前端？在后端@ksaI再次编辑我的答案。我不知道你是如何实现这些代码的。我基本上做了你所做的一切，除了用一个异步函数包装我的await axios并在页面加载时调用该函数，但我得到了错误Uncaught（in promise）错误：请求失败，状态代码404
at e.exports（IsaxioError.js:10）at e.exports（IsaxioError.js:10）在XMLHttpRequest.l.onreadystatechange（isAxiosError.js:10）@ksa