Django 构建动态前端页面详解


概要

Django 是一个强大的 Python Web 框架,广泛用于后端开发。然而,它也支持直接使用 HTML, CSS, 和 JavaScript 来构建动态的前端界面。本文将详细介绍如何在 Django 项目中使用这些技术,包括设置静态文件、编写 HTML 模板以及集成 JavaScript 和 CSS。


Django 项目结构和设置

在开始之前,了解 Django 项目的基本结构和如何配置静态文件非常重要。

创建 Django 项目

首先,使用 Django 的命令行工具创建一个新项目和应用。

django-admin startproject myproject
cd myproject
python manage.py startapp myapp

配置静态文件

在 Django 的 settings.py 文件中,设置静态文件的路径。

# settings.pySTATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

编写 HTML 模板

Django 使用模板系统来生成 HTML 页面。

创建模板目录

在你的应用目录下创建一个 templates 文件夹,并在其中创建 HTML 文件。

myapp/templates/myapp/index.html

示例 HTML 模板

{% load static %}
<!-- templates/myapp/index.html --><!DOCTYPE html>
<html>
<head><title>My Django App</title><link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body><h1>Welcome to My Django App</h1><script src="{% static 'js/script.js' %}"></script>
</body>
</html>

添加 CSS 样式

使用 CSS 来美化你的 Django 应用。

创建 CSS 文件

在 static 文件夹下创建一个 CSS 文件。

static/css/style.css

示例 CSS

/* static/css/style.css */body {font-family: Arial, sans-serif;
}h1 {color: blue;
}

集成 JavaScript

JavaScript 可用于增加页面的交互性。

创建 JavaScript 文件

在 static 文件夹下创建一个 JavaScript 文件。

static/js/script.js

示例 JavaScript

// static/js/script.jsdocument.addEventListener('DOMContentLoaded', function() {alert("Welcome to My Django App!");
});

Django 视图和 URL 配置

将创建的模板连接到 Django 视图和 URL。

创建视图

在 views.py 中创建一个视图来渲染模板。

# myapp/views.pyfrom django.shortcuts import renderdef index(request):return render(request, 'myapp/index.html')

配置 URL

在 urls.py 中配置 URL 路径。

# myproject/urls.pyfrom django.urls import path
from myapp.views import indexurlpatterns = [path('', index),
]

运行和测试

运行 Django 开发服务器并在浏览器中查看结果。

python manage.py runserver

访问 http://localhost:8000,应该能看到带有样式和 JavaScript 交互的页面。

总结

通过将 HTML, CSS, 和 JavaScript 直接集成到 Django 项目中,开发者可以创建丰富多彩且交互性强的 Web 应用。尽管 Django 主要用于后端开发,但它也提供了足够的灵活性和工具来构建完整的前端体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/231487.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

教育机构小程序管理系统的全方位优化

随着互联网的快速发展&#xff0c;线上教育也日益受到人们的关注和欢迎。为了满足广大学生和家长的需求&#xff0c;教育机构纷纷开发出自己的小程序管理系统。本文将详细介绍如何使用乔拓云平台&#xff0c;一键开发出自己的教育机构小程序管理系统。 1.进入乔拓云后台 首先&…

【难点】【LRU】146.LRU缓存

题目 法1&#xff1a;基于Java的LinkedHashMap 必须掌握法1。参考链接 关于LinkedHashMap的介绍 class LRUCache {int cap;LinkedHashMap<Integer, Integer> cache new LinkedHashMap<>();public LRUCache(int capacity) { this.cap capacity;}public int get…

Linux性能优化常做的一些事情

Linux性能优化是一个广泛的主题&#xff0c;涉及多个方面。以下是一些常见的Linux性能优化建议&#xff1a; 硬件和系统配置&#xff1a; 使用SSD替代HDD。确保系统有足够的RAM。使用多核CPU。配置合适的网络硬件和带宽。 磁盘I/O性能&#xff1a; 使用RAID来提高I/O性能。使用…

回归烟火气,中国烹饪正在进行一场重构

当前的中国厨电行业&#xff0c;急需一场前所未有的变革。 近几年&#xff0c;厨电行业已告别以往的跨越式增长&#xff0c;多数厨电企业陷入迷茫&#xff0c;如何才能打破增长瓶颈&#xff1f;《一点财经》认为&#xff0c;只有积极适应新形势&#xff0c;探索新的经营方式&a…

考拉兹猜想

考拉兹猜想&#xff08;Collatz conjecture&#xff09;又称奇偶归一猜想&#xff0c;是指对于每一个正整数&#xff0c;如果它是奇数&#xff0c;则对它乘3再加1&#xff0c;如果它是偶数&#xff0c;则对它除以2。如此循环&#xff0c;最终都能得到1。 编写一个程序&#xff…

【web安全】支付篡改

前言 菜某的总结&#xff0c;如有错误和补充欢迎评论指正。 内容仅供学习使用&#xff0c;切勿用于非法用途。 支付篡改的存在位置与影响 首先他的危害不言而喻&#xff0c;几乎任何一个拿出来都能给企业带来巨大的损失。 他出现的地方也是十分的广泛&#xff0c;从某种意…

复杂背景下的低空无人机检测与跟踪算法

