前言

在阅读了理论篇后，我们就开始用代码来展现传统编程与AIGC编程的区别了
这是理论篇的文章

juejin.cn/spost/73710…

正文

传统编程思维

每一个程序员在写代码之前，先要分析需求是什么，最好的习惯就是写伪代码，将需求分步细化，接下来我们要分析这一节的需求

爬取豆瓣电影排行榜的html

根据url 发送一个http请求拿到html
根据html 分析，拿到电影内容
返回内容
await LLM 接下来根据步骤写代码

第一步：在js中打开集成终端

输入"npm i request-promise"(导入"request-promise" 包)

以下是获取html的代码

const request = require('request-promise'); 
const cheerio = require('cheerio');
async function main() {
const URL = "<https://movie.douban.com/chart>";
const html = await request({
url: URL  
})
console.log(html);  
  
}  
  
main()

在集成终端中运行此代码，输入 node main.js，即可获取豆瓣电影页面的html代码，由于代码太长就不展示。
这样我们就以传统编程的手段获取了豆瓣电影排行榜页面的html代码

第二步：分析html，拿到电影的相关内容

和上面一样，在集成终端里导入cheerio包，这个包的作用是分析获取的html代码，并且将其以JSON数组的格式返回

由于函数代码过长我们选择函数封装

for (let i = 0; i < movieNodes.length; i++) {
movieList.push(getMovieInfo(movieNodes[i]));  
}  
console.log(movieList);

下面就是该阶段的完整代码

const request = require('request-promise'); 
const cheerio = require('cheerio');
async function main() {
const URL = "<https://movie.douban.com/chart>";
const html = await request({
url: URL  
})
console.log(html);  
  let $ = cheerio.load(html);//$ =Document
  const movieNodes = $('#content .article .item');  
const movieList = [];
for (let i = 0; i < movieNodes.length; i++) {
movieList.push(getMovieInfo(movieNodes[i]));  
}  
console.log(movieList);  
}
const getMovieInfo = function(node) {  
let movieInfo = {};  
// 将tr加载进内存  
let $$ = cheerio.load(node);  
let title = $$('.pl2 a').text()  
console.log(title);  
return movieInfo  
}  
  
main()

接下来就是优化所有代码：
以下就是完整代码包括伪代码

const request = require('request-promise');
const cheerio = require('cheerio');
// 入口文件
// 异步的
// 将douban 网页的电影列表html，爬取， 
// 返回JSON数组， 每一电影项包含name, desc, score... 
// 单点入口 
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')
    // console.log(pic)
    // console.log(title);
    let info = $$('p.pl').text()
    let rating_nums = $$('.rating_nums').text()

    movieInfo.title = title
    movieInfo.pic = pic
    movieInfo.info = info
    movieInfo.rating_nums = rating_nums
    
    return movieInfo
}

main()

第三步：返回上段代码内容

这就是部分效果图完整效果需读者自行验证

![image.png](p6-juejin.byteimg.com/tos-cn-i-k3…

用AIGC去完成上面的内容

如果使用ai的话，就需要导入openai包

npm i openai

到这一步就需要读者自备密钥，话不多说，直接上代码

const request = require('request-promise');  
const cheerio = require('cheerio');  
// AIGC LLM 生成式内容  
// tr 字符串要生成movie json 对象  
// input prompt  
const OpenAI = require('openai');  
  
const client = new OpenAI({  
// 凭证 密钥 算力收费 token  
apiKey: '',  
baseURL: ''  
})  


async function main() {  

const URL = "<https://movie.douban.com/chart>";  

const html = await request({  
url: URL  
})  
 
let $ = cheerio.load(html);  

const chatCompletion = await client.chat.completions.create({  
model: 'gpt-3.5-turbo', 
messages: [  
{  
role: 'user',  
content: prompt  
}  
]  
})  
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数组的格式返回。  
`  
  

}
main()

总结

传统编程与AIGC的差别就如上图证明，近1/3的传统代码可以自己使用ai来完成。

传统编程和AIGC的区别与融合（代码篇）

前言

正文