《用ChatGPT构建网站》入选公司技术期刊啦！

最近，公司办了一个技术期刊，我将之前写的用ChatGPT构建个人导航站和常用开发工具站的两篇文章合二为一，再扩写润色了一番，成功入选公司的技术期刊啦！

现在就将此文在这里也发一份。

前言

作为一个后端工程师，对前端的好多技术栈都只是了解，要用得好还是有些困难的，可自己还是有些前端页面需求的。

比如我已经利用网上的开源项目做了博客、云盘、聊天室、小游戏站等网站，需要一个导航站将这些系统归总展示出来；再如，工作中经常需要使用Json字符串格式化、Base64与图片互转、JWT解密等开发工具，这些工具用JS完全可以实现，再套个界面，就拥有自己的开发工具网站了。

本文将介绍使用ChatGPT构建个人导航站和常用开发工具站的过程，带大家更好地使用ChatGPT。

1、构建个人导航站

我直接一股脑对ChatGPT说了我的需求，正当满怀期待时，ChatGPT直接泼了我一盆冷水😂😂😂

看来是prompt的写法不对，那么，我换个表达方式，告诉他用HTML和CSS来帮我实现，果然，这次直接给出了代码：

代码比较长，限于篇幅，这儿就不贴了，您可在附录的与ChatGPT沟通记录中看到完整代码。

将ChatGPT给的代码保存为HTML文件，在浏览器中打开，页面效果如下图：

可以看到他对需求了解的还是挺到位的，我要求的东西他都有。

令我震惊的是，他居然能根据我后面提供的项目链接准确地推测出了我的名字，还直接写在了个人简介栏。而且巧合的是，拼音转换过来竟然一个字都不差……

可能他觉得这是一个前端任务，就说我是前端工程师吧，这个问题不大，后面让他改了就行。

图片全都没有加载出来，看了一下代码，他倒是都给了图片链接，可能是时间太长了，现在都访问不了了，那么这个先记下来，后面再让他改。

现在先来改改样式，我告诉他：

橙色好像不是很好看，请将背景换成浅蓝色吧，整体宽度不要占满整个网页，占80%吧，边缘部分做个过渡。另外，字体都调小一些

这次的实现效果如下：

这个果然比上面的好看多了，再让他改一下上面说的几个问题吧：

