一、基于后台Render传输数据，前台使用Django-Template渲染

1-0 渲染方式特点总结

• 很难实现前后端分离，后端必须制定给予数据的页面路径
• 将数据使用{{}}模板语言进行获取以及数据的逻辑实现，存在效率问题，不推荐使用
• 前端页面杂乱，不清晰

1-1 后台Render传输数据

# 视图函数 传输数据给模板 def inde_action(request): # 推荐写法 name = 'name1' list00 = [1,2,3,'hello','django'] dic = {'name':'name2','age':18} def test(): print('hello world') return 'fun-test' class Person(): pass # locals()方法可以返回视图函数内所有定义的 变量、函数、类等 return render(request, 'index.html', locals())

1-2 Template前端获取数据渲染

# 数据获取 {{ 后台传输数据对象名 }} # 过滤器使用 {{ value|length }} # 模板的各种语法（标签实现逻辑） {% tag %} ...标签 内容 ... {% endtag %}

1-3 详细学习博客跳转

1-3-1 Django - 模板层 - 变量、过滤器、标签

1-3-2 Django - 模板层 - 模板的导入和继承 、静态文件的使用

1-3-2 基于此方法实现渲染的项目 - BBS项目学习博客跳转

二、基于后台 HttpResponse、JsonResponse方式进行数据传输

1-0 渲染方式特点总结

• 前后端数据容易分离
• 后端无需指定前端指定前端页面的具体路径
• 前后端分离需要处理跨域问题
• 基于Ajax或者Axios的数据交互
• 网页逻辑清晰，可实现方法的分离

2-1 后台 HttpResponse、JsonResponse 数据传输方式

基于Response和Rquests的详细学习 - Django 视图层 from django.http import HttpResponse def my_view(request): ... return HttpResponse('传输数据') # --------------------------------------------------- from django.http import JsonResponse def test(request): dic={'name':'name1','age':18} ll = ['name', 'age'] # 把字典转换成json格式,返回到前台 return JsonResponse(dic) # 报错,默认不支持列表形式 return JsonResponse(ll) # 支持列表形式 return JsonResponse(ll,safe=False)

2-2 前端基于 JQuery 渲染页面 - 页面的DOME操作

2-2-0 JQuery 中文文档API

2-2-1 方式一 基于页面原有标签对象，使用JQ获取语法修改value值

基于JQuery的Ajax数据传输和处理

+=

点我

2-2-2 方式二 使用JQ创建标签，使用append方法进行DOME操作

 

资产列表管理

{# 存放数据处理的一些方法（init_thead、init_tbody），非第三方 #} function init_thead(thead_dic){ $.each(thead_dic, function(k,v){ th_str = v.title; var th = document.createElement('th'); th.innerText = th_str; $('#thead').append(th); }); } function init_tbody(data_list, thead_dic){ /** * [ * {'id': 1, 'hostname': 'c1.com', 'sn': '432t4173t21'}, * {'id': 2, 'hostname': 'c2.com', 'sn': 'gfdgfd43432'} * ] */ $.each(data_list, function(k,v){ var tr = document.createElement('tr'); $.each(thead_dic, function (k, configitem) { /** * { "field": 'sn', "title": 'sn号', } * @type {HTMLTableDataCellElement} */ var td = document.createElement('td'); td.innerText = v[configitem['field']]; console.log(td); tr.append(td) }); $('#tbody').append(tr); }); }

2-3 前端基于 Vue.js 渲染页面 - 数据驱动渲染

2-3-0 学习网站项目学习 - 基于Django 和 Vue的前后端数据交互

2-3-1 学习网站项目学习 - Django & Vue - 前端数据渲染、前端带参转跳

2-3-2 data内return页面所需数据对象，methods内实现基于axios的前后端交互

三、基于JQuery前端渲染方式的数据优化（提取方法单文件存储）

代码见上方