current position：Home>8. How does Django call the beautiful HTML front-end page?

8. How does Django call the beautiful HTML front-end page?

2021-08-25 07:01:28 【Solitary cold】

introduction ：
Django How to call HTML The front page ？

Django How to call beautiful HTML The front page ?

Just use it render The method can ！

render The method is django Encapsulated to call HTML Method of front-end template ！

1. Where to put the template ？

Create a... In the home directory templates The directory is used to store all html Template file .（ If using pycharm establish django Project words , This directory will be created automatically by default ！ But use the command to create django There is no such directory for the project ！）
templates Create new entries in the directory to app A named directory to store each app Template file in .

2.Django Used in actual combat —— Call beautiful HTML Front page

（1）App music Inside views.py file ：

from django.shortcuts import render,redirect,reverse       
from django.http import HttpResponse
import time
# Create your views here.

def login(request):   # land 
    return render(request,"music/test01.html")     # return HTML Templates  
    # the second html The path of the file can be written directly templates Under the ： Because in settings.py It's already configured in the file !

Be careful ： If using pycharm Created django project ,templates The directory path has been added to DIRS Yes ！
If it was created using the command Django project , You need to add this value yourself ！
Insert picture description here

（2）App music Inside views.py file ：

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [     # Sub route 
    path("login/",views.login),
]

（3）HTML Template file ：

Insert picture description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> The registration screen </title>
    <link rel="stylesheet" href="RESETCSS.css">
    <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> Please register </span>
        <a href=""> Login immediately &lt;</a>
        <hr>
        <input type="text" class="first" placeholder=" Please enter your mobile number "><br>
        <input type="text" class="second" placeholder=" Please input SMS verification code ">
        <input type="button" class="third" value=" Send verification code "><br>
        <input type="text" class="first" placeholder=" Please enter a user name "><br>
        <input type="password" class="first" placeholder=" Please input a password "><br>
        <input type="password" class="first" placeholder=" Please input the password again "><br>
        <input type="text" class="second" placeholder=" Please enter the graphic verification code ">
        <input type="button" class="fourth"><br>
        <input type="submit" class="zc" value=" Register now "><br>
    </form>
</div>

</body>
</html>

（4） Realization effect ：