技术宅小伙：测试ChatGPT进行中文编程的能力

Posted 2023-04-03 技术宅小伙

    hello欢迎光临
    今天跟大家聊一下
    使用chatGPT实现中文编程啊
    其实是用chatGPT实现自然语言编程啊
    只用你用中文或者英文其实都可以
    那首先跟大家看一下
    这是我的chatGPT的一个界面
    在这里呢我们就可以直接跟他聊天
    比如说我现在想实现一个闭设啊
    我想要做一个
    前端
    页面的毕业
    毕业设计
    啊能否给我一些建议呢
    然后呢就看到这apg
    直接就会给我们一些建议
    我们可以做哪些类型的啊页面
    它的建议其实还是比较全面的
    各种各样都有
    比如说
    啊目标受众啊页面布界面布局
    给我们讲述了
    当我们需要做一个前端页面的时候
    都有哪些我们需要呃注意的一些事项
    当然这些注意事项
    并没有回答我想问的问题
    其实我想问的问题是
    能否给我一些项目的建议
    那这个应该是由于啊我没有问清楚
    所以重新问一下Chinagbg就好了
    啊我想做一个
    前端页面的毕业设计
    能否提供一些嗯
    项目建议
    比如勾网站
    啊如果我这样问
    OK那现在拆了GBT
    就可以帮我提供了一些
    我可以做的一些小的项目
    比如说有电商网站啊社交媒体网站
    在线学习平台
    还有健康管理应用布拉布拉等等等等
    所以大家其实可以看到
    当我们想要和chatGPT聊天的时候
    我们问问题的方式是非常关键的
    有可能chat
    GT给我们回答的问题不是我们想要的
    其实
    是因为我们问的问题并没有问清楚
    所以现在有一门学问叫promptengineering
    就是如何给chatGBT提问
    让他更好的来回答我的问题
    大家可以看到
    chatPTT其实已经帮我们提供了一些
    项目的建议
    那我个人是想做一个电商的网站
    所以我就会问chatGBT
    让他给我一些做电商网站的建议
    OK那我们可以说嗯感谢建议啊
    嗯我想要做一个电商网站
    电商网站能否
    给我提供一份原代码模板呢
    就是我自己做
    但是咱们今天的前提假设是
    我并不会编程
    我现在只是作为一个初学者
    跟chatGT通过聊天的方式
    把这个代码实现了
    那我就直接聊啊
    OK
    啊啊
    他说不能够提供完整的原代码
    但是可以在互联网上搜索
    电商原代码和教程
    以下是一些实用的资源
    比如说Github
    getup上当然就有很多
    很多很多比较好的原代码
    我们可以在上面直接搜
    还有CodepenCodepen也是一个社区
    他们
    提供了很多潜能开发的资源和实力
    还有一些网上的教程
    但是这个并不能满足我的需求
    其实我是想
    希望那get
    呃ChanGPT帮我直接生成一份代码
    那我就换一个问题来问
    我想要实现一个呃购
    购物网站
    能否帮我生成一个HTL
    代码
    OK可以看到
    chatdpt实际上帮我们生成了一份
    简单的代码
    那这些代码它并没有帮我们
    写到一个文件里边
    需要我还需要是需要懂
    一些前端页面的尝试
    才能够把它整合起来啊
    做成我的一个页面
    如果是一个纯新手的话
    这个可能还不是太好用
    那我们可能需要问一个问题
    问重新换一个方法来问他
    啊能否帮我生成一个html
    一个完整的html
    哎前面那
    具有导航栏
    啊产品展示区
    成为一个完整的购物网站
    购物网站的HTML
    具有导航栏产品展示区
    看这样能不能帮我们生成
    还是不能生成
    OK他说还是不能生成
    那我们把这个修改一下
    啊能否帮我生成一个不不说完整的
    能否帮我生成一个go网站的
    go网站主页的
    主页的HTML有具有导航栏商品展示区
    然后我点击saveandsubmit
    OK大家可以看到现在
    啊叉gpt就可以帮我们生成一个
    相对比较完整的一个导
    就是至少是一个主页的一个页面
    所以可以看到
    大家可以看到呃
    和chatGPT交互的时候
    一定要去把你的问题尽量的具体化
    或者说
    如果他的回答不是让我们很满意的话
    我们就可以调整我们的问题
    这样的话
    就可以看到
    它就已经帮我们生成了一个
    相对完整的页面了
    包括了基本的导航栏产品展示区
    还有4个商品啊
    我们就可以直接用了
    比如说现在在这里它上面有个copycode
    这里有拷贝扣的
    我们直接一点
    就把这个代码拷贝下来了
    拷贝下来之后呢
    我就可以到我们的代码里边直
    接去使使用它
    啊可以看到这是我的VScode
    我在VScode里边
    我可以把刚才
    车载GPT帮我生成的代码啊加进来
    比如说叫index点HTML
    然后把它帮我生成代码拷贝进来
    拷贝进来之后呢
    我就有了一份完整的代码
    当然有了代码之后我我这里并没有
    但是有了代码之后
    我们实际上并没有办法直接去运行
    假设我是一个纯新手
    我不知道该怎么样运行这个代码
    那我们就需要问一下Chinagbt
    代码已经有了我们如何去运行呢
    啊我
    正在使用VScode
    嗯
    有没有什么方法
    帮我把
    刚才生成的代码运行起来
    OK它就告诉我们啊
    我们可以使用VScode内置的
    liveserver扩展
    来在浏览器中运行HTML代码
    布拉布拉这些
    这些说了一堆
    就是我们可以使用livecode来运行
    但是我现在还还有没有更简单的方法
    因为他说了ilivelifeserver它是一个扩展
    我我就不想用扩展
    我想用更简单一点的方法
    有没有更简单的方法
    OK那这样
    大家可以看到
    chatGBT就帮我们
    提供了一个更简单的方法
    这个前提假设是啊
    刚才这个方法
    需要安装一个liveserver的
    扩展但是我作为一个新手
    我并不知道VScode怎么去安装扩展
    那我就问了一下有没有更简单的方法
    他就给我们提供了一个更简单的方法
    我们只需要在VScode当中打开HTML文件
    啊在窗口左下角打开侧边栏
    按下Ctrlb啊就可以右键选择
    然后就使用默认浏览器打开就可以了
    好我们现在来试一下
    就在这里
    大家可以看到在这里有一个indexhml
    他刚才其实很贴心帮我说了
    如果说我这边没有打开的话
    他可以告诉我用Ctrlb
    哎sorry写错了
    comeon加b
    如果说我们左边没有那个侧边栏的话
    就可以用Ctrl加b或者CM加b
    把这个侧边栏打开
    然后用右键点击然后
    啊openwithedge为openwith
    openbrotherwithstepapps一点
    我们就现在就可以
    使用Chrome
    就选择然后就可以把它打开了
    就可以看到
    OK我们看到
    我们现在的网站
    就已经在我的浏览器里边
    就已经打开了
    他就帮我们生成了这个
    前面这些是啊
    导航栏就是主页商品购物车等等
    中间这些是
    帮我生成的一些商品的链接
    但是可以看到
    现在里边是并没有任何的东西
    所以我们还是要让
    zgd帮我们修改一下
    而且这个
    大家可以看到这个做的比较粗糙
    比较难看
    所以下一步就是我们要回到OK
    第二步就是我我希望
    zgd帮我产生一些数据
    生成更多的商品来让我们来展示出来
    啊能否帮我生成一些mark数据
    他看到他告诉我
    在开发前段应用的时候
    通常需要一些mark数据
    来测试和展示应用
    下面是一些
    mark数据的方法就包括了markGS
    包括JasonPlaceholder
    包括了macro啊trueFaker的GS
    但是这些
    都需要一些前置的知识
    你才能把它用起来啊
    对于我一个纯新手来讲
    我并不想用这些东西
    我就希望chatGBD直接帮我生成一些
    market
    就可以再接着问他啊这些我都不懂
    都没我都没有用过
    能否直接帮我生成一些
    Jason数据作为Mockdata
    OK啊那现在呢
    大家可以看到
    Chadgpt
    就已经帮我们生成了一些malk数据
    而且这些malk数据
    可以看到
    它是帮我们直接按照我们的需求来
    来生成的
    啊这些Jason包含3个对象
    每个对象是一个产品
    包含了ID名称
    价格价格在哪里啊
    aprice价格图像描述和类别
    可以看到
    他帮我们生成的这些Mac数据也是
    根据我们的需求来的
    因为我并没有说我是干什么的
    但是他从
    上下文当中
    他知道我是要做一个电商网站
    所以它生成的这些mark数据里边
    是包含了
    电商产品的名称
    还有包含了它的价格
    还有它的一个图片fan
    就是非常符合我们的需求
    然后我们就可以将这个mark数据
    拷贝到我们的拷
    拷贝到我们的项目里
    一般来讲我们在做项目的时候
    我们会加一个啊
    data
    datadotJason
    因为这是一个Jason文件
    所以我们直接可以
    用datadotJason把它加进来
    可以看到我们直接已经把我
    们的这个数据加进来了
    然后下一步我们需要做的是
    我们需要将这些Jason数据
    是应用到我们的代码当中
    我们需要将这些Jason数据呢
    应用到我们的代码当中
    这个我们也可以直接问ChinGPT啊
    直接做
    非常感谢
    请帮我生成一个
    javascript文件
    因为首先你需要知道
    当我们在我们的钱的页面当中
    如果你需要一些动态展示的话
    我们需要Javascript
    Javascript相当于是帮我们
    的网站具有了一个动态的一个呃性能
    之前最早我们产生的HTML
    HTML它只是网站的一个股价
    HTML决定了我们网站
    来展示什么样的内容
    那Javascript决定了我们如何去展示
    后面我们还会聊到CSS
    它决定了我们展示的一个样式
    我们帮我们生成一个加速的文件
    将这些Jason数据
    展示到页面上
    啊可以看到我问的问题呢
    是让他帮我生成一段
    代码把这个数据展示上来
    他帮我直接生成了一个
    具有Jason数据的一个代码
    大家可以看到他生成这段代码
    既有数据
    啊也有也有这个代码
    那就是我们拿过来
    其实就可以直接用了
    但是我并不希望这样来用
    因为刚才其实我已经把
    重新生成一下stopgeneration
    其实刚才我已经
    生成了一个Jesus文件啊
    请帮我我修改一下问题
    因为他现在这个问题呢
    他会直接帮我生成一个Javascrip的文件
    然后帮我把这个
    我希望他把刚才生成的那个Jesus文件
    加载进来
    请帮我生成一个Javascus的文件将
    刚才生成的Malk数据的
    Jason文件
    展示到页面上
    啊那或者说我要首先感谢一下
    然后我已经
    将
    你提供的
    Jason文件存储为data
    的Jason文件
    请帮我生成一个加square的文件
    将刚才生成的冒
    数据的Jason文件展现到页面上
    这样来做说他可能就理解我的意思了
    OK
    首先他就从data点Jason来取数据
    然后把这些数据呢再展示下来
    因为刚才我没有这样说的话
    他相当于是又帮我重新生成了一份
    Jason数据来做
    我其实原始的目标是要让他把刚才
    我存储成
    data文件的那部分加载进来
    所以大家可以看到这个就已经
    完全符合我的需求了
    我就拷贝一下扣的
    啊并且他还非常的贴心
    他就告诉我啊
    我还需要在HTML页面中
    增加一个用于展示产品列表的HTML
    元素
    这样的话才能才能把它展示出来
    所以这样我们就按照他的
    说法来把我们的代码修改一下
    首先我们要增加一个javascr的文件啊
    比如说我们叫
    叫什么叫app点儿接加s吧
    app
    点儿加s
    这是我们JS的内容
    然后他刚才说我们需要在
    我们需要加一个
    我们需要加一个productlist把它加进来
    然后
    这个时候
    作为上将
    将数代码保存为Javascrip的文件
    并在页面
    中将其包含在script的标签中才能展示
    那我有可能我不知道如何把这
    个Javascrip文件加到我这HTTL当中
    那我再问一下这个BBC
    啊我是一个纯新手
    不清楚如何将
    Javascript
    文件加入HTML
    请给我
    一个完整失利
    OK那大家可以看到将现在就已经
    给咱们来一个完整的视力啊
    如何把它加进来
    这里边说的很清楚啊
    请将这个
    这个HTML里边包含了
    1需要包含一个scriptorJS
    但是我其实是叫app的JS
    那我们就可以把这里边的scribber
    JS换成afterJS就可以了
    然后还要
    确保我的mark数据命名是data点Jason
    因为最开始的时候
    我告诉他的是data点Jason
    我们把这行拷贝过来就行了
    需要注意一下它是在bullet里边的
    所以我们需要把它加在这啊
    这个其实已经有了它这个叫scriptorgs
    我们其实叫app的gs
    加进来然后就可以了
    然后这个时候加进来之后呢
    我们就需要在页面上看一下效果
    好像没什么反应看一下
    看一下console
    啊
    他说accessfetchatfromnowhasbeenblock里边cause
    就说我们遇到了一个问题
    可以看到这是一个问题
    我们把它拷贝一下
    当我们遇到问题的时候呢
    我们实际上是可以把它拷贝下来
    然后
    copy
    我们遇到问题
    我们把我们的问题粘到Chadgpd这里
    Chadgpd就会告诉我们
    为什么会遇到这个问题
    这个错误是表示浏览器
    不允许从不同的域名请求数据
    吧啦吧啦吧啦说了一堆
    说一堆最终的解决方案就是
    在使用VScode的时候啊
    我们可以安装扩展应用程序
    来启动一个本地的HTV的服务器
    比如说liveserver
    扩展应用
    就是说我们刚才其实是在
    浏览器当中
    直接把这个HTM页面直接打开的
    这种打开的方式呢
    我们当前浏览器我用的是Chrom
    Chrom是不允许我采用这种方式来
    漏的数据的
    因为我们现在除了这个HTM页面之外
    我们还加入了Javascript
    加入了一个后端的数据就是Malkdata
    这个时候不允许不允许
    不允许
    我们把不允许的这个错误标到这儿
    chatgb就直接进
    已经帮我们分出来这个错误的原因
    并且它给出了一个方案
    我们需要使用
    liveserver这里
    它这里写了啊我们需要使用
    liveserver扩展程序来帮我们打开
    这个时候才可以
    所以我们现在就需要回到我们的啊
    回到我们的这个啊VScode当中
    我们现在右键一点击
    大家可以看到这里有openwithliveserver
    这可能有点小大家看不清楚啊
    这是这其实是有一个openwithliveserver
    这个是怎么来的呢
    是我们首先如果你用的是VScode的话
    你这里它有一个extension
    就是扩展的意思
    在扩展这里你要安装很多的扩展
    它其中有一个扩展叫liveserver
    啊这就会有其实我已经装过了
    装过了之后我们就可以直接用了
    其实刚才在叉gb
    它已经提示我们使用leftserver来进行
    运行就可以了
    它这里有一个openwiththeleftserver
    我们直接一运行
    我们先把之前的那个停一下
    把它停下来然后再openwiththeleftserver
    OK看大家可以看到现在就已经
    使用liveserver把它打开了啊
    现在就已经看到我们刚才
    之前添加的这些东西了
    然后大家看一下还有没有问题啊
    这样
    比如说console
    OK就已经没有了
    刚才那个问题啊
    他说refusedtoapplystylefromstyle点CSS啊
    这个也很简单
    这个是因为
    我们当前这个文件并没有style点CSS
    可以看到这里边
    我们添加了一个style点CSS
    但是我们没有加这个文件
    这也就是他在提醒我们
    需要添加一个CSS文件了
    那我们就直接加上就好了
    style
    点CSS
    主要点CSS是一个CSS文件
    我们使用CSS是为了帮我们更好的
    展示我们页面的内容
    因为我们有可能我们在做页面的时候
    他现在当前
    当前大家可以看到这个页面啊非常丑
    非常丑的时候想想他是不好看的
    不好看的情况下呢
    我们就需要把我们的页面做一下美化
    美化是通过什么样的方式呢
    就是CSS所以我们这时候只需要直接
    问checkgpt就可以了
    比如说我们就直接问他啊
    当前
    这个页面很不好看
    请帮我生成
    一份CSS
    OK啊这个
    就是chatGPT
    会帮我们生成一个简单的CSS的文件
    这个CSS文件包含了全局的样式
    包含导航栏等等
    然后他还告诉我们
    我们如何把这个CSS文件给他加上来
    而且它很贴心告诉我们
    CSS文件要和HTM文件和Javascrip文件
    处于同一个目录
    这样才能够进行
    然后我们就需要把它拷贝下来
    点一个copy
    这里有一个copy
    copy完了之后把它
    粘到我们的CSS文件当中就可以了
    粘完之后我们再看一下效果
    粘完之后好像没东西了
    粘完之后我们看到
    PRO1PRO2Proc它就已经横排展示了
    就比较好看
    但是这几个没有展示出来
    这个是因为
    这三个是我们通过markdata加进来的
    这几个不是markdata
    所以我们可能需要把HTML也修改一下
    这几个产品展示区这块需要删掉
    这几个跟我们之前的不太一致
    我们只需要有一个productlist
    就这里productlist然后
    我们的productlist
    当中的内容是从我们的
    datadoubleJason里边给它加进来的
    这样这样就可以了
    比如大家看到这就有
    这是我们的三个
    啊三个产品
    然后最上面这里是我们的导航栏
    就会看到
    现在修改了样式之后
    我们就已经比较好看了
    导航栏也比较美观
    然后产品的展示也比较美观
    如果大家觉得这个展展示不太美观
    想要进行一个修改
    比如说我们想要让他居中展示的话
    也可以直接就问ChinGBT
    让他帮我们修改就可以了
    比如说我可以说啊可以跟他说
    啊产品按照
    美
    排
    两个进行展示
    居中展示
    剧中展示
    呃
    然后
    使用卡片进行展示
    帮我修改CSS
    OK就让他把CS
    样式给我们修改的更加的细化一些
    所以大家可以看到
    现在的编程就是
    只要你知道自己想要什么
    然后你和叉GBD进行聊天
    他就可以自动帮我们生成
    所以以后有可能
    文科生会比理科生更擅长编程
    因为文科生他可能想象力更加的丰富
    他可能更加清楚自己想要的是什么
    并且表达能力可能要更强一些
    OK我们这个时候就把
    我们的CSS拷贝下来
    然后再粘贴到我们的文件里边
    就可以了
    直接替代一下我们的CSS文件
    粘完之后效果就可以看到
    目前已经居中展示了
    刚才是分散开的
    现在是一个居中的展示
    那如果你觉得导航栏这里也不太好
    看的话
    可以让他帮我们把导航栏也修改一下
    啊
    比如说让他帮我们修改一个主题色
    嗯这样应该是可以的
    帮我修改一下网站的
    主题颜色
    我喜欢蓝色
    啊另外请帮我
    嗯修改一下字体吧
    我觉得刚才字体好像不太好看
    修改一下字体
    嗯卡片当中
    不同属性
    不同的
    当中不同的属性使用不同的字体
    OK啊大家可以看到
    现在又帮我们重新再修改CSS的样式
    其实每一次
    他都会帮我们按照我们的需求
    来修改一下我
    们的样式修改完成了之后呢
    他又我们就可以把新样式添加进来
    就可以直接更改我们的
    这个整体的一个效果
    所以大家可以看到现在编程
    对大家来讲其实是一个自然语言编程
    我们只需要通过聊天啊就OK了
    不需要太多的这种技巧
    所以有可能将来这个
    我不知道啊
    就是前端至少从前端展示来讲
    有可能培训班就没有必要存在下去了
    因为你没有必要去
    学那么多很多初级的前端方面的知识
    你只只只需要懂得聊天就可以了
    好我们现在再把我们的整个一修改
    修改完成之后啊大家可以看到
    已经帮我们把颜色改掉了
    现在已经改成了
    蓝色的一个背景色作为我们的主题色
    同时大家可以看到不同的
    我们的卡片当中不同的属性
    它使用了不同的字体
    这是eclipse的一个功能
    比如说producta这种是属于我们的
    你输入你需要打的
    每一个商品的名称
    呃整个单词的前面几个字母
    它是使用加粗了
    然后用art加斜杠
    然后呢我们的价格它是标细的
    让他帮你去猜一下可能是什么东西
    然后它也不同的字体
    我们现在要的是system
    这样的话相对来讲也会更好看一点
    OK我们就选择sixsystem
    双击也可以
    用箭头加回车也可以
    嗯如果说大家还想再修改的话
    然后点点了之后
    可以把它改的再更加的美观一些
    比如说我们可以让他
    比如说我们现在觉得我们只有啊
    三个产品
    我们需要让它产生更多的产品来展示
    那就呃请帮我请帮我生成更多的数据
    啊大家可以看到加现在这个
    他就可以帮我
    再多一些生成数据
    数据完了之后呢就可以让我们更加
    呃好的展示出来
    所以我我不知道大家有有什
    么样的感受啊
    就是目前至少从前端角度来讲
    你有可能简单的前端工程师就
    完全不需要自己去手写代码
    就是一个简单的前端页面
    啊叉GBD就可以很方便的帮我们完成
    我们想要的一些功能
    就包括我们的样式
    我们如何进行展示我们我们的
    就就包括
    我其实之前的时候还跟他聊过
    如果我们是一个大型的项目
    我们这个项目
    需要进行比较复杂的状态管理
    其实Chinesegpt也是可以帮我们实现的
    只不过是说可能你首先要懂一些编程
    然后你才能跟他更好的去交流
    就是以后可能我们不需要真的去
    懂特别多细节性的东西
    就可能细节你不需要特别特别的了解
    但是你可能需要懂一些
    然后就能跟他交互就可以了
    比如说我现在
    但是但是我们需要注意的是
    我们在写的时候
    你需要有一些编程的常识
    比如说我现在加了一个逗号
    它这里是标红的并且标了一个框
    那我知道是怎么回事
    是因为我中我现在用的是中文逗号
    中文逗号和英文逗号在编程的时候
    它的区别还是很大的
    如果你使用中文逗号的话
    就会导致出现很多的问题
    所以说大家还是有一定要
    有一点点编程的尝试
    OK啊那看到又帮我们增加了一些
    现在增加出来的呢
    就已经帮我们显示出来了
    但是他这一行展示了很多个
    可能还是不符合我的需求
    那我就只需要再让拆GPT
    再帮我们修改一下就可以
    了
    OK啊
    这就是一个简单的前端页面的展示
    从无到有可能也就很快
    因为我现在是连讲带说
    所以时间相对会慢一些
    如果大家只是自己做的话那很快
    比如不到10分钟
    就可以完成一个简单的前端页面
    就包括你想要什么样的效果
    他都可以帮你完成啊
    再可以可以给大家给大家添加一个
    就比如说
    比如说一般的页面它还会有一个页角
    在这里我希望柴GP帮我生成一个页角
    啊请帮我
    生成一个网站的页角
    比如说我我希望使用京东的样式
    啊
    仿照京东的
    网站
    OK大家可以看到
    它就帮我生成了一个页角
    而且是仿照京东的一个样式
    就比较有意思
    很快啊这个如果你手写的话
    其实还是需要花一些时间的
    但是如果我们用叉gpt的话
    很快就可以帮我们生成这个
    等一下考进来给大家看一下
    应该还是蛮有意思的
    OK布拉布拉还挺长哈
    可能是京东他的本身做的也比较长
    哦这个非常贴心啊
    帮我们除了生成了HTML之外
    帮我们把CSS都已经生成了
    那我们直接等会拿来直接用就可以了
    OK那我们就直接拷贝过来
    就先我们先拷贝
    HTML文件
    只需要加到我们下面就可以了
    啊
    大家可以看到在下面加入了我们的
    页角但是这个页角他不好看
    他加到了这里
    他这这应该是CSS的问题
    我们再修改一下CSS就好了看一下
    啊这加的有问
    题没有加完好像
    OK它是因为CSS
    它这这里大家可以看到
    这有个左括号没有
    右括号没有加完
    证明
    啊叉GP并没有帮我们把代码生成完
    这这个也是因为
    大家可以看到
    这一轮增加的代码量相对来讲比较大
    有可能因为CHATGBT
    每一轮生成的文字
    它是有字数限制的啊
    我们只需要跟CHATGBT说
    请帮我重新生成页角的样式就可以了
    刚才是因为上一轮代码量太大
    已经超出了他的这个
    输出的范围
    所以就没有办法帮我们很好的生成
    OK他又帮我把前面生成了一遍
    其实前面我们已经不需要了
    我们只需要把
    这个CSS复制进来就好了
    theirfooter
    theirfooter
    theirfooter
    theirfooter
    可以看到
    photo这里
    展示的还是跟我们的期望有一些差距
    那我们就可以让他
    再帮我们做一个修改
    啊页角样式不太对啊
    请使用Flexbox重新
    生成样式
    这里是footer
    然后帮我们加进来
    认真思考
    OK啊这就修改完了我们把它再加进来
    福特样式
    然后再加一下我们的
    把我们的HTML也改一下
    OK大家可以看到现在这个啊
    页角
    这里就已经完全符合我们的需求了
    关于我们啊购物指南啊等等
    而且每一个大家可以看到
    它都是一个链接
    而且对于链接来讲
    它还帮我们加了高粱
    就是非常的不错
    所以现在大家就可以看出来
    所以我就通过很短的时间
    就给大家演示了一下
    我们就通过聊天的方式
    和CHATGPT聊一聊
    就已经能够帮我们生成一个还
    可以的一个前端页面
    就如果说我们需要再
    把我们的工程变大的话
    我们可以再问一些CHATGBT其他的问题
    来帮我们进行一个更改
    比如说我们可以问他
    啊啊
    前端页面已经OK了
    多谢啊
    我想增加后端服务器
    请给一些推荐
    OK大家可以看到他就已经帮我们
    给了一些推荐
    比如说我们想要一个后端服务的话
    可以使用noteGS
    可以使用petsontheplusCarrubianrose等等
    布拉布拉布拉给我们一个推荐
    当我们有了这个推荐之后呢
    我们就可以
    如果说你对哪一个子项
    有比较青睐的话
    我们就可以针对
    这个子项进行一个更详细的修容
    比如说我倾向于使用noteJS
    请帮我生成一个模板框架
    OK啊
    他现在就帮我们使用note键s的方式
    生成了一个模仿框架
    我们把这个模仿框架复制下来
    复杂放到我们的代码里边
    我们就可以把它运行起来
    作为一个前后端完整的应用
    就已经OK了
    那从今天的角度来讲
    OK
    那从今天大家可以看到很短的时间啊
    我们通过聊一聊
    通过中文
    就已经可以让chatGPT帮我们生成一份
    相对来讲还比较完整的代码
    并且在这个过程当中
    如果我们遇到了什么样的问题
    我们只需要把这个问题
    直接复制复制给菜鸡PT
    它就
    能够帮助我们完整的解决这个问题
    那OK我不知道大家的感想怎么样
    我是觉得以后可能比较
    低端的前端工程师的开发的职位
    可能就已经没有太多存在的意义了
    因为如果你的这个啊
    做的页面非常简单的话
    我们其实是可以很方便的使用CHATGPT
    几分钟甚至十几分钟的时间
    就已经能够帮我生成了
    我们没有必要自己去写
    OKseeyounexttime
    后续会跟大家介绍
    更多关于CHATGPT的方方面面
    感谢观看拜拜

