侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

Python  /  管理员 发布于 5年前   375

利用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="//article/../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="//article/../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="//article/../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="//article/../static/layui/layui.js" charset="utf-8"></script></body></html>

第三步:在views里定义如下函数,index用于显示首页信息,get_mas用户接收用户提交同时返回数据

from django.shortcuts import renderfrom django.http import HttpResponsedef 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 adminfrom django.urls import pathfrom django.conf.urls import urlfrom web import viewsurlpatterns = [ path('admin/', admin.site.urls), url(r'^$', views.index), url(r'^get_mas/$', views.get_mas),]

实现效果图如下:

表单:

表格:

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


  • 上一条:
    Python Django实现layui风格+django分页功能的例子
    下一条:
    快速上手前端框架layui
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在python语言中Flask框架的学习及简单功能示例(0个评论)
    • 在Python语言中实现GUI全屏倒计时代码示例(0个评论)
    • Python + zipfile库实现zip文件解压自动化脚本示例(0个评论)
    • python爬虫BeautifulSoup快速抓取网站图片(1个评论)
    • vscode 配置 python3开发环境的方法(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2018-04
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2022-01
    • 2023-07
    • 2023-10
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客