很好，请再修改一下以下几点：
1.我是一个后端开发工程师，不是前端;
2.项目链接里加一个娱乐（xuqiming.tech/fun）;
3.字体再调整小一点；
4.所有图片链接请都替换成(https://source.unsplash.com/300x200/?<英文关键词>)

上面的图片链接能返回关键词相关的随机图片，用在此处正好合适。

将要求提给ChatGPT后，此时他返回的效果如下：

OK，现在已经几乎完成啦，不过天气和每日一言提供的是固定的词汇，再让他调用API提供真实数据吧，于是我百度了一个诗词接口和天气接口，直接把这两接口官网上写的使用代码交给ChatGPT，让他加到我的网页中：

太棒了，不过我还有几处需要略微调整一下：
1.所有图片的尺寸都换成200x200;
2.每日一言请调用接口返回，不要写成固定的一句话，参考接入：
<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
3.天气也请调用接口返回，接入代码如下：
<div id="he-plugin-simple"></div>
<script>
WIDGET = {
  "CONFIG": {
    "cityColor": "FFFFFF",
    "weatherIconSize": "24",
    ……
    "key": "xxxxx"
  }
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>

来看看效果吧：

nice!!!

完美实现我的要求，完结撒花🎉

接下来就只需部署到我的服务器上，配置一下nginx和DNS就可以通过域名访问到了。

地址：https://nav.xuqiming.tech ，欢迎大家访问。

2、构建常用开发工具站

2.1 起因

在构建完导航站后，我想，既然ChatGPT能生成HTML和CSS，那肯定也能生成JS，那么就让他生成一个常用的开发工具网站吧。

其实这些工具也都有现成的网页，一般是躺在我的收藏夹里的，可这样有两个不便之处：

基本上每个工具都对应一个网页，可我常用的也就几种而已，有时候得先搜索并打开多个网页，有些麻烦；
在内网开发时，没有网络，要使用这些工具，只能来回切换，更不方便。

那我们话不多说，开干！

2.2 构建过程

先少写几个工具试试水，这次吸取了上一节中的经验教训，写了比较详细的prompt，指明了要用的语言，按条理描述需求：

请帮我用HTML、CSS、JS实现一个工具网站，要求如下：
1、支持以下工具：Json字符串美化、Unicode编解码、MD5加密、随机数自动生成、UUID自动生成、JWT解密
2、每个工具在网页上排列整齐美观，支持响应式布局，在移动端访问依旧美观

很顺利，ChatGPT 给出了 HTML、CSS 和 JS 代码。

将代码分别保存后，在浏览器中打开便发现可用，而且样式也比较美观，简洁大方。

简单测一下各个工具：

大部分工具都可用，只有MD5加解密不可用，于是按F12打开控制台，查看报错信息：

将报错内容直接复制发给ChatGPT：

依他所说修改 bug，测试通过！

这时，又发现解密也执行的是加密操作，那便再问问ChatGPT：

原来如此，跟着ChatGPT也学到了一些加解密知识，这波不亏。

言归正传，第一波试水的这几个工具都成功实现了，接着就是加其他工具了。

如法炮制，加上了Base64加解密、Base64与图片互转、时间戳转化、URL编解码等工具。

这个时候其实还不够实用，工具网站必须得有点击文本框能一键复制的功能吧，不然自己选中再Ctrl + C，略显低端。

于是再给 ChatGPT 提需求（此处对话记录已遗失，请见谅），这次他倒是实现了功能，但是每次用户点击输出的文本框后，他会弹框显示“已复制”，用户还得手动去关闭弹窗，严重影响用户体验。

那就继续改，告诉他：

请不要弹框显示提示信息，请将提示信息放置输出文本框下方，并且1秒后自动消失。
请不要输出全部代码，仅给出需要修改的代码即可

这次修改代码后，自测所有功能均无误，大功告成！
和导航站相同步骤部署上线，地址：https://dev-tools.xuqiming.tech ，欢迎大家访问。

2.3 再加个需求——绘制图表

最近遇到一个新需求，我所在的组负责了同花顺的程序化广告投放工作，每周开周会时要展示最近几周的广告投放效果数据，就需要绘制一些折线图和柱状图。

提高效率起见，让ChatGPT开发个图表绘制的网页吧！

方法同上，此处就不再赘述，与ChatGPT的沟通记录可访问此链接查看：
https://shareg.pt/9Vsa1z9
页面访问地址为：
https://dev-tools.xuqiming.tech/draw-charts.html
最终效果见下图：

3、总结

还挺惊喜的，我像发现了新大陆一样，这样一来，用ChatGPT开发一些简单的网站变得容易了很多，而且开发的东西既美观又实用！

感觉 AI 时代的开发流程也可以变一变了：

向ChatGPT提需求 -> 运行ChatGPT给的代码 -> 向其提问并解决报错内容 -> 部署上线！

以下是一些写提示词（prompt）的体会：

描述需求时得说的较为明确，比如第一条，当我没告诉他用HTML和CSS实现时，他直接拒绝帮助。可能他觉得比较难，自己做不到吧，但其实只要需求明确，他完全能做的特别棒；
对一些调用API实现的功能，如文中的天气和每日诗词接口，具体如何调用，还是问搜索引擎会更高效，因为那些API使用方式可能在变动，而ChatGPT的数据只收录到2021年9月，可能会有好多错误。将API调用方式发给ChatGPT会大大提高效率。
和ChatGPT沟通时，当他做得对时，请不要吝啬你的赞美，“太棒了”、“非常好”等鼓励语句其实也是给AI一个正反馈，让他知道他生成的内容方向是对的，能提升后续走在正确道路上的概率。

一点感悟：

从文中也可以看到ChatGPT确实很强大，帮我实现了一些我之前需要大量学习才能完成的工作，大大提高了我的开发效率。但是，从文中也可以看出，使用者最起码得懂一些基础知识，才能更好的提出 ChatGPT 能完成的工作。

所以，我觉得现阶段ChatGPT还替代不了任何人的工作，只能说是一个特别好的工具，重点要看使用者怎么用。ChatGPT能以极快的速度生成95%的可运行代码，但是剩下的5%依然依靠程序员自身的功力。希望大家都能用好工具，提升工作效率。

附录

制作个人导航站时和ChatGPT的沟通过程：https://cloud.xuqiming.tech/s/mOsK
常用开发工具网站的源码地址：https://github.com/Scorpio-xu/dev-tools

可以在README中看到大部分沟通记录。大家也可以将这些文件传到内网，在浏览器中打开 index.html就可以在内网使用啦！

目录CONTENT