1. Toy模板网首页
  2. > Toy博客

前端页面项目——博客系统

9月前 作者：Fly upward 分类：Toy博客 阅读(42) 违法举报

这篇具有很好参考价值的文章主要介绍了前端页面项目——博客系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

1.实现博客列表页

1.1 实现导航栏

1.2 实现中间版心

 1.3 实现个人信息

 1.4 实现博客列表

2. 实现博客正文页

 3. 实现博客登陆页

 4. 实现博客编辑

4.1 实现编辑区

4.2  引入编辑器

展示

1）登录页面

前端页面项目——博客系统

2）博客列表页

前端页面项目——博客系统

3）博客详情页

 前端页面项目——博客系统

 4）博客编辑页

前端页面项目——博客系统

，项目所需目录表

前端页面项目——博客系统

1.实现博客列表页

创建 blog_list.html, 编写博客列表页

1.1 实现导航栏

编辑 blog_list.html, 创建导航栏的 html 代码。
导航栏里面包含 logo, 标题 , 以及一些按钮 ( 跳转链接 )。
为了实现左右排列 , 在 logo 和 按钮 之间加一个 spacer 作为占位器。
1）先将页面需要得创建好
其中主页和写博客两个标签都加上对于的网址，方面跳转，后面的也一样 
<!-- 导航栏 -->
    <div class="nav">
        <img src="image/deng.jpg" alt="">
        <span>我的博客系统</span>
        <!-- 空白元素, 用来占位置 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

这是页面展示效果

前端页面项目——博客系统

 2）对页面进行排版设计

创建一个common.css 用来存放整个博客系统的页面设计代码，同时要将common.css引入blog_list.html


<head>
    <link rel="stylesheet" href="css/common.css">
</head>

编辑common.css  ，先对照导航栏的内容进行设计

/* 放置一些各个页面都会用到的公共样式 */

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

.nav {
    width: 100%;
    /* 此处没设计稿, 具体的尺寸取决于我自己的喜好 */
    height: 50px;
    background-color: rgba(51, 51, 51, 0.4);
    color: white;
    /* 导航栏内部的内容, 都是一行排列的. 就需要使用 flex 布局来进行操作 */
    display: flex;
    /* 实现子元素垂直居中效果 */
    align-items: center;
}

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

.nav .spacer {
    /* 相对于父元素的宽度, 如果父元素(.nav) 宽度是 1000px, 此时 .spacer 就是 700px */
    width: 70%;
}

.nav a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
}

排版效果如下：前端页面项目——博客系统

 3）给页面加背景

直接在 common.css 下添加背景图和设计 
/* 给整个页面加上背景图 */

html,
body {
    height: 100%;
}

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

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

效果展示 

前端页面项目——博客系统

1.2 实现中间版心

 版心设计有两个区域。.

左侧是个人信息。右侧是博客列表

1）编辑 blog_list.html

container 作为版心, 实现居中对齐的效果

<!-- 这里的 .container 作为页面的版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 表示整个用户信息区域. -->
            <div class="card">

            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="right">

        </div>
    </div>

2）编辑  common.css


.container {
    /* 当前版心并不是和窗口一样宽的 */
    width: 1000px;
    height: calc(100% - 50px);
    /* 水平居中 */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.container .left {
    height: 100%;
    width: 200px;
    background-color: rgb(0, 128, 49);
}

.container .right {
    height: 100%;
    width: 795px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    /* 内容滚动条 */
    overflow: auto;
}

 效果展示

前端页面项目——博客系统

 1.3 实现个人信息

1）编辑 blog_list.html
把个人信息放到一个 .card div 中 .
个人信息中包含 头像 (img), 用户名 (h3), 用户的 github (a)。 
 <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 表示整个用户信息区域. -->
            <div class="card">
                <img src="image/wen.jpg" alt="">
                <h3>Fly Upward</h3>
                <a href="https://gitee.com/dafei-cloud">gitee 地址</a>
            </div>
        </div>

刚插入信息的效果

前端页面项目——博客系统

2） 编辑 common.css，对个人信息卡片进行排版

/* 实现 card 部分的样式 */

.card {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    /* 通过这里的内边距, 就可以让头像居中 */
    /* 这里设置的 30px 意思是四个方向, 都是 30px */
    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;
    text-decoration: none;
    color: #999;
    padding: 10px;
}

排版之后的效果

前端页面项目——博客系统

 1.4 实现博客列表

1）编辑 blog_list.html
每个博客使用 div.blog 来表示 .
每个博客中包含标题 , 发布时间 , 描述 , 查看全文按钮 .
此处先在 查看全文按钮处 加入博客全文的连接，后面实现即可跳转 
<div class="right">
            <!-- .blog 就对应一个博客 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">
                    我的第一篇博客
                </div>
                <!-- 博客发布时间 -->
                <div class="date">
                    2022-05-10 20:00:00
                </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="../博客系统/blog_detail.html">查看全文 &gt;&gt; </a>
            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">
                    我的第二篇博客
                </div>
                <!-- 博客发布时间 -->
                <div class="date">
                    2022-05-12 20:00:00
                </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="../博客系统/blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
        </div>

 效果展示

前端页面项目——博客系统

2） 创建 blog_list.css

这一部分是单独设计博客列表页面的

使用伪类选择器 .blog .detail:hover , 实现光标悬停时修改样式的功能 .
给 .blog .detail 中加上过度效果 transition: all 0.3s ; 使悬停的样式改变更逼真 
/* 这个文件中专门写和博客列表页相关的样式 */

.blog {
    width: 100%;
    /* 高度如果不设置, 就取决于里面的内容高度的综合 */
    padding: 20px;
}

.blog .title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    padding: 10px 0;
}

