Django学习(6)配置静态文件

简介:   本文将详细讲述如何在Django中配置静态文件,如图片(images),JavaScript,CSS等。   我们将要实现的网页如下: 当按下按钮“Change Text”时,图片下方的“Good morning!”会变成“Good night!”.再次按下时,则会变成“Good morning!”,如此循环往复地变化。

  本文将详细讲述如何在Django中配置静态文件,如图片(images),JavaScript,CSS等。
  我们将要实现的网页如下:


原始页面

当按下按钮“Change Text”时,图片下方的“Good morning!”会变成“Good night!”.再次按下时,则会变成“Good morning!”,如此循环往复地变化。如下图所示:

改变文字后页面

  首先在’/home/vagrant/django_project’下新建Django项目staticFilesTest,在该项目中新建APP为myapp,命令行代码如下:

cd ~/django_project
django-admin.py startproject staticFilesTest
cd ./staticFilesTest
django-admin.py startapp myapp

  配置settings.py文件,如下:

  1. 添加应用:在“INSTALLED_APPS”中添加’myapp’;
  2. 设置模板路径:在”TEMPLATES”中的“DIRS”中添加“/home/vagrant/django_project/staticFilesTets/myapp/”
  3. 在“STATIC_URL = ‘/static/’”后添加代码
STATICFILES_DIRS = (  
    os.path.join(BASE_DIR, 'static/'),  
)

  在myapp文件夹下,新建index.html文件,这是我们创建的网页页面的模板。代码如下:

<html>
    <head>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'myapp/my.css' %}" />
    <script type="text/javascript" src="{% static 'myapp/changeText.js' %}"></script>   
    </head>
<body>
    <h1>Hello Django!</h1>
    <img src="{% static "myapp/django.jpg" %}" alt="My image"/>
    <p id="text">Good morning!</p>
    <button type="button" onclick="change()">Change Text</button>
</body>
</html>

  编辑views.py文件,代码如下:(显然,这仅仅只是一个简单的例子而已~)

from django.shortcuts import render_to_response

def index(request):
    return render_to_response('index.html')

  在myapp文件夹下新建static文件夹,在static文件夹下新建myapp文件夹,在此myapp文件夹下,放置的文件如下:


myapp文件夹中的文件

其中my.css中的代码如下:

h1 {
    color: red;
    text-align: left;
    font-size: 20pt;
    }
p {margin-left: 20px;}

changeText.js中的代码如下:

function change(){
    var word = document.getElementById("text");
    if(String(word.innerHTML) == "Good morning!"){
        word.innerHTML = "Good night!";
    }
    else{
        word.innerHTML = "Good morning!";
    }
}

  最后配置urls.py,代码如下:

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^test', 'myapp.views.index'),
]

  这样我们就完成了全部的配置。如果想过运行该项目,只需在命令行中输入:

cd ~/django_project/staticFilesTest
python3 manage.py runserver 8000

在本地浏览器中输入“localhost:8000/test”即可看到一开始展示的页面~~
  本次分享到此结束,欢迎大家交流与批评 ~~


参考网址:

  1. Django官方文档:https://docs.djangoproject.com/en/1.8/howto/static-files/
目录
相关文章
|
5月前
|
关系型数据库 MySQL 数据库连接
Django数据库配置避坑指南:从初始化到生产环境的实战优化
本文介绍了Django数据库配置与初始化实战,涵盖MySQL等主流数据库的配置方法及常见问题处理。内容包括数据库连接设置、驱动安装、配置检查、数据表生成、初始数据导入导出,并提供真实项目部署场景的操作步骤与示例代码,适用于开发、测试及生产环境搭建。
189 1
|
4月前
|
存储 前端开发 应用服务中间件
Django 实战:静态文件与媒体文件从开发配置到生产部署
Django项目中,静态文件(Static Files)和媒体文件(Media Files)是两类不同用途的文件。本文详细介绍了它们的区别、配置方法以及在开发与生产环境中的处理方式,并结合用户头像上传功能进行实战演示,最后讲解了如何通过Nginx或OpenResty部署静态与媒体文件服务。
229 1
|
IDE 关系型数据库 MySQL
Django学习一:创建Django框架,介绍Django的项目结构和开发逻辑。创建应用,编写主包和应用中的helloworld
这篇文章是关于如何创建一个Django框架,介绍Django的项目结构和开发逻辑,并指导如何创建应用和编写“Hello, World!”程序的教程。
736 3
Django学习一:创建Django框架,介绍Django的项目结构和开发逻辑。创建应用,编写主包和应用中的helloworld
|
SQL Java 数据库
Django学习三:views业务层中通过models对实体对象进行的增、删、改、查操作。
这篇文章是关于如何使用Django框架的ORM系统在视图(views)层面进行数据库的增、删、改、查操作的教程。
118 0
Django学习三:views业务层中通过models对实体对象进行的增、删、改、查操作。
|
关系型数据库 MySQL Java
Django学习二:配置mysql,创建model实例,自动创建数据库表,对mysql数据库表已经创建好的进行直接操作和实验。
这篇文章是关于如何使用Django框架配置MySQL数据库,创建模型实例,并自动或手动创建数据库表,以及对这些表进行操作的详细教程。
448 0
Django学习二:配置mysql,创建model实例,自动创建数据库表,对mysql数据库表已经创建好的进行直接操作和实验。
|
关系型数据库 MySQL 机器人
Django入门到放弃之数据库配置
Django入门到放弃之数据库配置
|
前端开发 JavaScript 安全
Django入门到放弃之常见配置及基本命令
Django入门到放弃之常见配置及基本命令
|
关系型数据库 应用服务中间件 数据库
如何安装和配置 Django 与 Postgres、Nginx 和 Gunicorn
如何安装和配置 Django 与 Postgres、Nginx 和 Gunicorn
136 0
|
SQL 关系型数据库 数据库
总结一下这几天学习django的心得
总结一下这几天学习django的心得 http://www.tuicool.com/articles/jMVB3e 时间 2014-01-12 11:40:11  CSDN博客 原文  http://blog.csdn.net/jackrex/article/details/18180279 主题 Django 数据库 Python 是个门十分简洁 好用的编程语言,我之前熟悉的是Java 但是用了Python之后 ,发现python的语法还有结构十分清晰,比如强制的缩进,空行,给人的感觉是,写出来的代码很整洁,非常干净漂亮。
1502 0
|
5月前
|
Linux 数据库 数据安全/隐私保护
Python web Django快速入门手册全栈版,共2590字,短小精悍
本教程涵盖Django从安装到数据库模型创建的全流程。第一章介绍Windows、Linux及macOS下虚拟环境搭建与Django安装验证;第二章讲解项目创建、迁移与运行;第三章演示应用APP创建及项目汉化;第四章说明超级用户创建与后台登录;第五章深入数据库模型设计,包括类与表的对应关系及模型创建步骤。内容精炼实用,适合快速入门Django全栈开发。
183 1