Python Web开发-Django2.0学习06-优快云博客

本文链接：https://blog.youkuaiyun.com/mxsgoden/article/details/79485237

六、静态文件

静态文件是指网站中的js、css、图片、视频等文件。

1、使用css

首先，在polls目录中创建一个static目录，Django将在那里寻找静态文件，类似于如何找到模板polls/templates/。同样，在static目录下再创建一个polls、css目录和style.css文件，在polls/static/polls/css/style.css输入下面代码：

li  a  { 
    color ： green ; 
}

接着，在index.html中使用样式表，在polls/templates/polls/index.html里加上如下代码：

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/css/style.css' %}" />

{% static %}标签生成静态文件的绝对路径。

PS：若不成功，需要手动收集静态文件。在mysite/settings.py最后面加上如下代码，然后在项目目录cmd中运行python manage.py collectstatic。

# STATIC_ROOT文件夹是用来将所有STATICFILES_DIRS中所有文件夹中的文件，以及各app中static中的文件都复制过来
# 把这些文件放到一起是为了用apache等部署的时候更方便
STATIC_ROOT = os.path.join(BASE_DIR, 'collected_static')

2、添加一个背景图片

先在css目录下创建一个images目录，放一张叫做default.gif的图片，路径为 polls/static/polls/css/images/default.gif。

然后添加到样式表polls/static/polls/css/style.css,代码如下：

body {
    background: white url("images/default.gif") no-repeat center;
}

重新加载http://localhost:8001/polls/，你应该可以在屏幕中看到加载的背景图片。

3、使用前端框架Bootstrap和Vue

Bootstrap是基于HTML、CSS、JavaScript的一个CSS/HTML框架。

vue是一个兴起的前端JS库,是一套构建用户界面的渐进式框架。它不是一个全能框架，只聚焦于视图层，目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易，同时vue.js又是可以绑定model和view(这个相当于MVC中的，M和V之间的关系)，使得对数据变换的操作变得更加的简易，简化了很多的逻辑代码。如果同时运用到一起，可以实现很强大的效果。

使用可以参考BVDN构建网站。

参考资料