第一部分 基于admin模块实现基本功能

1 新建PyCharm项目

新建PyCharm项目，设置虚拟环境（使用Virtualenv虚拟环境隔离器、Python3.7解析器）
image.png
等待片刻，完成PyCharm项目的新建，详见下图。
image.png
编辑代码，测试鸡兔同笼算法
image.png
编辑main.py文件，点击右上角三角形运行代码，测试鸡兔同笼计算题的算法。

  1. def compute_rabbits_chickens(a,b):
  2.     """
  3.     今有雉兔同笼，上有三十五头，下有九十四足，问雉兔各几何？
  4.     :param a:头的个数
  5.     :param b:脚的个数
  6.     :return x,y: 鸡的个数和兔的个数
  7.     """
  8.     for x in range(1,a):
  9.         y = a - x
  10.         if  2 * x + 4 * y == b:
  11.             return x,y
  14. if __name__ == '__main__':
  15.     a = 35
  16.     b = 94
  17.     x,y = compute_rabbits_chickens(a,b)
  18.     print("鸡有" + str(x) + "只，兔有" + str(y) + "只。")

2 安装Python模块

image.png
在Terminal终端输入以下命令，安装模块

  1. pip install django django-simpleui django-crispy-forms

3 新建Django项目和Django应用

image.png
在Terminal终端输入以下命令，新建名字为lubangongju的Django项目

  1. django-admin startproject lubangongju .

说明：注意最后有个英文空格和英文句号点[ .]，表明在Termianl终端当前的目录下新建Django项目。
**

4 修改Django项目配置文件

image.png
image.png
修改项目的配置文件settings.py

  1. # 项目包含的应用和模块
  2. INSTALLED_APPS = [
  3.     # 第三方模块，必须第一行增加，是个admin页面的ui模块
  4.     'simpleui',
  5.     # django的内置模块
  6.     'django.contrib.admin',
  7.     'django.contrib.auth',
  8.     'django.contrib.contenttypes',
  9.     'django.contrib.sessions',
  10.     'django.contrib.messages',
  11.     'django.contrib.staticfiles',
  12.     # 第三方模块,是个form页面的ui模块
  13.     'crispy_forms',
  14.     # 自建的应用模块
  15.     'compute.apps.ComputeConfig',
  16. ]
  18. LANGUAGE_CODE = 'zh-hans'  # 中文
  19. TIME_ZONE = 'Asia/Shanghai' # 上海时区
  21. # django-crispy-forms配置为使用bootstrap3样式
  22. CRISPY_TEMPLATE_PACK = 'bootstrap3'

5 把Django应用名字修改成中文

image.png
修改应用的配置文件apps.py

  1. from django.apps import AppConfig
  3. # compute应用的配置
  4. class ComputeConfig(AppConfig):
  5.     name = 'compute'
  6.     verbose_name = '计算模型'

6 在Django应用中新建数据表

image.png
image.png

修改models.py文件

  1. from django.db import models
  4. # 鸡兔同笼计算题的计算函数
  5. def compute_rabbits_chickens(a,b):
  6.     """
  7.     今有雉兔同笼，上有三十五头，下有九十四足，问雉兔各几何？
  8.     :param a:头的个数
  9.     :param b:脚的个数
  10.     :return x,y: 鸡的个数和兔的个数
  11.     """
  12.     for x in range(1,a):
  13.         y = a - x
  14.         if  2 * x + 4 * y == b:
  15.             return x,y
  18. class Rabbits_and_chickens(models.Model):
  19.     """
  20.     鸡兔同笼数据表模型
  21.     """
  22.     a = models.BigIntegerField(verbose_name="头的个数")
  23.     b = models.BigIntegerField(verbose_name="脚的个数")
  25.     x = models.BigIntegerField(blank=True,null=True, verbose_name="鸡的个数")
  26.     y = models.BigIntegerField(blank=True,null=True, verbose_name="兔的个数")
  27.     r = models.TextField(blank=True, default="",verbose_name="结果说明")
  29.     class Meta:
  30.         verbose_name = "鸡兔同笼"
  31.         verbose_name_plural = "鸡兔同笼"
  33.     # 重写模型的save方法
  34.     def save(self, *args, **kwargs):
  35.         # 调用鸡兔同笼计算函数（输入a和b，输出x，y），设置当前模型的x,y,r的数值
  36.         self.x,self.y= compute_rabbits_chickens(self.a,self.b)
  37.         self.r = "鸡有" + str(self.x) + "只，兔有" + str(self.y) + "只。"
  38.         # 调用模型的父类save方法， Call the "real" save() method.
  39.         super().save(*args, **kwargs)
  41.     # 为了让显示的内容更直观更易懂，返回实例对象的打印字符串。
  42.     def __str__(self):
  43.         return "头有" + str(self.a) + "个，脚有" + str(self.b) + "个。"

