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="">立即登录&lt;</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页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-08-30

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将项目移动到新环境的操作步骤

一.操作步骤 步骤一:输出虚拟环境中已安装包的名称及版本号并记录到 requirements.txt 文件中 pip freeze > requirements.txt 步骤二:复制工程到新环境,并在项目工程目录(虚拟环境)下,打开cmd窗口 步骤三:将安装包保存到文件夹packages里 pip download -r requirements.txt -d packages 步骤四:创建虚拟环境 python -m venv ./venv 步骤五:将文件导入到虚拟环境中 步骤六:pychar

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实现静态文件缓存到云服务的操作方法

一般与页面有关的系统都会有大量的静态文件,包括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的端口转发

Python学习之路之pycharm的第一个项目搭建过程

简介: 上文中已经介绍如何安装Pycharm已经环境变量的配置.现在软件已经安装成功,现在就开始动手做第一个Python项目.第一个"Hello World"项目. 第一步:打开Pycharm软件 1.双击,桌面图标,运行软件,进入软件后,点击"Create NewProject" 2.在弹出的窗口中,在工程路径Location处选择存放路径以及为建立的新工程命个名,如:MyFristProject.这个文件名必须在工程路径下是不存在的文件夹. 第二步:添加解释器

运行django项目指定IP和端口的方法

一.django项目启动命令 默认IP和端口 python manage.py runserver 指定端口 python manage.py runserver 192.168.1.50:8080 二.遇到的问题 Invalid HTTP_HOST header: '192.168.1.50'. You may need to add '192.168.1.50' to ALLOWED_HOSTS. 修改settings.py,将192.168.1.50添加到ALLOWED_HOSTS中 AL

如何用golang运行第一个项目

安装一些必要的环境 1.下载go sdk (本人装的是1.9) 2.下载golang 3.下载git 因为有些依赖 要用 go get 去github上获取 4.配置gopath bin 生成的执行文件 pkg 编译的中间文件 src 程序的代码文件 里面有3个文件夹,然后把项目放在src里.配置idea的gopath 5.这里run kind选package 6.如果有依赖要安装,如下:用 go get 7.最后运行: postman 测试接口 到此这篇关于如何用goland运行第一个项目的文

详解pycharm的newproject左侧没有出现项目选项的情况下创建Django项目的解决方法/社区版pycharm创建django项目的方法

首先,我当时出现的问题是newproject创建的时候没有django的选项,查了半天发现我安装的pycharm是社区版本.所以需要用终端命令行的方式创建django项目. 首先,随便打开一个项目,然后在pycharm界面的左下角有Terminal终端的图标,点开. cd返回根目录 在终端输入你PycharmProjects的目录,由于我是mac 端,我输入的是:cd /Users/apple/PycharmProjects 进入目录后,输入:django-admin startproject

Pycharm 操作Django Model的简单运用方法

Django中的Models 是什么? 通常一个Model对应数据库的一张数据表, Django中Models以类似的形式表现, 它包含了一些基本字段以及数据的一些行为 在Django工程 app 模块中有models.py, 输入 from django.db import models # Create your models here. class Person(models.Model): name = models.CharField(max_length=30) age = mode

使用docker部署django技术栈项目的方法步骤

随着Docker的普及成熟,已经逐渐成为部署项目的首选,今天来和大家分享下如何使用docker部署django技术栈项目. 我们这里说的Django技术栈为:python3.6.Django2.2.redis.mysql.celery.gunicorn和nginx.在实际的生产项目中,这些组件分布在集群的不同机器,如Nginx.redis和Mysql可能会有单独的团队或部门负责.涉及的部署架构和容器的编排会更为复杂,本文暂不去深究.本文主要介绍,如何使用 docker-compose 来编排这些

pycharm 将django中多个app放到同个文件夹apps的处理方法

在django中需要创建多个app,这个就需要创建一个apps文件,把所有的app放到同个文件夹,这个比较清楚,看起来也比较规范 首先在项目文件右击-–new–python package创建一个apps文件,把所有的app拖入到apps, 弹出对话框把search for references和open moved files in editor不勾选,点击确认,这个时候运行点击run,会出现运行错误 in check_apps_ready raise AppRegistryNotReady(

Django+Xadmin构建项目的方法步骤

Django部分 创建项目 django-admin startproject mysite #创建一个mysite项目 运行简易服务器 python manage.py runserver #欢迎页面http://127.0.0.1:8000 设置系统语言和时间 //文件名:settings.py ********************* LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai' 设置MySQL数据库 更改设置文件之前需先创建

Django框架创建项目的方法入门教程

本文实例讲述了Django框架创建项目的方法.分享给大家供大家参考,具体如下: Django 管理工具 安装 Django 之后,就有了可用的管理工具 django-admin.py.我们可以使用 django-admin.py 来创建一个项目: 我们可以来看下django-admin.py的命令介绍: Type 'django-admin.py help <subcommand>' for help on a specific subcommand. Available subcommand

Pycharm 创建 Django admin 用户名和密码的实例

1. 问题 使用PyCharm 创建完Django 项目 想登录admin 页面 却不知道用户名和密码. 用的默认sqlit 2.解决办法 2.1 打开manage.py 控制界面 2.2 初始化数据库表 manage.py@HelloDj > makemigrations manage.py@HelloDj > migrate 2.3 创建admin user manage.py@HelloDj >createsuperuser 输入用户..密码.. http://127.0.0.1: