基于Django的前端渲染方式总结

 目录

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

1-0 渲染方式特点总结

1-1 后台Render传输数据

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

1-3 详细学习博客跳转

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

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

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

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

1-0 渲染方式特点总结

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

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

2-2-0 JQuery 中文文档API

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

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

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

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

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

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

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

---

 

一、基于后台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']
 
	# 把字典转换成jso