【Java项目】构建一个博客系统

fire~gogogo

已于 2023-06-05 13:22:47 修改

阅读量729

点赞数 3

分类专栏： Java项目 Java 文章标签： java 开发语言前端

于 2023-06-05 11:07:00 首次发布

本文链接：https://blog.csdn.net/weixin_53966941/article/details/131042577

版权

Java 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Java项目

2 篇文章 0 订阅

订阅专栏

这篇博客介绍的是一个简单的前端博客系统！！！

该项目主要分成以下四个页面
博客列表页：显示了当前发布出来的博客（标题、时间、内容）

博客编辑页：包括一个输入框，Markdown编辑器(使用第三方组件)

博客详情页：显示博客的详情内容

博客登录页：包含了一个登录框，用户名、密码以及登录按钮

博客列表页代码：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/logo.jpg" alt="头像">
        <span class="title">我的博客系统</span>

        <div class="spacer"></div>

        <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>fire-yang</h3>
                <a href="https://gitee.com/fire-yang">gitee 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧信息 -->
        <div class="container-right">
            <!-- 表示一篇博客 -->
            <div class="blog">
                <div class="title">
                    我的第一篇博客
                </div>
                <!-- 发布时间 -->
                <div class="date">2023-06-01</div>
                <!-- 博客的摘要 -->
                <div class="desc">
                    
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.
                </div>
                <!-- 查看全文按钮 -->
                <a href="">查看全文 &gt;&gt;</a>
                <!-- < &lt   > &gt -->
            </div>
            <!-- 表示一篇博客 -->
            <div class="blog">
                <div class="title">
                    我的第二篇博客
                </div>
                <!-- 发布时间 -->
                <div class="date">2023-06-02</div>
                <!-- 博客的摘要 -->
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.
                </div>
                <!-- 查看全文按钮 -->
                <a href="">查看全文 &gt;&gt;</a>
                <!-- < &lt   > &gt -->
            </div>
            <!-- 表示一篇博客 -->
            <div class="blog">
                <div class="title">
                    我的第三篇博客
                </div>
                <!-- 发布时间 -->
                <div class="date">2023-06-03</div>
                <!-- 博客的摘要 -->
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.
                </div>
                <!-- 查看全文按钮 -->
                <a href="">查看全文 &gt;&gt;</a>
                <!-- < &lt   > &gt -->
            </div>
            <!-- 表示一篇博客 -->
            <div class="blog">
                <div class="title">
                    我的第四篇博客
                </div>
                <!-- 发布时间 -->
                <div class="date">2023-06-04</div>
                <!-- 博客的摘要 -->
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.
                </div>
                <!-- 查看全文按钮 -->
                <a href="">查看全文 &gt;&gt;</a>
                <!-- < &lt   > &gt -->
            </div>

        </div>
    </div>
</body>
</html>

博客详情页代码：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/logo.jpg" alt="头像">
        <span class="title">我的博客系统</span>

        <div class="spacer"></div>

        <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>fire-yang</h3>
                <a href="https://gitee.com/fire-yang">gitee 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧信息 -->
        <div class="container-right">
            <!-- 博客标题 -->
            <h3 class="title">我的第一篇博客</h3>
            <!-- 博客发布时间 -->
            <div class="date">2023-06-01</div>
            <!-- 博客正文 -->
            <div class="content">
                <p>
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.
                </p>
                <p>
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.
                </p>
                <p>
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.
                </p>
                <p>
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.
                </p>
            </div>
        </div>
    </div>
    
</body>
</html>

博客编辑页代码：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">
    <!-- <script src="js/jquery.min.js"></script> -->
    <!-- <script src="<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>"></script> -->
    <!-- 引入 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/logo.jpg" alt="头像">
        <span class="title">我的博客系统</span>

        <div class="spacer"></div>

        <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="输入文章标题">
            <button id="submit">发布文章</button>
        </div>
        <!-- 博客编辑器 这里用id是为了和markdown编辑器对接而设置的-->
        <div id="editor">

        </div>
    </div>
    <script>
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置，设置样式会被 editormd 自动覆盖掉
            width:"100%",
            // 设定编辑器高度
            height:"calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown:"# 在这里写下一篇博客",
            // 制定 editor.md 依赖的插件路径
            path:"editor.md/lib/"
        });
    </script>
