【JavaEE】前后端分离实现博客系统（页面构建）

news2024/11/18 21:41:00

文章目录

  • 1 效果展示
    • 1.1 博客登录页面
    • 1.2 博客列表页面
    • 1.3 博客详情页面
    • 1.4 博客编辑页面
  • 2 页面具体实现
    • 2.1 博客列表页的实现
    • 2.2 博客详情页的实现
    • 2.3 博客登录页面的实现
    • 2.4 博客编辑页面的实现
  • 写在最后

1 效果展示

1.1 博客登录页面

用于实现用户的登录功能，并展示必要的信息。

在这里插入图片描述

1.2 博客列表页面

展示博客的标题，发布时间，摘要等内容，可以选择查看全文来获取博文的详细内容。

在这里插入图片描述

1.3 博客详情页面

用于展示博文的具体信息。

在这里插入图片描述

1.4 博客编辑页面

用于编辑博文与发布博文。

在这里插入图片描述

2 页面具体实现

2.1 博客列表页的实现

创建 blog_list.html，编写博客列表页面。

导航栏的具体实现

  • 导航栏包含头像，主页，写博客，注销及一些跳转；
  • spacer 空白元素，用于占位调整布局
  • 观察效果展示的四个页面，均有导航栏，该代码可以复用~
    <!-- 这是一个导航栏 -->
    <div class="nav">
        <img src="image/博客头像.jpg" alt="博客头像.jpg加载失败">
        <span>我的博客系统</span>
        <!-- 空白元素，用于占位调整布局 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

由于各个页面均有导航栏，因此导航栏的样式可以提取出来，构成一个css文件，方便其他页面引入样式。

创建 common.css，其余页面引入该样式

  • 清除浏览器默认样式；
  • 自行准备背景图，用于博客系统的背景；
  • 将 html 和 body 的高度设置为 100% ，使得背景高度和浏览器窗口高度一样；
  • 导航栏 nav 内部使用 flex 布局，方便排列 logo 和 按钮；
  • 该代码中也包含了个人信息和博客列表的样式。
/* 放置一些各个页面可能用到的公共样式 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 导航栏样式 */
.nav {
    height: 50px;
    background-color: rgba(51, 51, 51, 0.4);
    color: white;
    display: flex;
    /* 垂直居中 */
    align-items: center;
}

/* 头像圆形 */
.nav img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 30px;
    margin-right: 10px;
}

.nav .spacer {
    width: 70%;
}

.nav a {
    color: white;
    text-decoration: none; /* 去掉下划线 */
    padding: 0 10px;
}

/* 设置背景 */
html, body {
    height: 100%;
}

body {
    background: url("../image/background.jpg") no-repeat center center;
    background-size: cover;
}

/* 版心相关的样式 */
.container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
    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;
}

/* card相关的样式 */
.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;
}

.card a {
    /* a 默认是行内元素，行内元素很多边距不生效，简便起见，直接用块级元素去处理 */
    display: block;
    text-align: center;
    color: #999;
    padding: 10px;
    text-decoration: none;
}

.card .counter {
    display: flex;
    justify-content: space-around;
    padding: 5px;
}

实现版心，左侧用户信息，右侧博客列表

  • container 作为版心，实现整体居中对齐的效果；
  • 个人信息，博文列表的具体实现见代码注释。
    <!-- container作为页面的版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 表示整个用户区域 -->
            <div class="card">
                <img src="image/个人信息头像.png" alt="个人信息头像.png加载失败">
                <h3>小蒲七七</h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="right">
            <!-- .blog div 对应一个博客 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">
                    【零基础学C】初识C语言01
                </div>
                <!-- 博客发布时间 -->
                <div class="date">
                    2022-10-16 17:20:00
                </div>
                <!-- 博客摘要 -->
                <div class="desc">
                    第一个C语言程序数据类型变量、常量字符串+转义字符+注释选择语句循环语句函数数组操作符常见关键字define定义常量和宏指针结构体
                </div>
                <a href="#">查看全文 &gt;&gt;</a>
            </div>
    </div>

2.2 博客详情页的实现

创建 blog_detail.html，编写博客详情页面。

