【项目日记（四）】梦幻笔耕-前端模块

最新推荐文章于 2024-08-15 18:19:19 发布

PU-YUHAN

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量281

点赞数 6

分类专栏：博客系统文章标签：前端

本文链接：https://blog.csdn.net/weixin_69049913/article/details/140815833

版权

博客系统专栏收录该内容

5 篇文章 0 订阅

订阅专栏

❣博主主页: 33的博客❣
▶️文章专栏分类:项目日记◀️
🚚我的代码仓库: 33的代码仓库🚚
🫵🫵🫵关注我带你了解更多项目内容

1.前言,

在前面的文章中，我们已经完成了后端的业务逻辑，接下来我们将对前端进行实现。前端中，我们用到的技术主要包含HTML，CSS，JavaScript，JQuery等…

2.登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客登陆页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">梦幻笔耕</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
    </div>
    <div class="container-login">
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" name="username" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" name="password" id="password">
            </div>
            <div class="row">
                <button id="submit" onclick="login()">提交</button>
            </div>
            <div class="row">
                <button id="enroll">注册</button>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        document.getElementById("enroll").addEventListener("click", function() {
            window.location.href = "blog_register.html";
        });
    </script>
    <script>
        function login() {
            $.ajax({
                type:"post",
                url: "/user/login",
                data:{
                    username:$("#username").val(),
                    password: $("#password").val()
                },
                success:function(result){
                    if(result.code=="SUCCESS" && result.data !=null){
                        //后端处理成功
                        localStorage.setItem("user_token", result.data);
                        //页面跳转
                        location.href = "blog_list.html";
                    }else{
                        alert(result.errMsg);
                    }
                }
            });
        }
    </script>
</body>
</html>

以登录界面美化为例，其他界面可以根据自己的需求进行调整：

.container-login{
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-dialog{
    width: 350px;
    height: 300px;
    background-color:rgba(255,255,255,0.8);
    padding-top: 20px;
    border-radius: 10px;
    
}
.login-dialog h3{
    text-align: center;   
}
.login-dialog .row{
    width: 280px;
    height: 40px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.login-dialog .row>input{
    width: 220px;
    height: 35px;
    border-radius: 5px;
    border: none;
    outline: none;
    padding-left: 10px;
}
.login-dialog #submit{
    width: 280px;
    height: 40px;
    background-color: green;
    color: white;
    border: none;
}
.login-dialog #enroll{
    width: 280px;
    height: 40px;
    background-color: green;
    color: white;
    border: none;
}

3.注册界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客注册页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
</head>
<body>
<div class="nav">
    <img src="pic/logo2.jpg" alt="">
    <span class="blog-title">梦幻笔耕</span>
    <div class="space"></div>
    <a class="nav-span" href="blog_list.html">主页</a>
    <a class="nav-span" href="blog_edit.html">写博客</a>
</div>
<div class="container-register">
    <div class="register-dialog">
        <h3>注册</h3>
        <div class="row">
            <span>用户名</span>
            <input type="text" name="new-username" id="new-username">
        </div>
        <div class="row">
            <span>密 码</span>
            <input type="password" name="password" id="password">
        </div>
        <div class="row">
            <span>码 云</span>
            <input type="gitHub" name="gitHub" id="gitHub">
        </div>
        <div class="row">
            <button id="register" onclick="register()">确认</button> <!-- 这里添加注册按钮 -->
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script>
    function register() {
        $.ajax({
            type:"post",
            url: "/user/register",
            data:{
                username:$("#new-username").val(),
                password: $("#password").val(),
                githubUrl:$("#gitHub").val(),
            },
            success:function(result){
                if(result.code=="SUCCESS" && result.data !=null){

                    //页面跳转
                    location.href = "blog_login.html";
                }else{
                    alert(result.errMsg);
                }
            }
        });
    }
</script>
</body>
</html>

4.博客列表界面

关于博客界面的操作，我们需要再用户登录的情况下进行，后端已经通过JWT令牌的形式把用户信息存储在token中，那么前端每次都要携带这个信息去请求后端。

