一 : 综述

博客系统是一个典型的web程序,有前端页面,也有后端代码,同时需要进行前后端交互,本节内容主要实现前端页面.

java个人博客系统代码 javaee个人博客_java-ee


基本结构 :

java个人博客系统代码 javaee个人博客_前端_02

二 : 博客列表页

2.1导航栏

页面结构 :

java个人博客系统代码 javaee个人博客_java个人博客系统代码_03


样式 :

1.起手式

java个人博客系统代码 javaee个人博客_html_04

整个页面的设置

java个人博客系统代码 javaee个人博客_html_05

单独导航栏的设置

java个人博客系统代码 javaee个人博客_java个人博客系统代码_06

导航栏图标的设置

java个人博客系统代码 javaee个人博客_java-ee_07

占位

java个人博客系统代码 javaee个人博客_ci_08

a标签的设置(三个按钮)

java个人博客系统代码 javaee个人博客_java个人博客系统代码_09


最终的导航栏效果 :

java个人博客系统代码 javaee个人博客_前端_10

2.2实现页面主体

页面结构 :

java个人博客系统代码 javaee个人博客_java个人博客系统代码_11

样式 :

整体容器样式设置

java个人博客系统代码 javaee个人博客_java个人博客系统代码_12

左右界面设置

java个人博客系统代码 javaee个人博客_java-ee_13

头像设置

java个人博客系统代码 javaee个人博客_java-ee_14


最终的左侧界面效果 :

java个人博客系统代码 javaee个人博客_html_15

右侧标题 , 日期 ,正文

java个人博客系统代码 javaee个人博客_html_16

查看全文的按钮

java个人博客系统代码 javaee个人博客_html_17


右侧界面最终效果 :

java个人博客系统代码 javaee个人博客_前端_18


整个博客列表页最终效果 :

java个人博客系统代码 javaee个人博客_java-ee_19

2.3具体代码

blog_list.html

<!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/blog_list.css">
</head>
<body>
        <!--导航栏-->
    <div class="nav">
        <img src="image/tubiao.jpg" alt="">
        <sapn class="title">我的博客系统</sapn>
        <!--用这个spacer来占位-->
        <span class="spacer"></span>
        <!--按钮-->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">编辑页</a>
        <a href="#">注销</a>
    </div>

    <!--页面主体-->
    <div class="container">
        <!--左侧个人信息-->
        <div class="container-left">
            <!-- 用.card表示用户信息 -->
            <div class="card">
                <img src="image/touxiang.jpg" alt="">
                <h3>老白在这</h3>
                <a href="#">gitee地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>5</span>
                    <span>8</span>
                </div>
            </div>
        </div>
        
        <!--右侧内容详情-->
        <div class="container-right">
            <!-- 此处表示一篇博客 -->
            <div class="blog">
                <div class="title">第一篇博客</div>
                <div class="date">2022-10-05 20:45:35</div>
                <div class="desc">从今天起,做一个幸福的人 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quaerat harum rerum magnam sapiente voluptatem, ea minima. Mollitia maxime odio harum ducimus voluptatum debitis voluptate exercitationem, error officia, vitae amet?
                    <a href="#">查看全文  ">>">></a>
                    </div>
            </div>

            <div class="blog">
                <div class="title">第二篇博客</div>
                <div class="date">2022-10-06 14:45:35</div>
                <div class="desc">俱往矣,数风流人物,还看今朝 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quaerat harum rerum magnam sapiente voluptatem, ea minima. Mollitia maxime odio harum ducimus voluptatum debitis voluptate exercitationem, error officia, vitae amet?
                    <a href="#">查看全文  ">>">></a>
                    </div>
            </div>
        </div>
</body>
</html>

common.css