doi&#xff1a;10.11884/HPLPB202335.230026 大视场中的目标丢失后需要再次检测&#xff0c;但是大视场的检测比较耗时。但是根据实验发现丢失目标通常发生在无人机运动区域的320x320范围内&#xff0c;所以设计辅助网络&#xff0c;当目标丢失后&#xff0c;以320x320区域图像…

Transformer Decoder的输入

大部分引用参考了既安的https://www.zhihu.com/question/337886108/answer/893002189这篇文章&#xff0c;个人认为写的很清晰&#xff0c;此外补充了一些自己的笔记。 弄清楚Decoder的输入输出&#xff0c;关键在于图示三个箭头的位置&#xff1a; 以翻译为例&#xff1a; 输…

七轴开源协作机械臂myArm视觉跟踪技术!

引言 ArUco标记是一种基于二维码的标记&#xff0c;可以被用于高效的场景识别和位置跟踪。这些标记的简单性和高效性使其成为机器视觉领域的理想选择&#xff0c;特别是在需要实时和高精度跟踪的场景中。结合机器学习和先进的图像处理技术&#xff0c;使用ArUco标记的机械臂系统…

20231218在Ubuntu18.04下以EXT4格式化HDD

20231218在Ubuntu18.04下以EXT4格式化HDD 2023/12/18 17:24 缘起&#xff1a; 编译一个Android10大概要200GB&#xff0c;编译10个Android10的SDK&#xff0c;3TB的HDD机械硬盘就估计会被填满了&#xff01; 如果使用rm -rf *这个命令将SDK一个一个逐个地删除&#xff0c;估计2…

Qt之图像处理

QPainter 绘制基本图形的类 一次性填充绘制 QVector<QPoint> drawPointsGray;//存储灰色的点 //...将所有要画灰色的点加入该数组中 painter.setPen(Qt::gray);//设置颜色 painter.drawPoints(drawPointsGray.data(), drawPointsGray.size());//测试 QImage 根据地址…

数据可视化(附带操作实例)

一、主要目的&#xff1a; 数据可视化是关于图形或表格的数据展示&#xff0c;旨在借助图形化手段&#xff0c;清晰有效的传达与沟通信息。通过直观地传达关键内容与特征&#xff0c;从而实现对相当稀疏而又复杂的数据集的深入洞察。熟悉在Python开发环境中支持数据可视化环节…

mybatis.interceptor.exception.SqLValidateException:Ilegal SQL::......

现象&#xff1a;⬇️ 描述&#xff1a;执行 SQL 没问题&#xff0c;应用代码报错 ⬇️ .mybatis.interceptor.exception.SqLValidateException&#xff1a;Ilegal SQL::SELECT voucherNo FROM voucher ORDER BY CAST(SUBSTRING(voucherNo FROM LOCATE(_, voucherNo) 1) AS U…

力扣刷题记录(15)LeetCode:509、70、746

目录 509.斐波那契数 70.爬楼梯 746.使用最小花费爬楼梯 总结 ​​​​​​ 用一个数组来存储前两个数的值&#xff0c;然后根据前两个数的值来确定当前的值。 class Solution { public:int fib(int n) {if(n<2) return n;vector<int> v;v.push_back(0);v.push…

ELK(九)—logstash

目录 简介安装部署测试 配置详解编写配置文件连接elasticsearch将数据推送到elasticsearch中。 简介 Logstash 是一个开源的服务器端数据处理管道&#xff0c;由 Elastic 公司维护和开发。它被设计用于从不同来源收集、处理和转发数据&#xff0c;以供 Elasticsearch 进行存储…

持续集成交付CICD:Jenkins使用GitLab共享库实现前端项目镜像构建

目录 一、实验 1. GitLab修改项目文件与Harbor环境确认 2.Jenkins使用GitLab共享库实现前端项目镜像构建 3.优化CI流水线封装Harbor账户密码 4.Jenkins再次使用GitLab共享库实现前端项目镜像构建 一、实验 1. GitLab修改项目文件与Harbor环境确认 &#xff08;1&#xf…

掌握 Babel:让你的 JavaScript 与时俱进(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

【期末复习向】文本理解与数据挖掘-名词解释

&#xff08;一&#xff09;什么是自然语言处理 1.自然语言处理&#xff08;NLP&#xff09; 从最广泛的意义上说&#xff0c;NLP指的是任何自动处理人类语言的程序 &#xff08;二&#xff09;一系列自然语言处理问题 2.NLP常用方法 基于规则的方法&#xff08;基于人工标…

【神经网络】imshow展示图片报错

文章目录 代码示例报错信息报错原因解决方法其他问题 代码示例 plt.imshow(np.squeeze(images[0]))报错信息 Invalid shape (3, 60, 90) for image data报错原因 格式错误&#xff0c;输入具有RGB值的图像&#xff0c;输入三维数组参数的格式应该是&#xff08;高度&#xf…

2024 年 QA 自动化的语言是什么?

厌倦了手动测试&#xff0c;可以开始自动化测试了。 我有一些使用 Ruby 和 Java 进行自动化的经验&#xff0c;但我参与的所有项目都已经有了现成的框架&#xff0c;所以主要是重构&#xff08;因为我擅长 Google&#xff0c;而且用问题来烦同事也没有什么问题&#xff09;。不…