.blog .date {
    /* 日期居中 */
    text-align: center;
    color: rgb(15, 100, 56);
    /* 上下内边距10px，左右0 */
    padding: 10px 0;
}

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

.blog a {
    /* 设置成块级元素, 方便设置尺寸和边距 */
    display: block;
    width: 140px;
    height: 40px;
    margin: 10px auto;
    border: 2px black solid;
    color: black;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    /* 如果想让变化变的柔和一些, 可以加上过渡效果 */
    transition: all 0.5s;
}

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

效果展示

前端页面项目——博客系统

2. 实现博客正文页

1）创建 blog_detail.htm

其中博客正文页的导航栏、个人信息卡片和右侧版心是和博客列表页一样的，只需要直接复制过来即可。

<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">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/boog_detail.css">
    <title>博客详情页</title>
</head>

<body>
    <!-- 这是导航栏 -->
    <div class="nav">
        <img src="image/deng.jpg" alt="">
        <span>我的博客系统</span>
        <!-- 空白元素, 用来占位置 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>
    <!-- 这里的 .container 作为页面的版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 表示整个用户信息区域. -->
            <div class="card">
                <img src="image/wen.jpg" alt="">
                <h3>Fly Upward</h3>
                <a href="https://gitee.com/dafei-cloud">gitee 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="right">
            
            
        </div>
    </div>
</body>
2）实现博客正文
编辑 blog_detail.htm。
博客内容中包含博客标题 (h3), 博客时间 (div.date), 博客正文 (p)
将正文编辑在div.right 标签内 
<!-- 右侧内容详情 -->
        <div class="right">

            <!-- 使用这个 div 来包裹整个博客的内容详情 -->
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 博客的时间 -->
                <div class="date">2022-05-10 20:00:00</div>
                <!-- 正文 -->
                <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. Quaerat vel omnis consectetur reprehenderit velit, mollitia perspiciatis porro natus sit iure laudantium rem quas quae. Perferendis mollitia sint aut rerum minima?
                </p>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis aspernatur corporis autem nisi, aliquid exercitationem perferendis, repellat sequi labore ad expedita itaque quisquam aperiam? Voluptatem numquam cupiditate exercitationem quis earum.
                </p>
                <p>
                    从今天开始, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis veniam dolorem modi, sunt quo rem facere ut dolores inventore ratione nemo provident quae eius adipisci quidem facilis quod. Maxime, nam?
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat vel omnis consectetur reprehenderit velit, mollitia perspiciatis porro natus sit iure laudantium rem quas quae. Perferendis mollitia sint aut rerum minima?
                </p>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis aspernatur corporis autem nisi, aliquid exercitationem perferendis, repellat sequi labore ad expedita itaque quisquam aperiam? Voluptatem numquam cupiditate exercitationem quis earum.
                </p>

            </div>
        </div>

效果如下前端页面项目——博客系统

 3）对正文进行排版

创建blog_detail.css

并将blog_detail.css 引入blog_detail.htm，在上面创建 blog_detail.htm 时，已经提前引入文件的，现在只需编辑保存即可使用。


/* 正文容器 */

.blog-content {
    padding: 30px;
}


/* 标题 */

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


/* 日期 */

.blog-content .date {
    text-align: center;
    color: rgb(0, 128, 0);
    padding: 20px 0;
}


/* 正文锻炼 */

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

效果展示

由于在设置common.css时已经加入了/* 内容滚动条 */  overflow: auto;所以可以看到下面右边有个灰色的滚动条