技术宅小伙：计算机新手学习系列之LeetCode！

哈喽大家好，我是技术宅小伙。

自从上次发了这个入门系列后，出乎我的意料，这个系列居然是最受欢迎的。我各种被催更，呼声最高的就要数数和图的题了。那今天就给大家带来一道基础的图吧，让我们一起来看一下 Lico 第 1971 题 fine if path existing graph。

这道题的题目是说，已知一个有 n 个节点的双向的图（双向也可以是无向），它的每一个节点都从 0 标记到 n 减 1，又已知一个 2 滴的 integer r 来记录这个 graph edges。这个 already 的每一个 element 都记录着这一个边所连接的两个 vertex。每两个节点之间最多只会有一条边，并且没有任何节点会有指向自己的边。

我们现在需要判断的是，在这幅图里，有没有一条可以从起点通往终点的路径。如果有这个路径我们就返回 true，没有这个路径我们就返回 false。

从第一个例子里就可以看出，这道题只是想让我们判断有没有可行的路径，并没有让我们找出最短路径，所以这道题只需要一个最简单的便利就好了。那我们先用 breath-for-search 来做吧。题目给出的例子太简单了，让我们自己来举一个稍微复杂一点的例子来做这道题。

比如我们现在有这样的一组编，他画出来图是这样的，我们的 source 是 0，the destination 是 4。来到这个 h 的数组，我们现在暂时还没有办法很有效率的利用它，但我们可以先用它来建一个 adjacent 的 list，也就是把每一个节点的相邻节点都找出来，并放进一个 list 里。然后所有这些节点的这些 list 都按着顺序来放进一个更大的 list 里。

