毛绒玩具 东莞网站建设 技术支持,外贸设计网站,营销策划公司名字,太平洋建设集团招标网站目录#xff1a;抽屉项目之js最佳实践 01: 实现注册登录功能 02: 实现发布帖子功能 03: 将帖子展示到页面、点赞 04: 层级评论 目录#xff1a; 1.1 显示、隐藏 登录/注册 菜单1.2 注册功能1.3 登录功能1.4 获取当前用户数量1.1 显示、隐藏 登录/注册抽屉项目之js最佳实践 01: 实现注册登录功能 02: 实现发布帖子功能 03: 将帖子展示到页面、点赞 04: 层级评论 目录 1.1 显示、隐藏 登录/注册 菜单1.2 注册功能1.3 登录功能1.4 获取当前用户数量1.1 显示、隐藏 登录/注册 菜单 返回顶部 1、此部分实现下面三个功能 功能1未登录时在右上角显示 “登录/注册” 菜单 功能2成功登录后隐藏 “登录/注册” 菜单显示登录用户信息 功能3js设置初始化函数鼠标滑过显示注销功能检查用户已登录直接显示登录信息而不是登录/注册菜单 2、相关code bodydiv classheaderdiv classwdiv classlogin_or_register fra hrefjavascript:void(0); onclickshow_login_reg_frm()登录 / 注册/a/divdiv classuser_info frspan iddisplay_name {% if is_login %}is_login{% endif %}{{ user.display_name }}/spandiv classuser_menu hidea设置/aa onclicklogout()退出/a/div/div/div/div
/body index.html html页面 bodyscript/* 初始化函数 */$(function () {/* 处理是否登录 */if($(#display_name)[0].hasAttribute(is_login)){// 已经登录$(.login_or_register).addClass(hide);$(.user_info).removeClass(hide);}else {// 未登录$(.login_or_register).removeClass(hide);$(.user_info).addClass(hide);}/* 用户菜单是否显示: 鼠标划过就会触发.hover绑定的函数 */$(div.user_info).hover(function () {show_user_menu(true);},function () {show_user_menu(false);});});/script
/body index.html js初始化函数 /* 显示登录、注册页面 */
function show_login_reg_frm() {$(div.login_reg_frm).removeClass(hide);$(div.shelter).removeClass(hide);
}/* 注销 */
function logout() {$.get({url: /app01/logout/,dataType: json,success:function (response) {if(response.statusok){window.location.href/app01/;}}})
}/* 用户下拉菜单显示开关 */
function show_user_menu(flag) {if(flag){$(div.user_menu).removeClass(hide);}else{$(div.user_menu).addClass(hide);}
} base.js # 注销
def logout(request):request.session[is_login] Falserequest.session[current_user] {}return HttpResponse(json.dumps({status: ok})) views.py 1.2 注册功能 返回顶部 1、此部分实现以下四个功能 功能1提交用户注册信息 功能2检查用户名和邮箱是否已注册 功能3检查两次密码是否一致 功能4创建验证码图片标签 2、功能1提交用户信息 bodydiv classshelter hidediv classlogin_reg_frm hidediv classclose_login_reg_frm onclickclose_login_reg_frm()×/divdiv classreg_frm flh1注册/h1form methodpost idregister_frmtabletrth用户名/thtdinput typetext idlogin_name namelogin_name onblurcheck_exist(this)/tdtd classtips/td/trtrth邮箱/thtdinput typeemail idemail nameemail onblurcheck_exist(this)/tdtd classtips/td/trtrth密码/thtdinput idpassword typepassword namepassword autocompleteoff minlength3/tdtd classtips/td/trtrth确认密码/thtdinput idpassword2 typepassword namepassword2 autocompleteoff minlength3 onblurconfirm_password()/tdtd classtips/td/trtrth验证码/thtdinput typetext idverify_code nameverify_code classverify_code maxlength4 onclickcreate_verify_code_img()/tdtd classtips/td/tr/tablediv styleposition: relative;a hrefjavascript:void(0); onclickregister(this)注册/adiv classreg_shelter hide/div/divbrdiv classregister_result/div/form/div/div/div
/body index.html html注册界面 /* 提交用户注册信息 */
function register(ele) {// 数据检查var check_pass true;var check_list {login_name: 用户名,email: 邮箱,password: 密码,password2: 确认密码,verify_code: 验证码};for(var key in check_list){var val $.trim($(.reg_frm # key).val());if(val.length0){// 如果要检查的input值为空提醒用户check_pass false;$(.reg_frm # key).parent().parent().find(td:last-child).text(不能为空);}}if(!check_pass){return false;}// 通过检查后var login_name $.trim($(.reg_frm #login_name).val());var email $.trim($(.reg_frm #email).val());var password $.trim($(.reg_frm #password).val());var password2 $.trim($(.reg_frm #password2).val());var verify_code $.trim($(.reg_frm #verify_code).val());// 提交前先将按钮置为不可点击$(div.reg_shelter).removeClass(hide);var data $(#register_frm).serialize();console.log(data);$.post({url: /app01/register/,data: data,dataType: json,success: function (response) {console.log(response);if(response.hasOwnProperty(status)){if(response.statusok){//console.log(注册成功);$(div.register_result).text(注册成功);setTimeout(function () {$(div.login_reg_frm).addClass(hide);$(div.shelter).addClass(hide);}, 2000);}else{$(div.reg_shelter).addClass(hide);$(div.register_result).text(response.msg);}}else{var ul document.createElement(ul);for(var key in response){var li document.createElement(li);li.innerText response[key][0].message;ul.appendChild(li);}$(div.register_result).html(ul.outerHTML);$(div.reg_shelter).addClass(hide);}},error: function (xhr) {$(div.reg_shelter).addClass(hide);}});reload_verify_code(); // 无论结果如何都刷新验证码
} base.js # 用户注册
def register(request):# 注册的URLif request.method POST:reg_frm RegisterFrm(datarequest.POST)if reg_frm.is_valid():cd reg_frm.cleaned_data# 验证码比对vcode_from_client cd.get(verify_code, )vcode_in_session request.session.get(verify_code)if vcode_from_client and vcode_in_session and vcode_from_client.upper() vcode_in_session.upper():# 验证码比对通过new_user reg_frm.save(commitFalse)password2 cd.get(password2)m hashlib.md5()m.update(password2.encode())new_user.password m.hexdigest()new_user.display_name cd.get(login_name)new_user.email cd.get(email)# new_user.last_login datetime.datetime.now()new_user.last_login timezone.now()new_user.last_ip request.META.get(REMOTE_ADDR)new_user.save()# request.POST[verify_code] return HttpResponse(json.dumps({status: ok}))return HttpResponse(json.dumps({status: fail, msg: 验证码不正确}))else:return HttpResponse(reg_frm.errors.as_json()) views.py 3、功能2检查用户名和邮箱是否已注册 trth用户名/thtdinput typetext idlogin_name namelogin_name onblurcheck_exist(this)/tdtd classtips/td
/tr
trth邮箱/thtdinput typeemail idemail nameemail onblurcheck_exist(this)/tdtd classtips/td
/tr index.html 绑定事件 /* 检查用户名和邮箱是否已注册 */
function check_exist(ele) {var t ele.getAttribute(name);var v ele.value;v $.trim(v);if(v.length0){$.post({url: /app01/check_exist/,data: {check_type: t, check_value: v},dataType: json,success: function (response) {var check_result ;if(response.statusok){// 没有重复check_result √;}else{check_result 已存在;ele.setAttribute(duplicate, duplicate);}$(ele).parent().parent().find(td:last-child).text(check_result);}});}
} base.js # 用户注册时检查提交的数据是否占用
def check_exist(request):# 检查是否已存在相同的值if request.method POST:check_type request.POST.get(check_type)value request.POST.get(check_value)parameter {check_type: value}count User.objects.filter(**parameter).count()if count 0:return HttpResponse(json.dumps({status: fail, msg: exist}))else:return HttpResponse(json.dumps({status: ok})) views.py 4、功能3检查两次密码是否一致 trth密码/thtdinput idpassword typepassword namepassword autocompleteoff minlength3/tdtd classtips/td
/tr
trth确认密码/thtdinput idpassword2 typepassword namepassword2 autocompleteoff minlength3 onblurconfirm_password()/tdtd classtips/td
/tr index.html 绑定事件 /* 检查两次密码是否一致 */
function confirm_password() {if($(.reg_frm #password).val()!$(#password2).val()){$(.reg_frm #password2).parent().parent().find(td:last-child).text(两次密码不一致);}else{$(.reg_frm #password).parent().parent().find(td:last-child).text(√);$(.reg_frm #password2).parent().parent().find(td:last-child).text(√);}
} base.js 5、功能4创建验证码图片标签 trth验证码/thtdinput typetext idverify_code nameverify_code classverify_code maxlength4 onclickcreate_verify_code_img()/tdtd classtips/td
/tr index.html 绑定事件 /* 创建验证码图片标签 */
function create_verify_code_img() {// 创建验证码图片标签插入到验证码输入框后面if(!document.getElementById(verify_code_img)){var img document.createElement(img);img.id verify_code_img;img.src /app01/verify_code/;img.className verify_code;img.onclick reload_verify_code;$(input.verify_code).after(img);}
}/* 刷新验证码函数 */
function reload_verify_code() {var img $(img.verify_code)[0];img.src ?;
} base.js def verify_code(request):生成验证码图片from backend import check_code as CheckCode # 该check_code是老师的验证码插件from io import BytesIO # BytesIO是内存Stream用于存取二进制数据可当文件handler用codeImg, strs CheckCode.create_validate_code()request.session[verify_code] strsstream BytesIO()codeImg.save(stream, png)return HttpResponse(stream.getvalue(), rimage/png) views.py import random
from PIL import Image, ImageDraw, ImageFont, ImageFilter_letter_cases abcdefghjkmnpqrstuvwxy # 小写字母去除可能干扰的iloz
_upper_cases _letter_cases.upper() # 大写字母
_numbers .join(map(str, range(3, 10))) # 数字
init_chars .join((_letter_cases, _upper_cases, _numbers))def create_validate_code(size(120, 30),charsinit_chars,img_typeGIF,modeRGB,bg_color(255, 255, 255),fg_color(0, 0, 255),font_size18,font_typeMonaco.ttf,length4,draw_linesTrue,n_line(1, 2),draw_pointsTrue,point_chance 2):todo: 生成验证码图片param size: 图片的大小格式宽高默认为(120, 30)param chars: 允许的字符集合格式字符串param img_type: 图片保存的格式默认为GIF可选的为GIFJPEGTIFFPNGparam mode: 图片模式默认为RGBparam bg_color: 背景颜色默认为白色param fg_color: 前景色验证码字符颜色默认为蓝色#0000FFparam font_size: 验证码字体大小param font_type: 验证码字体默认为 ae_AlArabiya.ttfparam length: 验证码字符个数param draw_lines: 是否划干扰线param n_lines: 干扰线的条数范围格式元组默认为(1, 2)只有draw_lines为True时有效param draw_points: 是否画干扰点param point_chance: 干扰点出现的概率大小范围[0, 100]return: [0]: PIL Image实例return: [1]: 验证码图片中的字符串width, height size # 宽 高img Image.new(mode, size, bg_color) # 创建图形draw ImageDraw.Draw(img) # 创建画笔def get_chars():生成给定长度的字符串返回列表格式return random.sample(chars, length)def create_lines():绘制干扰线line_num random.randint(*n_line) # 干扰线条数for i in range(line_num):# 起始点begin (random.randint(0, size[0]), random.randint(0, size[1]))#结束点end (random.randint(0, size[0]), random.randint(0, size[1]))draw.line([begin, end], fill(0, 0, 0))def create_points():绘制干扰点chance min(100, max(0, int(point_chance))) # 大小限制在[0, 100]for w in range(width):for h in range(height):tmp random.randint(0, 100)if tmp 100 - chance:draw.point((w, h), fill(0, 0, 0))def create_strs():绘制验证码字符c_chars get_chars()strs %s % .join(c_chars) # 每个字符前后以空格隔开
font ImageFont.truetype(font_type, font_size)font_width, font_height font.getsize(strs)draw.text(((width - font_width) / 3, (height - font_height) / 3),strs, fontfont, fillfg_color)return .join(c_chars)if draw_lines:create_lines()if draw_points:create_points()strs create_strs()# 图形扭曲参数params [1 - float(random.randint(1, 2)) / 100,0,0,0,1 - float(random.randint(1, 10)) / 100,float(random.randint(1, 2)) / 500,0.001,float(random.randint(1, 2)) / 500]img img.transform(size, Image.PERSPECTIVE, params) # 创建扭曲
img img.filter(ImageFilter.EDGE_ENHANCE_MORE) # 滤镜边界加强阈值更大return img, strs /backend/check_code.py 1.3 登录功能 返回顶部 1、此部分实现以下四个功能 功能1提交用户登录信息 功能2对用户提交信息验证 2、相关code bodydiv classshelter hidediv classlogin_reg_frm hidediv classclose_login_reg_frm onclickclose_login_reg_frm()×/divdiv classlogin_frm flh1登录/h1tabletrth用户名/thtdinput typetext namelogin_name classlogin_name/td/trtrth密码/thtdinput typepassword namepassword classpassword/td/tr/tablea hrefjavascript:void(0); onclicklogin(this)登录/adiv classlogin_result/div/div/div/div
/body index.html html登录界面 /* 登录 */
function login() {var login_name $(.login_frm input.login_name).val();var password $(.login_frm input.password).val();$.post({url: /app01/login/,data: {login_name: login_name, password: password},dataType: json,success: function (response) {if(response.statusok){// 登录成功读取用户昵称和头像$(div.login_result).text(登录成功);var display_name response.display_name;var head_pic response.head_pic;$(span#display_name).text(display_name);$(img.head_pic).attr(src, head_pic);$(div.login_reg_frm).addClass(hide);$(div.shelter).addClass(hide);$(.user_info #display_name).attr(is_login, );$(.user_info).removeClass(hide);$(.login_or_register).addClass(hide);get_online_users();}else{$(div.login_result).text(response.error);}},error: function (xhr) {}});
}/* 检查是否登录 */
function is_login() {return document.getElementById(display_name).hasAttribute(is_login);
}/* 隐藏登录框 */
function close_login_reg_frm() {$(div.login_reg_frm).addClass(hide);$(div.shelter).addClass(hide);
} base.js # 登陆
def login(request):# 登录视图检查用户名 密码md5 不通过返回fail验证失败# 检查enable不通过返回fail 用户已停用# 全部通过则返回ok用户昵称用户头像if request.method POST:ret {status: ,error: ,display_name: ,head_pic: }login_name request.POST.get(login_name)password request.POST.get(password)if login_name and password:# 将密码转md5m hashlib.md5()m.update(password.encode())password_md5 m.hexdigest()# 获取用户对象user User.objects.filter(login_namelogin_name, passwordpassword_md5).first()if user:# 检查是否无效if user.enable:# 有效# 将用户信息登记到session中request.session[is_login] Truerequest.session[current_user] {id: user.id,login_name: user.login_name,display_name: user.display_name,}# 返回验证通过信息用户昵称头像url到客户端ret[status] okret[display_name] user.display_nameret[head_pic] settings.STATIC_URL rimg/head/ (user.head_pic or mxcp_320x320.jpg)else:ret[status] failret[error] 该用户已停用else:ret[status] failret[error] 用户名或密码不正确else:ret[status] failret[error] 用户名或者密码不能为空return HttpResponse(json.dumps(ret)) views.py 1.4 获取当前用户数量 返回顶部 script/* 初始化函数 */$(function () {/* 显示在线用户 */get_online_users()setInterval(get_online_users, 10000);});/script 初始化函数中使用定时器实时跟新在线用户数量 /* 获取在线用户 */
function get_online_users() {if(is_login()){var online_users_container $(div.online_users_container);// 清理工作online_users_container.children().remove();online_users_container.text();// 获取在线用户$.get({url:/app01/get_online_users/,dataType:json,success:function (response) {if(response.statusok){console.log(response);var users response.data;online_users_container.text(在线用户列表);for(var key in users){var user_a document.createElement(a);user_a.innerTextusers[key][display_name];user_a.setAttribute(user_id, users[key][id]);user_a.href javascript:void(0);;online_users_container.append(user_a);}}}});}
} get_online_users(js) 获取在线用户数量 def get_online_users(request):current_user request.session.get(current_user)current_user_id current_user.get(id)current_time timezone.now()td datetime.timedelta(**settings.LOGIN_PARAMETERS[ONLINE_INTERVAL])users User.objects.exclude(idcurrent_user_id, ).filter(is_loginTrue,last_login__gte(current_time td)).values(id, head_pic, display_name,)users_list list(users)return HttpResponse(json.dumps({status: ok,data: users_list})) views.py 从数据库中统计在线用户数量 附加js代码(四个大功能点) // 第一部分实现登录注册功能
/* ajax检查数据是否已被注册使用 */
function check_exist(ele) {var t ele.getAttribute(name);var v ele.value;v $.trim(v);if(v.length0){$.post({url: /app01/check_exist/,data: {check_type: t, check_value: v},dataType: json,success: function (response) {// console.log(response);var check_result ;if(response.statusok){// 没有重复check_result √;}else{check_result 已存在;ele.setAttribute(duplicate, duplicate);}$(ele).parent().parent().find(td:last-child).text(check_result);}});}
}function register(ele) {// 数据检查var check_pass true;var check_list {login_name: 用户名,email: 邮箱,password: 密码,password2: 确认密码,verify_code: 验证码};for(var key in check_list){var val $.trim($(.reg_frm # key).val());if(val.length0){// 如果要检查的input值为空提醒用户check_pass false;$(.reg_frm # key).parent().parent().find(td:last-child).text(不能为空);}}if(!check_pass){return false;}// 通过检查后var login_name $.trim($(.reg_frm #login_name).val());var email $.trim($(.reg_frm #email).val());var password $.trim($(.reg_frm #password).val());var password2 $.trim($(.reg_frm #password2).val());var verify_code $.trim($(.reg_frm #verify_code).val());// 提交前先将按钮置为不可点击$(div.reg_shelter).removeClass(hide);var data $(#register_frm).serialize();console.log(data);$.post({url: /app01/register/,data: data,dataType: json,success: function (response) {console.log(response);if(response.hasOwnProperty(status)){if(response.statusok){//console.log(注册成功);$(div.register_result).text(注册成功);setTimeout(function () {$(div.login_reg_frm).addClass(hide);$(div.shelter).addClass(hide);}, 2000);}else{$(div.reg_shelter).addClass(hide);$(div.register_result).text(response.msg);}}else{var ul document.createElement(ul);for(var key in response){var li document.createElement(li);li.innerText response[key][0].message;ul.appendChild(li);}$(div.register_result).html(ul.outerHTML);$(div.reg_shelter).addClass(hide);}},error: function (xhr) {$(div.reg_shelter).addClass(hide);}});reload_verify_code(); // 无论结果如何都刷新验证码
}/* 检查两次密码是否一致 */
function confirm_password() {if($(.reg_frm #password).val()!$(#password2).val()){$(.reg_frm #password2).parent().parent().find(td:last-child).text(两次密码不一致);}else{$(.reg_frm #password).parent().parent().find(td:last-child).text(√);$(.reg_frm #password2).parent().parent().find(td:last-child).text(√);}
}/* 创建验证码图片标签 */
function create_verify_code_img() {// 创建验证码图片标签插入到验证码输入框后面if(!document.getElementById(verify_code_img)){var img document.createElement(img);img.id verify_code_img;img.src /app01/verify_code/;img.className verify_code;img.onclick reload_verify_code;$(input.verify_code).after(img);}
}/* 刷新验证码函数 */
function reload_verify_code() {var img $(img.verify_code)[0];img.src ?;
}/* 显示登录、注册页面 */
function show_login_reg_frm() {$(div.login_reg_frm).removeClass(hide);$(div.shelter).removeClass(hide);
}/* 用户下拉菜单显示开关 */
function show_user_menu(flag) {if(flag){$(div.user_menu).removeClass(hide);}else{$(div.user_menu).addClass(hide);}
}/* 登录 */
function login() {var login_name $(.login_frm input.login_name).val();var password $(.login_frm input.password).val();$.post({url: /app01/login/,data: {login_name: login_name, password: password},dataType: json,success: function (response) {if(response.statusok){// 登录成功读取用户昵称和头像$(div.login_result).text(登录成功);var display_name response.display_name;var head_pic response.head_pic;$(span#display_name).text(display_name);$(img.head_pic).attr(src, head_pic);$(div.login_reg_frm).addClass(hide);$(div.shelter).addClass(hide);$(.user_info #display_name).attr(is_login, );$(.user_info).removeClass(hide);$(.login_or_register).addClass(hide);get_online_users();}else{$(div.login_result).text(response.error);}},error: function (xhr) {}});
}/* 注销 */
function logout() {$.get({url: /app01/logout/,dataType: json,success:function (response) {if(response.statusok){window.location.href/app01/;}}})
}/* 检查是否登录 */
function is_login() {return document.getElementById(display_name).hasAttribute(is_login);
}/* 隐藏登录框 */
function close_login_reg_frm() {$(div.login_reg_frm).addClass(hide);$(div.shelter).addClass(hide);
} part1: 实现登录注册功能 // 第二部分实现发布帖子功能
/* 展示发布框 */
function show_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);}
}function clear_publish_form() {$(textarea.publish_text).val();$(.publish_frm a.current).removeClass(current);$(#fo)[0].reset();$(div.uploaded_preview).children().remove();}function publish() {var data {};data[pub_text] $.trim($(textarea.publish_text).val());// 检查文本内容是否为空if(data[pub_text].length0){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.statusok){alert(发布成功);clear_publish_form();show_publish_frm(false);$(div.shelter).addClass(hide);}},error: function (xhr) {}});
}function upload_img() {document.getElementById(if).οnlοadcallback;document.getElementById(fo).submit();
}/* 上传完毕后的回调函数 */
function callback() {var t $(#if).contents().find(body).text();var result JSON.parse(t);console.log(result);if(result.statusok){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);}
}function get_online_users() {if(is_login()){var online_users_container $(div.online_users_container);// 清理工作online_users_container.children().remove();online_users_container.text();// 获取在线用户$.get({url:/app01/get_online_users/,dataType:json,success:function (response) {if(response.statusok){console.log(response);var users response.data;online_users_container.text(在线用户列表);for(var key in users){var user_a document.createElement(a);user_a.innerTextusers[key][display_name];user_a.setAttribute(user_id, users[key][id]);user_a.href javascript:void(0);;online_users_container.append(user_a);}}}});}} prt2: 实现发布帖子功能 // 第三部分将帖子展示到页面点赞
function create_post_list(posts, cls) {if(posts.length0){var big_div document.createElement(div);big_div.className cls;for(var i0;iposts.length;i){var post_div document.createElement(div); // 包裹着整个帖子的divpost_div.classNamepost_container clearfix;post_div.setAttribute(post_id, posts[i].id);var left_div document.createElement(div);left_div.classNameleft_container fl;var right_div document.createElement(div);right_div.classNameright_container fl;var content_div document.createElement(div);content_div.classNamepost_content;var bar_div document.createElement(div);bar_div.classNamepost_bar;var comment_div document.createElement(div);comment_div.classNamecomment_container hide;content_div.innerText posts[i].content;var like posts[i].like?已赞:赞;var like_a document.createElement(a);var comment_a document.createElement(a);var displayname_span document.createElement(span);var create_i document.createElement(i);like_a.href comment_a.href javascript:void(0);;like_a.classNamelike_btn;like_a.setAttribute(onclick, like(this, posts[i].id ));like_a.setAttribute(like_count, posts[i].like_count);like_a.innerText like ( posts[i].like_count );comment_a.classNameshow_comments_btn;comment_a.setAttribute(onclick, show_comments(this, posts[i].id ));comment_a.innerText 评(posts[i].comment_count);displayname_span.innerText posts[i].user__display_name;create_i.innerText在 posts[i].create_on 发布;bar_div.appendChild(like_a);bar_div.appendChild(comment_a);bar_div.appendChild(displayname_span);bar_div.appendChild(create_i);// comment_div.innerText 这里是评论;var comment_text_container document.createElement(div);var comment_content_container document.createElement(div);comment_text_container.classNamecomment_text_container;comment_content_container.classNamecomment_content_container;comment_div.appendChild(comment_text_container);comment_div.appendChild(comment_content_container);left_div.appendChild(content_div);left_div.appendChild(bar_div);if(posts[i].hasOwnProperty(img_link)){var img document.createElement(img);img.src posts[i].img_link;right_div.appendChild(img);}var row_container document.createElement(div);row_container.classNamerow_container clearfix;row_container.appendChild(left_div);row_container.appendChild(right_div);post_div.appendChild(row_container);post_div.appendChild(comment_div);big_div.appendChild(post_div);}$(div.post_list).append(big_div);}
}function view_posts(ele, catalog, page) {$(ele).siblings(a).removeClass(current);$(ele).addClass(current);$(div.paginator).children().remove();$.get({url:/app01/posts/,data:{catalog:catalog, page:page},dataType:json,success:function (response) {if(response.statusok){// 服务器返回数据// console.log(response);var posts response[data][posts];var current_page response[data][current_page];var page_count response[data][page_count];if(posts.length0){// 有帖子数据// 区分置顶和普通帖子var top_post_list [];var normal_post_list [];for(var key in posts){var post posts[key];if(post.top){// 帖子有置顶属性if(post.catalog_idresponse[data][current_catalog]){// 帖子是当前类别post.content 【置顶】 post.content;top_post_list.push(post);}else{// 推入非置顶帖子normal_post_list.push(post);}}else{// 非置顶帖子normal_post_list.push(post);}}// 分好之后交给对应的函数处理$(div.post_list).html();create_post_list(top_post_list,top_posts);create_post_list(normal_post_list,normal_posts);create_paginator(page_count, current_page);}else {// 没有帖子$(div.post_list).text(还没有帖子喲要不你发一个:));}}}});
}/* 分页 */
function create_paginator(total, current) {if(total0){var paginator_container $(div.paginator);paginator_container.children().remove();for(var i1;itotal;i){var a document.createElement(a);a.innerTexti;if(icurrent) a.classNamecurrent;a.hrefjavascript:void(0);;var cid $(div.nav a.current).attr(cid);a.setAttribute(onclick, view_posts(this,cid,i));paginator_container.append(a);}}
} part3: 将帖子展示到页面点赞 // 第四部分创建和提交、层级评论
/* 点赞 */
function like(ele, post_id) {if(!is_login()){show_login_reg_frm();return false;}$.get({url:/app01/like_post/,data:{post:post_id},dataType:json,success: function (response) {console.log(response);if(response.statusok){var like_count parseInt($(ele).attr(like_count));if(response.msgliked){// 已赞alert(已赞);like_count;$(ele).text(已赞(like_count));}else if(response.msgunliked){// 已取消赞alert(已取消赞);like_count--;$(ele).text(赞(like_count));}$(ele).attr(like_count, like_count);}}});
}/* 获取指定帖子的评论 */
function get_comments(post_id) {var comments;$.get({url:/app01/get_comments/,data:{post: post_id},dataType: json,async: false,success:function (response) {if(response.statusok){comments response[data];}}});return comments;
}/* 展示该帖子的所有评论 */
function show_comments(ele, post_id) {// 先隐藏所有帖子的评论div然后展示用户点击的帖子的评论div$(div.comment_container).addClass(hide);var current_comment_container $(ele).parent().parent().parent().siblings(.comment_container).removeClass(hide);// 插入一个textareavar comment_text_container current_comment_container.children(.comment_text_container);//console.log(comment_text_container);comment_text_container.children().remove();var comment_text document.createElement(textarea);comment_text.className comment_text;comment_text_container.append(comment_text);var send_btn document.createElement(a);send_btn.classNamesend_btn;send_btn.innerText 发送;send_btn.href javascript:void(0);send_btn.setAttribute(onclick, post_comment(this,post_id));comment_text_container.append(send_btn);// 获取这个帖子的所有评论var posts get_comments(post_id);var comment_content_container current_comment_container.find(.comment_content_container)[0];build_comment_tree(posts,comment_content_container);
}/* 创建评论的HTML */
function build_comment_tree(posts, comment_content_container) {if(posts.length0){// 先进行清理工作
$(comment_content_container).text().children().remove();// 添加一个根ulvar root_ul document.createElement(ul);comment_content_container.appendChild(root_ul);// 循环每个帖子for(var key in posts){// 生成一个li节点带comment_id该li中也带一个ul用于存放子评论var li document.createElement(li);li.setAttribute(comment_id, posts[key][id]);li.setAttribute(display_name, posts[key][user__display_name]);li.setAttribute(user_id, posts[key][user_id]);// li的内容var comment_content_div document.createElement(div); // 评论的具体内容comment_content_div.classNamecomment_content_div;comment_content_div.setAttribute(onmouseover,show_reply_btn(this,true));comment_content_div.setAttribute(onmouseout,show_reply_btn(this,false));var display_name posts[key][user__display_name]$(div.user_info #display_name).text() ? 我 : posts[key][user__display_name];comment_content_div.innerText display_name : posts[key][content] posts[key][create_on];var comment_bar document.createElement(div); // 针对该评论的工具栏var reply_a document.createElement(a);reply_a.classNamereply_btn hide;reply_a.innerText 回复;reply_a.href javascript:void(0);;reply_a.setAttribute(onclick, reply(posts[key][id],this));//comment_bar.appendChild(reply_a);comment_content_div.innerHTML reply_a.outerHTML;var comment_row document.createElement(div); // 一条评论的div包括了以上两个divcomment_row.classNamecomment_row;comment_row.appendChild(comment_content_div);comment_row.appendChild(comment_bar);li.appendChild(comment_row); // 将整条评论工具添加到li中// 用于存放子评论的ul下方可以没有任何子评论var sub_ul document.createElement(ul);li.appendChild(sub_ul);if(posts[key][reply_to]){// 评论有reply_to$(comment_content_container).find(li[comment_idposts[key][reply_to]]).children(ul).append(li);}else {// 评论没有reply_to将li加到根部的ulroot_ul.appendChild(li);}}}else{$(comment_content_container).text(暂时还没有评论);}
}/**/
function show_reply_btn(ele,show) {show?$(ele).find(.reply_btn:first).removeClass(hide):$(ele).find(.reply_btn:first).addClass(hide)
}/* 提交评论的内容 */
function post_comment(ele, post_id) {var comment_obj {};comment_obj[post]post_id;var ta $(ele).siblings(textarea);comment_obj[comment_text] $.trim(ta.val());if(comment_obj[comment_text].length0){alert(请输入评论内容再提交);return false;}var reply_to $(ele).siblings(textarea).attr(reply_to);if(reply_to){comment_obj[reply_to] reply_to}// ajax上传评论$.post({url:/app01/post_comment/,data:comment_obj,dataType:json,success:function (response) {if(response.statusok){// 评论成功alert(评论成功);var show_comments_btn $(ele).parent().parent().parent().find(.show_comments_btn)[0];show_comments(show_comments_btn, post_id)}}});
}//点击某个评论的回复按钮后修改textarea的comment_id属性并让其得到焦点
function reply(comment_id, ele) {if(!is_login()){show_login_reg_frm();return false;}var reply_to_user $(ele).parent().parent().parent().attr(display_name);$(textarea.comment_text).val().attr(reply_to,comment_id).attr(placeholder,回复 reply_to_user).focus();
} part4: 创建和提交、层级评论 转载于:https://www.cnblogs.com/xiaonq/p/8213735.html
