快捷導(dǎo)航

Python django搭建layui提交表單,表格,圖標(biāo)的實例

更新時間：2019年11月18日 15:26:51 作者：Luzaofa

今天小編就為大家分享一篇Python django搭建layui提交表單,表格,圖標(biāo)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

利用layui制作與眾不同的感謝表單，表格

layui極大的提高了前端開發(fā)效率，它極具個性的樣式等等都非常吸引人，接下來我將為大家展示如何利用Python的django框架與layui制作極富個性的表單與數(shù)據(jù)表格

注：忽略創(chuàng)建項目，配置文件，若這部分內(nèi)容不太明白，參考教你使用Django搭建一個基金模擬交易系統(tǒng)，里面會教你從項目創(chuàng)建到最終運行的完整流程。

第一步：在templates目錄下新建一個index.html文件（文件內(nèi)容根據(jù)自己的業(yè)務(wù)需求在layui官網(wǎng)復(fù)制即可），同時改變其布局只需將form標(biāo)簽放到一個自定義div內(nèi)，若要更改其標(biāo)簽顏色只需將內(nèi)置的背景色CSS類添加到lable標(biāo)簽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>表單集合練習(xí)</legend>
 </fieldset>
{# <form class="layui-form" action="">#}
 <form class="layui-form layui-form-pane" action="/get_mas/" method="post"> {# 方框風(fēng)格的表單集合 #}
  {% csrf_token %}
  <div class="layui-form-item">
  <label class="layui-form-label layui-bg-red">標(biāo)題</label>
  <div class="layui-input-block">
   <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="請輸入標(biāo)題" 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">手機(jī)號碼</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;
  //自定義驗證規(guī)則
  form.verify({
  title: function(value){
   if(value.length < 5){
   return '標(biāo)題至少得5個字符啊';
   }
  }
  });
 });
</script>

</body>
</html>

第二步：在templates目錄下新建一個table.html文件用于接收用戶提交數(shù)據(jù)

<!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>表格練習(xí)(用戶提交數(shù)據(jù))</legend>
 </fieldset>
  <table class="layui-table">
  <colgroup>
   <col width="150">
   <col width="200">
   <col>
  </colgroup>
  <thead>
   <tr class="layui-bg-red">
   <th>標(biāo)題</th>
   <th>用戶名</th>
   <th>手機(jī)號碼</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里定義如下函數(shù)，index用于顯示首頁信息，get_mas用戶接收用戶提交同時返回數(shù)據(jù)

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),
]

實現(xiàn)效果圖如下：

表單：