所以我们现在先建一个有 n 个空 list 的大 list，initialize 好了这个 adjacent list 后，我们就可以一个一个的来 process 就是 edge 了。每拿出一个 edge，我们就把这两个节点放进对方的 list 里，比如取出零一就先把 0 放进 1 的 list，1 放进 0 的 list，再取出 03 也一样把 0 放进 3 的 list，3 放进 0 的 list，然后继续 121324，最后二三结束后，这个 adjacent list 里就存放着每一个节点的邻居们了，比如 0 连着 1、2，1 连着 0、2、3，以此类推。

听好这个 adjacent list 后，我们就可以开始 search 了。因为这个是 graph，所以里面可能会有环，为了不进入环里并且无限循环下去，我们需要记录一下哪些节点是我们已经见到过了的，再记录一下哪些节点是接下来要做对比的。

因为是 BFS 嘛，我们就先建一个 queue（first in first out）并且把这个 source 放进去作为第一个 element，再来记录一下我们已经见过了哪些，因为这个 queue 记录的是我们将要去做对比的 element，所以我们这里需要用一个 while loop 来看一下这个 queue 里面还有没有剩余的 element。如果 queue 不是空的话，也就是说里面还有 element 需要我们继续去做对比的话，我们就继续录下去。从 queue 里面取出第一个 element 来作为当前的节点。如果当天这个节点它就是 destination 的话，那说明我们已经找到了一条可通行的路径了，这时候我们就只需要返回 true 就好了。如果它并不是 destination 的话，那这时候我们就得继续找下去。

