目录：抽屉项目之js最佳实践

01: 实现注册登录功能

02: 实现发布帖子功能

03: 将帖子展示到页面、点赞

04: 层级评论

目录：

  • 1.1 发布帖子中的5个功能点
  • 1.2 各功能点代码

1.1 发布帖子中的5个功能点     返回顶部

1.2 各功能点代码     返回顶部

 　　1、功能1和功能2：展示和隐藏发布框

<body><divclass="pg-content"><divclass="w"><div><ahref="javascript:void(0);"class="publish_btn"onclick="show_publish_frm(true)">发 布 +</a></div></div></div><divclass="shelter hide"><divclass="publish_frm hide"><divclass="close_publish_frm"onclick="show_publish_frm(false)">×</div></div></div>
</body>

index.html 

/*展示发布框*/
functionshow_publish_frm(flag) {if(!is_login()){show_login_reg_frm();return false;}if(flag){$("div.shelter").removeClass("hide");$("div.publish_frm").removeClass("hide");}else{$("div.shelter").addClass("hide");$("div.publish_frm").addClass("hide");}
}

base.js

　　2、功能3：for循环模板，展示到页面，并绑定点击事件

<body><divclass="shelter hide"><divclass="publish_frm hide"><divclass="publish_catalog">{% for c in enable_catalog %}<ahref="javascript:void(0);"cid="{{ c.id }}"onclick="publish_radio_btn(this)">{{ c.name }}</a>{% endfor %}<script>functionpublish_radio_btn(ele) {$(ele).siblings().removeClass("current");$(ele).addClass("current");}functionclear_publish_form() {//切换分类后重置提交内容
$("textarea.publish_text").val("");$(".publish_frm a.current").removeClass("current");$("#fo")[0].reset();$("div.uploaded_preview").children().remove();}</script></div></div></div>
</body>

index.html

　　3、功能4：上传图片实现预览功能

<body><divclass="shelter hide"><divclass="publish_frm hide"><divclass="upload_div"><iframeid="if"name="if"style="display: none;"></iframe><formid="fo"method="post"enctype="multipart/form-data"action="/app01/upload/"target="if"><inputtype="file"accept="image/jpeg,image/png"id="publish_file"name="publish_file"class="publish_file"style="display: none;"onchange="upload_img()"></form><ahref="javascript:void(0);"class="upload_btn"onclick="document.getElementById('publish_file').click()">上传图片</a></div><divclass="uploaded_preview"></div></div></div>
</body>

index.html 

/*触发回调函数，提交图片实现预览功能*/
functionupload_img() {document.getElementById('if').οnlοad=callback;document.getElementById('fo').submit();
}/*上传完毕后的回调函数*/
functioncallback() {var t = $("#if").contents().find('body').text();var result =JSON.parse(t);console.log(result);if(result.status=='ok'){var a = document.createElement('a');a.href=result.link;a.target= '_blank';var img = document.createElement('img');img.src=result.link;a.appendChild(img);$("div.uploaded_preview").html(a.outerHTML);}
}

base.js 