</body>
</html>

博客登录页代码：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/login.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/logo.jpg" alt="头像">
        <span class="title">我的博客系统</span>

        <div class="spacer"></div>

        <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" placeholder="手机号/邮箱">
            </div>
            <div class="row">
                <span>密码:</span>
                <input type="password" id="password">
            </div>
            <div class="row">
                <button id="submit">登录</button>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码：
这里需要创建一个css目录，来存放css代码

blog_detail.css

/* 这个样式文件给博客详情页使用 */
.container-right .title{
    text-align: center;
    padding: 30px;
}
.container-right .date{
    text-align: center;
    padding: 10px;
    color: rgb(82, 153, 85);
}
.container-right .content p{
    text-indent: 2em;
    padding: 10px 30px;
}

blog_edit.css

/* 这个文件用来写博客编辑页的样式 */
.blog-edit-container{
    width: 1000px;
    height: calc(100% - 50px);
    /* background-color: orange; */
    margin: 0 auto;
}
.blog-edit-container .title{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#title{
    height: 40px;
    width: 895px;
    border: none;
    padding-left: 5px;
    font-size: 20px;
    border-radius: 5px;
    /* 去掉轮廓线，鼠标选中后黑圈 */
    outline: none;
    /* 设置背景半透明 */
    background-color: rgba(255, 255, 255, 0.7);
}
/* 获取到焦点 */
#title:focus{
    background-color: rgb(255, 255, 255);
}
#submit{
    height:40px;
    width:100px;
    color: white;
    background-color: orange;
    border-radius: 5px;
    border: none;
}
#submit:active{
    background-color: #666;
}
#editor{
    border-radius: 10px;
    /* 设置背景半透明没有生效
    editor 自身半透明 
    但是这里面的元素不是透明的 导致仍然看不到背景 */
    /* background-color: rgba(255, 255, 255, 0.8); */
    opacity: 80%;
}

blog_list.css

/* 给博客列表页实现样式 */
/* 设置整个博客的容器元素的样式*/
.blog{
    width: 100%;
    padding: 20px;
}
.blog .title{
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    padding: 10px;
}
.blog .date{
    text-align: center;
    color: rgb(82, 153, 85);
    padding: 10px;
}
.blog .desc{
    text-indent: 2em;

}
.blog a{
    /* a标签不方便设计样式 转成块级元素*/
    
    display: block;
    width: 120px;
    height: 40px;
    /* 设置水平居中 */
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;


    /* 设置一个边框 */
    border: 2px solid black ;

    /* 让文字水平居中 */
    text-align: center;
    text-decoration: none;
    color: black;
    /* 让文字垂直居中 */
    line-height: 40px;
    /* 给鼠标悬停加一个过度效果 */
    transition: all 0.8s;
    border-radius: 10px;
}
/* 设置一下让鼠标滑到按钮上有一个变化 */
.blog a:hover{
    color:white;
    background-color: #777;
}

login.css

/* 这个文件专门放登录页面的样式 */
.login-container{
    width: 100%;
    height: calc(100% - 50px);
    /* background-color: rgba(50,50,50,0.4); */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
}
.login-dialog{
    width: 400px;
    height: 330px;
    /* background-color: rgb(0,128,0); */
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}
.login-dialog h3{
    text-align: center;
    padding: 50px;
}
.login-dialog .row{
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
}
.login-dialog .row span{
    width: 100px;
    font-size: 18px;
}
#username,#password{
    width: 200px;
    height: 40px;
    border-radius: 5px;
    /* 去掉边框 */
    border: none;
    /* 放大字体 */
    font-size: 18px;
    padding-left: 5px;
}
#submit{
    width:300px;
    height: 30px;
    color: white;
    background-color: orange;
    border: none;
    border-radius: 10px;
}
#submit:active{
    background-color: #666;
}