导航栏及个人信息部分与列表页的内容相同，直接复制代码即可。这里只对博客详情内容的代码编写进行说明。

  • 博客的内容整体放到 blog-content 中；
  • 博客标题使用 h3 标签；
  • 博客发布时间放到 date 中；
  • 博客正文使用 p 标签；
  • 读者也可以根据需要自己调整。
    <!-- 右侧内容详情 -->
    <div class="right">
        <!-- 使用该div展示博客内容 -->
        <div class="blog-content">
            <!-- 标题 -->
            <h3>【零基础学C】初识C语言01</h3>
            <!-- 博客发布时间 -->
            <div class="date">
                2022-10-16 17:20:00
            </div>
            <!-- 正文 -->
            <p>
                C语言是一门通用计算机编程语言，广泛应用于底层开发。C语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、
                产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。
            </p>
            <p>
                尽管C语言提供了许多低级处理的功能，但仍然保持着良好跨平台的特性，以一个标准规格写出的
                C语言程序可在许多电脑平台上进行编译，甚至包含一些嵌入式处理器（单片机或称MCU）以及超级电脑等作业平台。
            </p>
            <p>
                二十世纪八十年代，为了避免各开发厂商用的C语言语法产生差异，
                由美国国家标准局为C语言制定了一套完整的美国国家标准语法，称为ANSIC，作为C语言最初的标准。
                目前2011年12月8日，国际标准化组织（ISO）和国际电工委员会（IEC）发布的C11标准是C语言的第三个官方标准，
                也是C语言的最新标准，该标准更好的支持了汉字函数名和汉字标识符，一定程度上实现了汉字编程。
            </p>
        </div>
    </div>

blog_detail.css，博客详情页的样式文件

/* 博客详情页的样式 */
.blog-content {
    padding: 30px;
}

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

.blog-content .date {
    text-align: center;
    color: #fa8497;
    padding: 20px 0;
}

.blog-content p {
    text-indent: 2em;
    padding: 10px 0;
}

.right {
    /* 为right添加滚动条 */
    overflow: auto;
}

2.3 博客登录页面的实现

登录页面相对比较简单，需要注意的是，注销按钮在该页面没必要继续展示，其余导航栏代码与之前页面一致。

创建并编辑 blog_login.html，这里给出登录界面的核心代码

登录页面会话框

<!--登录页面会话框-->
<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>密&emsp;码</span>
            <input type="password" id="password">
        </div>
        <div class="row">
            <button>登录</button>
        </div>
    </div>
</div>

编辑 blog_login.css，实现登录页的样式

  • 使用 .row button:active 伪类选择器, 实现点击按钮时样式切换的效果
/* 登录界面样式文件 */

.login-container {
    width: 100%;
    height: calc(100% - 50px);

    /* 需要让里面的子元素，垂直水平居中，需要用flex布局 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container .login-dialog {
    width: 400px;
    height: 350px;
    border-radius: 10px;

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

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

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

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

#username, #password {
    width: 200px;
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    padding-left: 10px;
    border-radius: 10px;
    /* 去掉边框 */
    border: none;
    /* 去掉轮廓线 */
    outline: none;
}

.row button {
    width: 300px;
    height: 50px;
    border-radius: 10px;
    color: white;
    background-color: #fa8497;
    border: none;
    outline: none;
    /*padding: 10px;*/
}

.row button:active {
    background-color: #fc4c65;
}

2.4 博客编辑页面的实现

博客编辑页面涉及到一个 markdown 编辑器，这里我们使用 editor.md 来实现。在编辑页面引入即可~

什么是 editor.md ?
editor.md 是一个开源的页面 markdown 编辑器组件，官网参见: https://pandao.github.io/editor.md/，用法可以参考代码中的 examples 目录中的示例。

  1. 从官网下载压缩包，并解压，引入项目目录中，其目录结构如下图所示：
    在这里插入图片描述
  2. 引入 editor.md
    <!-- 引入 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>
  1. 初始化编辑器
    // 初始化编辑器
    var editor = editormd("editor", {
        // 这里的尺寸必须在这里设置，设置样式会被 editormd 自动覆盖
        width: "100%",
        // 设定编辑器高度
        height: "calc(100% - 50px)",
        // 编辑器的初始内容
        markdown: "# 在这里写下一篇博客",
        // 指定 editor.md 依赖的插件路径
        path: "editor.md/lib/"
    });

编辑 blog_edit.html

  • 整个编辑区放到 div.blog-edit-container 中，里面包含一个标题编辑区, 和内容编辑区；
  • 标题编辑区，包含一个 input，用来填写标题，以及一个 button 按钮用于提交；
  • 内容编辑区先创建一个 div#editor，并使用上述 editor.md 相关代码进行初始化。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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/博客头像.jpg" alt="博客头像.jpg加载失败">
    <span>我的博客系统</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" placeholder="在此输入文章标题">
        <button>发布文章</button>
    </div>
    <!-- 放置 md 编辑器 -->
    <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>

写在最后

 本文完整代码已上传 gitee，如有需要请自取：https://gitee.com/hxh2001/blog-system
 以上便是本文的全部内容啦！创作不易，如果你有任何问题，欢迎私信，感谢您的支持！下一节，我们将继续使用 JDBC、Servlet 等内容完成该博客系统的后端逻辑。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/398198.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2023年3月西安/杭州/深圳/东莞NPDP产品经理认证考试报名

2023年3月西安/杭州/深圳/东莞NPDP产品经理认证考试报名

产品经理国际资格认证NPDP是国际公认的唯一的新产品开发专业认证&#xff0c;集理论、方法与实践为一体的全方位的知识体系&#xff0c;为公司组织层级进行规划、决策、执行提供良好的方法体系支撑。 【认证机构】 产品开发与管理协会&#xff08;PDMA&#xff09;成立于1979年…
阅读更多...
什么是量子计算？

什么是量子计算？

什么是量子计算&#xff1f; 量子计算机仍处于起步阶段&#xff0c;正在影响已经在经典计算机上运行的新一代模拟&#xff0c;现在使用 NVIDIA cuQuantum SDK 进行加速。 在史蒂夫乔布斯 (Steve Jobs) 推出可以放入口袋的计算机之前 27 年&#xff0c;物理学家保罗贝尼奥夫 (P…
阅读更多...
[MySQL核心]2.select单表查询常见操作

[MySQL核心]2.select单表查询常见操作

MySQL核心--select单表查询常见操作select单表查询常见操作关于通配符*的使用结合MySQL运算符去重distinct空值查询union合并查询带in子查询(重点)limit分页查询排序order by分组group by笔试实践问题&#xff08;新浪&#xff09;select单表查询常见操作 关于通配符*的使用 项…
阅读更多...
记录实现操作系统互斥锁的一次思考

记录实现操作系统互斥锁的一次思考

今天实现操作系统互斥锁的时候遇到一个有趣的问题。 场景 有两个进程分别名为 taskA&#xff0c;taskB&#xff0c;采取时间片轮转的方式交替运行——也即维护了一个 ready_queue&#xff0c;根据时钟中断来 FIFO 地调度任务。它们的任务是无限循环调用 sys_print() 来打印自…
阅读更多...
华为OD机试题，用 Java 解【用户调度问题】问题

华为OD机试题，用 Java 解【用户调度问题】问题

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典使用说明 参加华为od机试，一定要注意不…
阅读更多...
Java基础常识

Java基础常识

目录 JDK和JRE和JVM分别是什么?有什么关系? 什么是字节码,采用字节码的好处是什么 ? Java 程序从源代码到运行的过程 为什么 Java语言"编译与解释并存" Java 和 C、Go 语言的区别&#xff0c;各自的优缺点&#xff1f; JDK和JRE和JVM分别是什么?有什么关系…
阅读更多...
Flink相关介绍

Flink相关介绍

简介 Flink的定位是&#xff1a;Apache Flink是一个框架和分布式处理引擎&#xff0c;如图所示&#xff0c;用于对无界和有界数据流进行有状态计算。Flink被设计在所有常见的集群环境运行&#xff0c;以内存执行速度和任意规模来执行计算。 Flink 框架处理流程应用场景 1、电…
阅读更多...
程序员应该如何学习算法？

程序员应该如何学习算法？

算法不是纯粹拼智商的&#xff0c;初学者不要上来直接撸《算法导论》&#xff01;这是血泪 建议一&#xff1a;首先你得会一门程序设计语言 建议二&#xff1a;基础知识&#xff0c;数据结构&#xff0c;推荐大家看一下《大话数据结构》这本书&#xff0c;这本书看过感觉&…
阅读更多...
华为OD机试用Python实现 -【连续字母长度 or 求第 K 长的字符串长度】 | 2023.Q1 A卷

华为OD机试用Python实现 -【连续字母长度 or 求第 K 长的字符串长度】 | 2023.Q1 A卷

华为OD机试题 本篇题目：连续字母长度 or 求第 K 长的字符串长度题目输入描述输出描述示例一输入输出说明示例二输入输出说明示例三输入输出说明Code代码编写逻辑最近更新的博客 华为od 2023 | 什么是华为od，od
阅读更多...
zookeeper使用场景实战

zookeeper使用场景实战

ZK java客户端 zk官方客户端没有和服务端分离&#xff0c;同一个jar文件&#xff0c;我们直接引入zk的maven即可。注意版本匹配兼容 Curator curator java语言编程的zk客户端框架&#xff0c;curator项目是现在zk客户端中使用最多。 将我们平时使用的zk服务开发进行了封装&a…
阅读更多...
【Linux】进程状态（阻塞、挂起、僵尸进程）

