10、Django 新建ipa(通讯录)项目

1. 任务目标

随着业务的增加，各个单位部分的联系人也越来越多，所以需要做一个通讯录。

2. 创建ipa app

3. 设置settings.py

4. 编写models

思路：因为是通讯录，所以要考虑好数据库字段。

业务信息整合表上有的字段为：序号 单位名称 政府单位接口人 第三方软件接口人 带宽使用 项目名称 系统名称 IP地址 虚拟机名称 CPU核数 主频（GHz） 理论峰值计算能力（万亿次每秒） 最小计算能力（万亿次每秒） 最大计算能力（万亿次每秒） 内存（GB） 系统盘 存储盘 磁盘总容量 裸磁盘容量 操作系统 密码 备注

结合大家意见和王哥的Django通信录：初步字段决定为：单位名称、单位接口人姓名电话、第三方接口人姓名电话、政府/企业、项目、系统、备注（备注里面填第三方联系人电话）。

①、编写models模型

from django.db import models

# Create your models here.


# 创建通讯录表
class ipa(models.Model):
# blank = True 表示可传入空白字段。
unit_name = models.CharField(null=True, blank=True, verbose_name='单位名称', max_length=24)
unit_user = models.CharField(null=True, blank=True, verbose_name='单位联系人和电话', max_length=64)
third_party = models.CharField(null=True, blank=True, verbose_name='第三方联系人和电话', max_length=64)
unit_type = models.CharField(null=True, blank=True, verbose_name='政府or企业？', max_length=64)
unit_project = models.CharField(null=True, blank=True, verbose_name='项目名称', max_length=24)
unit_system = models.CharField(null=True, blank=True, verbose_name='系统', max_length=64)
unit_remarks = models.TextField(null=True, blank=True, verbose_name='备注')

# 加入这个修改后台管理界面时显示单位名称
def __str__(self):
return self.unit_name

②、激活模型

出现这个文件，代表 成功！

5. 创建管理员

因为之前已经创建过管理员了，所以这里不再创建，没创建的在这里输入这个命令，按照提示进行即可

python manage.py createsuperuser

创建完成之后就可以在后台添加数据了。

6. 编写urls.py

①、编写mysite/urls.py

在总路由下，添加一条ipa信息。

②、编写子urls

在ipa下创建urls.py文件

from django.urls import path
from . import views


# 命名空间
app_name = 'ipa'
urlpatterns = [
# ipa为views定义的名字。
path('', views.ipa, name='ipa')
]

7、编写ipa/views.py文件

from django.shortcuts import render
from . import models
# Create your views here.


def ipa(request):
ipa_info = models.ipa.objects.all()
# 在控制台打印测试
# print(ipa_info)
return render(request, 'ipa/index.html', locals())

8、在网页上展示

①、创建ipa/templtes/ipa/index.html文件

②、不引入adminlte框架的数据展示

<table border="1">
<!--表头-->
<thead>
<tr>
<th>序号</th>
<th>单位名称</th>
<th>单位接口人</th>
<th>第三方软件接口人</th>
<th>政府/企业</th>
<th>项目名称</th>
<th>系统</th>
<th>备注</th>
</tr>
</thead>
<!--数据-->
<tbody>
{% for ipa in ipa_info %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ ipa.unit_name }}</td>
<td>{{ ipa.unit_user }}</td>
<td>{{ ipa.third_party }}</td>
<td>{{ ipa.unit_type }}</td>
<td>{{ ipa.unit_project }}</td>
<td>{{ ipa.unit_system }}</td>
<td>{{ ipa.unit_remarks }}</td>
</tr>
{% endfor %}
</tbody>


</table>

②引入adminlte框架展示数据

{% extends 'base.html' %}
{% load static %}
{% block title %}业务信息{% endblock %}
{% block css %}
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/static/dist/css/skins/_all-skins.min.css">
{% endblock %}


{% block content %}
<!--这里的vlan_info 指的是views里的
{{ vlan_info }}
-->
<!--导航栏下面一部分-->
<section class="content-header">
<h1>
VLAN号汇总表
<small>Product Info</small>
</h1>
<!--主页按钮-->
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
<li class="active">VLAN号整合</li>
</ol>
</section>

<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">

<div class="box">
<div class="box-header">
<h3 class="box-title">通讯录</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="product_table" class="table table-bordered table-striped">
<!--表头-->
<thead>
<tr>
<th>序号</th>
<th>单位名称</th>
<th>单位接口人</th>
<th>第三方软件接口人</th>
<th>政府/企业</th>
<th>项目名称</th>
<th>系统</th>
<th>备注</th>
</tr>
</thead>
<!--数据-->
<tbody>
{% for ipa in ipa_info %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ ipa.unit_name }}</td>
<td>{{ ipa.unit_user }}</td>
<td>{{ ipa.third_party }}</td>
<td>{{ ipa.unit_type }}</td>
<td>{{ ipa.unit_project }}</td>
<td>{{ ipa.unit_system }}</td>
<td>{{ ipa.unit_remarks }}</td>
</tr>
{% endfor %}
</tbody>


</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>

{% endblock %}
{% block script %}
<!-- DataTables -->
<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
<!-- SlimScroll -->
<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
<!-- FastClick -->
<script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/app.min.js' %}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{% static 'dist/js/demo.js' %}"></script>
<!-- page script -->
<script>
$(function () {
$('#product_table').DataTable({
"paging": true, <!-- 允许分页 -->
"lengthChange": true, <!-- 允许改变每页显示的行数 -->
"searching": true, <!-- 允许内容搜索 -->
"ordering": true, <!-- 允许排序 -->
"info": true, <!-- 显示信息 -->
"autoWidth": false <!-- 固定宽度 -->
});
});
</script>
{% endblock %}