admin管理员组文章数量:1667031
我们要构建什么样的网站？
我们将使用 ChatGPT 构建的网站会在主页上显示一个名为quotes.txt的文本文件中的随机引用。访问网站时，应用程序读取 quotes.txt文件的内容，然后从列表中随机选择一条名言并将其传递到前端，并在网页上显示。此外，该网页包含一个标有“更改名言”的按钮，点击后将刷新页面并显示另一个随机名言。
首先，要求 ChatGPT 生成乔布斯的名言列表：
提供描述
接下来提供希望由 ChatGPT 生成的网站的描述：
这一步很重要！！（chatgpt对中文的理解不如英文，因此用英文描述需求将会更好）
按指令操作
基于我们的文本描述，ChatGPT 正在生成代码，它是用 Python 编写的分步说明和源代码，并使用 Flask 网络框架：
为了使用提供的代码，我们必须使用以下命令在这个新项目文件夹中创建一个项目文件夹和文件：
$ mkdir flask-quotes
$ cd flask-quotes
$ touch quotes.txt
$ touch app.py
首先将生成的 20 个名言复制到文件 quotes.txt 中。
接下来，将ChatGPT 为文件app.py提供的源代码复制到其中。
代码简析
此代码是 Flask 应用程序的一个基本示例，它在网站主页上显示来自名为quotes.txt的文件中的随机引用。
该app = Flask(__name__)行创建一个新的 Flask 应用程序并将其分配给变量app。
装饰@app.route('/')器用于定义网站主页的路由。home()访问此路由时调用该函数。在函数内部，脚本使用该函数打开quotes.txt文件，并使用该方法open()将文件内容分配给变量。然后使用该函数，脚本从名言列表中随机选择一个名言。所选名言作为名为quote的变量传递给模板，该模板返回以在浏览器中呈现。quotes.readlines()random.choice(quotes)home.html
该if __name__ == '__main__': 行用于检查脚本是直接运行还是作为模块导入。如果直接运行，该app.run(debug=True)行将启动开发 Web 服务器并运行应用程序。该debug=True参数用于在开发期间启用交互式调试器。
继续按指令进行
接着可以看到下一条指令：
按照 ChatGPT 建议的步骤创建一个新文件夹 templates 并在此文件夹中创建一个新文件home.html：
$ mkdir templates
$ touch templates/home.html
将 ChatGPT 中的 HTML 代码复制并粘贴到home.html 中。这是一个 HTML 模板，它包含着一个标题为“史蒂夫·乔布斯的名言”的网页；一个具有相同标题的标题标签；一个显示从div后端传递的名言的元素以及一个标有“更改名言”的按钮；当单击按钮，将会重新加载网页。
该模板还链接了一个 CSS 文件，用于设置网页样式。
接下来我们将收到有关将 CSS 代码包含到 Flask 项目中的说明：
根据chatgpt的建议输入以下命令：
$ mkdir static
$ touch static/styles.css
最后将 CSS 代码从 ChatGPT 复制并粘贴到 styles.css。
基本上大功告成了，接下来就是测试是否能正常运转。通过输入以下命令启动网站：
$ python app.py
然后您应该在命令行上看到以下响应：
大功告成
服务器在本地端口 5000 上运行。于是在浏览器中输入127.0.0.1:5000就可以访问该网站了：
太好了，网站正在加载，我们收到的输出完全符合要求。选择并显示随机名言。我们可以使用Change Quote按钮随机更新一个名言：
版权声明：本文标题：使用ChatGPT快速搭建一个完整的网站 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1730084704a1222193.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论