#用户上传图片
defupload(request):if request.method == 'POST':#上传文件，暂时只支持jpg、png，且体积在4M以下，#计算文件的md5，ret = {'status': '','msg': '','error': '','link': '',}img= request.FILES.get("publish_file")if img.size > settings.UPLOAD_PARAMETERS['SIZE_LIMIT']:ret['status'] = 'fail'ret['error'] = '文件大小超过限制。当前限制是：' + settings.UPLOAD_PARAMETERS['SIZE_LIMIT'] + '，您的文件大小是：' +img.sizeelif img.content_type not in settings.UPLOAD_PARAMETERS['FILE_TYPE']:ret['status'] = 'fail'ret['error'] = '不接受该文件类型。'else:#获取后缀file_ext = os.path.splitext(img.name)[1] if '.' in img.name else 'jpg'#生成临时文件路径letters = 'abcdefghijklmnopqrstuvwxyz0123456789'  #用于生成临时文件名tmp_filename = ''tmp_file_path= ''whileTrue:#如果同名的临时文件已存在，则重新再取tmp_filename = ''.join(random.sample(letters, 8))tmp_file_path= os.path.join(settings.UPLOAD_PARAMETERS['TMP_PATH'], tmp_filename)if notos.path.exists(tmp_file_path):break#获取文件数据received_size =0m=hashlib.md5()with open(tmp_file_path,'wb') as fh:for chunk inimg.chunks():#b''.join([file_obj, chunk])
fh.write(chunk)m.update(chunk)received_size+=len(chunk)#接收完毕if received_size ==img.size:#读取到全部数据后，计算md5hash_value =m.hexdigest()#移动文件，并使用md5值做新文件名new_file_name = hash_value +file_extnew_file_path= os.path.join(settings.STATICFILES_DIRS[0], 'img', 'upload', new_file_name)ifos.path.isfile(new_file_path):#新目标文件已经存在，无需覆盖，并清理临时文件
os.remove(tmp_file_path)else:#如果目标新文件不存在，则将临时文件移动过去并重命名
os.rename(tmp_file_path, new_file_path)ret['status'] = 'ok'ret['msg'] =new_file_nameret['link'] = settings.STATIC_URL + 'img/upload/' +new_file_nameelse:#未获取到完整的数据ret['status'] = 'fail'ret['error'] = '数据不完整，请重新上传'return HttpResponse(json.dumps(ret))

views.py

　　4、功能5：提交帖子内容、类别、上传图片服务端存储路径　　

<body><divclass="pg-content"><divclass="w"><div><ahref="javascript:void(0);"class="publish_btn"onclick="show_publish_frm(true)">发 布 +</a></div><divclass="clearfix">{% block content %}{% endblock %}</div></div></div><divclass="shelter hide"><divclass="publish_frm hide"><divclass="close_publish_frm"onclick="show_publish_frm(false)">×</div><divclass="publish_text"><label><textareaclass="publish_text"placeholder="说点什么吧"id="publish_text"></textarea></label></div><divclass="publish_catalog">{% for c in enable_catalog %}<ahref="javascript:void(0);"cid="{{ c.id }}"onclick="publish_radio_btn(this)">{{ c.name }}</a>{% endfor %}<script>functionpublish_radio_btn(ele) {$(ele).siblings().removeClass("current");$(ele).addClass("current");}</script></div><divclass="upload_div"><iframeid="if"name="if"style="display: none;"></iframe><formid="fo"method="post"enctype="multipart/form-data"action="/app01/upload/"target="if"><inputtype="file"accept="image/jpeg,image/png"id="publish_file"name="publish_file"class="publish_file"style="display: none;"onchange="upload_img()"></form><ahref="javascript:void(0);"class="upload_btn"onclick="document.getElementById('publish_file').click()">上传图片</a></div><divclass="uploaded_preview"></div><divclass="publish_btn_box"><ahref="javascript:void(0);"onclick="publish()">发 布</a></div></div></div>
</body>

index.html 整体代码 

functionpublish() {var data ={};data['pub_text'] = $.trim($("textarea.publish_text").val());//检查文本内容是否为空if(data['pub_text'].length==0){alert("文字内容不能为空。");return false;}//检查是否有选择类别data['catalog'] = $("div.publish_catalog a.current").attr("cid");if(!data['catalog']){alert("请选择一个分类");return false;}//获取图片var img = $("div.uploaded_preview img")[0];if(img){data['img_link'] = $(img).attr("src");}$.post({url:"/app01/publish/",data: data,dataType:"json",success:function(response) {if(response.status=='ok'){alert("发布成功！");clear_publish_form();show_publish_frm(false);$("div.shelter").addClass("hide");}},error:function(xhr) {}});
}

base.js

转载于:https://www.cnblogs.com/xiaonq/p/8214503.html

