一个练习项目,好玩的bbs-前端部分
common.js
function setCookie(name, value, daysToLive = 7) { let cookie = name + "=" + encodeURIComponent(value); if (typeof daysToLive === "number") { cookie += "; max-age=" + (daysToLive*24*60*60); // max-age单位是秒 } document.cookie = cookie; } function getCookie(name) { const cookies = document.cookie.split("; "); for (let i = 0; i < cookies.length; i++) { const [cookieName, cookieValue] = cookies[i].split("="); if (name === cookieName) { return decodeURIComponent(cookieValue); } } return ""; } function deleteCookie(name) { setCookie(name, "", -1); // 设置为过去的时间即可删除 } function gotoeditpost(contentId){ window.location.href= "/postedit.html?id="+contentId; } function getlang(){ var jiekou = '/api'; $.get(jiekou+"/", function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); $("#langInfo").html(data); }); } function register(username, password, nickname){ data = {} var jiekou = '/api/user/register'; $.get(jiekou+"?username="+username+"&password="+password+"&nickname="+nickname, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } window.location.href= "/"; }); } function login(username, password){ data = {} var jiekou = '/api/user/login'; $.get(jiekou+"?username="+username+"&password="+password, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } var sessionId = datajson.data.sessionId; var userId = datajson.data.id; setCookie("sessionId", sessionId); setCookie("userId", userId); window.location.href= "/"; }); } function logout(){ var sessionId = getCookie("sessionId"); var jiekou = '/api/user/logout'; $.get(jiekou+"?sessionId="+sessionId, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } deleteCookie("sessionId"); deleteCookie("userId"); window.location.href = "/"; return true; }); } function getuserinfo(){ var sessionId = getCookie("sessionId"); if(sessionId == ""){ var mylocation = window.location.href; var flagtmp = mylocation.indexOf("userlogin.html"); //console.log(mylocation); //console.log(flagtmp); if(flagtmp > 0){ $("#nicknamespan").html("<a href='/'>返回首页</a>"); } else{ $("#nicknamespan").html("<a href='/userlogin.html'>登录</a> | <a href='/'>返回首页</a>"); } } else{ data = {} var jiekou = '/api/user/getuserinfo'; $.get(jiekou+"?sessionId="+sessionId, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); $("#nicknamespan").html("<a href='/userlogin.html'>登录</a> | <a href='/'>返回首页</a>"); return false; } var datatmp = datajson.data; if(!datatmp){ layer.msg("返回数据为空,我次奥", {icon: 2}); return false; } var userId = datajson.data.id; var nickname = datajson.data.nickname; setCookie("sessionId", sessionId); setCookie("userId", userId); $("#nicknamespan").html("登录用户:<font color=red>"+nickname+"</font> | <a href='javascript:logout();'>退出</a> | <a href='/'>返回首页</a>"); }); } } function getpostlist(page){ var userId = getCookie("userId"); data = {} var jiekou = '/api/post/list'; $.get(jiekou+"?page="+page, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } var totalpage = datajson.data.totalpage; var data = datajson.data.data; $("#postlist").empty(); var tmp = ""; tmp += "<tr bgcolor=\"#CC9966\">\n"; tmp += "<td width=\"5%\">序号</td>\n"; tmp += "<td width=\"35%\">标题</td>\n"; tmp += "<td width=\"20%\">发帖人</td>\n"; tmp += "<td width=\"15%\">回复数</td>\n"; tmp += "<td width=\"15%\">最后更新时间</td>\n"; tmp += "<td width=\"10%\">操作</td>\n"; tmp += "</tr>\n"; $("#postlist").append(tmp); for(var i = 0; i < data.length; i++){ var tmp = ""; var bgcolor = i % 2 ? '#FFFAF4' : '#FFEEDD'; tmp += "<tr bgcolor=\""+bgcolor+"\">\n"; tmp += "<td>"+(i+1)+"</td>\n"; tmp += "<td><a href='/postdetail.html?id="+data[i].id+"'>"+data[i].title+"</a></td>\n"; tmp += "<td>"+data[i].userNickename+"</td>\n"; tmp += "<td>"+data[i].replyNum+"</td>\n"; tmp += "<td>"+data[i].updateTime+"</td>\n"; if(userId == data[i].userId){ tmp += "<td><a href='javascript:gotoeditpost("+data[i].id+")'>编辑</a> | <a href='javascript:if(confirm(\"是否要执行此操作?\")){delpost("+data[i].id+");}'>删除</a></td>\n"; } else{ tmp += "<td></td>\n"; } tmp += "</tr>\n"; $("#postlist").append(tmp); } $("#page").empty(); $("#page").append("<a href='javascript:getpostlist(1)'>首页</a> "); for(var i = 1; i <= totalpage; i++){ $("#page").append("<a href='javascript:getpostlist("+i+")'>"+i+"</a> "); } $("#page").append("<a href='javascript:getpostlist("+totalpage+")'>末页</a> "); }); } function getpostdetail(id){ var userId = getCookie("userId"); var jiekou = '/api/post/detail'; $.get(jiekou+"?id="+id, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } var datatmp = datajson.data; if(!datatmp){ layer.msg("返回数据为空,我次奥", {icon: 2}); return false; } $("#title").html(datajson.data.title); $("#content").html(datajson.data.content); if(userId != datajson.data.userId){ $("#postedit").hide(); $("#postdel").hide(); } else{ $("#postedit").show(); $("#postdel").show(); } }) } function getpostedit(id){ var userId = getCookie("userId"); var jiekou = '/api/post/detail'; $.get(jiekou+"?id="+id, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } var datatmp = datajson.data; if(!datatmp){ layer.msg("返回数据为空,我次奥", {icon: 2}); return false; } $("#title").val(datajson.data.title); $("#content").val(datajson.data.content); if(userId != datajson.data.userId){ $("#postsend").hide(); } else{ $("#postsend").show(); } }) } function addpost(title, content){ var sessionId = getCookie("sessionId"); var jiekou = '/api/post/add'; $.get(jiekou+"?title="+title+"&content="+content+"&sessionId=" + sessionId, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } window.location.href= "/"; }) } function editpost(title, content, id){ var sessionId = getCookie("sessionId"); var jiekou = '/api/post/edit'; $.get(jiekou+"?id="+id+"&title="+title+"&content="+content+"&sessionId=" + sessionId, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } window.location.href= "/"; }) } function delpost(id){ var sessionId = getCookie("sessionId"); var jiekou = '/api/post/delete'; $.get(jiekou+"?id="+id+"&sessionId=" + sessionId, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } window.location.href= "/"; }) } function getreplylist(page, contentId){ var userId = getCookie("userId"); data = {} var jiekou = '/api/reply/list'; $.get(jiekou+"?contentId="+contentId+"&page="+page, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } var totalpage = datajson.data.totalpage; var data = datajson.data.data; $("#replylist").empty(); var tmp = ""; tmp += "<tr bgcolor=\"#CC9966\">\n"; tmp += "<td width=\"5%\">序号</td>\n"; tmp += "<td width=\"35%\">内容</td>\n"; tmp += "<td width=\"20%\">回复人</td>\n"; tmp += "<td width=\"20%\">回复时间</td>\n"; tmp += "<td width=\"20%\">操作</td>\n"; tmp += "</tr>\n"; $("#replylist").append(tmp); for(var i = 0; i < data.length; i++){ var tmp = ""; var bgcolor = i % 2 ? '#FFFAF4' : '#FFEEDD'; tmp += "<tr bgcolor=\""+bgcolor+"\">\n"; tmp += "<td>"+(i+1)+"</td>\n"; tmp += "<td>"+data[i].content+"</td>\n"; tmp += "<td>"+data[i].replyUserNickename+"</td>\n"; tmp += "<td>"+data[i].addTime+"</td>\n"; if(userId == data[i].replyUserId){ tmp += "<td><a href='javascript:editreply("+data[i].id+", \""+data[i].content+"\", "+contentId+")'>编辑</a> | <a href='javascript:delreply("+data[i].id+", "+contentId+")'>删除</a></td>\n"; } else{ tmp += "<td></td>\n"; } tmp += "</tr>\n"; $("#replylist").append(tmp); } $("#page").empty(); $("#page").append("<a href='javascript:getreplylist(1, "+contentId+")'>首页</a> "); for(var i = 1; i <= totalpage; i++){ $("#page").append("<a href='javascript:getreplylist("+i+", "+contentId+")'>"+i+"</a> "); } $("#page").append("<a href='javascript:getreplylist("+totalpage+", "+contentId+")'>末页</a> "); }); } function addreply(content, contentId){ var sessionId = getCookie("sessionId"); if(content){ var jiekou = '/api/reply/add'; $.get(jiekou+"?contentId="+contentId+"&content="+content+"&sessionId=" + sessionId, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } window.location.href= "/postdetail.html?id="+contentId; }) } } function editreply(replyId, content, contentId){ var sessionId = getCookie("sessionId"); var content = prompt("请输入回复", content); if(content){ var jiekou = '/api/reply/edit'; $.get(jiekou+"?id="+replyId+"&content="+content+"&sessionId=" + sessionId, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } window.location.href= "/postdetail.html?id="+contentId; }) } } function delreply(replyId, contentId){ if(confirm("是否要执行此操作?")){ var sessionId = getCookie("sessionId"); var jiekou = '/api/reply/delete'; $.get(jiekou+"?id="+replyId+"&sessionId=" + sessionId, function(data, status, request){ if(status != "success"){ layer.msg("访问接口["+jiekou+"]出错了,状态:"+status, {icon: 2}); } console.log("接口:"+jiekou+",Server信息:"+request.getResponseHeader('Server')); try{ var datajson = JSON.parse(data); } catch{ var datajson = data; } var msg = datajson.msg; if(msg){ layer.msg(msg, {icon: 2}); return false; } window.location.href= "/postdetail.html?id="+contentId; }) } }
postindex.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>BBS首页</title> <link rel="stylesheet" href="/layui/css/layui.css"> </head> <body> <span style="float:right;" id="nicknamespan">载入数据中...</span><br /><br /> <h2>帖子列表</h2> <button id="postadd" style="display:none;">发布帖子</button> <br /><br /> <table id="postlist" border="1" bordercolor="#003366" style="border-collapse:collapse;width:100%"><tr bgcolor="#FFFAF4"><td>载入数据中...</td></tr></table> <br /> <div id="page"></div> <br /><br /> <div style="text-align:center;" id="langInfo">载入数据中...</div> </body> <script src="/jquery.min.js"></script> <script src="/layui/layui.js"></script> <script src="/common.js?id=2"></script> <script> $(document).ready(function(){ var userId = getCookie("userId"); var page = 1; if(userId <= 0){ $("#postadd").hide(); } else{ $("#postadd").show(); } $("#postadd").click(function(){ window.location.href= "/postadd.html"; }) getuserinfo(); getpostlist(page); getlang(); }); </script> </html>
postdetail.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>帖子详情</title> <link rel="stylesheet" href="/layui/css/layui.css"> </head> <body> <span style="float:right;" id="nicknamespan">载入数据中...</span><br /><br /> <b>主题:</b> <span id="title" style="color:red;">载入数据中...</span> <br /><br /> <b>内容:</b> <div id="content">载入数据中...</div> <br /> <button id="postedit" style="display:none;">编辑帖子</button> <button id="postdel" style="display:none;">删除帖子</button> <button id="replyadd" style="display:none;">回复帖子</button> <br /><br /> <table id="replylist" border="1" bordercolor="#003366" style="border-collapse:collapse;width:100%"><tr bgcolor="#FFFAF4"><td>载入数据中...</td></tr></table> <br /> <div id="page"></div><br /> <div style="text-align:center;" id="langInfo">载入数据中...</div> </body> <script src="/jquery.min.js"></script> <script src="/layui/layui.js"></script> <script src="/common.js?id=2"></script> <script> $(document).ready(function(){ const params = new URLSearchParams(window.location.search); var contentId = params.get('id'); var page = 1; getuserinfo(); getlang(); var userId = getCookie("userId"); if(userId <= 0){ $("#replyadd").hide(); } else{ $("#replyadd").show(); } getpostdetail(contentId); getreplylist(page, contentId); $("#postedit").click(function(){ window.location.href= "/postedit.html?id="+contentId; }); $("#postdel").click(function(){ if(confirm("是否要执行此操作?")){ delpost(contentId); } }); $("#replyadd").click(function(){ var content = prompt("请输入回复", ""); addreply(content, contentId); }); }); </script> </html>
postadd.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>发帖</title> <link rel="stylesheet" href="/layui/css/layui.css"> </head> <body> <span style="float:right;" id="nicknamespan">载入数据中...</span><br /><br /> <b>主题:</b> <input type="text" id="title" style="width:575px;" value="测试帖子"> <br /><br /> <b>内容:</b> <textarea id="content" cols=70 rows=7>测试帖子内容</textarea> <br /><br /> <button id="postsend" style="display:none;">发帖</button> <br /><br /> <div style="text-align:center;" id="langInfo">载入数据中...</div> </body> <script src="/jquery.min.js"></script> <script src="/layui/layui.js"></script> <script src="/common.js?id=2"></script> <script> $(document).ready(function(){ getuserinfo(); getlang(); var userId = getCookie("userId"); if(userId <= 0){ $("#postsend").hide(); } else{ $("#postsend").show(); } $("#postsend").click(function(){ var title = $("#title").val(); var content = $("#content").val(); addpost(title, content); }) }); </script> </html>
postedit.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>编辑帖子</title> <link rel="stylesheet" href="/layui/css/layui.css"> </head> <body> <span style="float:right;" id="nicknamespan">载入数据中...</span><br /><br /> <b>主题:</b> <input type="text" id="title" style="width:575px;" value="载入数据中..."> <br /><br /> <b>内容:</b> <textarea id="content" cols=70 rows=7>载入数据中...</textarea> <br /><br /> <button id="postsend" style="display:none;">编辑帖子</button> <br /><br /> <div style="text-align:center;" id="langInfo">载入数据中...</div> </body> <script src="/jquery.min.js"></script> <script src="/layui/layui.js"></script> <script src="/common.js?id=2"></script> <script> $(document).ready(function(){ const params = new URLSearchParams(window.location.search); var contentId = params.get('id'); getuserinfo(); getpostedit(contentId); getlang(); $("#postsend").click(function(){ var title = $("#title").val(); var content = $("#content").val(); editpost(title, content, contentId); }) }); </script> </html>
userlogin.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户登录</title> <link rel="stylesheet" href="/layui/css/layui.css"> </head> <body> <span style="float:right;" id="nicknamespan">载入数据中...</span><br /><br /> 用户名:<input type="text" id="username" value="root"><br /> 密码:<input type="password" id="password" value="123456"><br /> <input type="button" id="loginbutton" value="登录"> <input type="button" id="registerbutton" value="注册"> <br /><br /> <div style="text-align:center;" id="langInfo">载入数据中...</div> </body> <script src="/jquery.min.js"></script> <script src="/layui/layui.js"></script> <script src="/common.js?id=2"></script> <script> $(document).ready(function(){ $("#loginbutton").click(function(){ var username = $("#username").val(); var password = $("#password").val(); login(username, password); }) $("#registerbutton").click(function(){ window.location.href= "/userregister.html"; }) getuserinfo(); getlang(); }); </script> </html>
userregister.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户注册</title> <link rel="stylesheet" href="/layui/css/layui.css"> </head> <body> <span style="float:right;" id="nicknamespan">载入数据中...</span><br /><br /> 昵称:<input type="text" id="nickname" value="测试用户"><br /> 用户名:<input type="text" id="username" value="test"><br /> 密码:<input type="password" id="password" value="123456"><br /> <input type="button" id="registerbutton" value="注册"> <br /><br /> <div style="text-align:center;" id="langInfo">载入数据中...</div> </body> <script src="/jquery.min.js"></script> <script src="/layui/layui.js"></script> <script src="/common.js?id=2"></script> <script> $(document).ready(function(){ $("#registerbutton").click(function(){ var username = $("#username").val(); var password = $("#password").val(); var nickname = $("#nickname").val(); register(username, password, nickname); }) getuserinfo(); getlang(); }); </script> </html>
本文来自博客园,作者:河北大学-徐小波,转载请注明原文链接:https://www.cnblogs.com/xuxiaobo/p/18260621
![河北大学,徐小波,陕西宝鸡,岐山,北京通州](https://images.cnblogs.com/cnblogs_com/blogs/779648/galleries/2264184/o_230113070645_wx.jpg)