django+datatables创建展示系统

django-admin startproject patrol
python manage.py startapp checkmysql

settings.py中添加mysql数据库

'''

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}
'''
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',   # 数据库引擎
        'NAME': 'patrol',  # 数据库名，先前创建的
        'USER': 'patrol',     # 用户名，可以自己创建用户
        'PASSWORD': 'XXXXXXX',  # 密码
        'HOST': '111.1111.1111.111',  # mysql服务所在的主机ip
        'PORT': '3349',         # mysql服务端口
    }
}

添加app

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'checkmysql',
]

urls.py 中添加app路由

from django.urls import include,path

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    path('checkmysql/', include('checkmysql.urls')),

]

#记得添加上哪个行,否则path不存储

转到app目录中
创建urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

创建数据模型
在创建表

from django.db import models

# Create your models here.
class Information(models.Model):
  ip=models.CharField(max_length=100)
  port=models.CharField(max_length=30)
  passwd=models.CharField(max_length=60)
  sock=models.CharField(max_length=60)
  connect_status=models.CharField(max_length=50)
  comment=models.CharField(max_length=500)

class Dblist(models.Model):
  ip=models.CharField(max_length=100)
  port = models.CharField(max_length=30)
  db=models.CharField(max_length=50)

在views.py 中添加渲染

from .models import *


def index(request):
    assets = Information.objects.all()
    return render(request, 'checkmysql/index.html', locals())

更新数据库

python manage.py makemigrations
python manage.py migrate

已经生成了表

image.png

和app同级目录创建静态目录templates-checkmysql

image.png

修改配置文件,让django可以认到html文件, 添加os.path.join(BASE_DIR, 'templates')

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        # os.path.join(BASE_DIR, 'templates')没了这句，
        # 会显示django.template.exceptions.TemplateDoesNotExist: index.html
        
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>序号</th>
            <th>IP地址</th>
            <th>端口</th>
            <th>密码类型</th>
            <th>sock</th>
            <th>状态</th>
            <th>备注</th>

        </tr>
    </thead>
    <tbody>
    {% for list in list %}
      <tr>
          <td>{{ list.id }}</td>
          <td>{{ list.ip }}</td>
          <td>{{ list.port }}</td>
          <td>{{ list.passwd }}</td>
          <td>{{ list.sock }}</td>
          <td>{{ list.connect_status }}</td>
          <td>{{ list.comment }}</td>
      </tr>
    {% endfor %}

    </tbody>
</table>


</body>

<script>
<!--第三步：初始化Datatables-->
$(document).ready( function () {
    $('#table_id_example').DataTable(); // table_id_example是table样式的id
} );
</script>
</html>

在数据库中插入几条数据

INSERT INTO `patrol`.`checkmysql_information` (ip,port,passwd,sock,connect_status,comment) VALUES ('192.168.10.199','3306','强密码','/tmp/mysqlsock','yes','主库');
INSERT INTO `patrol`.`checkmysql_information` (ip,port,passwd,sock,connect_status,comment) VALUES ('192.168.10.149','3306','强密码','/tmp/mysqlsock','yes','主库');
INSERT INTO `patrol`.`checkmysql_information` (ip,port,passwd,sock,connect_status,comment) VALUES ('192.168.10.139','3306','强密码','/tmp/mysqlsock','yes','主库');
INSERT INTO `patrol`.`checkmysql_information` (ip,port,passwd,sock,connect_status,comment) VALUES ('192.168.10.159','3306','强密码','/tmp/mysqlsock','yes','主库');
INSERT INTO `patrol`.`checkmysql_information` (ip,port,passwd,sock,connect_status,comment) VALUES ('192.168.10.169','3306','强密码','/tmp/mysqlsock','yes','主库');
INSERT INTO `patrol`.`checkmysql_information` (ip,port,passwd,sock,connect_status,comment) VALUES ('192.168.99.199','3306','强密码','/tmp/mysqlsock','yes','主库');
INSERT INTO `patrol`.`checkmysql_information` (ip,port,passwd,sock,connect_status,comment) VALUES ('192.168.92.149','3306','强密码','/tmp/mysqlsock','yes','主库');
INSERT INTO `patrol`.`checkmysql_information` (ip,port,passwd,sock,connect_status,comment) VALUES ('192.168.99.139','3306','强密码','/tmp/mysqlsock','yes','主库');
INSERT INTO `patrol`.`checkmysql_information` (ip,port,passwd,sock,connect_status,comment) VALUES ('192.168.99.159','3306','强密码','/tmp/mysqlsock','yes','主库');
INSERT INTO `patrol`.`checkmysql_information` (ip,port,passwd,sock,connect_status,comment) VALUES ('192.168.99.169','3306','强密码','/tmp/mysqlsock','yes','主库');

运行效果

python manage.py runserver

image.png

运维中,我们常要展示一下信息. 利用django快速构建系统,利用datatables插件有效展示数据表格,自带翻页和搜索,还是很有用的.