django搭建一个AI博客进行YouTube视频自动生成文字博客 文章目录 一、生成Django框架 二、项目代码（前端） 1、编写前端代码（正文界面） 1.1、生产html框架 1.2、添加live preview扩展 1.3、更改title素中文本 1.4、添加CDN（CSS）样式链接 1.5、nav标签 1.6、在body标签中添加类 1.7、nav下创建div标签 1.8、当前界面预览 1.9、在div标签后添加footer 1.10、完整代码 2、编写前端代码（登录注册界面） 2.1、创建html框架并添加cdn样式表 2.2、创建密码登录框（完整代码） 3、编写前端代码（注册页面） 3.1、完整代码 4、编写前端代码（文章保存记录） 4.1、完整代码 5、编写前端代码（文章页面） 5.1、完整代码 三、Django代码（后端） 1、添加app功能 2、blog_generato添加index视图（views.py） 3、添加数据库 4、创建管理员用户 4.1、后台中文化 4.2、在blog_generato下的urls.py中添加url 4.3、将注册登录html页面添加到views中 5、ai转换 6、openai秘钥 四、修改后的完整代码（前后端） 1、 ai_blog_app–> settings.py 2、ai_blog_app–> urls.py 3、ai_blog_app –> _init_.py 4、blog_generato –> admin.py 5、blog_generato –> models.py blog_generato –> urls.py 7、 blog_generato –> viwes.py 8、templates –> all-logs.html（修改后） 9、templates –>blog-details.html（修改后） 10、templates –>index.html（修改后） 11、templates –>login.html（修改后） 12、templates –>signup.html（修改后） 一、生成Django框架 我这里使用的是PyCharm 2021.3.3 创建流程： 打开PyCharm 左上角File 选择New Project 选择Django 最后Create 然后在Django项目中添加一个文件夹，以便用来保存html文件 
二、项目代码（前端） 1、编写前端代码（正文界面） 1.1、生产html框架 使用Visual Studio Code打开你刚刚在django项目创建的用来编写html文件的文件夹 首先创建一个index.html文件 
英文感叹号加回车键生成html框架 
1.2、添加live preview扩展 Live Preview 扩展的作用是在VSCode内部实现边写边预览的效果。 这个扩展主要用于HTML文件，它允许开发者在编写代码的同时实时查看代码渲染的效果，而不需要离开编辑器或打开浏览器。具体来说，Live Preview 扩展提供了以下几个便利的功能： 实时预览：当你在编辑HTML文件时，任何对代码的更改都会立即反映在预览窗口中，这样你可以即时看到改动效果，提高开发效率。 高度集成：作为微软官方插件，Live Preview与VSCode的集成程度非常高，使用起来非常流畅和方便。 简化操作：相比于其他如LiveServer等插件，Live Preview无需额外的保存和重启服务步骤，减少了繁琐的操作流程。 易于安装：你可以通过VSCode的扩展商店直接搜索并安装Live Preview，安装过程简单快捷。 自定义布局：你可以根据自己的需要调整预览窗口的位置，选择向上/下/左/右拆分，以适应不同的工作流程和屏幕布局。 
直接安装即可 右键index.html文件，然后选择显示预览 
1.3、更改title素中文本 更改第六行的title素 然后ctrl + s保存 1.4、添加CDN（CSS）样式链接 在第七行添加css的链接 1.5、nav标签 从第十一行开始为nav标签 在第一个nav标签中添加一个类 在nav标签中添加div标签 1.6、在body标签中添加类 1.7、nav下创建div标签 创建h2标签之前先要创建三对div标签，三十八行到四十五行 在最后一对div标签中创建h2和p标签 为前面两对div添加素 1.8、当前界面预览 
在第二对div标签中添加内容 添加section标签 1.9、在div标签后添加footer 1.10、完整代码 
2、编写前端代码（登录注册界面） 2.1、创建html框架并添加cdn样式表 2.2、创建密码登录框（完整代码） 
3、编写前端代码（注册页面） 3.1、完整代码 
4、编写前端代码（文章保存记录） 4.1、完整代码 
5、编写前端代码（文章页面） 5.1、完整代码 三、Django代码（后端） 1、添加app功能 ai_blog_app是生成django模版时随着django生成的 
然后将ai_blog_app中的urls.py复制到blog_generato中 
在blog_generato下的urls.py中添加url 2、blog_generato添加index视图（views.py） 首先在ai_blog_app的urls.py文件中添加url路径 创建一个templates文件夹用来存放html前端代码，然后在ai_blog_app的settings.py问价中添加BASE_DIR , ‘templates’ 3、添加数据库 首先连接mysql数据库 
根据自己使用的数据库来选择 注意：记得pip instal pymysql来安装mysql，然后在ai_blog_app下的_init_.py中添加代码，且已经创建好了django中需要使用的mysql环境 然后更改ai_blog_app下settings.py中的mysql配置 最后进行数据库迁移 4、创建管理员用户 然后运行django项目，在浏览器中输入http://127.0.0.1:8000/admin进入后台管理页面 
4.1、后台中文化 在seetings.py文件中将配置项LANGUAGE_CODE的值设置为“zh-Hans” ，TIME_ZONE的值设置为”Asia/Shanghai” 在seetings.py文件中配置项MIDDLEWARE(中间件)中添加本地化中间件 “django.middleware.locale.LocaleMiddleware” 4.2、在blog_generato下的urls.py中添加url 4.3、将注册登录html页面添加到views中 修改signup.html中的代码 修改login.html中的代码 5、ai转换 地址：https://www.assemblyai.com/ 注意：assemblyai库和websockets版本在10.0到11.0之间（根据自己的版本进行安装） 
修改ai_blog_app中settings.py文件，并创建一个media文件夹 6、openai秘钥 地址：https://platform.openai.com/ 因为地区原因无法注册 所以转文字功能无法使用 四、修改后的完整代码（前后端） 
1、 ai_blog_app–> settings.py 2、ai_blog_app–> urls.py 3、ai_blog_app –> init.py 4、blog_generato –> admin.py 5、blog_generato –> models.py blog_generato –> urls.py 7、 blog_generato –> viwes.py 8、templates –> all-logs.html（修改后） 9、templates –>blog-details.html（修改后） 10、templates –>index.html（修改后） 11、templates –>login.html（修改后） 12、templates –>signup.html（修改后） 本篇文章是从YouTube上学的，地址：www.youtube.com/@CodeWithTomi
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/36453.html