前端页面项目——博客系统

 3. 实现博客登陆页

1）创建 blog_login.html

引入导航栏、引入样式 common.css 
  <!-- 这是导航栏 -->
    <div class="nav">
        <img src="image/deng.jpg" alt="">
        <span>我的博客系统</span>
        <!-- 空白元素, 用来占位置 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <!-- 注销按钮没必要在登录页面展示 -->
        <!-- <a href="#">注销</a> -->
    </div>
<link rel="stylesheet" href="css/common.css">

2）实现版心

    <div class="login-container">
        <div class="login-dialog">
            
        </div>
    </div>

创建blog_login.css 来对登录页面进行排版，并引入blog_login.html 中

<link rel="stylesheet" href="css/blog_login.css">

先将登录区域设计好


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

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

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

效果展示

前端页面项目——博客系统

 3）实现登录信息卡片

编辑 blog_login.html
登陆框整体放倒 div.login-dialog 中 .
内部包含三个行 , 使用 div.row 表示 .
每个行里分别包含 , 用户名输入框 , 密码输入框 , 提交按钮。 
  <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">
                <button>提交</button>
            </div>
        </div>

    </div>

效果展示

前端页面项目——博客系统

 4）排版登录卡片

编辑blog_login.css

.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 {
    /* 把 span 转成块级元素, 方便设置后续尺寸 */
    display: block;
    width: 100px;
    font-weight: 700;
}

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

.row button {
    width: 300px;
    height: 50px;
    border-radius: 10px;
    color: white;
    background-color: rgb(0, 128, 0);
    border: none;
    outline: none;
    margin-top: 50px;
}

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

效果展示

前端页面项目——博客系统

 4. 实现博客编辑

1）创建 blog_edit.html

引入导航栏、引入引入样式 common.css

 <!-- 这是导航栏 -->
    <div class="nav">
        <img src="image/deng.jpg" alt="">
        <span>我的博客系统</span>
        <!-- 空白元素, 用来占位置 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>
 <link rel="stylesheet" href="css/common.css">

4.1 实现编辑区

1）编辑 blog_edit.html
整个编辑区放到 div.blog-edit-container 中。
里面包含一个标题编辑区 , 和内容编辑区。
标题编辑区 , 包含一个 input, 用来填写标题 , 以及一个 button 按钮用于提交。
内容编辑区先创建一个 div#editor, 后面将使用 editor.md 进行初始化。 
<!-- 包裹整个博客编辑页内容的顶级容器 -->
    <div class="blog-edit-container">
        <div class="title">
            <input type="text" placeholder="在此处输入标题">
            <button>发布文章</button>
        </div>
        <!-- 放置 md 编辑器 -->
        <div id="editor">

        </div>
    </div>
2）创建 blog_edit.css
#editor 需要使用 opacity: 80% ; 设置透明度 . 如果直接使用 background - color 后面会被
editor.md 给覆盖掉。 
.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

.blog-edit-container .title {
    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-edit-container .title input {
    width: 895px;
    height: 40px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-size: 22px;
    line-height: 40px;
    padding-left: 10px;

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

.blog-edit-container .title button {
    width: 100px;
    height: 40px;
    border-radius: 10px;
    color: white;
    background-color: orange;
    border: none;
    outline: none;
}

.blog-edit-container .title button:active {
    background-color: #666;
}

#editor {
    border-radius: 10px;

    /* background-color: rgba(255, 255, 255, 0.8); */
    opacity: 80%;
}
效果展示
前端页面项目——博客系统

4.2  引入编辑器

1) 下载 editor.md

从官网上下载到压缩包并解压（浏览器搜索 editor.md 就可以了），然后将文件放到项目的目录中

前端页面项目——博客系统

 2) 引入 editor.md依赖

在blog_edit.html 中引入

<!-- 引入 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>

3）创建 js

js/jquery.min.js

先在项目目录下创建js文件夹，然后再里面创建 jquery.min.js 文件

浏览器搜索jQuery.cdn 然后按下面的操作，最后复制到 jquery.min.js 文件里面

前端页面项目——博客系统

 4）初始化 editor.md

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

 效果展示

可以正常显示并编辑 

前端页面项目——博客系统文章来源地址https://www.toymoban.com/news/detail-408873.html

