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 相关文章推荐
使用setup.py安装python包和卸载python包的方法
Nov 27 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
Sep 28 Python
Android应用开发中Action bar编写的入门教程
Feb 26 Python
在win和Linux系统中python命令行运行的不同
Jul 03 Python
Python模拟脉冲星伪信号频率实例代码
Jan 03 Python
Python+tkinter使用80行代码实现一个计算器实例
Jan 16 Python
python+opencv识别图片中的圆形
Mar 25 Python
基于python 二维数组及画图的实例详解
Apr 03 Python
python使用Flask操作mysql实现登录功能
May 14 Python
Python解决走迷宫问题算法示例
Jul 27 Python
Python 中判断列表是否为空的方法
Nov 24 Python
python 如何引入协程和原理分析
Nov 30 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
php微信开发之关注事件
2018/06/14 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
python 线程的五个状态
2020/09/22 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
公司离职证明范本
2014/01/13 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
村党支部书记承诺书
2014/05/29 职场文书
好人好事演讲稿
2014/09/01 职场文书
领导欢迎词范文
2015/01/26 职场文书
党校毕业个人总结
2015/02/28 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
营运督导岗位职责
2015/04/10 职场文书
环境卫生标语
2015/08/03 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