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

Django 发布动态内容

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

在 settings.py 中配置

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 中配置路由

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 的函数

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

在前端页面中添加函数

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>'

}