Django零基础入门之调用漂亮的HTML前端页面
引言：
Django如何调用HTML前端页面呢？
Django怎样去调用漂亮的HTML前端页面呢?
就直接使用render方法即可！
render方法是django封装好用来调用HTML前端模板的方法！
1.模板放在哪？
在主目录下创建一个templates目录用来存放所有的html的模板文件。（如果是使用pycharm创建django项目的话，默认就会自动创建这个目录哦！但是用命令创建django项目的话是没有此目录的！）
templates目录里面再新建各个以app名字命名的目录来存放各个app中的模板文件。
2.Django中实战使用——调用漂亮的HTML前端页面
（1）App music里面的views.py文件：
from django.shortcuts import render,redirect,reverse
from django.http import HttpResponse
import time
# Create your views here.
def login(request): #登陆
return render(request,"music/test01.html") #返回HTML模板
#第二个html文件的路径可以直接写templates下的：因为在settings.py文件中已经配置好了!
注意：如果是使用pycharm创建的django项目，templates目录路径是已经添加到DIRS中了哦！
如果是使用命令创建的Django项目，需要你自行添加此值哦！
（2）App music里面的views.py文件：
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [ #子路由
path("login/",views.login),
]
（3）HTML模板文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<link rel="stylesheet" href="RESETCSS.css" rel="external nofollow" >
<style>
div{
width: 300px;
height: 350px;
border: 1px solid grey;
margin: 8px 0 0 8px;
}
span{
border-bottom: 3px solid purple;
padding-bottom: 3px;
}
a{
text-decoration: none;
float: right;
padding-top: 3px;
color: deepskyblue;
}
.first{
width: 290px;
height: 30px;
border: 1px solid grey;
border-radius: 5px;
margin: 5px 4px;
}
.second{
width: 200px;
height: 30px;
border: 1px solid grey;
border-radius: 5px;
margin: 5px 4px;
}
.third{
width: 79px;
height: 30px;
border: 1px solid blue;
border-radius: 5px;
color: blue;
}
.fourth{
width: 79px;
height: 30px;
border: 1px solid blue;
border-radius: 5px;
vertical-align: middle;
background-image: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1378353400,959510337&fm=26&gp=0.jpg");
background-size: 79px 30px;
}
.zc{
width: 290px;
height: 30px;
border: 1px solid grey;
border-radius: 5px;
margin: 5px 4px;
background-color: skyblue;
color: white;
}
</style>
</head>
<body>
<div>
<form action="">
<span>请注册</span>
<a href="">立即登录<</a>
<hr>
<input type="text" class="first" placeholder="请输入手机号"><br>
<input type="text" class="second" placeholder="请输入短信验证码">
<input type="button" class="third" value="发送验证码"><br>
<input type="text" class="first" placeholder="请输入用户名"><br>
<input type="password" class="first" placeholder="请输入密码"><br>
<input type="password" class="first" placeholder="请再次输入密码"><br>
<input type="text" class="second" placeholder="请输入图形验证码">
<input type="button" class="fourth"><br>
<input type="submit" class="zc" value="立即注册"><br>
</form>
</div>
</body>
</html>
（4）实现效果：
到此这篇关于Django零基础入门之调用漂亮的HTML前端页面的文章就介绍到这了,更多相关Django调用HTML页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Django实现静态文件缓存到云服务的操作方法
一般与页面有关的系统都会有大量的静态文件,包括js.css以及图标图片等,这些文件一般是项目的相对路径,在加载的时候会从本地读取再转发出去.由于这类文件一般比较大,导致接口响应变长,但是这些文件一般很少改动,所以非常适合通过Nginx或者云服务来缓存.一般云服务与cdn无缝集成,能够更快下发到客户端.我们后台系统很多使用的是基于python的Django框架,该怎么来实现静态文件缓存呢? 这个过程简单的让人惊讶,但是开始一直搞不清楚关系,前前后后耽误了不少时间. 1.collectstatic命
-
教你pycharm运行Django第一个项目
下面步骤展示的是如何经过VirtualBox管理器,使得pycharm和ubuntu中的项目环境连接对应起来! 如果你有属于自己的服务器,核心步骤都是大差不差的,甚至使用服务器步骤更简单许多哦!(但是要注意:要将你服务器的ip地址加入settings.py文件里的ALLOWED_HOSTS值里!) 搭建Django: 第一步:使用pycharm创建Django项目: 1.新建Django项目: 2.为Django项目指定远程中创建的虚拟环境下的python解释器: 3.配置ubuntu的端口转发
-
Django动态展示Pyecharts图表数据的几种方法
目录 Django 模板渲染 1. 新建一个 Django 项目 2. 新建项目 urls 文件 3. 编写 Django 和 pyecharts 代码渲染图表 定时全量更新图表 定时增量更新图表 本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令行中输入以下命令 django-admin startproject pyecharts_django
-
详解解Django 多对多表关系的三种创建方式
目录 1.方式一:自动创建 2.方式二:纯手动创建 3.方式三:半自动创建 1.方式一:自动创建 # django orm 自动帮我们创建第三张表,我的app名字是app01, 表名为:app01_book_authors # 这种方式可以让Django迅速的帮我们建一张关系表出来,好处是可以通过这张表进行跨表查询,坏处是一张虚拟表,拓展性差. # 书籍表 class Book(models.Model): name = models.CharField(max_length=32) autho
-
Django零基础入门之路由path和re_path详解
目录 urls.py文件中的path和re_path 1.path的基本规则: 2.默认支持的转换器有: 3.re_path正则匹配: Django中实战使用path和re_path 1.urls.py文件: 2.views.py视图函数文件: 3.效果: 假设现在有个需求: 需要通过URL进行参数传递,我们该怎么做呢? 其中有个方法就是本文要讲的内容--path和进阶版的re_path. urls.py文件中的path和re_path 1.path的基本规则: path('test
-
Django将项目移动到新环境的操作步骤
一.操作步骤 步骤一:输出虚拟环境中已安装包的名称及版本号并记录到 requirements.txt 文件中 pip freeze > requirements.txt 步骤二:复制工程到新环境,并在项目工程目录(虚拟环境)下,打开cmd窗口 步骤三:将安装包保存到文件夹packages里 pip download -r requirements.txt -d packages 步骤四:创建虚拟环境 python -m venv ./venv 步骤五:将文件导入到虚拟环境中 步骤六:pychar
-
Django零基础入门之调用漂亮的HTML前端页面
引言: Django如何调用HTML前端页面呢? Django怎样去调用漂亮的HTML前端页面呢? 就直接使用render方法即可! render方法是django封装好用来调用HTML前端模板的方法! 1.模板放在哪? 在主目录下创建一个templates目录用来存放所有的html的模板文件.(如果是使用pycharm创建django项目的话,默认就会自动创建这个目录哦!但是用命令创建django项目的话是没有此目录的!) templates目录里面再新建各个以app名字命名的目录来存放
-
Django零基础入门之自定义标签及模板中的使用
目录 自定义标签: 第一部分 (1)视图函数编写: (2)编写模板文件: (3)自定义标签实现: (4)效果展示: 第二部分 (1)视图函数编写: (2)编写模板文件: (3)自定义标签实现: 第三部分 紧接上文--<Django零基础入门之自定义过滤器及模板中的使用>,本文来讲一讲自定义标签!!! 自定义标签: 源码学习: template.Library().simple_tags(): def simple_tag(self, func=None, takes_context=None,
-
Django零基础入门之模板变量详解
引言: 我们在页面上会看到,谁登录的就会显示谁的信息,那么这个页面上的变量信息是怎样实现的呢? 这就是本文要讲述的内容--Django中的模板变量! 1.模板变量! 可以在前端页面中使用模板变量来取数据库中的数据,实现前端页面数据动态显示. (1)模板变量使用规则:(在HTML模板中使用!) 语法: {{ 变量名 }} 命名由字母和数字以及下划线组成,不能有空格和标点符号 可以使用字典.类对象.方法.函数.列表.字符串 不要和python或django关键字重名 注意: 如果data是一个字典,
-
Django零基础入门之自定义过滤器及模板中的使用
目录 引言 自定义过滤器 (1)首先 (2)内置过滤器lower的使用: (3)自定义过滤器的使用: (4)模板中使用自定义过滤器: (5)效果展示: 引言 分析Django内置的模板过滤器: 通过分析可以将内置的过滤器理解为: 一个带有一个或两个参数的python函数: (输入的)变量的值[注意:不一定是字符串形式,在前面也讲过可以是哪些类型.] 参数的值--可以有一个初始值,或者完全没有参数. 自定义过滤器 新建一个名为ceshi的app以供本文学习使用: 自定义过滤器及标签所在的tem
-
Django零基础入门之静态文件的引用
目录 效果展示: 1.静态文件引用: (1)创建静态文件目录: (2)静态文件路径的配置: (3)创建三大静态文件: (4)静态文件的引用: 引言: 在我们Django中如何引用三大静态文件(JavaScript,CSS,image)呢? 这就是本文要讲述的内容--静态文件的引用! 效果展示: 点击确定之后: 1.静态文件引用: (1)创建静态文件目录: 在项目目录下创建static目录, 为了区分开各种类型的静态文件,再分别创建css,image,js文件目录: (2)静态文件路径的配置: 在
-
Django零基础入门之运行Django版的hello world
目录 1.项目目录及文件说明: 2.项目与应用app的关系: 3.使用django框架编写hello world! 1.项目目录及文件说明: manage.py django中的一个命令行工具,管理django项目: __init__.py 空文件,告诉python这个目录是python报: settings.py 配置文件,包含数据库信息,调试标志,静态文件等: urls.py django项目的URL声明: wsgi.py 部署服务器用到: templates 存放html文件. 2.项目与
-
Django零基础入门之常用过滤器详解
引言: 前面讲过了Django中使用模板变量.使用很简单,那么有没有什么关于模板变量的骚操作呢? 答案是肯定有的,这就是本文要讲的--过滤器! 1.过滤器 (1)纯干货讲解: 作用: 对变量进行过滤.在真正渲染出来之前,过滤器会根据功能处理好变量,然后得出结果后再替换掉原来的变量展示出来. 语法:{{ fruits|lower }} 管道符号进行链式调用(可以理解为嵌套使用!),比如实现一个功能,先把所有字符变成小写,再把第一个字符转换成大写. 语法:{{fruits|lower|capfirs
-
Bootstrap零基础入门教程(三)
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.
-
PyTorch零基础入门之构建模型基础
目录 一.神经网络的构造 二.神经网络中常见的层 2.1 不含模型参数的层 2.2 含模型参数的层 (1)代码栗子1 (2)代码栗子2 2.3 二维卷积层 stride 2.4 池化层 三.LeNet模型栗子 三点提醒: 四.AlexNet模型栗子 Reference 一.神经网络的构造 PyTorch中神经网络构造一般是基于 Module 类的模型来完成的,它让模型构造更加灵活.Module 类是 nn 模块里提供的一个模型构造类,是所有神经网络模块的基类,我们可以继承它来定义我们想要的模型.