我们就把它的邻居再放进这个 queue 里面。但我们不能盲目的把它们全部都扔进 queue 里，因为这个邻居可能是我们已经见过的节点，我们不想要进入一个循环，然后一直不停的循环下去。所以我们要先确认一下这些邻居是我们没有见到过的，它是我们没有见过的我们再放进 queue 里，然后这时我们已经见过了，所以我们再把它给加入 visit。

好了，这个循环他就可以一直不停的找下去，直到他找到了一条可通行的路径或者他的 queue 里面没有任何东西可以看了，就像第二个 example 里面一样，我们的 source 所在的这个 subgraph 里面，他的所有节点都被我们看完了，但是他还是没有找到他的 destination，那么就证明这个 source 和 destination 之间没有任何一条联通的路，我们就可以返回 false 了。

要提到这里大致的逻辑已经出来了，但是有一个 case 我们并没有考虑到。因为每个节点它都不会有一条通向自己的边，所以如果它的 root 和 destination 是同一个节点的话，这个情况会被漏掉。最简单的修改就是直接在最开始做一个判断，如果他俩相等的话，这个图里也是有可通行的路径的，并且这个路径只包含一个 vertex。

好啦，现在我们应该是做完了。这个文章如果对你有所帮助的话，记得点赞收藏转发。什么地方我没有讲清楚的话，记得在弹幕或评论区里告诉我。我是不会写代码的，阿静我们下个文章见，拜拜！

