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 相关文章推荐
Python3.x中自定义比较函数
Apr 24 Python
python数据结构之图的实现方法
Jul 08 Python
用Python写冒泡排序代码
Apr 12 Python
Python tornado队列示例-一个并发web爬虫代码分享
Jan 09 Python
python 公共方法汇总解析
Sep 16 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
Dec 10 Python
Python RabbitMQ实现简单的进程间通信示例
Jul 02 Python
Linux安装Python3如何和系统自带的Python2并存
Jul 23 Python
基于opencv的selenium滑动验证码的实现
Jul 24 Python
python爬虫分布式获取数据的实例方法
Nov 26 Python
Python Process创建进程的2种方法详解
Jan 25 Python
python开发飞机大战游戏
Jul 15 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php字符串过滤与替换小结
2015/01/26 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
php常量详细解析
2015/10/27 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
跟老齐学Python之print详解
2014/09/28 Python
python实现计算资源图标crc值的方法
2014/10/05 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
Django数据库迁移常见使用方法
2020/11/12 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
师范生自荐信
2013/10/27 职场文书
教育专业个人求职信
2013/12/02 职场文书
白莲教口号
2014/06/18 职场文书
法学专业求职信
2014/07/15 职场文书
员工趣味活动方案
2014/08/27 职场文书
《秋思》教学反思
2016/02/23 职场文书
pytorch 如何使用float64训练
2021/05/24 Python