Python django搭建layui提交表单,表格,图标的实例

更新时间：2019年11月18日 15:26:51 作者：Luzaofa

今天小编就为大家分享一篇Python django搭建layui提交表单,表格,图标的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

利用layui制作与众不同的感谢表单，表格

layui极大的提高了前端开发效率，它极具个性的样式等等都非常吸引人，接下来我将为大家展示如何利用Python的django框架与layui制作极富个性的表单与数据表格

注：忽略创建项目，配置文件，若这部分内容不太明白，参考教你使用Django搭建一个基金模拟交易系统，里面会教你从项目创建到最终运行的完整流程。

第一步：在templates目录下新建一个index.html文件（文件内容根据自己的业务需求在layui官网复制即可），同时改变其布局只需将form标签放到一个自定义div内，若要更改其标签颜色只需将内置的背景色CSS类添加到lable标签class即可，如：

<label class="layui-form-label layui-bg-orange">

赤色：class=”layui-bg-red”

橙色：class=”layui-bg-orange”

墨绿：class=”layui-bg-green”

藏青：class=”layui-bg-cyan”

雅黑：class=”layui-bg-black”

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>layui</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../static/layui/css/layui.css" rel="external nofollow" rel="external nofollow" media="all">
</head>
<body>

<div style="width: 650px; position: relative; left:25%;">
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
  <legend>表单集合练习</legend>
 </fieldset>
{# <form class="layui-form" action="">#}
 <form class="layui-form layui-form-pane" action="/get_mas/" method="post"> {# 方框风格的表单集合 #}
  {% csrf_token %}
  <div class="layui-form-item">
  <label class="layui-form-label layui-bg-red">标题</label>
  <div class="layui-input-block">
   <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
  </div>
  </div>

  <div class="layui-form-item">
  <label class="layui-form-label layui-bg-blue">用户名</label>
  <div class="layui-input-block">
   <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
  </div>
  </div>

  <div class="layui-form-item">
  <div class="layui-inline">
   <label class="layui-form-label layui-bg-orange">手机号码</label>
   <div class="layui-input-inline">
   <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
   </div>
  </div>

  <div class="layui-inline">
   <label class="layui-form-label layui-bg-orange">邮箱地址</label>
   <div class="layui-input-inline">
   <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
   </div>
  </div>
  </div>
  <div class="layui-form-item" align="center">
  <div class="layui-input-block">
   <button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo1">立即提交</button>
   <button type="reset" class="layui-btn layui-btn-danger layui-btn-radius">重置</button>
  </div>
  </div>
 </form>
</div>

<script src="../static/layui/layui.js" charset="utf-8"></script>

<script>
 layui.use('form', function(){
  var form = layui.form;
  //自定义验证规则
  form.verify({
  title: function(value){
   if(value.length < 5){
   return '标题至少得5个字符啊';
   }
  }
  });
 });
</script>

</body>
</html>

第二步：在templates目录下新建一个table.html文件用于接收用户提交数据

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>layui</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../static/layui/css/layui.css" rel="external nofollow" rel="external nofollow" media="all">
</head>
<body>

<div style="width: 650px; position: relative; left:25%;">

 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
  <legend>表格练习(用户提交数据)</legend>
 </fieldset>
  <table class="layui-table">
  <colgroup>
   <col width="150">
   <col width="200">
   <col>
  </colgroup>
  <thead>
   <tr class="layui-bg-red">
   <th>标题</th>
   <th>用户名</th>
   <th>手机号码</th>
   <th>邮箱地址</th>
   </tr>
  </thead>
  <tbody>
   <tr>
   <td>{{ title }}</td>
   <td>{{ username }}</td>
   <td>{{ phone }}</td>
   <td>{{ email }}</td>
   </tr>
  </tbody>
  </table>

</div>

<script src="../static/layui/layui.js" charset="utf-8"></script>

</body>
</html>

第三步：在views里定义如下函数，index用于显示首页信息，get_mas用户接收用户提交同时返回数据

from django.shortcuts import render
from django.http import HttpResponse


def index(request):
 return render(request, 'index.html')

def get_mas(request):
 if request.method == "POST":
  title = request.POST['title']
  username = request.POST['username']
  phone = request.POST['phone']
  email = request.POST['email']
  return render(request, 'table.html', {'title': title, 'username': username, 'phone': phone, 'email': email})
 else:
  return HttpResponse('<center><h1>非法操作！</h1></center>')

第四步：定义路由

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from web import views

urlpatterns = [
 path('admin/', admin.site.urls),
 url(r'^$', views.index),
 url(r'^get_mas/$', views.get_mas),
]

实现效果图如下：

表单：

表格：

以上这篇Python django搭建layui提交表单,表格,图标的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Django配置Mysql数据库连接的实现
本文主要介绍了Django配置Mysql数据库连接的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
Python PyQt5模块实现一个浏览器的示例代码
在项目开发中，有的应用程序可以运行在web浏览器，本文主要介绍了Python PyQt5模块实现一个浏览器的示例代码，分享给大家，感兴趣的可以了解一下
2021-07-07
python3 如何解压缩.gz文件
这篇文章主要介绍了python3 如何解压缩.gz文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Python 图像处理 Pillow 库详情
这篇文章主要介绍了Python 图像处理 Pillow 库，图像处理是常用的技术，python 拥有丰富的第三方扩展库，Pillow 是 Python3 最常用的图像处理库，目前最高版本5.2.0。Python2 使用Pil库，两者是使用方法差不多，区别在于类的引用不同。下面来看看文章的详细内容
2021-11-11
利用Python改正excel表格数据
这篇文章主要介绍了利用Python改正excel表格数据，运用面向过程写的，将每一步都放在了不同的函数中，下文详细过程介绍需要的小伙伴可以参考一下
2022-06-06
Python数据分析matplotlib设置多个子图的间距方法
今天小编就为大家分享一篇Python数据分析matplotlib设置多个子图的间距方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
关于python xlwings模块用法详解
xlwings是一个用于在Excel和Python之间进行交互的库,它允许您使用Python操作Excel文件,包括读取和写入数据,运行宏,设置格式等等,我们可以使用xlwings来处理Excel文件中的数据,执行各种操作,所以本文小编就给大家python xlwings模块用法
2023-09-09
python ElementTree 基本读操作示例
python ElementTree 基本读操作示例
2009-04-04
Python 给某个文件名添加时间戳的方法
今天小编就为大家分享一篇Python 给某个文件名添加时间戳的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
这篇文章主要介绍了python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例,需要的朋友可以参考下
2020-02-02