本文将详细讲述如何在Django中配置静态文件，如图片（images）,JavaScript,CSS等。

  我们将要实现的网页如下：


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


  首先在'/home/vagrant/django_project'下新建Django项目staticFilesTest,在该项目中新建APP为myapp,命令行代码如下：
```bash
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

{% load staticfiles %}

Hello Django!

Good morning!

Change Text

```
  编辑views.py文件，代码如下：（显然，这仅仅只是一个简单的例子而已~）
```python
from django.shortcuts import render_to_response

def index(request):

return render_to_response('index.html')

  在myapp文件夹下新建static文件夹，在static文件夹下新建myapp文件夹，在此myapp文件夹下，放置的文件如下：

<center>

![myapp文件夹中的文件](http://img.blog.csdn.net/20180110152655347?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

</center>

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

```html

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/