MTV与MVC 多对多表的创建方式前后端传输数据编码格式 ajax 批量插入数据自定义分页器

一、MTV 与 MVC

MTV模型(django):
M:模型层(models.py)
T:templates
V:views

MVC模型:
M:模型层(models.py)
V:视图层(views.py)
C:控制器(Controller) urls.py

本质:django的MTV也是MVC

二、多对多关系表的三种创建方式

第一种：  django orm 自动帮我们创建   在第三张表里，无法添加其他字段了

class Book(models.Model):
	name = models.CharField(max_length=32)
	authors = models.ManyToManyField(to='Author')


class Author(models.Model):
	name = models.CharField(max_length=32)

可以通过对象去查询，也可通过双下划线去查询


第二种： 手动去创建三张表

class Book(models.Model):
	name = models.CharField(max_length=32)

class Author(models.Model):
	name = models.CharField(max_length=32)

class Book2Author(models.Model):
	book = models.ForeignKey(to='Book')
	author = models.ForeignKey(to='Author')
	info = models.CharField(max_length=32)   #可手动添加其他字段

无法通过orm里的对象去查询，但是可以用双下划线通过第三张表做中介间接去查到数据


第三种：半自动去创建三张表    （推荐使用） 可扩展性高，并且能够符合orm查询

class Book(models.Model):
    name = models.CharField(max_length=32)
    authors = models.ManyToManyField(to='Author',through='Book2Author',through_fields=('book','author'))
    #注意上述代码的书写，三个关键字，还有，多对多关系写在这，那么Book就是主动的，注意book要写在前面
    
class Author(models.Model):
    name = models.CharField(max_length=32)

class Book2Author(models.Model):
    book = models.ForeignKey(to='Book')
    author = models.ForeignKey(to='Author')
    info = models.CharField(max_length=32)

django 里无论是对象的正反向查询，还是双下划线的正反向查询，均可得到数据



    res1 = models.Book.objects.filter(pk=1).first().authors.all()  #正向查
    res2 = models.Author.objects.filter(pk=1).first().book_set.all()  #反向查

    res3 = models.Author.objects.filter(pk=1).values('book__authors__book')  #正向查
    res4 = models.Book.objects.filter(pk=1).values('authors__book2author__book') #反向查

三、前后端 form表单传输数据的编码格式

	前后端传输数据编码格式contentType
	1、urlencoded   默认 
		前端对应的数据格式:name=jason&password=666
		后端获取数据:request.POST
		ps；django会将urlencoded编码的数据解析自动放到request.POST
		
		当传文件时：
		  前端拿到的只是文件的名字
		  后端拿到的 同样是一个键值对  <QueryDict: {'name': ['json'], 'age': ['28'], 'file': ['数据库day06课堂笔记.md']}>
		
		
		
	2、form-data  在form表单里手动修改	
	enctype="multipart/form-data"
	
		前端看不到on，被藏起来了
	
		指定了form表单传输文件的编码格式
		后端获取文件格式数据:request.FILES     
		<MultiValueDict: {'file': [<InMemoryUploadedFile: 数据库day06课堂笔记.md (application/octet-stream)>]}>
		后端获取普通键值对数据:request.POST
		<QueryDict: {'name': ['老李'], 'age': ['28']}>
		
		form表单支持上述两种编码格式

还存在一种编码格式：不过form表单不支持

application/json
ajax发送json格式数据
需要注意的点
编码与数据格式要一致 content:'application/json'

四、前端朝后端发请求的方式

浏览器窗口手动输入网址 get请求
a标签的href属性 get请求
form表单 get/post请求(默认是get请求)
ajax get/post请求

五、ajax的准备知识：json

json介绍：

1、JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
2、JSON 是轻量级的文本数据交换格式
3、JSON 独立于语言
4、JSON 具有自我描述性，更易理解
5、 JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

合格的json对象（json对象只认双引号的字符串格式）：

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]　

不合格的json对象：

{ name: "张三", 'age': 32 }  // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined }  // 不能使用undefined
{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}  // 不能使用函数和日期对象
}


stringify 与 parse 方法
JavaScript中关于JSON对象和字符串转换的两个方法：

JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)

JSON.parse('{"name":"Howker"}');
JSON.parse('{name:"Stack"}') ;   // 错误
JSON.parse('[18,undefined]') ;   // 错误

JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。

JSON.stringify({"name":"Tonny"})

六、ajax

1.ajax特点：

　　异步提交提交任务完后，该干啥就干啥

　　局部刷新部分内容刷新

2、ajax基本语法

提交的地址(url)
提交的方式(type)
提交的数据(data)
回调函数(success)
$('#d1').click(function () {
                $.ajax({
                // 提交的地址
                url:'/index/',
                // 提交的方式
                type:'post',
                // 提交的数据
                data:{'name':'michael','password':'123'},
                // 回调函数
                success:function (data) { // data接收的就是异步提交返回的结果
                        alert(data)
                        }
                })
        })

3.ajax默认传输数据的编码格式也是urlencoded
此时在前端的检查页面，可见 Form Data 为 name=michael&password=123

4、前后端传输数据   数据与编码要一一对应。 request.POST 拿不了json类型的数据  <QueryDict: {}>
ajax传输json格式数据    其数据放在request.body里  b'{"name":"michael","hobby":"read"}'

$('#d1').click(function () {
				   $.ajax({
					   url:'',  // url参数可以不写，默认就是当前页面打开的地址
					   type:'post',
					   contentType:'application/json',	
　　　　　　　　　　　　　　　　　　　　　　　　　　data:JSON.stringify({'name':'michael','hobby':'ready'}),
					   success:function (data) {
						   {#alert(data)#}
						   {#$('#i3').val(data)#}
					   }
				   })
				});


后端拿到数据是字节类型，处理前先转码为字符串
				data = request.body
				res1 = data.decode('utf-8')  #方式一
				res2 = str(data,encoding='utf-8') #方式二

若 将字符串转成json类型的字典
				import json
				res3 = json.loads(res2)

5.ajax传输文件
$('#d1').click(function () {
				   let formdata = new FormData();
				   // FormData对象不仅仅可以传文件还可以传普通的键值对
					formdata.append('name','jason');
					// 获取input框存放的文件
					//$('#i1')[0].files[0]
					formdata.append('myfile',$('#i1')[0].files[0]);
					$.ajax({
						url:'',
						type:'post',
						data:formdata,
						// ajax发送文件需要修改两个固定的参数
						processData:false,  // 告诉浏览器不要处理我的数据
						contentType:false,  // 不要用任何的编码，就用我formdata自带的编码格式，django能够自动识别改formdata对象
						// 回调函数
						success:function (data) {
							alert(data)
						}
					})
				});
				
				
			普通的键值放在request.POST 里
			文件相关的放在request.FILES

6.ajax与form表单的异同点：

1.form表单不支持异步提交局部刷新
2.form表单不支持传输json格式数据
3.form表单与ajax默认传输数据的编码格式都是urlencoded

MTV与MVC 多对多表的创建方式 前后端传输数据编码格式 ajax 批量插入数据 自定义分页器

MTV与MVC 多对多表的创建方式前后端传输数据编码格式 ajax 批量插入数据自定义分页器