到了这里，关于前端页面项目——博客系统的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • SSM项目前后端分离+IDEA运行环境（含前端源码）（个人博客系统）

    SSM项目前后端分离+IDEA运行环境（含前端源码）（个人博客系统）

    目录  后端项目环境配置 1、创建一个SpringBoot项目，添加MyBatis框架和数据库MySQL驱动依赖 2、配置项目文件：application.yml 3、创建数据库表 4、创建分层结构目录 返回统一数据格式  创建统一数据格式返回类：AjaxResult 创建实现统一数据返回的保底类：ResponseAdvice 统一处理 登录

    2024年02月13日
    浏览(72)
  • 从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录？

    从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录？

    接上一节：从零用VitePress搭建博客教程(4) – 如何自定义首页布局和主题样式修改？ 上一节其实我们也简单说了自定义页面模板，这一节更加详细一点说明，开始之前我们要知道在vitePress中，.md的文件是可以直接编写vue的代码的。 比如我们现在来自定义一个前端网址导航页面

    2024年02月08日
    浏览(68)
  • 博客园页面展示--前端及样式代码

    博客园页面展示--前端及样式代码

    这是一个博客园的首页面的展示前端代码和样式代码 样式代码CSS采用外部链接，建好文件直接复制运行vscode即可，话不多说，直接上代码 前端代码如上所示，简单编写了几个模块，下面是CSS样式代码 样式代码中，方便学习，添加了较多的  完毕。

    2023年04月22日
    浏览(46)
  • 【项目实战】博客系统设计与实现

    【项目实战】博客系统设计与实现

    1.项目需求 前端：展示文章，文章分类，评论，用户登录。 后端 ：系统管理：用户管理，菜单管理，角色管理。内容管理：文章管理，分类管理，标签管理  2.总述  此项目为Springboot项目，前后端分离，典型的单体架构，主要功能是对文章，分类评论 等业务进行管理，同时

    2024年02月07日
    浏览(38)
  • 项目实战 — 博客系统③ {功能实现}

    项目实战 — 博客系统③ {功能实现}

    目录  一、编写注册功能 🍅 1、使用ajax构造请求（前端） 🍅 2、统一处理         🎄 统一对象处理         🎄 保底统一返回处理          🎄 统一异常处理  🍅 3、处理请求 二、编写登录功能  🍅 1、使用ajax构造请求 🍅 2、处理请求         🎄 创建实体类    

    2024年02月12日
    浏览(56)
  • 【Servlet综合项目练习】实现一个简单的博客系统~

    【Servlet综合项目练习】实现一个简单的博客系统~

    目录 🌟一、数据库设计部分 1、建表分析：系统中一共要实现几张表？  2、开始建表 🌟二、大概框架与实现功能 🌟 三、代码实现部分 🌈前言1：工具类的实现（utils包下） 1、数据库连接的工具类 2 、 用户信息判空的工具类 3、判断当前用户是否已经登录的工具类 🌈前

    2024年02月15日
    浏览(35)
  • HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

    HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

    登录页面 门户页面 博客页面 技术选取: HTML/CSS + VUE2 + ElementUI(Version - 2.15.14) 编程软件: VSCode 环境配置与搭建 安装指令 ELement 在 node 下载后，会发现 node_modules/element-ui 文件夹,直接复制到本地,之后按照文件路径引用并配置 [1]ElementUI - 2.15.14官网 [2] 获取图片网址 [3] 登录页面获

    2024年02月05日
    浏览(72)
  • 【个人博客系统网站】框架升级 · 工程目录 · 数据库设计

    【个人博客系统网站】框架升级 · 工程目录 · 数据库设计

    【JavaEE】进阶 · 个人博客系统（1） 标准项目目录： controller ，前后端交互控制器，接受请求，[处理请求]，调用service，将响应返回给前端 service ，调用数据持久层mapper层 mapper ，进行数据库操作 model ，实体类 common ，公共类，Utils工具类 utils是“utilities”的缩写,即工具、实

    2024年02月10日
    浏览(46)
  • 博客系统（页面设计）

    博客系统（页面设计）

    目录 一、学习计划 二、前期工作 三、列表页设计（重点掌握） 1.设计背景图 1.1 common.css 2. 编写导航栏 2.1 image 2.2 blogging.html 2.3 common.css 3. 实现页面的正文（版心） 3.1 blogging.html 3.2 common.css 4. 实现个人信息 4.1 blogging.html 4.2 common.css 代码 5.实现博客列表 5.1 blogging.html 5.2

    2024年02月04日
    浏览(47)
  • 博客系统的页面设计

    博客系统的页面设计

    博客列表页 博客详情页 博客登录页 博客编辑页 主要分成四个页面: 博客列表页 显示出都有哪些博客 博客详情页 展示博客的详细正文 博客登录页 进行登录操作 博客编辑页 有一个 markdown 编译器,可以编写博客内容 在这里,我们在给body设计背景图 但是此时body的高度是0 需要给

    2024年02月07日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包