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/
目录
相关文章
|
3月前
|
IDE 关系型数据库 MySQL
Django学习一:创建Django框架,介绍Django的项目结构和开发逻辑。创建应用,编写主包和应用中的helloworld
这篇文章是关于如何创建一个Django框架,介绍Django的项目结构和开发逻辑,并指导如何创建应用和编写“Hello, World!”程序的教程。
217 3
Django学习一:创建Django框架,介绍Django的项目结构和开发逻辑。创建应用,编写主包和应用中的helloworld
|
3月前
|
SQL Java 数据库
Django学习三:views业务层中通过models对实体对象进行的增、删、改、查操作。
这篇文章是关于如何使用Django框架的ORM系统在视图(views)层面进行数据库的增、删、改、查操作的教程。
35 0
Django学习三:views业务层中通过models对实体对象进行的增、删、改、查操作。
|
3月前
|
关系型数据库 MySQL Java
Django学习二:配置mysql,创建model实例,自动创建数据库表,对mysql数据库表已经创建好的进行直接操作和实验。
这篇文章是关于如何使用Django框架配置MySQL数据库,创建模型实例,并自动或手动创建数据库表,以及对这些表进行操作的详细教程。
126 0
Django学习二:配置mysql,创建model实例,自动创建数据库表,对mysql数据库表已经创建好的进行直接操作和实验。
|
6月前
|
API 数据库 数据安全/隐私保护
Django配置api、管理系统和视图
Django配置api、管理系统和视图
145 1
|
5月前
|
关系型数据库 MySQL 机器人
Django入门到放弃之数据库配置
Django入门到放弃之数据库配置
|
5月前
|
前端开发 JavaScript 安全
Django入门到放弃之常见配置及基本命令
Django入门到放弃之常见配置及基本命令
|
6月前
|
存储 JavaScript 前端开发
Django + Vue 实现图片上传功能的全流程配置与详细操作指南
 在现代Web应用中,图片上传是一个常见且重要的功能。Django作为强大的Python Web框架,结合Vue.js这样的现代前端框架,能够高效地实现这一功能。本文将详细介绍如何在Django项目中配置图片上传的后端处理,并在Vue前端实现图片的选择、预览和上传功能。
|
5月前
|
关系型数据库 应用服务中间件 数据库
如何安装和配置 Django 与 Postgres、Nginx 和 Gunicorn
如何安装和配置 Django 与 Postgres、Nginx 和 Gunicorn
63 0
|
Apache Python 前端开发
|
前端开发 关系型数据库 数据库
01.Django学习之安装,建立项目,传参,MySQL数据库,静态文件配置和模板的使用
1:安装 pip install Django==1.8.6 2:建立项目  进入某个目录执行 django-admin.py startproject myweb(此为项目目录)  建立子目录:         先进入 myweb目录,然后执行 manage.
1266 0