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

news/2024/7/23 13:56:55 标签: java-ee, 前端, java

文件目录：在这里插入图片描述

展示：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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>Ethan</h3>
                <a href="https://github.com/">github地址</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-11-6 12:00:00</div>
                <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">查看全文 &gt;&gt;</a>
            </div>
            <div class="blog">
                <div class="title">我的第二篇博客</div>
                <div class="date">2023-11-6 12:00:00</div>
                <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">查看全文 &gt;&gt;</a>
            </div>

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

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>Ethan</h3>
                <a href="https://github.com/">github地址</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>这是我的第一篇博客</h3>
            <div class="date">2023-11-6 13:00:00</div>
            <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>

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>
        <!-- <a href="">注销</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>

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

</body>
</html>

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;
}

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;
}

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;
}

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;
}

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%;
}

http://www.niftyadmin.cn/n/5157373.html

相关文章

【C/C++】什么是POD（Plain Old Data）类型

【C/C++】什么是POD（Plain Old Data）类型

2023年11月6日&#xff0c;周一下午 目录 POD类型的定义标量类型POD类型的特点POD类型的例子整数类型&#xff1a;C 风格的结构体&#xff1a;数组&#xff1a;C 风格的字符串&#xff1a;std::array:使用 memcpy 对 POD 类型进行复制把POD类型存储到文件中&#xff0c;并从文…
阅读更多...
Redis：Hash应用场景（一）

Redis：Hash应用场景（一）

一、概述 Hash通过key-field-value结构实现了一个双层map的结构。可以应用于对象缓存。 就比如有一个user表&#xff1a; idnamebalance1abc1000 可以通过HMSET user 1:name def 1:balance 2000对两个缓存字段同时进行修改。 二、场景比较 还有一种方式是通过Object序列化成…
阅读更多...
MySQL的event的使用方法

MySQL的event的使用方法

MySQL的event的使用方法 一、事件定时策略 1、查看event事件开启状态 SHOW VARIABLES LIKE event_scheduler;如图&#xff0c;Value值 ON&#xff1a;打开&#xff0c;OFF&#xff1a;关闭。 2、设置event事件打开 SET GLOBAL event_scheduler ON;如果MySQL重启了&#x…
阅读更多...
亚马逊云科技发布完整端到端 AI 技术堆栈，力促生成式 AI 更加普惠

亚马逊云科技发布完整端到端 AI 技术堆栈，力促生成式 AI 更加普惠

AI 大模型已经深入各行业的场景应用&#xff0c;作为云技术巨头的亚马逊云科技在今年也发布了多个生成式 AI 相关的技术与服务。在今年 7 月 亚马逊云科技中国峰会上&#xff0c;亚马逊云科技也表示正在与全球超过 12 万的合作伙伴一同转型、构建 AIGC 生态。 2023 年的 10 月 …
阅读更多...
IDEA取消git对项目的版本控制

IDEA取消git对项目的版本控制

前言 前几天新建项目的时候不小心选了个git仓库&#xff0c;导致这个测试项目一直被git管理着。 解决办法 1 右键项目 选择打开资源目录 2 删除.git文件 把目录下的.git文件删掉 3 删除idea中的git管理 删除完.git文件后&#xff0c;进入idea&#xff0c;右下角会有这样的提…
阅读更多...
java ThreadPoolExecutor 线程池里有多个任务但是一直达不到最大线程数的原因

java ThreadPoolExecutor 线程池里有多个任务但是一直达不到最大线程数的原因

如果你的ThreadPoolExecutor线程池里有多个任务&#xff0c;但线程数一直达不到最大值&#xff0c;可能有以下几个原因&#xff1a; 任务数量不足&#xff1a;如果任务数量少于线程池的最大线程数&#xff0c;那么线程池就不会创建更多的线程。只有当任务队列满了&#xff0c;…
阅读更多...
Web3.0的测试题

Web3.0的测试题

任务&#xff1a; 在前端开发一个查询UI&#xff0c;查询当前用户账户的ETH余额和指定ERC20合约中的余额 目标&#xff1a; UI框架指定使用 MUI (https://mui.com)需要查询到当前账户的ETH余额并展示在UI界面上需要输入ERC20合约地址后&#xff0c;查询到到当前账户在此ERC20…
阅读更多...
Qt中Opencv转Qimage出现重影或者颜色不对

Qt中Opencv转Qimage出现重影或者颜色不对

废话不多说 在qt中opencv获取的图像转qimage时出现重影原因&#xff1a; 图像数据的内存对齐可能会导致画面重影&#xff0c;如果出现误差转换出来的图就会出现重影 解决办法&#xff1a; cv::Mat image_bgr cv::imread(“example.jpg”); cv::Mat image_aligned; cv::copyMak…
阅读更多...
最新文章

Copyright @ 2022~2023