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


Posted in Python onNovember 18, 2019

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

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

Python 相关文章推荐
Python判断Abundant Number的方法
Jun 15 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
May 03 Python
python 迭代器和iter()函数详解及实例
Mar 21 Python
python获取文件真实链接的方法,针对于302返回码
May 14 Python
Python使用pickle模块实现序列化功能示例
Jul 13 Python
python从子线程中获得返回值的方法
Jan 30 Python
对python条件表达式的四种实现方法小结
Jan 30 Python
Python 合并多个TXT文件并统计词频的实现
Aug 23 Python
python实现两个文件夹的同步
Aug 29 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
Feb 14 Python
Django解决frame拒绝问题的方法
Dec 18 Python
python中最小二乘法详细讲解
Feb 19 Python
使用Django搭建一个基金模拟交易系统教程
Nov 18 #Python
wxPython实现文本框基础组件
Nov 18 #Python
WxPython实现无边框界面
Nov 18 #Python
python中的RSA加密与解密实例解析
Nov 18 #Python
wxpython绘制圆角窗体
Nov 18 #Python
wxpython绘制音频效果
Nov 18 #Python
python导入不同目录下的自定义模块过程解析
Nov 18 #Python
You might like
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
python基础while循环及if判断的实例讲解
2017/08/25 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
python3获取url文件大小示例代码
2019/09/18 Python
Python双链表原理与实现方法详解
2020/02/22 Python
python实现网页录音效果
2020/10/26 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
酒店公关部经理岗位职责
2013/11/24 职场文书
财务主管的岗位职责
2013/12/30 职场文书
继电保护工岗位职责
2014/01/05 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
感谢信怎么写
2015/01/21 职场文书
2016银行求职自荐信
2016/01/28 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
关于python类SortedList详解
2021/09/04 Python
使用HttpSessionListener监听器实战
2022/03/17 Java/Android