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 ?

  1. 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 !)
  2. templates Create new entries in the directory to app A named directory to store each app Template file in .
     Insert picture description here

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 :

 Insert picture description here

copyright notice
author[Solitary cold],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210825070125756Y.html

Random recommended