Python编程
搜索
分类

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

作者：Luzaofa 时间：2022-09-18 19:40:19　

利用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提交表单,表格,图标的实例

表格：

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

来源：https://blog.csdn.net/Luzaofa/article/details/80812415

标签：Python,django,layui,提交表单
0
投稿

猜你喜欢

  • python tarfile压缩包操作保姆级教程

    2022-03-29 21:38:30

  • Python中内置的日志模块logging用法详解

    2023-07-25 05:04:12

  • SQL Server 查询分析器快捷键集合

    2007-08-17 09:42:00

  • python实现对一个完整url进行分割的方法

    2021-09-09 06:57:37

  • Python sqlalchemy时间戳及密码管理实现代码详解

    2021-05-06 10:43:35

  • django 做 migrate 时 表已存在的处理方法

    2022-02-14 16:11:53

  • win2000server IIS和tomcat5多站点配置

    2023-06-26 04:45:33

  • 前端开发中的一些用户体验细节

    2010-10-19 12:23:00

  • apache+php+mysql安装配置方法小结

    2023-11-11 23:29:31

  • Python 根据相邻关系还原数组的两种方式(单向构造和双向构造)

    2023-09-24 17:08:06

  • python条件和循环的使用方法

    2021-12-16 22:27:59

  • 配置高可用性的MySQL服务器负载均衡群集

    2009-01-04 12:43:00

  • PyTorch中view()与 reshape()的区别详析

    2023-11-16 05:45:23

  • Python 时间操作time详情

    2023-09-13 13:23:09

  • python中实现将多个print输出合成一个数组

    2022-10-27 20:00:26

  • css清除浮动“clear:both;”的应用

    2008-03-17 12:54:00

  • Python 可变类型和不可变类型及引用过程解析

    2021-07-13 00:04:27

  • 如何判断用户是否非正常离开聊天室？

    2010-01-18 20:30:00

  • python-docx如何缩进两个字符

    2022-07-04 15:56:45

  • IIS服务器中部署PHP案例详解

    2023-06-11 19:17:42
    • asp之家 网络编程 m.aspxhome.com