MHuiG

「看庭前花开花落,望天上云卷云舒」

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

    }

Django中引用静态文件

Django 中引用静态文件 Django 中引用静态文件 Django 中引用静态文件 当我们将我们的 html 文件放到 Templates 文件中的时候，这时候此 html 我...

Django带文件的表单上传

Django 带文件的表单上传 Django 带文件的表单上传 带文件的表单上传首先在表单 form 中必须要添加这个属性enctype="multipart/form-data" ...

推荐阅读
Django带文件的表单上传 Django添加新的路由 Django的环境配置 图片墙 Django中引用静态文件 mysql与pymysql的设置

留言区

Notes
Django
本文目录
Are You A Robot?