新手对于经典传统编程“爬虫”与AIGC的融合的学习

经典传统编程实现"爬虫"

通过我们程序员的思维构造个大纲：

1.根据url 发送一个http请求 拿到html 2.根据html 分析，拿到电影的内容 3.返回内容

爬虫（Web Crawler 或 Spider）通常被认为是后端技术的一部分。它涉及到自动化地访问网页、解析网页内容、提取所需数据，并将其存储在数据库或其他存储系统中。

所以对于咱们前端工程师得把这后端问题转为前端问题这里就得使用到选择技术栈并配置环境，使用Node.js解决这些问题

1. Node.js 本身：作为基础运行环境，提供 JavaScript 在服务器端运行的能力，实现从前端到后端的无缝衔接。
2. npm（Node Package Manager） ：Node.js 的包管理器，用于管理项目，通过npm i request-promise cheerio等命令，开发者可以轻松安装诸如request-promise用于发起HTTP请求，以及cheerio用于解析HTML文档的库。

• npm i 安装包 request-promise 发出http请求 / cheerio 在内存中，模拟DOM对象

在终端输入npm init -y 使js也能解决前端问题

输入npm i request-promise cheerio等命令引用外部文件

引用这两个外部模块

const request = require('request-promise')
const cheerio = require('cheerio')

对函数封装，将一段电影的html解析，剥离出去（可使这段功能相对独立 可复用）

let $ = cheerio.load(html);
    const movieNodes = $('#content .article .item')
    const movieList = []
    for (let i = 0; i < movieNodes.length; i++){

        movieList.push(getMovieInfo(movieNodes[i]));
    }

使用cheerio库来解析HTML文档，并从中提取特定的信息。

const getMovieInfo = function(node) {
    let movieInfo = {};
    let $$ = cheerio.load(node)
    let title = $$('.pl2 a').text()
    let pic = $$('.nbg img').attr('src')
    let info = $$('.p.pl').text()
    let rating_num = $$('.rating_nums').text()
    
    movieInfo = {
        title: title,
        pic: pic,
        info: info,
        rating_num: rating_num
    }

完整Javascript代码如下：

const request = require('request-promise')//终端输入npm i  request-promise转后端
const cheerio = require('cheerio')//终端输入npm i cheerio
// 入口文件
//async 异步的
// 将豆瓣网页的电影列表html，爬取
// 返回JSON数组，每一项电影包含name，desc....
//单点入口
async function main() {
    // 代码 分布细化，程序员的思维，伪代码
    // 根据url 发送一个http请求 拿到html 
    // 根据html 分析，拿到电影的内容
    // 返回内容
    // await LLM
    // 良好的编程规范
    const URL="https://movie.douban.com/chart"
    // 发送 http 请求html  408 基于请求
    // 攻击
    const html = await request({
        url: URL
    });
    //console.log(html);

    // 空一行 代码的可读性，可能要比功能更重要
    // html分析 document + 选择器 cheerio 满足
    // 编程素养 将html字符串加载到内存中，$ = Document
    let $ = cheerio.load(html);
    // console.log($('.article table').length)
    // 要严谨
    const movieNodes = $('#content .article .item')
    const movieList = []
    for (let i = 0; i < movieNodes.length; i++){
        //用函数封装？
        //将一段电影的html解析，剥离出去
        //这段功能相对独立 可复用的
        //因为main已经比较复杂了，一个函数超过10行代码，一定可以再分函数
        movieList.push(getMovieInfo(movieNodes[i]));
    }
    console.log(movieList)
}

const getMovieInfo = function(node) {
    let movieInfo = {};
    //将tr加载进内存
    let $$ = cheerio.load(node)
    let title = $$('.pl2 a').text()
    let pic = $$('.nbg img').attr('src')
    let info = $$('.p.pl').text()
    let rating_num = $$('.rating_nums').text()
    //console.log(title);
    //console.log(pic);
    //console.log(info);

    movieInfo = {
        title: title,
        pic: pic,
        info: info,
        rating_num: rating_num
    }
    console.log(movieInfo)
    return movieInfo


}

main()

使用AIGC可以省去部分代码编写

• 1/3的流程性代码（html parse）不需要写了
• 工作效率更高

添加openai工具包并为其配置运行环境

const OpenAI = require('openai');

const client = new OpenAI({
    apiKey: 'sk-r4N8AJ6qidnIWrkqsilwlUMekVpKhoVJ3VEaz8Ss0LUUi7bH',
    baseURL: 'https://api.chatanywhere.tech/v1'
})

根据需求输入prompt对ai提问

AI 可将getMovieInfo的内容代替，省去了对函数封装和，对于该HTML的任何需求只需要输入中文就可以得到

let prompt = `
    ${movie_html}
    这是一段电影列表html,请获取电影名(name), 封面链接(picture),
    简介(info),评分(score),评论人数(commentsNumber), 
    请使用括号的单词作为属性名，以JSON数组的格式返回。
    `

显而易见省去许多代码的输入，以下getMovieInfo的内容被代替

const getMovieInfo = function(node) {
    let movieInfo = {};
    let $$ = cheerio.load(node)
    let title = $$('.pl2 a').text()
    let pic = $$('.nbg img').attr('src')
    let info = $$('.p.pl').text()
    let rating_num = $$('.rating_nums').text()
    
    movieInfo = {
        title: title,
        pic: pic,
        info: info,
        rating_num: rating_num
    }

适合聊天的模型很多种，我选择了gpt-3.5-turbo

const chatCompletion = await client.chat.completions.create({
        model: 'gpt-3.5-turbo', 
        messages: [
            {
                role: 'user',
                content: prompt
            }
        ]
    })

以下是完整的JavaScript代码

const request = require('request-promise');
const cheerio = require('cheerio');  
const OpenAI = require('openai');

const client = new OpenAI({
    // 凭证 密钥  算力收费  token
    apiKey: 'sk-r4N8AJ6qidnIWrkqsilwlUMekVpKhoVJ3VEaz8Ss0LUUi7bH',
    baseURL: 'https://api.chatanywhere.tech/v1'
})

async function main() {
    const URL = "https://movie.douban.com/chart";
    const html = await request({
        url: URL
    })

    let $ = cheerio.load(html);

    const movieNodes = $('#content .article .item');
    let movie_html = ''
    for ( let i =0; i < 2; i++) {
        movie_html += cheerio.load(movieNodes[i]).html()
    }
    let prompt = `
    ${movie_html}
    这是一段电影列表html,请获取电影名(name), 封面链接(picture),
    简介(info),评分(score),评论人数(commentsNumber), 
    请使用括号的单词作为属性名，以JSON数组的格式返回。
    `

    const chatCompletion = await client.chat.completions.create({
        model: 'gpt-3.5-turbo', 
        messages: [
            {
                role: 'user',
                content: prompt
            }
        ]
    })

}


main()