0%

Django将发布内容动态显示到页面上

Django如何将发布内容动态显示到页面上

将发布内容动态显示到页面上

  • 在settings.py中配置

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    TEMPLATES = [
    {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR,"Templates")],
    'APP_DIRS': True,
    'OPTIONS': {
    'context_processors': [
    'django.template.context_processors.debug',
    'django.template.context_processors.request',
    'django.contrib.auth.context_processors.auth',
    'django.contrib.messages.context_processors.messages',
    'django.template.context_processors.media', # 新添加的
    ],
    },
    },
    ]



    #已经配置过的
    MEDIA_URL = '/media/'
    MEDIA_ROOT = os.path.join(BASE_DIR,'media')
  • 在urls.py中配置路由

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    from tour.settings import  MEDIA_ROOT
    from django.views.static import serve #注意包不能导错
    urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^media/(?P<path>.*)/$', serve, {"document_root": MEDIA_ROOT}),#加载media文件的时候需要的路由
    url(r"^gettour",views.gettour),#获取tour.html页面的路由
    url(r"^sendtour",views.sendTour),#发布动态的路由

    ]
  • 在views.py文件中创建sendTour的函数

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    def sendTour(request):
    try:
    #从请求中将表单中的数据取出,并且存储到数据库中
    tour = Tour()
    tour.username= request.POST.get("username")
    tour.times = request.POST.get("times")
    tour.sendtime = request.POST.get("sendtime")
    tour.sendtxt = request.POST.get("sendtxt")
    tour.phonename = request.FILES.get("imgfile")
    tour.musicname = request.FILES.get("musicfile")
    tour.save()
    #若存储成功,则将对象转为字典
    tourdict = {"code":"1","username":tour.username,"times":tour.times,
    "sendtime":tour.sendtime,"phonename":tour.phonename.url
    ,"musicname":tour.musicname.url,"sendtxt":tour.sendtxt}
    # 再字典转为json字符串,返回到前端页面中
    response = HttpResponse(json.dumps(tourdict))
    except Exception as e:
    print(e)
    response = HttpResponse(json.dumps({'code': "0"}))
    response["Access-Control-Allow-Origin"] = "*"
    response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"
    response["Access-Control-Max-Age"] = "1000"
    response["Access-Control-Allow-Headers"] = "*"
    return response
  • 在前端页面中添加函数

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    function sendData(){
    //选中dataform表单对其进行格式化处理
    var dataform = new FormData($("#datafrom")[0])
    console.log(dataform)
    var user = document.getElementById("user").innerHTML;
    //将数据追加到表单中
    dataform.append("username",user)
    var dates = new Date()
    var y = dates.getFullYear()
    var m = dates.getMonth() + 1
    var d = dates.getDate()
    dataform.append("sendtime",y+"/"+m+"/"+d)
    //追加一个时间戳
    dataform.append("times",dates.getTime())
    $.ajax({
    type:"post",
    url:"http://127.0.0.1:9000/sendtour",
    data:dataform,
    async:true,
    dataType:"json",
    timeout:5000,
    cache:false, //提交表单的时候需要的参数
    contentType:false,
    processData:false,
    success:function(data){//请求成功的时候返回的参数
    alert(data)
    if(data.code=="1"){//判断数据是否成功存入数据库
    alert("发布成功")
    // 将我们返回的数据显示到页面上来
    addhistory(data)

    }
    if(data.code=="0"){//数据没存储成功,则显示发布失败!
    alert("发布失败")
    }
    },
    error:function(){
    alert("请求异常")
    }
    })


    }

    //将得到的数据动态的添加到html页面中
    function addhistory(data) {
    //打印data数据
    console.log(data)
    //找到存放li的大盒子
    var $ul = document.getElementById("ulitem");
    //创建一个li
    var $li = document.createElement("li")
    //将li添加到ul中
    $ul.appendChild($li)
    //给li添加一个class属性
    $li.className = "item";
    //给li添加标签
    $li.innerHTML = '<img class="item-img" src="'+data.phonename+'"/>' +
    '<div class="item-right">' +
    '<a class="delete" href="#">删除</a>' +
    '<p class="itemtxt">'+data.sendtxt+'</p>'+
    '<div class="userbox"><img class="icon-img" src="/static/img/a1.png"/> ' +
    '<span class="username">'+data.username+'</span><span class="sendtime">'+data.sendtime
    +'</span></div>' +
    '<div><a class="musicname" href="#">'+data.musicname+'</a></div>' +
    '</div>'

    }
写文不易,感谢支持!
Writing is not easy. Thank you for your support.