$(document).ajaxSend(function(e, xhr, opt){
            var token = localStorage.getItem("user_token");
            xhr.setRequestHeader("user_token_header", token);
        });

因为在博客也面的每一个请求都需要携带这个信息，那么我们就可以把这一段代码写在js中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
</head>
<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">梦幻笔耕</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
        <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>
    <div class="container">
        <div class="left">
            <div class="card">
                <img src="pic/doge.jpg" alt="">
                <h3> </h3>
                <a href="#">GitHub 地址</a>
                <div class="row">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="row">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script>       
        $.ajax({
            type: "get",
            url: "/blog/getList",
            success: function(result){
                if(result.code=="SUCCESS"){
                    var blogs = result.data;
                    var finalHtml = "";
                    for(var blog of blogs){
                        finalHtml +='<div class="blog">';
                        finalHtml +='<div class="title">'+blog.title+'</div>';
                        finalHtml +='<div class="date">'+blog.createTime+'</div>';
                        finalHtml +='<div class="desc">'+blog.content+'</div>';
                        finalHtml +='<a class="detail" href="blog_detail.html?blogId='+blog.id+'">查看全文&gt;&gt;</a>';
                        finalHtml +='</div>';
                    }
                    $(".container .right").html(finalHtml);
                }
            },
            error:function(error){
                if(error!=null && error.status==401){
                    location.href = "blog_login.html";
                }
            }
        });
        getUserInfo("/user/getUserInfo");
    </script>
</body>
</html>

5.博客编辑页

如果我们直接以普通文字的方式写博客是不合理的，我们希望像csdn一样有样式，那么我们就可以使用开源的Markdown编译器——editor.md 。使用时，我们直接引入对应依赖即可。

 <div id="editor">
            <textarea style="display:none;" id="content" name="content">##在这里写下一篇博客</textarea>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="blog-editormd/editormd.min.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript">
        $(function () {
            var editor = editormd("editor", {
                width: "100%",
                height: "550px",
                path: "blog-editormd/lib/"
            });
        });
    </script>

写博客：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/edit.css">
    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />

</head>

<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">梦幻笔耕</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
        <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>
    <div class="content-edit">
        <div class="push">
            <input type="text" name="" id="title">
            <input type="button" value="发布文章" id="submit" onclick="submit()">
        </div>
        <!-- markdown 插件 html代码 -->
        <div id="editor">
            <textarea style="display:none;" id="content" name="content">##在这里写下一篇博客</textarea>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="blog-editormd/editormd.min.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript">
        $(function () {
            var editor = editormd("editor", {
                width: "100%",
                height: "550px",
                path: "blog-editormd/lib/"
            });
        });

        function submit() {
            $.ajax({
                type: "post",
                url: "/blog/add",
                data: {
                    title: $("#title").val(),
                    content: $("#content").val()
                },

                success: function (result) {
                    if (result.code == "SUCCESS" && result.data == true) {
                        //发表成功
                        location.href = "blog_list.html";
                    } else {
                        console.log($("#title").val());
                        console.log($("#content").val())
                        console.log(result.code);
                        console.log(result.data)
                        //后端未对错误情况进行分析, 统一返回了false, 需要自己完善, 参考userController.login
                        alert(result.errMsg);
                    }
                },
                error: function (error) {
                    if (error != null && error.status == 401) {
                        location.href = "blog_login.html";
                    }
                }
            });
        }
    </script>
</body>
</html>

6.博客详情页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/detail.css">
</head>
<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">梦幻笔耕</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
        <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>

    <div class="container">
        <div class="left">
            <div class="card">
                <img src="pic/doge.jpg" alt="">
                <h3> </h3>
                <a href="#">GitHub 地址</a>
                <div class="row">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="row">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="content">
                <div class="title"></div>
                <div class="date"></div>
                <div class="detail" id="detail" style="background-color: transparent;"></div>
                <div class="operating">