/*这是起手式,一般都一样*/
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        height: 100%;
        background-image: url(../image/beijng.jpg);
        background-repeat : no-repeat;
        background-position: center center;
        background-size: cover;
    }

    .nav {
        width:100%;
        height: 50px;
        background-color: rgba(130,130,130,0.5);
        color:blanchedalmond;

        display: flex;
        align-items: center;
    }

    .nav img {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin-left: 30px;
        margin-right: 10px;
    }

    .nav .spacer {
        width: 70%;
    }

    .nav a {
        color: rgba(255,255,255);
        text-decoration: none;
        padding:0 10px ;
    }

    .container {
        width: 1000px;
        height: calc(100%-50px);
        margin: 0 auto;

        /*实现左右布局,使用flex*/
        display: flex;
        justify-content: space-between;
    }

    .container-left {
        height: 100%;
        width: 200px;
    }

    .container-right {
        height: 100%;
        width: 795px;
        background-color: rgba(255,255,255,0.8);
        border-radius: 10px;

        /*溢出之后如果内容多,自动加滚动条*/
        overflow: auto ;
    }

    .card {
        background-color: rgba(255,255,255,0.8);
        border-radius: 10px;
        padding: 30px;
    }

    /*用户头像*/
    .card img {
        width:140px;
        height:140px;
        border-radius: 70px;
    }

    /*用户名*/
    .card h3 {
        text-align:center;
        padding: 10px;
    }

    /*gitee链接*/
    .card a {
        display: block;
        text-align: center;
        text-decoration: none;
        padding: 10px;
        color :#aaa;
    }

    /*文章和分类*/
    .card .counter {
        display: flex;
        padding:5px;
        justify-content: space-around;
    }

blog_list.css

.blog {
    width: 100%;
    padding: 20px;
}

/*标题*/
.blog .title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 10px 0;
}

/*日期*/
.blog .date {
    color: cadetblue;
    text-align: center;
    padding: 5px;
}

/*首行缩进两字符*/
.blog .desc {
    text-indent: 2em;
    font-style: inherit;
}

/*查看全文的按钮*/
.blog a{
    text-align: center;
    display: block;
    width:130px;
    height: 40px;
    margin:10px auto;
    line-height: 40px;
    border: 2px black solid;
    color: black;
    text-decoration: none;
    transition: all 0.5s;
}

.blog a:hover {
    background-color: #333;
    color:#fff
}

2.4实现效果

java个人博客系统代码 javaee个人博客_ci_20

三 : 博客详情页

3.1具体代码

blog_detail.html

<!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/blog_detail.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/tubiao.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个 spacer 用来占位 -->
        <span class="spacer"></span>
        <!-- 来几个按钮 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div> 

    <!--页面主体-->
    <div class="container">
        <!--左侧个人信息-->
        <div class="container-left">
            <!-- 用.card表示用户信息 -->
            <div class="card">
                <img src="image/touxiang.jpg" alt="">
                <h3>老白在这</h3>
                <a href="#">gitee地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>5</span>
                    <span>8</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- 这个 div 里来放博客的内容 -->
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 博客时间 -->
                <div class="date">2022-10-06 20:45:35</div>
                <!-- 博客正文 -->
                <div>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

blog_detail.css

.blog-content {
    padding: 30px;
}

.blog-content h3 {
    text-align: center;
    padding: 20px 0;
}

.blog-content .date {
    text-align: center;
    color:cadetblue;
    padding: 10px 0;
}

.blog-content p {
    text-indent: 2em;
}

3.2实现效果

java个人博客系统代码 javaee个人博客_java个人博客系统代码_21

四 : 博客登录页

4.1具体代码

blog_login.html

<!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/blog_login.css">
</head>
<body>
        <!--导航栏-->
    <div class="nav">
        <img src="image/tubiao.jpg" alt="">
        <sapn class="title">我的博客系统</sapn>
        <!--用这个spacer来占位-->
        <span class="sapcer"></span>
        <!--按钮-->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">编辑页</a>
    </div>

    <!-- 构造页面 -->
    <div class="login-container">
        <div class="login-dialog">
            <h3>登录</h3>

            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>

            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            
            <div class="row">
                <input type="button" value="提交" id="submit">
            </div>
        </div>
    </div>
