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

}

评论