大家好，我是技术宅小伙。

自从上次发了这个入门系列后，出乎我的意料，这个系列居然是最受欢迎的。我各种被催更，呼声最高的就要数数和图的题了。那今天就给大家带来一道基础的图吧，让我们一起来看一下 Lico 第 1971 题 fine if path existing graph。

这道题的题目是说，已知一个有n个节点的双向图（双向也可以是无向），它的每一个节点都从0标记到n 减1，又已知一个2元的integer r来记录这个图的边。这个already的每一个element都记录着这一个边所连接的两个vertex。每两个节点之间最多只会有一条边，并且没有任何节点会有指向自己的边。

我们现在需要判断的是，在这幅图里，有没有一条可以从起点通往终点的路径。如果有这个路径我们就返回true，没有这个路径我们就返回false。

从第一个例子里就可以看出，这道题只是想让我们判断有没有可行的路径，并没有让我们找出最短路径，所以这道题只需要一个最简单的遍历就好了。那我们先用BFS来做吧。题目给出的例子太简单了，让我们自己来举一个稍微复杂一点的例子来做这道题。

比如我们现在有这样的一组编，他画出来图是这样的，我们的source是0，the destination是4。来到这个h的数组，我们现在暂时还没有办法很有效率的利用它，但我们可以先用它来建一个adjacent的list，也就是把每一个节点的相邻节点都找出来，并放进一个list里。然后所有这些节点的这些list都按着顺序来放进一个更大的list里。

