一个练习项目，好玩的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>