common.css

/* 写样式的起手式，先去除浏览器的公共样式，并且设置border-box，避免元素盒子被内边距和边框撑大 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    /* html 是页面的最顶层元素，高度100%是相对于父元素来说高度是100% （和父元素一样高）
    对于 html 标签来说，父元素就是浏览器窗口，浏览器窗口多高，html就多高
    body 的父亲是 html ，body、html和浏览器窗口一样高*/
    /* 如果不设置高度，此时元素的默认高度取决于内部的内容 */
    height: 100%;

}
body{
    /* 相对路径的基准路径就是当前文件所在路径  */
    background-image:url(../image/bgt.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/* 实现导航栏的样式 */
.nav{
    /* 宽度百分之百 和父元素body一样宽 */
    /* 块级元素来说 默认就是width：100% */
    width: 100%;
    height: 50px;
    background-color: rgba(50,50,50,0.4);
    color: white;
    /* 导航栏里面的元素都是水平排列，弹性布局来设置 */
    display: flex;
    /* 垂直方向居中 */
    align-items: center;
}
.nav img{
    width: 40px;
    height: 40px;
    margin-left: 30px;
    margin-right: 10px;
    border-radius: 50%;
}
.nav a{
    color: white;
    text-decoration: none;
    /* 让a标签不要贴那么紧凑 加上一个内边距 使用外边距也行 
    内边距更好 内边距也是元素的内容，可以增大用户点击的面积*/
    padding: 0 10px;

}
.nav .spacer{
    width: 68%;
}
/* 编写页面主体样式 */
.container{
    width: 1000px;
    margin: 0 auto;
    /* calc css提供的函数 */
    height: calc(100% - 50px);
    /* 弹性布局 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: blue; */
}
.container-left{
    height: 100%;
    width: 200px;
    /* background-color: aquamarine; */
}
.container-right{
    height: 100%;
    width: 795px;
    /* background-color: brown; */
    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: 50%;
}
/* 用户名字 */
.card h3{
    text-align: center;
    /* 让文字和上下都有间距 */
    /* 使用内外边距均可 倾向于内边距 */
    padding: 10px;
}
/* 用户的 gitee 链接 */
.card a{
    /* a 标签是行内元素 不写 display text-align不显示*/
    text-align: center;
    /* 为了配合上述样式 设计成块级元素即可 */
    display: block;
    color: #777;
    text-decoration: none;
    padding: 10px;
}
.card .counter{
    /* 让里面的元素水平排列，使用弹性布局 */
    display: flex;
    justify-content: space-around;
    padding: 5px;
}

我们需要创建一个目录image用来存放我们的头像，背景等图片，所放地址如下图所示，路径一定要放对，这样才能访问到。
所在目录

Markdown编译器直接引入现成的嵌入到我们的页面
1、下载 editor.md 并且拷贝到项目目录中
下载地址：Editor.md官网
2、选择通过 github 下载
Github下载

3、将压缩包解压至对应的项目文件目录下，文件夹名字就写成 editor.md ，注意必须是这个名字，不能是其他的，否则会影响到后续我们代码的引用。

此外还需要安装另一个库，jQuery，直接在官网下载即可！

下载地址：jQuery mdn

对应下面这个界面：
jQuery

因为js 是需要通过网络来加载的. 期望内容尽量短,从而节省带宽minified 版本就是属于被压缩过的。

接着打开jquery的源码文件，直接复制粘贴到VSCode中，保存为jquery.min.js这个文件中。

注意：文章中的Lorem ipsum，中文又称“乱数假文”，是指一篇常用于排版设计领域的拉丁文文章。通常网站还没建设好时会出现这段文字。

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.

OK，到这里一个简单的前端博客系统到这里就结束啦！