所以我们现在先建一个有n个空list的大list，initialize好了这个adjacent list后，我们就可以一个一个的来process就是edge了。每拿出一个edge，我们就把这两个节点放进对方的list里，比如取出零一就先把0放进1的list，1放进0的list，再取出03也一样把0放进3的list，3放进0的list，然后继续121324，最后二三结束后，这个adjacent list里就存放着每一个节点的邻居们了，比如0连着1、2，1连着0、2、3，以此类推。

听好这个adjacent list后，我们就可以开始search了。因为这个是graph，所以里面可能会有环，为了不进入环里并且无限循环下去，我们需要记录一下哪些节点是我们已经见到过了的，再记录一下哪些节点是接下来要做对比的。

因为是BFS嘛，我们就先建一个queue（first in first out）并且把这个source放进去作为第一个element，再来记录一下我们已经见过了哪些，因为这个queue记录的是我们将要去做对比的element，所以我们这里需要用一个while loop来看一下这个queue里面还有没有剩余的element。如果queue不是空的话，也就是说里面还有element需要我们继续去做对比的话，我们就继续录下去。从queue里面取出第一个element来作为当前的节点。如果当天这个节点它就是destination的话，那说明我们已经找到了一条可通行的路径了，这时候我们就只需要返回true就好了。如果它并不是destination的话，那这时候我们就得继续找下去。

