目录:
- 点赞
- 文章评论
- 上传文件
- 保留页面条件
一、点赞
1、所用技术:
- django model F查询
- js应用:$(function () {}); 为文件加载完成执行ready() 方法。等同于on时间,多实例,使用。
定时器方法:setInterval(方法,间隔多长时间(毫秒)执行一次)
var obj = setInterval(function () {
if(xxx <= 0){
??????????????????? clearInterval(obj); //结束执行
??????????? },100);
ps.setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次
- css应用:
position属性
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
- 在Ajax操作时候,回调函数中的 $(this)已经不是原来的$(this)。需在外层函数声明。
2、应用代码:
前端:
1 <div> 2 ????????????????<div>{{ row.title }}</div> 3 ????????????????<div>{{ row.user.username }} ?评论:{{ row.comment_count }} 4 ????<!--使用相对定位--> 5 ????????????????????<div style="display: inline-block;position: relative;"> 6 ????????????????????????赞:<a class="new-like" new-id="{{ row.id }}">{{ row.like_count }}</a> 7 ????????????????????</div> 8 ????????????????</div> 9 ????????????</div>10 <script src="/static/jquery-3.2.1.js"></script>11 ????<script>12 ????????$(function () {13 ????????????bindLikeEvent();14 ????????});15 16 ????????function bindLikeEvent() {17 ????????????$(‘.new-like‘).click(function () {18 ????????????????// 获取当前新闻ID19 ????????????????var newId = $(this).attr(‘new-id‘);20 ????????????????var $this = $(this);21 ????????????????$.ajax({22 ????????????????????url: ‘/do_like.html‘,23 ????????????????????type: "POST",24 ????????????????????data: {‘newId‘: newId},25 ????????????????????dataType: ‘JSON‘,26 ????????????????????success:function (arg) {27 ????????????????????????if(arg.status){28 ????????????????????????????var origin = $this.text();29 ????????????????????????????var count = parseInt(origin);30 ????????????????????????????if(arg.code == 666){31 ????????????????????????????????$this.text(count - 1 );32 ????????????????????????????????showLikeCount($this,‘-1‘);33 34 ????????????????????????????}else if(arg.code == 999){35 ????????????????????????????????$this.text(count + 1 );36 ????????????????????????????????showLikeCount($this,‘+1‘);37 38 ????????????????????????????}39 ????????????????????????}else{40 ????????????????????????????alert(arg.msg);41 ????????????????????????}42 ????????????????????}43 44 ????????????????})45 ????????????})46 ????????}47 ????????48 ????????function showLikeCount($this,text) {49 ????????????var fontSize = 5;50 ????????????var top = 0;51 ????????????var right = 0;52 ????????????var opacity = 1;53 54 ????????????var tag = document.createElement(‘span‘);55 ????????????// var tag = document.getElementById()56 ????????????tag.innerText = text;57 ????????????tag.style.position = "absolute";58 ????????????// 默认大小59 ????????????tag.style.fontSize = fontSize + "px";60 ????????????tag.style.top = top + ‘px‘;61 ????????????tag.style.right = right + ‘px‘;62 ????????????tag.style.opacity = opacity;63 ????????????$this.after(tag);64 65 ????????????// 定时器,没0.5s执行一次66 ????????????var obj = setInterval(function () {67 ????????????????fontSize += 5;68 ????????????????top -= 5;69 ????????????????right -= 5;70 ????????????????opacity -= 0.1;71 72 ????????????????tag.style.fontSize = fontSize + "px";73 ????????????????tag.style.top = top + ‘px‘;74 ????????????????tag.style.right = right + ‘px‘;75 ????????????????tag.style.opacity = opacity;76 ????????????????if(opacity <= 0){77 ????????????????????clearInterval(obj);78 ????????????????????tag.remove();79 ????????????????}80 ????????????},100);81 82 ????????}83 ????</script>
后端:
1 import json 2 from django.db.models import F 3 from django.db import transaction 4 from utils.response import LikeResponse 5 ?6 def do_like(request): 7 ????""" 8 ????点赞 9 ????:param request:10 ????:return:11 ????"""12 ????response = LikeResponse()13 ????try:14 ????????new_id = request.POST.get(‘newId‘)15 ????????# 当前登录用户ID16 ????????# uid = request.session.get(‘uid‘)17 ????????uid = 118 19 ????????exist_like = models.Like.objects.filter(nnew_id=new_id,uuser_id=uid).count()20 ????????with transaction.atomic():21 ????????????if exist_like:22 ????????????????models.Like.objects.filter(nnew_id=new_id, uuser_id=uid).delete()23 ????????????????models.News.objects.filter(id=new_id).update(like_count=F(‘like_count‘) - 1)24 ????????????????response.code = 66625 ????????????else:26 ????????????????models.Like.objects.create(nnew_id=new_id,uuser_id=uid)27 ????????????????models.News.objects.filter(id=new_id).update(like_count=F(‘like_count‘) + 1)28 ????????????????response.code = 99929 ????except Exception as e:30 ????????response.msg = str(e)31 ????else:32 ????????response.status = True33 ????return HttpResponse(json.dumps(response.get_dict()))
ps.response实例化
1 class BaseResponse(object): 2 ????def __init__(self): 3 ????????self.status = False 4 ????????self.data = None 5 ????????self.msg = None 6 ?7 ????def get_dict(self): 8 ????????return self.__dict__ 9 10 11 class LikeResponse(BaseResponse):12 ????def __init__(self):13 ????????self.code = 014 ????????super(LikeResponse,self).__init__()15 16 # obj = LikeResponse()17 # print(obj.__dict__)
二、文章评论
1、所用技术
- python:
字典,列表,通过引用赋值,一个修改全部都改的特性
递归取值
2、应用
前端:
1 <h1>评论</h1>2 ?{{ comment_html|safe }}
后端:
1 def build_comment_data(li): 2 ????dic = {} 3 ????for item in li: 4 ????????item[‘children‘] = [] 5 ????????dic[item[‘id‘]] = item 6 ?7 ????result = [] 8 ????for item in li: 9 ????????pid = item[‘parent_id‘]10 ????????if pid:11 ????????????dic[pid][‘children‘].append(item)12 ????????else:13 ????????????result.append(item)14 15 ????return result16 17 def build_comment_tree(com_list):18 ????"""19 ????{‘user‘: ‘银秋良1‘, ‘children‘: [],content:‘xxx‘],20 ????{‘user‘: ‘银秋良2‘, ‘children‘: [{‘user‘: ‘型谱‘, ‘children‘: [{‘user‘: ‘银秋良‘, ‘children‘: [], ‘parent_id‘: 3, ‘content‘: ‘你是流氓‘, ‘id‘: 5}], ‘parent_id‘: 1, ‘content‘: ‘你个文盲‘, ‘id‘: 3}], ‘parent_id‘: None, ‘content‘: ‘灌我鸟事‘, ‘id‘: 1}21 ????{‘user‘: ‘银秋良3‘, ‘children‘: [{‘user‘: ‘详解‘, ‘children‘: [], ‘parent_id‘: 2, ‘content‘: ‘好羡慕你们这些没脸的人呀‘, ‘id‘: 4}], ‘parent_id‘: None, ‘content‘: ‘管我鸟事‘, ‘id‘: 2}22 23 ????[24 ????????{‘user‘: ‘银秋良‘, ‘children‘: [], ‘parent_id‘: 3, ‘content‘: ‘你是流氓‘, ‘id‘: 5}25 ????]26 27 ????"""28 ????tpl = """29 ????<div class="item">30 ????????<div class="title">{0}:{1}</div>31 ????????<div class="body">{2}</div>32 ????</div>33 ????"""34 ????html = ""35 ????for item in com_list:36 ????????if not item[‘children‘]:37 ????????????html +=tpl.format(item[‘user‘],item[‘content‘],"")38 ????????else:39 ????????????html +=tpl.format(item[‘user‘], item[‘content‘], build_comment_tree(item[‘children‘]))40 ????return html41 42 def comment_list(request):43 ????"""44 ????获取多级评论列表45 ????:param request:46 ????:return:47 ????"""48 ????li = [49 ????????{‘id‘: 1, ‘user‘: ‘银秋良‘, ‘content‘: ‘灌我鸟事‘, ‘parent_id‘: None},50 ????????{‘id‘: 2, ‘user‘: ‘银秋良‘, ‘content‘: ‘管我鸟事‘, ‘parent_id‘: None},51 ????????{‘id‘: 3, ‘user‘: ‘型谱‘, ‘content‘: ‘你个文盲‘, ‘parent_id‘: 1},52 ????????{‘id‘: 4, ‘user‘: ‘详解‘, ‘content‘: ‘好羡慕你们这些没脸的人呀‘, ‘parent_id‘: 2},53 ????????{‘id‘: 5, ‘user‘: ‘银秋良‘, ‘content‘: ‘你是流氓‘, ‘parent_id‘: 3},54 ????????{‘id‘: 6, ‘user‘: ‘银秋良‘, ‘content‘: ‘你冷库无情‘, ‘parent_id‘: 5},55 ????????{‘id‘: 7, ‘user‘: ‘银秋良‘, ‘content‘: ‘你才冷酷无情‘, ‘parent_id‘: 4},56 ????????{‘id‘: 8, ‘user‘: ‘银秋良‘, ‘content‘: ‘你无理取闹‘, ‘parent_id‘: 4},57 ????]58 ????com_list = build_comment_data(li)59 ????"""60 ????{‘user‘: ‘银秋良‘, ‘children‘: [{‘user‘: ‘型谱‘, ‘children‘: [{‘user‘: ‘银秋良‘, ‘children‘: [], ‘parent_id‘: 3, ‘content‘: ‘你是流氓‘, ‘id‘: 5}], ‘parent_id‘: 1, ‘content‘: ‘你个文盲‘, ‘id‘: 3}], ‘parent_id‘: None, ‘content‘: ‘灌我鸟事‘, ‘id‘: 1}61 ????{‘user‘: ‘银秋良‘, ‘children‘: [{‘user‘: ‘详解‘, ‘children‘: [], ‘parent_id‘: 2, ‘content‘: ‘好羡慕你们这些没脸的人呀‘, ‘id‘: 4}], ‘parent_id‘: None, ‘content‘: ‘管我鸟事‘, ‘id‘: 2}62 ????"""63 64 ????html = build_comment_tree(com_list)65 66 ????return render(request,‘comment_list.html‘,{‘comment_html‘:html})67 68 def fetch_comment(request):69 ????li = [70 ????????{‘id‘: 1, ‘user‘: ‘银秋良‘, ‘content‘: ‘灌我鸟事‘, ‘parent_id‘: None},71 ????????{‘id‘: 2, ‘user‘: ‘银秋良‘, ‘content‘: ‘管我鸟事‘, ‘parent_id‘: None},72 ????????{‘id‘: 3, ‘user‘: ‘型谱‘, ‘content‘: ‘你个文盲‘, ‘parent_id‘: 1},73 ????????{‘id‘: 4, ‘user‘: ‘详解‘, ‘content‘: ‘好羡慕你们这些没脸的人呀‘, ‘parent_id‘: 2},74 ????????{‘id‘: 5, ‘user‘: ‘银秋良‘, ‘content‘: ‘你是流氓‘, ‘parent_id‘: 3},75 ????????{‘id‘: 6, ‘user‘: ‘银秋良‘, ‘content‘: ‘你冷库无情‘, ‘parent_id‘: 5},76 ????????{‘id‘: 7, ‘user‘: ‘银秋良‘, ‘content‘: ‘你才冷酷无情‘, ‘parent_id‘: 4},77 ????????{‘id‘: 8, ‘user‘: ‘银秋良‘, ‘content‘: ‘你无理取闹‘, ‘parent_id‘: 4},78 ????]79 ????com_list = build_comment_data(li)80 ????# 第一种选择81 ????html = build_comment_tree(com_list)82 ????return HttpResponse(html)83 ????# 第二种选择,前端递归去生成84 ????# return HttpResponse(json.dumps(com_list))
ps.使用方式:
返回给前端JavaScrip,由前端递归渲染。本例为服务器直接渲染返回
三、上传文件
1、所使用技术:
- js:
- 基于FormData
- 缺点,兼容性不好
- 优点,Ajax直接发送
- 伪Ajax,兼容性更好
- iframe,天生局部刷新
- form,天生整个页面刷新
2、应用:
前端:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 </head> 7 <body> 8 ????<input type="text" placeholder="默认值看看刷新之后在不在" /> 9 ????<form method="POST" target="xxxxxx" action="/upload_img2/" enctype="multipart/form-data">10 ????????{% csrf_token %}11 ????????<input type="text" name="user" />12 ????????<a style="width: 60px;height: 30px;background-color: darkslateblue;color: white;display: inline-block;position: relative;">13 ????????????上传14 ????????????<input type="file" name="avatar" style="opacity: 0;position: absolute;left: 0;top:0;right: 0;bottom: 0;" />15 ????????</a>16 ????????<input type="submit" value="提交" />17 ????</form>18 ????<iframe id="ifm" name="xxxxxx" onload="successCallback(this);" style="display: none;" ></iframe>19 ????<div id="imgList"></div>20 ????<script src="/static/jquery-3.2.1.js"></script>21 ????<script>22 ????????function successCallback(ths){23 ????????????var response = ths.contentWindow.document.body.innerHTML;24 ????????????response = JSON.parse(response);25 ????????????console.log(response);26 ????????????var img = document.createElement(‘img‘);27 ????????????img.src = "/" + response.data;28 29 ????????????$(‘#imgList‘).append(img);30 31 ????????}32 ????</script>33 34 </body>35 </html>
后端:
1 def upload_img2(request): 2 ????response = BaseResponse() 3 ????try: 4 ????????user = request.POST.get(‘user‘) 5 ????????obj = request.FILES.get(‘avatar‘) 6 ????????img_path = os.path.join(‘static‘, ‘img‘, obj.name) 7 ????????with open(img_path,mode=‘wb‘) as f: 8 ????????????for chunk in obj.chunks(): 9 ????????????????f.write(chunk)10 ????except Exception as e:11 ????????response.msg = str(e)12 ????else:13 ????????response.status = True14 ????????response.data = img_path15 ????return HttpResponse(json.dumps(response.get_dict()))
四、保留页面条件
1、所用技术:
django request.GET.urlencode() 获取url.get方法
django from django.http.request import QueryDict 导入QueryDict方法
ps.POST,不要写action
2、应用:
前端:
list
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 </head> 7 <body> 8 ????<a href="/add_host.html?{{ url_param }}">添加</a> 9 ????<ul>10 ????????{% for item in hosts %}11 ????????????<li>{{ item }}</li>12 ????????{% endfor %}13 ????</ul>14 </body>15 </html>
add
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 </head> 7 <body> 8 ????<form method="POST"> 9 ????????{% csrf_token %}10 ????????<input type="text" name="hostname" />11 ????????<input type="submit" value="提交" />12 ????</form>13 </body>14 </html>
后端:
1 from django.http.request import QueryDict 2 def host_list(request): 3 ????print(request.GET,type(request.GET)) 4 ????# request.GET._mutable = True 5 ?????6 ????obj = QueryDict(mutable=True) 7 ????obj[‘_zhaofengfeng‘] = request.GET.urlencode() # page=10&id=1 8 ????url_param = obj.urlencode() 9 10 ????hosts = [‘c1.com‘,‘c2.com‘,‘c3.com‘]11 ????return render(request,‘host_list.html‘,{‘hosts‘:hosts,‘url_param‘:url_param})12 13 def add_host(request):14 ????if request.method == "GET":15 ????????return render(request,‘add.html‘)16 ????else:17 ????????url_params = request.GET.get(‘_zhaofengfeng‘)18 ????????host = request.POST.get(‘hostname‘)19 ????????url ="/host_list.html?"+url_params20 ????????return redirect(url)
django高级之点赞、文章评论及上传文件
原文地址:http://www.cnblogs.com/wangshuyang/p/7593119.html