Python项目:Django 设置应用程序的样式并进行部署

简介: Python项目:Django 设置应用程序的样式并进行部署

文章目录

设置项目样式

Django-bootstrap3 应用程序

使用 bootstrap 设置项目样式

修改 base.html

使用 jumbotron 设置主页样式

设置登录页面的样式

设置 `new_topic` 页面的样式

设置 `topics` 页面样式

设置 `topic` 页面中条目样式

小结


前面已经基本实现了使用 Django 搭建 Web 应用程序项目“学习笔记”:


  • Django入门项目搭建
  • Django构建Web应用程序添加用户管理

经过前面两步,目前项目功能基本完备,但是黑没有设置样式,并且运行也仅仅只能在本地计算机上运行。

现在,就开始以一种简单的方式设置项目样式,并将其部署到网络服务器上,以方便大家进行访问。


设置样式,将用到 bootstrap 库,这是一组工具,用于为 Web 应用程序设置样式,使得其能够在任何现代设备上都看起来很专业,无论是大型平板还是智能手机。


设置项目样式

之前开发项目仅仅考虑到它的功能性,而没用关注样式设置的问题。这是因为能够正确运行的应用程序才是更重要的,但是当程序能够正确运行后,外观也就很重要了。

接下来,将简单介绍一下关于应用程序 Django-bootstrap3 ,并将其继承到项目中,为部署项目做准备。


Django-bootstrap3 应用程序

将使用 Django-bootstrap3 将 bootstrap 继承到项目中。这个应用程序下载必要的 bootstrap 文件,将它们放在项目的合适位置,能够使得在项目的模版中使用样式设置指令。


安装 Django-bootstrap3.(使用pip)


<.../Scripts> .\python.exe -m pip install --upgrade pip 
<...\Scripts> .\pip3.8.exe install django-debootstrap3                                                                                                                 ERROR: Could not find a version that satisfies the requirement django-debootstrap3
ERROR: No matching distribution found for django-debootstrap3
PS F:\Python实验\实例代码\AlienInvasion\项目(Django)\learning_log_20\11_env\Scripts> .\pip3.8.exe install django-bootstrap3                                                                                                                   Collecting django-bootstrap3
  Downloading django_bootstrap3-14.2.0-py3-none-any.whl (23 kB)
Requirement already satisfied: django<4.0,>=2.2 in f:\python实验\实例代码\alieninvasion\项目(django)\learning_log_20\11_env\lib\site-packages\django-3.1.3-py3.8.egg (from django-bootstrap3) (3.1.3)
Requirement already satisfied: asgiref<4,>=3.2.10 in f:\python实验\实例代码\alieninvasion\项目(django)\learning_log_20\11_env\lib\site-packages\asgiref-3.3.1-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (3.3.1)
Requirement already satisfied: pytz in f:\python实验\实例代码\alieninvasion\项目(django)\learning_log_20\11_env\lib\site-packages\pytz-2020.4-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (2020.4)
Requirement already satisfied: sqlparse>=0.2.2 in f:\python实验\实例代码\alieninvasion\项目(django)\learning_log_20\11_env\lib\site-packages\sqlparse-0.4.1-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (0.4.1)
Installing collected packages: django-bootstrap3
Successfully installed django-bootstrap3-14.2.0


接下来,需要在 learning_log/settings.py 中的 INSTALLED_APPS 中添加应用程序:


# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #第三方应用
    'bootstrap3',
    #   自定义应用
    'learning_logs',
    # 账户管理应用
    'users',
]


添加 bootstrap3 应用程序名称,我们需要使得 Django-bootstrap3 包含 jQuery ,这是一个 JavaScript 库,能够使用 bootstrap 模版提供的一些交互元素。所以在 settings.py 末尾添加如下代码:


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
LOGIN_URL = '/users/login/'
#django-bootstrap3 设置
BOOTSTRAP3={
    'include_jquery':True,
}



添加这样的代码将使得不需要手动下载 jQuery 并能够正确使用。


使用 bootstrap 设置项目样式

bootstrap 基本上就是一个大型的样式设置工具集,还提供了大量的模版,你可将它们应用于项目以创建独特的总体风格。对bootstrap初学者来说,这些模版比各个样式设置工具使用起来要容易得多。要查看bootstrap提供的模版,可以访问:getbootstrap ,单击 Get started ,往下能找到 Examples 部分,并找到 Navbars in action ,这里将使用模版 Static top navbar ,它能提供了简单的顶部导航条、页面标题和用于放置页面内容的容易。

