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对列表去重的多种方法(四种方法)
Dec 05 Python
python 矩阵增加一行或一列的实例
Apr 04 Python
Python不同目录间进行模块调用的实现方法
Jan 29 Python
Python将列表数据写入文件(txt, csv,excel)
Apr 03 Python
python替换字符串中的子串图文步骤
Jun 19 Python
Ubuntu+python将nii图像保存成png格式
Jul 18 Python
Python实现银行账户资金交易管理系统
Jan 03 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
May 11 Python
使用Nibabel库对nii格式图像的读写操作
Jul 01 Python
Pandas中DataFrame交换列顺序的方法实现
Dec 14 Python
Python 数据分析之逐块读取文本的实现
Dec 14 Python
Python预测分词的实现
Jun 18 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
PHP5 安装方法
2007/01/15 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
python数据结构之链表的实例讲解
2017/07/25 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
python处理document文档保留原样式
2019/09/23 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
应届生高等护理求职信
2013/10/12 职场文书
招聘单位介绍信
2014/01/14 职场文书
会计助理岗位职责
2014/02/17 职场文书
建筑安全责任书范本
2014/07/24 职场文书
交心谈心活动总结
2015/05/11 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android