我们就把它的邻居再放进这个queue里面。但我们不能盲目的把它们全部都扔进queue里，因为这个邻居可能是我们已经见过的节点，我们不想要进入一个循环，然后一直不停的循环下去。所以我们要先确认一下这些邻居是我们没有见到过的，它是我们没有见过的我们再放进queue里，然后这时我们已经见过了，所以我们再把它给加入visit。

好了，这个循环他就可以一直不停的找下去，直到他找到了一条可通行的路径或者他的queue里面没有任何东西可以看了，就像第二个example里面一样，我们的source所在的这个subgraph里面，他的所有节点都被我们看完了，但是他还是没有找到他的destination，那么就证明这个source和destination之间没有任何一条联通的路，我们就可以返回false了。

要提到这里大致的逻辑已经出来了，但是有一个case我们并没有考虑到。因为每个节点它都不会有一条通向自己的边，所以如果它的root和destination是同一个节点的话，这个情况会被漏掉。最简单的修改就是直接在最开始做一个判断，如果他俩相等的话，这个图里也是有可通行的路径的，并且这个路径只包含一个vertex。

好啦，现在我们应该是做完了。这个文章如果对你有所帮助的话，记得点赞收藏转发。什么地方我没有讲清楚的话，记得在弹幕或评论区里告诉我。我是不会写代码的，阿静我们下个文章见，拜拜！