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逐行读取文件内容的三种方法
Jan 20 Python
Python中操作MySQL入门实例
Feb 08 Python
Python切换pip安装源的方法详解
Nov 18 Python
python3实现ftp服务功能(客户端)
Mar 24 Python
使用Python读取安卓手机的屏幕分辨率方法
Mar 31 Python
解决已经安装requests,却依然提示No module named requests问题
May 18 Python
基于Python pip用国内镜像下载的方法
Jun 12 Python
python3人脸识别的两种方法
Apr 25 Python
python 字符串常用方法汇总详解
Sep 16 Python
详解Pycharm第三方库的安装及使用方法
Dec 29 Python
Pytorch 统计模型参数量的操作 param.numel()
May 13 Python
python中filter,map,reduce的作用
Jun 10 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下使用SMTP发邮件的代码
2008/01/10 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
利用Python如何生成随机密码
2016/04/20 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
数据库的约束含义
2012/09/09 面试题
工程班组长岗位职责
2013/12/30 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
四年级学生期末评语
2014/12/26 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
MySQL数据库简介与基本操作
2022/05/30 MySQL