原生Form 和 Form组件 Modelform
主要的文件：manage.py，url.py，views.py，settings.py，models.py
manage.py：项目管理文件，一般不做修改。
url.py：路由系统，配置views.py中函数和对应路径的关系。
views.py：添加视图函数，常见的增删查改函数。
settings.py：模板配置文件，对TEMPLATES 、DATABASES、STATIC_URL 等进行配置。
models.py：数据库相关表的类描述。
Django基础必备三件套：HttpResponse, render, redirect
from django.shortcuts import HttpResponse, render, redirect
HttpResponse：内部传入一个字符串参数，返回给浏览器。
render：除request参数外还接受一个待渲染的模板文件和一个保存具体数据的字典参数。将数据填充进模板文件，最后把结果返回给浏览器。
redirect：接受一个URL参数，表示跳转到指定的URL。
参考链接：https://www.cnblogs.com/hxf175336/p/9332409.html
https://www.cnblogs.com/hxf175336/p/9449771.html
表单的处理方式：
常见的三种方式：原生form、form组件、ModelForm组件，以Book表的add为例子分别说明一下这三种方式。
原生Form：
from django.shortcuts import render, HttpResponse, redirect from .models import * # Create your views here.
def books(request):
book_list = Book.objects.all()
return render(request, "books.html", locals()) # 普通add创建方法
def add_book(request):
if request.method == "POST":
title = request.POST.get("title")
price = request.POST.get("price")
date = request.POST.get("date")
publish = request.POST.get("publish")
author = request.POST.getlist("author")
# 创建数据库字段
book_obj = Book.objects.create(title=title, price=price, date=date, publish_id=publish)
# 创建多对对字段
book_obj.authors.add(*author)
return redirect("/books/") publish_list = Publish.objects.all()
author_list = Author.objects.all() return render(request, "add_book.html", locals()) def edit_book(request, id):
if request.method == "POST":
title = request.POST.get("title")
price = request.POST.get("price")
date = request.POST.get("date")
publish = request.POST.get("publish")
author_pk_list = request.POST.getlist("author")
# filter过滤找到指定的值后，直接可以updata更新字段
Book.objects.filter(pk=id).update(title=title, price=price, date=date, publish=publish)
# 多对多字段更新
book_obj = Book.objects.filter(pk=id).first() # first 找到具体对象 就可以点跨表取值
book_obj.authors.set(*author_pk_list) # 进行多对多字段更新
return redirect("/books/") edit_book = Book.objects.filter(id=id).first() # 利用first可以直接把单个值拿出来,前端可以用点取值
publish_list = Publish.objects.all()
author_list = Author.objects.all() return render(request, "edit_book.html", locals())
template：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--配置手机端适应-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--配置css文件 核心CSS样式压缩文件-->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<!--配置jQuery-->
<script src="/static/bootstrap/jQuery.js"></script>
<!--配置 核心Boot script JS压缩文件-->
<script src="/static/bootstrap/js/bootstrap.min.js"></script> </head>
<body>
<a href="/book_add/"><button>添加书籍</button></a> <hr>
<table border="">
{% for book in book_list %}
<tr>
<td>{{ book.title }}</td>
<td>{{ book.price }}</td>
<td>{{ book.date|date:"Y-m-d" }}</td>
<td>{{ book.publish.name }}</td>
<td>{{ book.publish.all }}</td>
<td>{% for author in book.authors.all %}
{{ author }}
{% endfor %} </td>
<td><button><a href="/book_edit/{{ book.id }}/">编辑</a></button></td>
</tr> {% endfor %} </table> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--配置手机端适应-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--配置css文件 核心CSS样式压缩文件-->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<!--配置jQuery-->
<script src="/static/bootstrap/jQuery.js"></script>
<!--配置 核心Boot script JS压缩文件-->
<script src="/static/bootstrap/js/bootstrap.min.js"></script> </head>
<body> <h3> 编辑页面</h3> <form action="/book_edit/{{ edit_book.id }}/" method="post">
{% csrf_token %}
<p>书籍名称<input type="text" name="title" value="{{ edit_book.title }}"></p>
<p>价格<input type="text" name="price" value="{{ edit_book.price }}"></p>
<p>日期<input type="date" name="date" value="{{ edit_book.date|date:"Y-m-d" }}"></p>
<p>出版社 <select name="publish" id="">
{% for publish in publish_list %}
<!--值的学习的地方-->
{% if edit_book.publish == publish %}
<option selected value="{{ publish.id }}">{{ publish.name }}</option>
{% else %}
<option value="{{ publish.id }}">{{ publish.name }}</option>
{% endif %} {% endfor %} </select> <p>作者 <select name="author" id="" multiple>
{% for author in author_list %}
<!--值的学习的地方-->
{% if author in edit_book.authors.all %}
<option selected value="{{ author.id }}">{{ author.name }}</option>
{% else %}
<option value="{{ author.id }}">{{ author.name }}</option>
{% endif %} {% endfor %}
</select> </p>
<p>
<button type="submit">提交</button>
</p> </form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--配置手机端适应-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--配置css文件 核心CSS样式压缩文件-->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<!--配置jQuery-->
<script src="/static/bootstrap/jQuery.js"></script>
<!--配置 核心Boot script JS压缩文件-->
<script src="/static/bootstrap/js/bootstrap.min.js"></script> </head>
<body>
<h3>添加页面</h3> <form action="/book_add/" method="post">
{% csrf_token %}
<p>书籍名称<input type="text" name="title"></p>
<p>价格<input type="text" name="price"></p>
<p>日期<input type="date" name="date"></p>
<p>出版社 <select name="publish" id="">
{% for publish in publish_list %}
<option value="{{ publish.id }}">{{ publish.name }}</option>
{% endfor %} </select> <p>作者 <select name="author" id="" multiple>
{% for author in author_list %}
<option value="{{ author.id }}">{{ author.name }}]</option>
{% endfor %}
</select> </p>
<p><button type="submit">提交</button></p> </form> </body>
</html>
效果图：
Form组件：
前端页面两中形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--配置手机端适应-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--配置css文件 核心CSS样式压缩文件-->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<!--配置jQuery-->
<script src="/static/bootstrap/jQuery.js"></script>
<!--配置 核心Boot script JS压缩文件-->
<script src="/static/bootstrap/js/bootstrap.min.js"></script> </head>
<body>
<form action="">
{% csrf_token %}
<div>
{{ form.title.label }}
{{ form.title }}
</div> <div>
{{ form.price.label }}
{{ form.price }}
</div> <div>
{{ form.date.label }}
{{ form.date }}
</div> <div>
{{ form.pubilish.label }}
{{ form.pubilish }}
</div>
<div>
{{ form.author.label }}
{{ form.author }}
</div> <input type="submit">
</form> </body>
</html>
2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--配置手机端适应-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--配置css文件 核心CSS样式压缩文件-->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<!--配置jQuery-->
<script src="/static/bootstrap/jQuery.js"></script>
<!--配置 核心Boot script JS压缩文件-->
<script src="/static/bootstrap/js/bootstrap.min.js"></script> </head>
<body>
<h3>添加页面</h3> <form action="/book_add/" method="post">
{% csrf_token %}
{% for field in form %}
<div>
{{ field.label }}
{{ field}}
</div>
{% endfor %} <input type="submit">
</form> </body>
</html>
2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--配置手机端适应-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--配置css文件 核心CSS样式压缩文件-->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<!--配置jQuery-->
<script src="/static/bootstrap/jQuery.js"></script>
<!--配置 核心Boot script JS压缩文件-->
<script src="/static/bootstrap/js/bootstrap.min.js"></script> </head>
<body> <h3> 编辑页面</h3>
<form action="" method="post">
{% csrf_token %}
{% for field in form %} <div>
{{ field.label }}
{{ field }}
</div>
{% endfor %}
<input type="submit">
</form> </body>
</html>
Form view视图：
# 原生form 创建方法
def add_book(request):
if request.method == "POST":
# 我调用了form吧request值传进去让他帮我做校验
form = BookForm(request.POST)
# form.cleaned_data里面的数据
"""
{'title': 'fdasfdsa24323',
'price': Decimal('123212'),
'date': datetime.date(2019, 10, 17),
'pubilish': <Publish: 香蕉出版社>,
'author': <QuerySet [<Author: egen>]>}
""" if form.is_valid():
# 需要用cleaned_data取值
title = form.cleaned_data.get("title")
price = form.cleaned_data.get("price")
date = form.cleaned_data.get("date")
# 一对多字段和多对多字段需要在request里面取值
publish_id = request.POST.get("pubilish")
author_pk_list = request.POST.getlist("author")
book_obj = Book.objects.create(title=title, price=price, date=date, publish_id=publish_id)
book_obj.authors.add(*author_pk_list)
return redirect("/books/") form = BookForm()
return render(request, "add_book.html", locals())
def edit_book(request, id):
if request.method == "POST":
# 我调用了form吧request值传进去让他帮我做校验
form = BookForm(request.POST)
# form.cleaned_data里面的数据
"""
{'title': 'fdasfdsa24323',
'price': Decimal('123212'),
'date': datetime.date(2019, 10, 17),
'pubilish': <Publish: 香蕉出版社>,
'author': <QuerySet [<Author: egen>]>}
""" if form.is_valid():
# 需要用cleaned_data取值
title = form.cleaned_data.get("title")
price = form.cleaned_data.get("price")
date = form.cleaned_data.get("date")
# 一对多字段和多对多字段需要在request里面取值
publish_id = request.POST.get("pubilish")
author_pk_list = request.POST.getlist("author") Book.objects.filter(pk=id).update(title=title, price=price, date=date, publish=publish_id)
# 多对多字段更新
book_obj = Book.objects.filter(pk=id).first() # first 找到具体对象 就可以点跨表取值
book_obj.authors.set(*author_pk_list) # 进行多对多字段更新
return redirect("/books/") edit_book = Book.objects.filter(id=id).first() # 利用first可以直接把单个值拿出来,前端可以用点取值 form = BookForm()
# python2.26版本貌似没有了instance字段，无法在编辑时选中编辑的字段
# form = BookForm(instance=edit_book) return render(request, "edit_book.html", locals())
# ModelForm 创建方法：
前端页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--配置手机端适应-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--配置css文件 核心CSS样式压缩文件-->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<!--配置jQuery-->
<script src="/static/bootstrap/jQuery.js"></script>
<!--配置 核心Boot script JS压缩文件-->
<script src="/static/bootstrap/js/bootstrap.min.js"></script> </head>
<body>
<h3>添加页面</h3> <form action="/book_add/" method="post">
{% csrf_token %}
{% for field in form %}
<div>
{{ field.label }}
{{ field }}
</div>
{% endfor %} <input type="submit">
</form> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--配置手机端适应-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--配置css文件 核心CSS样式压缩文件-->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<!--配置jQuery-->
<script src="/static/bootstrap/jQuery.js"></script>
<!--配置 核心Boot script JS压缩文件-->
<script src="/static/bootstrap/js/bootstrap.min.js"></script> </head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3> 编辑页面</h3>
{% include "form.html" %}
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--配置手机端适应-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--配置css文件 核心CSS样式压缩文件-->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<!--配置jQuery-->
<script src="/static/bootstrap/jQuery.js"></script>
<!--配置 核心Boot script JS压缩文件-->
<script src="/static/bootstrap/js/bootstrap.min.js"></script> </head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>添加页面</h3>
{% include "add.html" %}
</div> </div>
</div> </body>
</html>
view视图：
class BookForm(ModelForm):
class Meta:
model = Book
fields = "__all__"
# 自定义属性的方法
widgets = {
"date": wid.DateInput(attrs={"type": "date","class": "form-control"}), # 还可以自定义属性
"title": wid.DateInput(attrs={"class": "form-control"}),
"price": wid.DateInput(attrs={"class": "form-control"}),
"publish": wid.Select({"class" : "form-control"}),
"authors": wid.SelectMultiple(attrs={"class" : "form-control"}),
} # labels，自定义在前端显示的名字
labels = {
"date": "时间",
"title": "用户名",
"price": "价格",
"publish": "出版社",
"authors": "作者", }
# ModelForm 创建方法
def add_book(request):
if request.method == "POST":
form = BookForm(request.POST)
if form.is_valid():
form.save() # 这个叼 这个叼
return redirect("/books/")
form = BookForm()
return render(request, "add_book.html", locals())
def edit_book(request, id):
if request.method == "POST":
form = BookForm(request.POST)
if form.is_valid():
form.save() # 这个叼 这个叼
return redirect("/books/") edit_book = Book.objects.filter(pk=id).first()
# ModelForm是有instance这个字段的,主要用于 编辑时可以默认选中当前编辑字段
form = BookForm(instance=edit_book)
return render(request, "edit_book.html", locals())
mo
原生Form 和 Form组件 Modelform的更多相关文章
- Django之form表单组件
Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...
- Django form表单 组件
目录 Django form表单 组件 Form 组件介绍 普通方式手写注册功能 使用form组件实现注册功能 Form 常用字段与插件 常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...
- Form( 表单) 组件
本节课重点了解 EasyUI 中 Form(表单)组件的使用方法, 这个组件不依赖于任何组件.一． 加载方式表单组件只能在 JS 区域设置,首先定义一张表单.<form id="box ...
- Django Form表单组件
Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...
- 第二百二十一节，jQuery EasyUI，Form(表单)组件
jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...
- 原生js实现form表单序列化
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- 封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
随机推荐
- Python中的数据类型、变量、字符编码、输入输出、注释
数据类型 number(数字) 用于存储类型,通常分为int.long.float.complex: int:32位机器上占32位,取值范围为-231 ~ 231 - 1:64位机器上占64位,取值范 ...
- go 基本IO接口
package main import ( "fmt" "io" "strings" ) func ReadFrom(reader io.R ...
- 实战远程文件同步(Remote File Sync)
1. 远程文件同步的常见方式: 1.cron + rsync 优点: 简单 缺点:定时执行,实时性比较差:另外,rsync同步数据时,需要扫描所有文件后进行比对,进行差量传输.如果文件数量达到了百万甚 ...
- 第三方dll签名
1.打开vs Tools下的工具命令 2.生成随机密钥对C:\Program Files (x86)\Microsoft Visual Studio 11.0\VC>sn -k NonSignL ...
- cxx11emu.h 和 logprint.h
cxx11emu.h 和 logprint.h /* Start of cxx11emu.h */ #ifndef STDBP_CXX11EMU_H_ #define STDBP_CXX11EMU_H ...
- 5_PHP数组_3_数组处理函数及其应用_3_数组指针函数
以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. 数组指针函数 1. key() 函数 程序: <?php $interests[2] = "mus ...
- 【CH1809】匹配统计（KMP）
题目链接 摘自https://www.cnblogs.com/wyboooo/p/9829517.html 用KMP先求出以a[i]为结尾的前缀与b匹配的最长长度. 比如 f[i] = j,就表示a[ ...
- kubernetes第八章--NFS PersistentVolume
- 【代码片段】定时记录CPU使用率并保存为CSV
原文链接 : [https://blog.zhoutao123.com/#/blog/article/64])(https://blog.zhoutao123.com/#/blog/article/6 ...
- Find 命令记录
当需要查找一个时间的文件时 使用find [文件目录] -mtime [时间] 例如:查看mysql.bak目录下的1天前的文件 find mysql.bak -mtime 找到此文件之后需要将它移动 ...