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提交表单,表格,图标的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了python-redis-lock分布式锁的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
这篇文章主要介绍了Python使用Selenium实现淘宝抢单的流程分析，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
DataFrame的单元格可以存放数值、字符串等，本文主要介绍了pandas 给dataframe添加列名的两种方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
在CentOS6上yum安装工具是基于Python2.6.6的，所以在CentOS6上默认安装的是Python2.6.6，因为要在服务器系统为CentOS6上部署生产环境，但是代码都是基于Python2.7写的，所有遇到了问题，下面通过本文给大家介绍下在CentOS6上安装Python2.7的解决方法，一起看看吧2018-01-01
这篇文章主要为大家介绍了Python 虚拟机字典dict内存优化方法解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了Django框架下静态模板的继承操作,结合实例形式分析了Django框架模板继承操作的相关原理与操作注意事项,需要的朋友可以参考下2019-11-11
今天小编就为大家分享一篇用python求一重积分和二重积分的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-12-12
大家好，本篇文章主要讲的是如何用python批量发送工资条邮件，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下2022-01-01
这篇文章主要介绍了解决Python图形界面中设置尺寸的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-03-03
这篇文章主要介绍了python 爬取古诗文存入mysql数据库的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
最新评论