Django 、Flask从数据库读出的数据通常保存为:对象列表、字典列表,或 tuple列表形式
# 用object_list 对象列表表示数据库记录
[
<Article: id=1,title=星际穿越影评,body=作为一部硬科幻电影,..., ck=False>,
<Article: id=2,title=流浪地球,body=《流浪地 球》该部影片..., ck=False>,
<Article: id=3,title=海的尽头是草原,body=无论处在多么艰难的时..., ck=False>,
<Article: id=4,title=我们的岁月,body=想看看时代的缩影,结..., ck=False>
]
# 用 字典列表来表示数据库记录
[
{'id': 1, 'title': '星际穿越影评', 'ck': False},
{'id': 2, 'title': '流浪地球', 'ck': False},
{'id': 3, 'title': '海的 尽头是草原', 'ck': False},
{'id': 4, 'title': '我们的岁月', 'ck': False}
]
# 以tuple 列表,或二维列表,表示数据库记录
[
(1, '星际穿越影评', False),
(2, '流浪地球', False),
(3, '海的尽头是草原', False),
(4, '我们的岁月', False),
]
有时,我们需要使用Javascript的功能,比如使用 echarts 库进行绘图, 或者为了减轻服务器压力只返回原始数据给浏览器,在本地通过 assembly 或javascript 进行数据处理,等场景下,在javascript 端需要对收到的数据转换为javascript 易于处理的格式。
本文将介绍Django/Flask 数据库Web应用中后端传值,以及前端javascript处理的最佳实践:
什么是 json ?
json的定义javascript object notation
, 是javascript 用以文本格式进行网络交换数据、或存储数据的格式。
什么是dict?
dict字曲类型是python 原生类型,主要用于in-memory 的数据描述,不能直接用于存储或网络数据交换。
二者区别
{ key:value }
形式,但”key“
必须是双引号,value可以是任意数据类型。integer, str, list, array 等。dict 与json转换
dict => json :
x_dict = {
"name": "John",
"age": 30,
"city": "New York"
}
y_json = json.dumps(x_dict)
json => dict
y_json = '{"name":"John", "age":30, "city":"New York"}'
# 注意 key必须用"双引号“括起来,外面再用单引号括起来
x_dict = json.loads(y_json)
什么是object?
object 是 javascript 的原生类型,也是所有类型的原始类型,但同样也不能直接用于网络传输数据。 形式上,key不能用引号括起来。
var x = new Object;
x.name = "John"
x.age = 20
console.log(x)
ouput
{ name: 'John', age: 20 }
json in javascript
json 在javascript中,形式上也是string类型,但 key必须用双引号括起来 “key”, 因此json字符串外层只能用单引号括起来
const jsonText = `{
"browsers": {
"firefox": {
"name": "Firefox",
"pref_url": "about:config",
"releases": {
"1": {
"release_date": "2004-11-09",
"status": "retired",
"engine": "Gecko",
"engine_version": "1.7"
}
}
}
}
}`;
console.log(JSON.parse(jsonText));
output
{
browsers: {
firefox: { name: 'Firefox', pref_url: 'about:config', releases: [Object] }
}
}
二者区别
形式上,
json与object转换
json => object: 用JSON.parse()方法
// parse method
const x_json = '{"name":"John", "age":30, "city":"New York"}'
const y_obj = JSON.parse(x_json)
console.log(x_json)
console.log(y_obj)
ouput:
{"name":"John", "age":30, "city":"New York"}
{ name: 'John', age: 30, city: 'New York' }
注意 object r value 与: 之间有空格。
object => json : 用JSON.stringify()
var z_obj = { x: 10, y: 100}
var q_json=JSON.stringify(z_obj)
console.log(z_obj)
console.log(q_json)
output
{ x: 10, y: 100 }
{"x":10,"y":100}
Object 的key可以省略, 就类似于python 列表, 所以django可以直接将列表传为json传值
q_json = JSON.stringify([new Number(3), new String('false'), new Boolean(false)]),
console.log(q_json);
z_obj = JSON.parse(q_json)
console.log(typeof(z_obj),Object.keys(z_obj))
output
{ x: 10, y: 100 }
{"x":10,"y":100}
[3,"false",false]
object [ '0', '1', '2' ]
由于dict不能直接用于网络间数据交换,因此django 须先将字典转换成 json 格式。
由于object 对象也不能直接用于网络接口,必须经序列化,但这样做的话,在javascript侧解析就比较麻烦。建议将数据库记录使用字典列表的格式,再转为json字符串,发送给模板,或直接用 HttpResponse返还给用户浏览器。
视图传值给模板文件,实际上还是django内部流程, 所以可以直接用字典、字典列表传值,模板子系统{{{ x_dict }} 收到后,也是会转为html数据后才发送出去。 这种方式,模板中没有使用javascript 时,可以这样做。
Flask使用Jinjia2模板,处理是相同的。
如果模板中包含了 javascript 代码,并需要对视图传递的数据进行处理,则视图不应该直接传递字典、字典列表,应先将字典列表数据转为json, 再传递给模板,如下例, 传递了书籍列表数据给模板
## views.py
from django.shortcuts import render
from json import dumps
def send_dictionary(request):
# create data dictionary
dataDictionary = [{'id': 1, 'title': '星际穿越影评', 'ck': False}, {'id': 2, 'title': '流浪地球', 'ck': False}, {'id': 3, 'title': '海的 尽头是草原', 'ck': False}, {'id': 4, 'title': '我们的岁月', 'ck': False}, {'id': 6, 'title': 'Title_Test_a002', 'ck': False}, {
'id': 7, 'title': 'Title_Test_a003', 'ck': False}, {'id': 8, 'title': 'Title_Test_a004', 'ck': False}, {'id': 9, 'title': 'A005', 'ck': False}, {'id': 10, 'title': 'A006', 'ck': False}, {'id': 11, 'title': 'A009', 'ck': False}, {'id': 12, 'title': 'A0010', 'ck': False}]
# dump data to json string
dataJSON = dumps(dataDictionary)
# pass json data to template
return render(request, 'main / landing.html', {'data': dataJSON})
javascript {{ x_json | safe }} 接收后,再用 JSON.parse()转换为object对象后处理。
<script>
// convert json ⇒> object , 第1层为数组
var data = JSON.parse("{{data|escapejs}}");
for (var i=0; i < data.length; i++){
let txt = Object.values(data[i]).join(",")
console.log(txt)
}
script>
output like
1,星际穿越影评,false
2,流浪地球,false
3,海的 尽头是草原,false
4,我们的岁月,false
6,Title_Test_a002,false
7,Title_Test_a003,false
8,Title_Test_a004,false
9,A005,false
10,A006,false
11,A009,false
12,A0010,false
说明: