【JavaEE】实现简单博客系统-前端部分

文件目录：

展示：

在这里插入图片描述

blog_list.html:

DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <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/灯塔.jpg" alt="">
        <div class="title">我的博客系统div>
        <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">
            <div class="card">
                <img src="image/goat.png" alt="">
                <h3>Ethanh3>
                <a href="https://github.com/">github地址a>
                <div class="counter">
                    <span>文章span>
                    <span>分类span>
                div>
                <div class="counter">
                    <span>2span>
                    <span>1span>
                div>
            div>
        div>
        <div class="container-right">
            <div class="blog">
                <div class="title">我的第一篇博客div>
                <div class="date">2023-11-6 12:00:00div>
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis repellendus voluptatum, reiciendis rem consectetur incidunt aspernatur eveniet excepturi magni quis sint, provident est at et pariatur dolorem aliquid fugit voluptatem.
                div>
                <a href="blog_detail.html?blogId=1">查看全文 >>a>
            div>
            <div class="blog">
                <div class="title">我的第二篇博客div>
                <div class="date">2023-11-6 12:00:00div>
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis repellendus voluptatum, reiciendis rem consectetur incidunt aspernatur eveniet excepturi magni quis sint, provident est at et pariatur dolorem aliquid fugit voluptatem.
                div>
                <a href="blog_detail.html?blogId=1">查看全文 >>a>
            div>

        div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

blog_detail.html:

DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <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/灯塔.jpg" alt="">
        <div class="title">我的博客系统div>
        <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">
            <div class="card">
                <img src="image/goat.png" alt="">
                <h3>Ethanh3>
                <a href="https://github.com/">github地址a>
                <div class="counter">
                    <span>文章span>
                    <span>分类span>
                div>
                <div class="counter">
                    <span>2span>
                    <span>1span>
                div>
            div>
        div>
        <div class="container-right">
            <h3>这是我的第一篇博客h3>
            <div class="date">2023-11-6 13:00:00div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae nulla, at deleniti rem ratione libero natus! Repellat totam pariatur eligendi cum quo. Eum ex similique, nemo facere minus vel est!p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aliquid esse soluta rem accusamus? Distinctio numquam qui beatae quos eveniet tenetur. Corrupti dolorem, id molestiae dolores facilis quos hic architecto.p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nihil alias unde ratione, quis, quam soluta atque eligendi quasi labore aliquam autem tenetur repellat? Amet ducimus iste perferendis a adipisci.p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae nulla, at deleniti rem ratione libero natus! Repellat totam pariatur eligendi cum quo. Eum ex similique, nemo facere minus vel est!p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aliquid esse soluta rem accusamus? Distinctio numquam qui beatae quos eveniet tenetur. Corrupti dolorem, id molestiae dolores facilis quos hic architecto.p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nihil alias unde ratione, quis, quam soluta atque eligendi quasi labore aliquam autem tenetur repellat? Amet ducimus iste perferendis a adipisci.p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae nulla, at deleniti rem ratione libero natus! Repellat totam pariatur eligendi cum quo. Eum ex similique, nemo facere minus vel est!p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aliquid esse soluta rem accusamus? Distinctio numquam qui beatae quos eveniet tenetur. Corrupti dolorem, id molestiae dolores facilis quos hic architecto.p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nihil alias unde ratione, quis, quam soluta atque eligendi quasi labore aliquam autem tenetur repellat? Amet ducimus iste perferendis a adipisci.p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae nulla, at deleniti rem ratione libero natus! Repellat totam pariatur eligendi cum quo. Eum ex similique, nemo facere minus vel est!p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aliquid esse soluta rem accusamus? Distinctio numquam qui beatae quos eveniet tenetur. Corrupti dolorem, id molestiae dolores facilis quos hic architecto.p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nihil alias unde ratione, quis, quam soluta atque eligendi quasi labore aliquam autem tenetur repellat? Amet ducimus iste perferendis a adipisci.p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae nulla, at deleniti rem ratione libero natus! Repellat totam pariatur eligendi cum quo. Eum ex similique, nemo facere minus vel est!p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aliquid esse soluta rem accusamus? Distinctio numquam qui beatae quos eveniet tenetur. Corrupti dolorem, id molestiae dolores facilis quos hic architecto.p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nihil alias unde ratione, quis, quam soluta atque eligendi quasi labore aliquam autem tenetur repellat? Amet ducimus iste perferendis a adipisci.p>
            div>
        div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

login.html:

DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <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/灯塔.jpg" alt="">
        <div class="title">我的博客系统div>
        <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>
            <form action="">
                <div class="row">
                    <span>用户名span>
                    <input type="text" id="username">
                div>
                <div class="row">
                    <span>密码span>
                    <input type="text" id="password">
                div>
                <div class="row">
                    <input type="submit" id="submit" value="登录">
                div>
            form>
        div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