</body>
</html>

blog_login.css

.login-container {
    height:calc(100%-50px);
    display: flex;
    /*水平居中*/
    justify-content: center;
    /*垂直居中*/
    align-items: center;
}

.login-dialog {
    width: 400px;
    height: 350px;
    background-color: reba(255,255,255,0.8);
    border-radius: 10px;
}


.login-dialog h3 {
    padding:75px 0;
    text-align: center;
}

.login-dialog .row {
    height:50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-dialog .row span {
    width: 100px;
    font-weight: 700;
}

#username, #password {
    width: 200px;
    height: 40px;
    font-size: 24px;
    border: none;
    outline: none;
    padding-left: 5px;
    border-radius: 10px;
    background-color: beige;
}

#submit {
    width: 300px;
    height: 40px;
    color: white;
    background-color: #98FB98;
    border: none;
    border-radius: 10px;
}

#submit:active {
    background-color: grey;
}

4.2实现效果

java个人博客系统代码 javaee个人博客_java个人博客系统代码_22

五 : 博客编辑页

5.1editor.md组件导入

自己实现markdown是有一定难度的 . 所以这里最关键的步骤 ,是使用markdown组件 , 下面我将介绍如何导入这个组件 .

第一步 : 网页搜索editor.md , 进入官网下载 .

java个人博客系统代码 javaee个人博客_ci_23


java个人博客系统代码 javaee个人博客_java个人博客系统代码_24

第二步 : 将下载好的文件夹放在总的博客系统目录下 .

java个人博客系统代码 javaee个人博客_html_25

editor.md这个组件要想正常使用 , 还依赖一个东西jquery . jquery是js世界最知名的库 !

java个人博客系统代码 javaee个人博客_ci_26


第三步 : 在页面中引入依赖的js , css等文件 . (参考官方文档) .

<!-- 引入 editor.md 的依赖 -->
        <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
        <script src="js/jquery.min.js"></script>
        <script src="editor.md/lib/marked.min.js"></script>
        <script src="editor.md/lib/prettify.min.js"></script>
        <script src="editor.md/editormd.js"></script>

需要注意目录结构 !

java个人博客系统代码 javaee个人博客_java个人博客系统代码_27

第四步 : 在js代码中 , 初始化editor.md .

<script>
        // 初始化编辑器
        var editor = editormd("editor", {
            width:"100%",
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>

java个人博客系统代码 javaee个人博客_前端_28


在书写这部分代码时 , 还有一些注意事项 :

java个人博客系统代码 javaee个人博客_前端_29

5.2具体代码

blog_edit.html

<!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/blog_edit.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/tubiao.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个 spacer 用来占位 -->
        <span class="spacer"></span>
        <!-- 来几个按钮 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div> 

    <div class="blog-edit-container">
        <!-- 标题编辑区 -->
        <div class="title">
            <input type="text" id="title" placeholder="请输入文章标题">
            <input type="button" id="submit" value="发布文章">
        </div>
        <!-- 博客编辑器标签 -->
        <div id="editor">

        </div>
    </div>

    <script>
        // 初始化编辑器
        var editor = editormd("editor", {
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>
</body>
</html>

blog_edit.css

.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

.title {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#title {
    width: 895px;
    height: 40px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-size: 22px;
    padding-left: 5px;

    background-color: rgba(255, 255, 255, 0.8);
}


#submit {
    width: 100px;
    height: 40px;
    border-radius: 10px;
    color: white;
    background-color: orange;
    border: none;
    outline: none;
}


#submit:active {
    background-color: rgb(32, 22, 22);
}

#editor {
    border-radius: 10px;

    /* background-color: rgba(255, 255, 255, 0.8); */
    opacity: 80%;
}

5.3实现效果

java个人博客系统代码 javaee个人博客_java-ee_30

至此 , 博客系统的前端部分代码全部完成 !

java个人博客系统代码 javaee个人博客_java个人博客系统代码_31