Angular 7获取关键字列表的谷歌搜索结果计数

Posted 2023-03-08

【中文标题】Angular 7获取关键字列表的谷歌搜索结果计数

【英文标题】：Angular 7 get google search result count for list of keywords

【发布时间】：2019-09-16 10:46:25

【问题描述】：

已编辑

我有一个 CSVRecord 类型如下：

  export class CSVRecord 
    public id: any;
    public pubversion: any;
    public guid: any;
    public keywords: any;
    public seometriccount: any;
  

我正在尝试从我的 csv 读取值并将其显示在 td 中，我可以通过下面的代码来实现。

app.component.html

<input type="file" #csvReader name="Upload CSV" id="txtFileUpload" (change)="uploadListener($event)" accept=".csv" />
<table class="minimalistBlack" *ngIf="records.length > 0">
    <thead>
        <tr>
            <th>ID </th>
            <th>Pub version </th>
            <th>GUID </th>
            <th>Keywords </th>
            <th>SEO Metric count </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let record of records; let i = index;">
            <td> <span>record.id</span> </td>
            <td> <span>record.pubversion</span> </td>
            <td> <span>record.guid</span> </td>
            <td> <span> record.keywords </span> </td>
            <td> <span> record.seometriccount </span> </td>
        </tr>
    </tbody>
</table>

app.component.ts

import  Component, ViewChild  from '@angular/core';
import  CSVRecord  from './CSVModel';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)

export class AppComponent 
  title = 'Angular7-readCSV';

  public records: any[] = [];
  @ViewChild('csvReader') csvReader: any;

  uploadListener($event: any): void 

    let text = [];
    let files = $event.srcElement.files;

    if (this.isValidCSVFile(files[0])) 

      let input = $event.target;
      let reader = new FileReader();
      reader.readAsText(input.files[0]);

      reader.onload = () => 
        let csvData = reader.result;
        console.log(csvData);
        let csvRecordsArray = (<string>csvData).split(/\r\n|\n/);

        let headersRow = this.getHeaderArray(csvRecordsArray);

        this.records = this.getDataRecordsArrayFromCSVFile(csvRecordsArray, headersRow.length);
      ;

      reader.onerror = function () 
        console.log('error is occured while reading file!');
      ;

     else 
      alert("Please import valid .csv file.");
      this.fileReset();
    
  

  getDataRecordsArrayFromCSVFile(csvRecordsArray: any, headerLength: any) 
    let csvArr = [];

    for (let i = 1; i < csvRecordsArray.length; i++) 
      let curruntRecord = (<string>csvRecordsArray[i]).split(',');
      if (curruntRecord.length == headerLength) 
        let csvRecord: CSVRecord = new CSVRecord();
        csvRecord.id = curruntRecord[0].trim();
        csvRecord.pubversion = curruntRecord[1].trim();
        csvRecord.guid = curruntRecord[2].trim();
        csvRecord.keywords = curruntRecord[3].trim();
        csvRecord.seometriccount = curruntRecord[4];
        csvArr.push(csvRecord);

      
    
    return csvArr;
  

  isValidCSVFile(file: any) 
    return file.name.endsWith(".csv");
  

  getHeaderArray(csvRecordsArr: any) 
    let headers = (<string>csvRecordsArr[0]).split(',');
    let headerArray = [];
    for (let j = 0; j < headers.length; j++) 
      headerArray.push(headers[j]);
    
    return headerArray;
  

  fileReset() 
    this.csvReader.nativeElement.value = "";
    this.records = [];
  

输出：

现在，我需要在输出的最后一列中显示谷歌搜索结果计数，使用关键字（来自我上一列）。

例如：如果我的 Keywords 列包含诸如 - Amazon、Firestick、bla bla 之类的关键字，那么我的脚本应该在 google 中搜索这些关键字并显示第 1 页的结果计数。

说在第 1 页，有 5 个结果，应该显示 5 个。

1) 我如何做到这一点？ - 这可以使用 Angular 完成吗？

2) 请用代码解释一下，因为我是 Angular 7 的新手

【问题讨论】：

不应该是record.keywords吗？

是的，也尝试过record.keywords。但什么都没有显示

所以 keywords 值是一个数组 ['abc','qwe','rew'] ？每条记录

是的，理想情况下...这些值来自 excel 行。因此，如果我在 excel 中提供 10 个逗号分隔值，则需要在我的 td 中显示相同的值

好吧，如果它们以数组的形式出现，所以你有 record[1].keywords: ['abc','qwe','rew'], record[2].keywords: ['xxx','yyy','zzz'] 等等，join(',') 应该可以工作。请稍微调查一下，看看keywords 值是什么类型。另外，不要对所有内容都使用any 类型。尝试定义你的类型。否则你使用打字稿没有任何意义

【参考方案1】：

首先，您要实现的目标根本不是用户友好的。 请记住，每次您在模型或 UI 中更改某些内容时，Angular 都会尝试绑定您的单元格（我不确定，但有时即使您滚动页面，它也会尝试重新绘制 UI，因此您需要缓存结果，否则您将不断向 google 请求，这可能会导致您的客户端 IP 地址获取验证码并且没有结果返回给您）

所以尽量减少影响：

在 html 中：

  <td> <span> GetResultFromGoogle(record) </span> </td>

在 Ts 中：

    public GetResultFromGoogle(record:CSVRecord ):number 

    if(!record.seometriccount)
    
    // search google for result and get what you want, answering to this part, is for another quesiton
        this.httpClient.get(googleUrl, neededParamsForSearch).subscribe( data=>
        //extract result by Xpath  and set to your record
         return record.seometriccount = resultCount;
        );

    
    else
        return record.seometriccount;

    

【讨论】：

什么是googleUrl 和needParamsForSearch？能详细点吗？

对不起兄弟，但你必须更加努力：***.com/questions/16649167/…