html登录界面设计代码_完整html网页代码

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

html登录界面设计代码_完整html网页代码

相关推荐