简单的一个列表展示，实现了增、删、插
1.通过新建项目来创建一个Django项目
2.通过pycharm中的Terminal来创建app ，命令如下：
python manage.py startapp devicesys
最后项目结构如下：
项目结构：
3.修改相关配置：
在于项目同名的文件夹下打开setting.py 做两个事情（1）注释MIDDLEWARE中的 # 'django.middleware.csrf.CsrfViewMiddleware', （2） 在文件结尾处增加STATICFILES_DIRS = [( os.path.join(BASE_DIR,"static"))]
打开urls.py将devicesys导入进来
4.在devicesys文件夹下的models.py中编写如下代码
1 from django.db import models 2 import sqlalchemy 3 from sqlalchemy import create_engine 4 from sqlalchemy.ext.declarative import declarative_base 5 from sqlalchemy import Column,Integer,DATE,ForeignKey,String 6 from sqlalchemy.orm import sessionmaker,relationship 7 # Create your models here. 8 9 # 创建数据库连接 10 engine = create_engine("mysql+pymysql://root:root@localhost/testuser?charset=utf8",echo=True) 11 12 # 生成orm基类 13 Base = declarative_base() 14 15 # 创建表映射 16 class Devices(Base): 17 __tablename__ = "devices" # 表名称 18 id = Column(Integer,primary_key=True) 19 name = Column(String(64)) # 设备名称 20 ip = Column(String(32)) # 设备地址 21 username = Column(String(32)) # 设备账号 22 password = Column(String(32)) # 设备密码 23 brand = Column(String(32)) # 设备品牌 24 addtime = Column(DATE) # 设备添加时间 25 26 # 构建表结构 27 Base.metadata.create_all(engine) 28 29 # 创建数据库会话类 30 session_class = sessionmaker(bind=engine) 31 # 创建数据库会话实例 32 session = session_class() 33 34 def getlist(): 35 return session.query(Devices).filter_by().all() 36 37 def add(name,ip,username,password,brand): 38 temp = Devices(name=name,ip=ip,username=username,password=password,brand=brand) 39 session.add_all([temp]) 40 session.commit() 41 def delete(del_id): 42 del_info = session.query(Devices).filter(Devices.id==del_id).first() 43 if del_info is not None: 44 session.delete(del_info) 45 session.commit()
在views.py中编写如下代码：
1 from django.shortcuts import render 2 3 # Create your views here. 4 from django.shortcuts import HttpResponse 5 from django.shortcuts import render 6 from django.shortcuts import redirect 7 from devicesys import models 8 import time 9 def loadlist(request): 10 list = models.getlist() 11 print(list) 12 return render(request,"index.html",{"list":list}) 13 14 def add(request): 15 if request.method == "POST": 16 # 获取提交信息 17 name = request.POST.get("name") 18 ip = request.POST.get("ip") 19 username = request.POST.get("username") 20 password = request.POST.get("password") 21 brand = request.POST.get("brand") 22 # 获取当前时间并进行格式化 23 # addtime = time.strftime("%Y-%m-%d", time.time()) 24 models.add(name,ip,username,password,brand) 25 list = models.getlist() 26 return render(request, "index.html", {"list": list}) 27 28 def delete(request): 29 if request.method == "POST": 30 # 获取参数 31 del_id = request.POST.get("del_id") 32 if del_id: 33 models.delete(del_id) 34 list = models.getlist() 35 return render(request, "index.html", {"list": list}) 36 else: 37 return HttpResponse("<h1>404</h1>")
5.在项目下创建static文件夹并且将layer相关文件导入进去，并且导入jquery.js
6.在templates文件夹下新建index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>服务器管理</title> 6 <link rel="stylesheet" href="/static/layui/css/layui.css"> 7 <script src="/static/jquery.min.js"></script> 8 <script src="/static/layui/layui.js"></script> 9 <script src="/static/layui/lay/modules/element.js"></script> 10 <script src="/static/layui/lay/modules/layer.js"></script> 11 <script> 12 //注意：导航 依赖 element 模块，否则无法进行功能性操作 13 layui.use('element', function(){ 14 var element = layui.element; 15 }); 16 </script> 17 </head> 18 <body> 19 <ul class="layui-nav" lay-filter=""> 20 <li class="layui-nav-item"><a href="">最新活动</a></li> 21 <li class="layui-nav-item layui-this"><a href="">产品</a></li> 22 <li class="layui-nav-item"><a href="">大数据</a></li> 23 <li class="layui-nav-item"> 24 <a href="javascript:;">解决方案</a> 25 <dl class="layui-nav-child"> <!-- 二级菜单 --> 26 <dd><a href="">移动模块</a></dd> 27 <dd><a href="">后台模版</a></dd> 28 <dd><a href="">电商平台</a></dd> 29 </dl> 30 </li> 31 <li class="layui-nav-item"><a href="">社区</a></li> 32 </ul> 33 <div class="layui-form-item" style="float:left;padding-top: 10px;"> 34 <div class="layui-input-block" style="float:left;margin-left: 10px;"> 35 <input type="text" name="title" required lay-verify="required" placeholder="关键字搜索" autocomplete="off" class="layui-input"> 36 </div> 37 <button class="layui-btn layui-btn-normal" style="padding-left:5px; "> 38 <i class="layui-icon"></i> 39 </button> 40 </div> 41 <div class="layui-btn-group" style="float:right;padding-top: 10px;padding-bottom: 10px;padding-right: 10px;"> 42 <button onclick="add_win()" class="layui-btn layui-btn-normal"> 43 <i class="layui-icon"></i> 44 </button> 45 </div> 46 <div> 47 <table class="layui-table"> 48 <colgroup> 49 <col width="150"> 50 <col width="200"> 51 <col> 52 </colgroup> 53 <thead> 54 <tr> 55 <td>序号</td> 56 <td>名称</td> 57 <td>IP地址</td> 58 <td>账号</td> 59 <td>品牌</td> 60 <td>操作</td> 61 </tr> 62 </thead> 63 <tbody> 64 {% for row in list %} 65 <tr> 66 <td>{{ row.id }}</td> 67 <td>{{ row.name }}</td> 68 <td>{{ row.ip }}</td> 69 <td>{{ row.name }}</td> 70 <td>{{ row.brand }}</td> 71 <td> 72 <a class="del" href="#" row-id="{{ row.id }}">删除 |</a> 73 <a href="#" row-id="{{ row.id }}">详情</a> 74 </td> 75 </tr> 76 {% endfor %} 77 </tbody> 78 </table> 79 </div> 80 <div style="display:none;margin-top: 10px;" id="add_win"> 81 <form class="layui-form" action="/add/" method="post"> 82 <div class="layui-form-item"> 83 <label class="layui-form-label">设备名称</label> 84 <div class="layui-input-block"> 85 <input type="text" name="name" style="width: 260px;" required lay-verify="required" placeholder="请输入设备名称" autocomplete="off" class="layui-input"> 86 </div> 87 <label class="layui-form-label">IP地址</label> 88 <div class="layui-input-block"> 89 <input type="text" name="ip" style="width: 260px;" required lay-verify="required" placeholder="请输入IP地址" autocomplete="off" class="layui-input"> 90 </div> 91 <label class="layui-form-label">账号</label> 92 <div class="layui-input-block"> 93 <input type="text" name="username" style="width: 260px;" required lay-verify="required" placeholder="请输入设备账号" autocomplete="off" class="layui-input"> 94 </div> 95 <label class="layui-form-label">密码</label> 96 <div class="layui-input-block"> 97 <input type="text" name="password" style="width: 260px;" required lay-verify="required" placeholder="请输入设备密码" autocomplete="off" class="layui-input"> 98 </div> 99 <label class="layui-form-label">品牌</label> 100 <div class="layui-input-block"> 101 <input type="text" name="brand" style="width: 260px;" required lay-verify="required" placeholder="请输入设备品牌" autocomplete="off" class="layui-input"> 102 </div> 103 </div> 104 <div class="layui-form-item"> 105 <div class="layui-input-block"> 106 <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> 107 <button type="reset" class="layui-btn layui-btn-primary">重置</button> 108 </div> 109 </div> 110 </form> 111 </div> 112 <div style="display:none;margin-top: 10px;" id="del_win"> 113 <form class="layui-form" action="/del/" method="post"> 114 <div class="layui-form-item"> 115 <span style="margin-left:30px;">您确定要删除该条数据？</span> 116 <input type="hidden" id="del_id" name="del_id"/> 117 </div> 118 <div class="layui-form-item"> 119 <div class="layui-input-block" style="margin-left: 45px;margin-top: 20px;"> 120 <button class="layui-btn" lay-submit lay-filter="formDemo">确定</button> 121 <button type="button" id="cancel" class="layui-btn layui-btn-primary">取消</button> 122 </div> 123 </div> 124 </form> 125 </div> 126 <script> 127 $(function(){ 128 $(".del").click(function(){ 129 var row_id = $(this).attr('row-id'); 130 $("#del_id").val(row_id); 131 layer.open({ 132 type:1, 133 area: ['220px', '150px'], 134 shadeClose: true, 135 title:"删除", 136 end :function(index, layero){ 137 $("#del_id").val("") 138 $("#del_win").css('display','none') 139 }, 140 content:$("#del_win").css('display','block') 141 }) 142 }); 143 $("#cancel").click(function () { 144 layer.close(layer.index); 145 }); 146 }) 147 function add_win(){ 148 layer.open({ 149 type:1, 150 area: ['500px', '400px'], 151 shadeClose: true, 152 title:"新增", 153 end :function(index, layero){ 154 $("#add_win").css('display','none') 155 }, 156 content:$("#add_win").css('display','block') 157 }) 158 } 159 </script> 160 </body> 161 </html>
运行结果如下：
注：目前仅实现了新增和删除，搜索和详情未实现。