<!--                    <button οnclick="window.location.href='blog_update.html'">编辑</button>-->
<!--                    <button οnclick="deleteBlog()">删除</button> -->
                </div>
            </div>
        </div>
    </div>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />
    <script src="js/jquery.min.js"></script>
    <script src="blog-editormd/lib/marked.min.js"></script>
    <script src="blog-editormd/lib/prettify.min.js"></script>
    <script src="blog-editormd/editormd.js"></script>
    <script src="js/common.js"></script>
    <script>
        //显示博客作者信息
        var userUrl = "/user/getAuthorInfo" + location.search;
        // getUserInfo(userUrl);
        function deleteBlog(blogId) {
            if (confirm("确定删除?")) {
                $.ajax({
                    type: "post",
                    url: "/blog/delete" + location.search,
                    success: function (result) {
                        if (result.code == "SUCCESS" && result.data) {
                            //删除成功
                            location.href = "blog_list.html";
                        } else {
                            //后端未对错误情况进行分析, 统一返回了false, 需要自己完善, 参考userController.login
                            alert(result.errMsg);
                        }
                    },
                    error: function (error) {
                        if (error != null && error.status == 401) {
                            location.href = "blog_login.html";
                        }
                    }
                });
            }
        }
        $.ajax({
            type: "get",
            url: "/blog/getBlogDetail" + location.search,
            success: function (result) {
                if (result.code == "SUCCESS") {
                    //填充页面
                    var blog = result.data;
                    $(".content .title").text(blog.title);
                    $(".content .date").text(blog.createTime);
                    // $(".content .detail").text(blog.content);
                    editormd.markdownToHTML("detail", {
                        markdown: blog.content
                    });
                    //判断是否显示编辑/删除按钮
                    if (blog.loginUser) {
                        var html = "";
                        html += '<button οnclick="window.location.href=\'blog_update.html?blogId=' + blog.id + '\'">编辑</button>';
                        html += '<button οnclick="deleteBlog(' + blog.id + ')">删除</button>';
                        $(".content .operating").html(html);
                    }
                }
            },
            error: function (error) {
                if (error != null && error.status == 401) {
                    location.href = "blog_login.html";
                }
            }
        });
        var url = "/user/getAuthorInfo" + location.search;
        getUserInfo(url);
    </script>
</body>
</html>

7.博客更新界面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/edit.css">
    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />

</head>

<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">梦幻笔耕</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
        <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>
    <div class="content-edit">
        <div class="push">
            <input type="hidden" id="blogId">
            <input type="text" name="" id="title">
            <input type="button" value="更新文章" id="submit" onclick="submit()">
        </div>
        <!-- markdown 插件 html代码 -->
        <div id="editor">
            <textarea style="display:none;" id="content">##在这里写下一篇博客</textarea>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="blog-editormd/editormd.min.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript">
        function submit() {
            $.ajax({
                type: "post",
                url: "/blog/update",
                data: {
                    id: $("#blogId").val(),
                    title: $("#title").val(),
                    content: $("#content").val()
                },
                success: function (result) {
                    if (result.code == "SUCCESS" && result.data) {
                        //删除成功
                        location.href = "blog_list.html";
                    } else {
                        //后端未对错误情况进行分析, 统一返回了false, 需要自己完善, 参考userController.login
                        alert(result.errMsg);
                    }
                },
                error: function (error) {
                    if (error != null && error.status == 401) {
                        location.href = "blog_login.html";
                    }
                }
            });
        }
        function getBlogInfo() {
            $.ajax({
                type: "get",
                url: "/blog/getBlogDetail" + location.search,
                success: function (result) {
                    if (result.code == "SUCCESS" && result.data != null) {
                        var blog = result.data;
                        $("#blogId").val(blog.id);
                        $("#title").val(blog.title);
                        // $("#content").val(blog.content);
                        editormd("editor", {
                            width: "100%",
                            height: "550px",
                            path: "blog-editormd/lib/",
                            onload: function () {
                                this.watch();
                                this.setMarkdown(blog.content);
                            }
                        });
                    } else {
                        alert(result.errMsg)
                    }
                },
                error: function (error) {
                    if (error != null && error.status == 401) {
                        location.href = "blog_login.html";
                    }
                }
            });
        }
        getBlogInfo();
    </script>
</body>
</html>