02: 实现发布帖子功能相关推荐

  1. Flask项目实战——10—(前台板块页面搭建、文本编辑页面搭建、发布帖子信息前验证权限、帖子模型搭建、发布帖子功能、帖子信息渲染到前后台页面)

    1.前台板块页面搭建 视图文件查询数据传输到前台界面:前台蓝图文件:apps/front/views.py 注意数据的收集方法和数据传输的类型. # -*- encoding: utf-8 -*- & ...

  2. 4.发布帖子，评论帖子

    目录 一:发布帖子 二:帖子详情 三:查看评论 四:评论帖子 一:发布帖子 用到的表:DiscussPost 方法:用到AJAX,网页能将增量更新呈现在页面上,而不需要刷新整个页面 异步通信技术,虽然 ...

  3. Python全栈（八）Flask项目实战之10.前台发布帖子和后台帖子管理页面搭建

    文章目录 一.前台板块页面搭建 二.发布帖子页面搭建 三.前台帖子模型创建 四.文章的发布 1.基本实现 2.项目优化 (1)功能优化--Markdown编辑上传上传本地图片 (2)代码优化--抽离A ...

  4. 百度发布全功能AI平台！

    Datawhale发布 百度 BML 全功能 AI 平台 越来越多企业开始用AI解决实际问题,比如汉印使用AI在线下进行果蔬识别称重.上海浦东水务使用AI巡检阀门系统.猎头企业使用AI模型高效利用沉默 ...

  5. 【springboot】【redis】springboot+redis实现发布订阅功能，实现redis的消息队列的功能...

    springboot+redis实现发布订阅功能,实现redis的消息队列的功能 参考:https://www.cnblogs.com/cx987514451/p/9529611.html 思考一个问 ...

  6. redis的观察者模式----------发布订阅功能

    2019独角兽企业重金招聘Python工程师标准>>> 众所周知,Java,C++等面向对象有一种常见的设计模式:观察者模式,redis这种机制叫做发布订阅功能. 以下假设已redi ...

  7. Countly 19.02.1 发布，实时移动和 web 分析报告平台

    百度智能云 云生态狂欢季 热门云产品1折起>>>   实时移动和 web 分析报告平台 Countly 19.02.1 发布了. 新版更新内容主要有: 新特性 [前端] 根据路由名称 ...

  8. Spring Boot 2.x基础教程：使用Redis的发布订阅功能

    通过前面一篇集中式缓存的使用教程,我们已经了解了Redis的核心功能:作为K.V存储的高性能缓存. 接下来我们会分几篇来继续讲讲Redis的一些其他强大用法!如果你对此感兴趣,一定要关注收藏我哦! 发 ...

  9. dedecms自定义表单如何添加发布时间功能

    这篇文章给大家分享的是有关dedecms自定义表单如何添加发布时间功能的内容.小编觉得挺实用的,因此分享给大家做个参考.一起跟随小编过来看看吧.  dedecms自定义表单怎么添加发布时间功能?  d ...

最新文章

  1. Tengine Web服务器概述
  2. stl里面stack的注意事项
  3. java 定义一个未知长度数组
  4. java 中的访问修饰符
  5. 中国企业云计算应用现状及需求
  6. 计算机网络管理员五级试题,计算机网络管理员考试试题库和答案.doc
  7. CSS里：focus-within 的作用和用法
  8. 好947 Mybatis 配置resultMap 带參数查询Map 注意selectOne数据库返回结果一条数据库 否则会报错...
  9. android事务队列处理的实现
  10. [NAACL19]一个更好更快更强的序列标注成分句法分析器
  11. 8 对象、类与面向对象编程
  12. ASP.net网页导出Excel中文乱码解决方案
  13. 拆一台微型计算机步骤,台式微型计算机拆装.doc
  14. html网页背景图片 菜鸟教程,CSS3 背景
  15. python实现数据库的增删改查
  16. 各种交换机接口及连接方法介绍【详细图文】
  17. AndroBench手机性能测试【转】
  18. 从0开始安装k8s1.25【最新k8s版本——20220904】
  19. 荣耀全家桶框架插件（关联P30pro、Mate20、荣耀20pro等）
  20. Java——常用开发工具

热门文章

  1. IDEA下Git标签使用
  2. Vim实用技巧高清完整版PDF中文
  3. PLSQL 的中文乱码解决方法（简单实用）
  4. 西北工业大学NOJ-Python程序设计作业81-90
  5. 语音识别（语音转文字） 语音合成（文字转语音）
  6. 参加kaggle竞赛是怎样一种体验？
  7. 人大金仓集群停止服务时，一台停止失败，一台停止成功
  8. java addservlet_servlet增删改查
  9. proxmox VE 7.0安装调试方法汇总
  10. Android实现调用系统相机录像及实现录音