7 同步数据库

image.png
在terminal窗口输入以下命令，生成数据库迁移脚本，并执行迁移脚本

  1. python manage.py makemigrations
  3. python manage.py migrate

8 配置admin管理后台

image.png
修改admin.py文件，配置管理后台页面的显示项

  1. from django.contrib import admin
  2. from .models import Rabbits_and_chickens
  4. # 模型的显示样式
  5. class Rabbits_and_chickens_Admin(admin.ModelAdmin):
  6.     list_display = ('a', 'b', 'r') # 列表页只显示a,b,r
  8. # 管理后台注册（模型，模型显示样式）
  9. admin.site.register(Rabbits_and_chickens,Rabbits_and_chickens_Admin)
  12. # 设置管理后台的网页标题和系统名称
  13. admin.site.site_header = "鲁班工具云计算平台"
  15. admin.site.site_title = '鲁班工具云计算平台'

9 创建管理员账号

image.png
在terminal窗口输入以下命令，创建用户名为admin密码为123456的超级用户账号

  1. python manage.py createsuperuser
  2. admin
  3. admin@admin.com
  4. 123456
  5. 123456
  6. y

10 运行系统

image.png
在teminal窗口输入：

  1. python manage.py runserver

访问链接http://127.0.0.1:8000/admin，运行”鲁班工具云计算平台”

image.png
image.png

image.png
image.png

第二部分 基于模板语言实现更自由的展示页面

11 新建模板文件

image.png
在compute应用文件夹中，新建templates文件夹；然后在templates文件夹中，新建compute文件夹。
在compute/templates/compute文件夹中，新建home.html文件（平台主页）

  1. {% load crispy_forms_tags %}
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <meta charset="utf-8">
  7.     <title>鲁班工具云计算平台</title>
  8.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  9.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  10.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  11. </head>
  12. <body>
  13. <div class="container">
  14.     <div class="row">
  15.         <h1 class="text-center">
  16.             鲁班工具云计算平台
  17.         </h1>
  18.         <div class="col-md-8 col-md-offset-2">
  19.             <ul>
  20.                 <li>
  21.                     <a href="{% url 'rabbits_and_chickens_list' %}">鸡兔同笼计算</a>
  22.                 </li>
  23.             </ul>
  24.         </div>
  25.     </div>
  26. </div>
  29. </body>
  30. </html>

新建rabbits_and_chickens_list.html文件（鸡兔同笼计算题列表页）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>鲁班工具云计算平台</title>
  6.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  7.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  8.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9. </head>
  10. <body>
  11. <div class="container">
  12.     <div class="row">
  13.         <div class="col-md-10 col-md-offset-1">
  15.             <table class="table">
  16.                 <caption class="text-center"><h1>鸡兔同笼-计算数据列表</h1></caption>
  17.                 <thead>
  18.                 <tr>
  19.                     <th>头数</th>
  20.                     <th>脚数</th>
  21.                     <th>结果</th>
  22.                     <th>操作</th>
  23.                 </tr>
  24.                 </thead>
  25.                 <tbody>
  26.                 {% for object in object_list %}
  27.                 <tr>
  28.                     <td>{{object.a}}</td>
  29.                     <td>{{object.b}}</td>
  30.                     <td>{{object.r}}</td>
  31.                     <td>
  32.                         <a class="btn btn-primary" href="{% url 'rabbits_and_chickens_create' %}">新增</a>
  33.                     </td>
  34.                 </tr>
  35.                 {% endfor %}
  36.                 </tbody>
  37.             </table>
  38.              <a class="btn btn-primary" href="{% url 'rabbits_and_chickens_create' %}">新增</a>
  39.              <a class="btn btn-primary" href="{% url 'home' %}">返回首页</a>
  40.         </div>
  41.     </div>
  42. </div>
  43. </body>
  44. </html>