blog_edit.html:

DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
    
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <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/灯塔.jpg" alt="">
        <div class="title">我的博客系统div>
        <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">
        <from action="">
            <div class="title">
                <input type="text" id="title-input">
                <input type="submit" id="submit">
            div>
            <div id="editor">

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

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

common.css:

/* 公共的样式 */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    height: 100%;
}

body {
    background-image: url("../image/小船.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
}

/* 导航栏 */
.nav {
    width: 100%;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
}
.nav title {
    font-size: 30px;
    color: white;
}
.nav img {
    width: 40px;
    height: 40px;
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 20px;
}
.nav a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
}
.nav .spacer {
    width: 70%;
}
.container {
    width: 1000px;
    margin: 0 auto;
    height: calc(100% - 60px);
    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;
    padding: 20px;
    overflow: auto;
}
.card {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 30px;
}
.card h3 {
    text-align: center;
    padding: 10px;
}
.card img {
    width: 140px;
    height: 140px;
    border-radius: 70px;
}
.card a {
    text-align: center;
    color: gray;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}
.card .counter {
    display: flex;
    padding: 5px;
    justify-content: space-around;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

blog_list.css:

.blog {
    padding: 20px;
}
.blog .title{
    font-size: 22px;
    text-align: center;
    font-weight: 900;
}
.blog .date {
    text-align: center;
    color: rgb(0, 128, 0);
    padding: 15px 0;
}
.blog,.desc {
    text-indent: 2em;
}
.blog a {
    /* 改成块级元素, 此时才能够设置尺寸 */
    display: block;
    width: 150px;
    height: 40px;
    border: 2px solid black;

    /* 把里面的文字改一下颜色, 和下划线 */
    color: black;
    text-align: center;
    text-decoration: none;

    /* 当文字的行高和元素高度一样的时候, 文字恰好是垂直居中的 */
    line-height: 40px;

    /* 水平居中 */
    margin: 10px auto;

    /* 加上背景切换的过渡效果, all 表示针对所有的变化都进行过渡. 2s 意思是过渡的时间是 2s */
    transition: all 0.4s;
}
.blog a:hover {
    background-color: gray;
    color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

blog_detail.css:

.container-right h3 {
    font-size: 22px;
    text-align: center;
    font-weight: 900;
    padding: 10px 0px;
}
.container-right .date {
    text-align: center;
    color: green;
    padding: 10px 0;
    
}
.container-right .content {
    text-indent: 2em;
    margin-bottom: 5px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

login.css:

.login-container {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-dialog {
    width: 500px;
    height: 350px;

    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}
.login-dialog h3 {
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    margin: 40px 0;
}
.login-container .row {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.row span {
    font-size: 20px;
    width: 60px;
}
.row #username {
    width: 400px;
    height: 40px;   
    font-size: 22px;
    text-indent: 10px;
}
.row #password {
    width: 400px;
    height: 40px; 
    font-size: 22px;
    text-indent: 10px;
} 
.row #submit {
    width: 150px;
    height: 40px;
    color: white;
    background-color: rgb(0, 145, 255);
    text-align: center;
    line-height: 40px;
    border: none;
    border-radius: 10px;

}
.row #submit:hover{
    background-color: gray;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

blog_edit.css:

.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}
.blog-edit-container .title {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}
/* 标题的输入框 */
#title-input {
    height: 40px;
    width: 900px;

    border-radius: 10px;
    border: none;
    font-size: 20px;
    text-indent: 10px;
    margin: 10px;
}

/* 提交按钮 */
#submit {
    height: 40px;
    width: 100px;

    border-radius: 10px;
    border: none;

    color: white;
    background-color: orange;
}

#submit:hover {
    background-color: gray;
}

.blog-edit-container form {
    height: 100%;
}

#editor {
    border-radius: 10px;
    /* background-color: rgba(255, 255, 255, 0.8); */
    /* 这个也是设置半透明. 会让子元素也跟着一起半透明 */
    opacity: 80%;
}
.blog-edit-container from {
    height: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

相关阅读:
【高级篇 / ZTNA】(7.0) ❀ 04. FortiClient 下载与安装 ❀ FortiGate 防火墙
 “购物返现积分兑换”——区块链思维的购物返利方式
 IPQ6010-Fast, reliable and secure wireless connectivity
STM32个人笔记-SDIO接口
 基于JAVA网络教学平台计算机毕业设计源码+系统+mysql数据库+lw文档+部署
 外观模式：简化复杂子系统的访问与使用
 如何开发出来一款解决抖音本地生活的软件营销工具？
为什么要替换 Object.defineProperty？
四级词汇词根联想记忆法乱序版
 基于py的网络路由实验
原文地址：https://blog.csdn.net/m0_68101404/article/details/134258090