【Linux】进程状态（阻塞、挂起、僵尸进程）

文章目录1 阻塞与挂起1.1 阻塞1.2 挂起2 进程状态前言&#xff1a; 当我们在Windows下双击运行一个程序&#xff0c;或是在Linux下通过 ./ 加载运行一个程序&#xff0c;是否就代表对应的进程就一直处在运行状态呢&#xff1f;其实不然&#xff0c;一个进程有许多不同的状态。当…
阅读更多...
科技和女性的今天，《赛博格宣言》半个世纪前就预言了

科技和女性的今天，《赛博格宣言》半个世纪前就预言了

近几年&#xff0c;我们团队在实地探访各行各业数字化时&#xff0c;格外关注女性工作者的存在&#xff0c;一个强烈感受是&#xff1a;和女性主义理论中说的一样&#xff0c;因为有了数字化技术&#xff0c;工作对于体力、精力等要求不再苛刻&#xff0c;岗位上的女员工就多了…
阅读更多...
设计模式~门面(外观)模式(Facade)-08

设计模式~门面(外观)模式(Facade)-08

目录 &#xff08;1&#xff09;优点 &#xff08;2&#xff09;缺点 &#xff08;3&#xff09;使用场景 &#xff08;4&#xff09;注意事项&#xff1a; &#xff08;5&#xff09;应用实例&#xff1a; &#xff08;6&#xff09;源码中的经典应用 代码 外观模式&am…
阅读更多...
类和对象万字详解

类和对象万字详解

目录 一、面向对象与面向过程的区别 面向过程&#xff1a; 面向对象&#xff1a; 二、类的引入 class与struct爱恨情仇 class的语法 类的定义&#xff1a; 类的限定访问符 类的实例化 类对象模型 this指针的应用 三、封装 四、类的六个默认成员函数 构造函数 再谈…
阅读更多...
基于NMOSFET的电平转换电路设计

基于NMOSFET的电平转换电路设计

一、概述&#xff1a; 在单片机系统中&#xff0c;5V、3.3V是芯片常用的电平。而在传输协议中(如IIC、SPI等协议)&#xff0c;存在芯片与芯片的高电平和低电平定义的范围不一样&#xff0c;所以需要存在一个电平转换电路&#xff0c;来使芯片与芯片之间顺利的传输。 二、前置…
阅读更多...
JDK动态代理（tedu）（内含源代码）

JDK动态代理（tedu）（内含源代码）

JDK动态代理&#xff08;tedu&#xff09;&#xff08;内含源代码&#xff09; 源代码下载链接地址&#xff1a;https://download.csdn.net/download/weixin_46411355/87546187 目录JDK动态代理&#xff08;tedu&#xff09;&#xff08;内含源代码&#xff09;源代码下载链接…
阅读更多...
vue2学习笔记

vue2学习笔记

文章目录1. 初识Vue2. 模板语法3. 数据绑定4. el与data的两种写法5. Vue中的MVVM6. 数据代理Object.defineProperty方法何为数据代理Vue中的数据代理7. 事件处理事件的基本使用事件修饰符键盘事件8. 计算属性姓名案例_插值语法实现姓名案例_methods实现姓名案例_计算属性实现姓…
阅读更多...
dp-过河卒

dp-过河卒

题目描述 如图，A 点有一个过河卒，需要走到目标 B 点。卒行走规则：可以向下、或者向右。同时在棋盘上的 C 点有一个对方的马，该马所在的点和所有跳跃一步可达的点称为对方马的控制点。 例如上图
阅读更多...
【HashMap】| 深度剥析Java SE 源码合集Ⅱ | 你会吗？

【HashMap】| 深度剥析Java SE 源码合集Ⅱ | 你会吗？

目录一. &#x1f981; HashMap介绍1.1 特点1.2 底层实现二. &#x1f981; 结构以及对应方法分析2.1 结构组成2.1.1 成员变量2.1.2 存储元素的节点类型2.1.2.1 链表Node类2.1.2.2 树节点类2.1.2.3 继承关系2.2 方法实现2.2.1 HashMap的数组初始化2.2.2 计算hash值2.2.3 添加元…
阅读更多...
HTML URL

HTML URL

HTML 统一资源定位器 (Uniform Resource Locators) URL 是一个网页地址。 URL 可以由字母组成&#xff0c;如 "w3cschool.cn"&#xff0c;或互联网协议&#xff08;IP&#xff09;地址&#xff1a; 120.79.88.157。大多数人进入网站使用网站域名来访问&#xff0c;因…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023