新建rabbits_and_chickens_form.html文件（鸡兔同笼计算题数据提交页）

  1. {% load crispy_forms_tags %}
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <meta charset="utf-8">
  7.     <title>鲁班工具云计算平台</title>
  8.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  9.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  10.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  11. </head>
  12. <body>
  13. <div class="container">
  14.     <div class="row">
  15.         <h1 class="text-center">
  16.             鸡兔同笼
  17.         </h1>
  18.         <h3 class="text-center">
  19.             鸡兔同笼的来源，解法说明，相关资料的链接
  20.         </h3>
  21.         <div class="col-md-8 col-md-offset-2">
  22.             <form class="form-horizontal" role="form" method="post">
  23.                 {% csrf_token %}
  24.                 {{ form |crispy }}
  25.                 <input type="submit" class='btn btn-primary' value="提交">
  26.                 <a class="btn btn-primary" href="{% url 'rabbits_and_chickens_list' %}">返回鸡兔同笼列表</a>
  27.             </form>
  28.         </div>
  29.     </div>
  30. </div>
  31. </body>
  32. </html>

12 新建视图函数

image.png
修改views.py文件(接收http请求、并返回http响应的视图函数类)

  1. from django import forms
  2. from django.views.generic import ListView, CreateView, TemplateView
  3. from django.urls import reverse_lazy
  4. from .models import Rabbits_and_chickens
  6. # 平台首页，函数类调用home.html模板，显示计算题列表（get方法）
  7. class HomeView(TemplateView):
  8.     template_name = 'compute/home.html'
  11. # 鸡兔同笼计算题的列表页，函数类调用rabbits_and_chickens_list.html模板（传Rabbits_and_chickens数据值给模板并渲染），
  12. # 显示提交过得计算数据和结果（get方法）
  13. class RabbitsAndChickensListView(ListView):
  14.     model = Rabbits_and_chickens
  15.     template_name = 'compute/rabbits_and_chickens_list.html'
  18.  # 鸡兔同笼的form表单，用来表单数据校验、表单数据保存，用于下面的函数类调用
  19. class RabbitsAndChickensForm(forms.ModelForm):
  21.     class Meta:
  22.         model = Rabbits_and_chickens
  23.         fields = ['a', 'b']
  26. # 鸡兔同笼计算题的输入提交页，函数类调用RabbitsAndChickensForm表单和rabbits_and_chickens_form.html模板文件，
  27. # 先显示计算题的输入框（get方法），提交数据后执行数据项的保存（post方法），执行成功后跳转到列表页
  28. class RabbitsAndChickensCreateView(CreateView):
  29.     model = Rabbits_and_chickens
  30.     template_name = 'compute/rabbits_and_chickens_form.html'
  31.     form_class = RabbitsAndChickensForm
  32.     success_url = reverse_lazy('rabbits_and_chickens_list')

13 新建路由

image.png
修改项目的urls.py文件（网址路由和执行函数的关系映射）

  1. from django.contrib import admin
  2. from django.urls import path
  3. from compute import views as compute_views
  5. # 配置网址路由和视图函数的映射关系
  6. urlpatterns = [
  7.     path('', compute_views.HomeView.as_view(), name='home'),
  8.     path('admin/', admin.site.urls),
  9.     path('compute/rabbits_and_chickens/list/', compute_views.RabbitsAndChickensListView.as_view(), name='rabbits_and_chickens_list'),
  10.     path('compute/rabbits_and_chickens/create/', compute_views.RabbitsAndChickensCreateView.as_view(), name='rabbits_and_chickens_create'),
  11. ]

14 运行系统

image.png
在teminal窗口输入以下命令，运行程序

  1. python manage.py runserver

访问链接http://127.0.0.1:8000，运行”鲁班工具云计算平台”
image.png
image.png
image.png

15 思考

1）计算模型的数据models中增加用户字段，每次提交时候保存当前用户的信息。登录后提交数据的用户，只能看到自己的历史计算数据；没有登录的匿名用户，看不到历史数据。
2）新增页面中，增加计算题的说明和描述，可以是图片或者文字。
3）新增提交后，先返回计算过程和结果页面，再跳转到列表页面。
4）列表页面中，增加删除和修改历史数据的功能。
5）改成手机自适应的响应式
6）增加小程序的访问功能