引言:Django怎样去调用漂亮的HTML前端页面呢 就直接使用render方法即可!
Django如何调用HTML前端页面呢?
render方法是django封装好用来调用HTML前端模板的方法!
1.模板放在哪?
- 在主目录下创建一个templates目录用来存放所有的html的模板文件。(如果是使用pycharm创建django项目的话,默认就会自动创建这个目录哦!但是用命令创建django项目的话是没有此目录的!)
- templates目录里面再新建各个以app名字命名的目录来存放各个app中的模板文件。
文章图片
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 viewsurlpatterns = [#子路由
path("login/",views.login),
]
(3)HTML模板文件:
文章图片
注册界面 - 锐客网
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;
}
(4)实现效果:
【前端|8.Django怎样去调用漂亮的HTML前端页面()】
文章图片
推荐阅读
- 前端|npm ERR command failednpm ERR command CWINDOWSsystem32cmd.exe d s c node-gyp rebuild
- #|Vuex在uniapp项目中应用案例
- 前端|vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
- 前端|实习生 Git 不熟练,还没脸去问是种什么体验
- VUE|Vue学习笔记
- Python|Django学习笔记
- VUE|安装与配置axios
- 小小的项目|【HTML——简易 飞机大战 小游戏(效果+代码)】
- html|【HTML——3d粒子特效(效果+代码)】