2020120420375754.png20201204203742594.png


修改 base.html

现在就需要修改 base.html 模版文件,以使用前述 bootstrap 模版。现在将 base.html 分为以下几部分分别修改:


  1. 定义 HTML 头部

对于 base.html 所做的第一项修改,首先需要在文件中定义 HTML 头部,使得显示“学习笔记”的每个页面时,浏览器标题栏都显示这个网站的名称。此外还需要添加一些在模版中使用 bootstrap 所需要的信息。删除 base.html 的全部代码,输入下面的代码:

{% load bootstrap3 %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Learning Log</title>
  {% bootstrap_css %}
  {% bootstrap_javascript %}
  </head>


  1. 定义导航栏

下面就需要来定义页面顶部的导航栏:

<body>
  <!-- Static navbar -->
  <nav class="navbar navbar-default navbar-static-top">
   <div class="container">
     <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed"
        data-toggle="collapse" data-target="#navbar"
     aria-expanded="false" aria-controls="navbar">
       </button>
    <a class="navbar-brand" href="{% url 'learning_logs:index' %}">
        Learning Log</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="{% url 'learning_logs:topics' %}">Topics</a></li>
    </ul>
    <ul class="navbar-nav navbar-right">
      {% if user.is_authenticated %}
     <li><a>Hello, {{ user.username }}.</a></li>
     <li><a href="{% url 'users:logout' %}">log out</a></li>
    {% else %}
     <li><a href="{% url 'users:register' %}">register</a></li>
     <li><a href="{% url 'users:login' %}">log in</a></li>
    {% endif %}
    </ul>
  </div><!--/.nav-collapse -->
      </div>
  </nav>


  1. 定义页面的主要部分

剩余部分就是包含页面的主要部分:


<div class="container">
   <div class="page-header">
     {% block header %}{% endblock header %}
   </div>
   <div>
     {% block content %}{% endblock content %}
   </div>
  </div><!-- /container -->
  </body>
</html>


使用 jumbotron 设置主页样式

下面使用新定义的 header 块及另一个名为 jumbotron 的 bootstrap 元素修改主页。 jumbotron 元素是一个大框,相比于页面的其他部分显得很独特,想要在其中包含任何东西都是可以的;通常用于在主页中呈现项目的简要描述。修改 index.html 内容如下:


{% extends "learning_logs/base.html" %}
{% block header %}
  <div class='jumbotron'>
    <h1>Track your learning.</h1>
  </div>
{% endblock header%}
{% block content %}
  <h2>
    <a href="{% url 'users:register' %}">Register an account</a> to make your own Learning Log, and list the topics ypu're learning about.
  </h2>
  <h2>
    Whenever you learn something new about a topic, make an entry summarizing what you're learned
  </h2>
{% endblock content %}


设置登录页面的样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
  <h2>Log in to your account.</h2>
{% endblock header %}
{% block content %}
  <form method="post" action="{% url 'users:login' %} class="form">
    {% csrf_token %}
  {% bootstrap_form form %}
  {% buttons %}
   <button name="submit" class="btn btn-primary">log in</button>
  {% endbuttons %}
  <input type="hidden" name="next" value="{% url 'learning_logs:index' %}" />
  </form>
{% endblock content %}

20201206084442935.png

设置 new_topic 页面的样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
  <h2>Add a new topic:</h2>
{% endblock header %}
{% block content %}
  <p>Add a new topic:</p>
  <form action="{% url 'learning_logs:new_topic' %}" method='post' class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
  {% buttons %}
   <button name="submit" class="btn btn-primary">add topic</button>
  {% endbuttons %}
  </form>
{% endblock content %}

20201206084442935.png

设置 topics 页面样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
  <h1>Topics</h1>
{% endblock header %}
{% block content %}
  <ul>
    {% for topic in topics %}
   <li>
     <h3>
    <a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a>
  </h3>
   </li>
  {% empty %}
   <li>No topics have been added yet.</li>
  {% endfor %}
  </ul>
  <h3><a href="{% url 'learning_logs:new_topic' %}">Add a new topic:</a></h3>
{% endblock content %}

20201206084506400.png20201206084547257.png

设置 topic 页面中条目样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
  <h2>{{Topic}}</h2>
{% endblock header %}
{% block content %}
  <p>
    <a href="{% url 'learning_logs:new_entry' topic.id %}">add new entry</a>
  </p>
  {% for entry in entries %}
    <div class="panel panel-default">
   <div class="panel-heading">
     <h3>
    {{ entry.date_added|date:'M d, Y H:i' }}
    <small>
      <a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
    </small>
  </h3>
   </div>
   <div class="panel body">
     {{ entry.text|linebreaks }}
   </div>
  </div><!-- panel -->
  {% empty %}
   There are no entries for this topic yet.
  {% endfor %}
{% endblock content %}


20201206084604325.png20201206084630921.png20201206084642208.png

小结

本篇在前面的Django初始项目基础上,完成了样式的修改,这里使用 bootstrap3 的样式进行修改,通过这样的方式可以参考 bootstrap3 的网站其他样式书写方式编写自己喜欢的显示样式。


本篇最终实现了 “学习笔记” 的效果显示优化,在完成了Web应用的完整开发后,下面就需要将项目移交部署到服务器上以方便大家访问了。(Django项目服务器部署操作请看下一篇内容——会保持积极更新)


*项目中编写的代码已保存到GitHub上供大家参考:GitHub项目


相关文章
|
4天前
|
存储 数据采集 人工智能
Python编程入门:从零基础到实战应用
本文是一篇面向初学者的Python编程教程,旨在帮助读者从零开始学习Python编程语言。文章首先介绍了Python的基本概念和特点,然后通过一个简单的例子展示了如何编写Python代码。接下来,文章详细介绍了Python的数据类型、变量、运算符、控制结构、函数等基本语法知识。最后,文章通过一个实战项目——制作一个简单的计算器程序,帮助读者巩固所学知识并提高编程技能。
|
16天前
|
人工智能 安全 Java
Java和Python在企业中的应用情况
Java和Python在企业中的应用情况
43 7
|
13天前
|
机器学习/深度学习 Python
堆叠集成策略的原理、实现方法及Python应用。堆叠通过多层模型组合,先用不同基础模型生成预测,再用元学习器整合这些预测,提升模型性能
本文深入探讨了堆叠集成策略的原理、实现方法及Python应用。堆叠通过多层模型组合,先用不同基础模型生成预测,再用元学习器整合这些预测,提升模型性能。文章详细介绍了堆叠的实现步骤,包括数据准备、基础模型训练、新训练集构建及元学习器训练,并讨论了其优缺点。
33 3
|
7天前
|
缓存 开发者 Python
深入探索Python中的装饰器:原理、应用与最佳实践####
本文作为技术性深度解析文章,旨在揭开Python装饰器背后的神秘面纱,通过剖析其工作原理、多样化的应用场景及实践中的最佳策略,为中高级Python开发者提供一份详尽的指南。不同于常规摘要的概括性介绍,本文摘要将直接以一段精炼的代码示例开篇,随后简要阐述文章的核心价值与读者预期收获,引领读者快速进入装饰器的世界。 ```python # 示例:一个简单的日志记录装饰器 def log_decorator(func): def wrapper(*args, **kwargs): print(f"Calling {func.__name__} with args: {a
20 2
|
13天前
|
机器学习/深度学习 自然语言处理 语音技术
Python在深度学习领域的应用,重点讲解了神经网络的基础概念、基本结构、训练过程及优化技巧
本文介绍了Python在深度学习领域的应用,重点讲解了神经网络的基础概念、基本结构、训练过程及优化技巧,并通过TensorFlow和PyTorch等库展示了实现神经网络的具体示例,涵盖图像识别、语音识别等多个应用场景。
37 8
|
15天前
|
机器人 计算机视觉 Python
Python作为一种高效、易读且功能强大的编程语言,在教育领域的应用日益广泛
Python作为一种高效、易读且功能强大的编程语言,在教育领域的应用日益广泛
32 5
|
25天前
|
机器学习/深度学习 数据采集 数据可视化
Python在数据科学中的应用:从入门到实践
本文旨在为读者提供一个Python在数据科学领域应用的全面概览。我们将从Python的基础语法开始,逐步深入到数据处理、分析和可视化的高级技术。文章不仅涵盖了Python中常用的数据科学库,如NumPy、Pandas和Matplotlib,还探讨了机器学习库Scikit-learn的使用。通过实际案例分析,本文将展示如何利用Python进行数据清洗、特征工程、模型训练和结果评估。此外,我们还将探讨Python在大数据处理中的应用,以及如何通过集成学习和深度学习技术来提升数据分析的准确性和效率。
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
148 45
|
1月前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
51 2
|
1月前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
41 1