【JavaWeb项目】简单搭建一个前端的博客系统

最新推荐文章于 2023-11-27 10:06:30 发布
最新推荐文章于 2023-11-27 10:06:30 发布
阅读量879 收藏 5
点赞数 1
分类专栏： JavaWeb 文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61341342/article/details/128994218
版权

博客系统项目

本项目主要分成四个页面:

  1. 博客列表页
  2. 博客详情页
  3. 登录页面
  4. 博客编辑页

该系统公共的CSS样式
common.css

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

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

/* 给整个页面加上背景 */
html, body{
    height: 100%;
}

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

.nav {
    width: 100%;
    /* 一般来说这里的详细尺寸，都是设计稿中已经标准清楚了 */
    height: 50px;

    background-color: rgba(0, 0, 0, 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是800px */
    width: 80%;
}

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

/* 接下来是版心相关的样式 */
.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(128, 0, 0); */
}

.container .right {
    height: 100%;
    width: 795px;
    /* background-color: rgb(0, 128, 0); */
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;

    overflow: auto;
}

/* 接下来实现 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;
    text-decoration: none;
    color: #999;
    padding: 10px;
}

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

博客列表页

博客列表页：显示了当前系统中都有哪些发布出来的博客

在这里插入图片描述
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/log.jpg" alt="">
        <span>我的博客系统</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="left">
            <!-- 表示整个用户信息区 -->
            <div class="card">
                <img src="image/2.jpg" alt="">
                <h3>摸鱼王胖嘟嘟</h3>
                <a href="#">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">
            <!-- .blog就对应一个博客 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">
                    我的第一篇博客
                </div>
                <!-- 博客发布时间 -->
                <div class="date">
                    2023-02-11 18:26:00
                </div>
                <!-- 博客摘要 -->
                <div class="desc">
                    从今天起，我要认真敲代码. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque exercitationem, ut doloribus blanditiis, eveniet earum culpa accusamus rem eum cum deleniti, quisquam expedita distinctio tempora quaerat adipisci officia esse reprehenderit.
                </div>
                <a href="#">查看全文 &gt;</a>
            </div>
            <!-- .blog就对应一个博客 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">
                    我的第一篇博客
                </div>
                <!-- 博客发布时间 -->
                <div class="date">
                    2023-02-11 18:26:00
                </div>
                <!-- 博客摘要 -->
                <div class="desc">
                    从今天起，我要认真敲代码. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque exercitationem, ut doloribus blanditiis, eveniet earum culpa accusamus rem eum cum deleniti, quisquam expedita distinctio tempora quaerat adipisci officia esse reprehenderit.
                </div>
                <a href="#">查看全文 &gt;></a>
        </div>
    </div>
</body>
</html>

blog_list.css

/* 专门写博客列表页 */

.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(18, 141, 18);
    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-color: #333;
    color: #fff;
}

博客详情页

博客详情页 ：显示了当前博客的详细信息。
在这里插入图片描述
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/log.jpg" alt="">
        <span>我的博客系统</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="left">
            <!-- 表示整个用户信息区 -->
            <div class="card">
                <img src="image/2.jpg" alt="">
                <h3>摸鱼王胖嘟嘟</h3>
                <a href="#">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 class="blog-content">
                <!-- 博客标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 博客的时间 -->
                <div class="date">2023-02-12 10:40:00</div>
                <!-- 正文 -->
                <p>
                    从今天开始，我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam dolorem iure facilis accusantium quis nemo quibusdam atque mollitia earum, iusto veniam soluta voluptate modi molestias magni illo molestiae et beatae!
                </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, placeat pariatur quo sapiente corporis sunt sequi cumque cum delectus saepe dolores assumenda dolorem explicabo, iure suscipit quis itaque eveniet blanditiis?</p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi repellat dicta perspiciatis fugit ullam velit illo harum obcaecati dignissimos tenetur officiis ab, vitae at quibusdam voluptatum voluptas hic magnam perferendis.
                </p>
                <p>
                    从今天开始，我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam dolorem iure facilis accusantium quis nemo quibusdam atque mollitia earum, iusto veniam soluta voluptate modi molestias magni illo molestiae et beatae!
                </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, placeat pariatur quo sapiente corporis sunt sequi cumque cum delectus saepe dolores assumenda dolorem explicabo, iure suscipit quis itaque eveniet blanditiis?</p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi repellat dicta perspiciatis fugit ullam velit illo harum obcaecati dignissimos tenetur officiis ab, vitae at quibusdam voluptatum voluptas hic magnam perferendis.
                </p>
                <p>
                    从今天开始，我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam dolorem iure facilis accusantium quis nemo quibusdam atque mollitia earum, iusto veniam soluta voluptate modi molestias magni illo molestiae et beatae!
                </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, placeat pariatur quo sapiente corporis sunt sequi cumque cum delectus saepe dolores assumenda dolorem explicabo, iure suscipit quis itaque eveniet blanditiis?</p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi repellat dicta perspiciatis fugit ullam velit illo harum obcaecati dignissimos tenetur officiis ab, vitae at quibusdam voluptatum voluptas hic magnam perferendis.
                </p>
                <p>
                    从今天开始，我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam dolorem iure facilis accusantium quis nemo quibusdam atque mollitia earum, iusto veniam soluta voluptate modi molestias magni illo molestiae et beatae!
                </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, placeat pariatur quo sapiente corporis sunt sequi cumque cum delectus saepe dolores assumenda dolorem explicabo, iure suscipit quis itaque eveniet blanditiis?</p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi repellat dicta perspiciatis fugit ullam velit illo harum obcaecati dignissimos tenetur officiis ab, vitae at quibusdam voluptatum voluptas hic magnam perferendis.
                </p>
                <p>
                    从今天开始，我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam dolorem iure facilis accusantium quis nemo quibusdam atque mollitia earum, iusto veniam soluta voluptate modi molestias magni illo molestiae et beatae!
                </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, placeat pariatur quo sapiente corporis sunt sequi cumque cum delectus saepe dolores assumenda dolorem explicabo, iure suscipit quis itaque eveniet blanditiis?</p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi repellat dicta perspiciatis fugit ullam velit illo harum obcaecati dignissimos tenetur officiis ab, vitae at quibusdam voluptatum voluptas hic magnam perferendis.
                </p>
            </div>
        </div>
    </div>
</body>
</html>

blog_detail.css

/* 博客详情页使用的样式 */

.blog-content {
    padding: 30px;
}

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

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

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

登录页面

登陆页 ：包含了一个登录框，输入用户名，密码，登录按钮。
在这里插入图片描述
blog_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/blog-login.css">
</head>
<body>
    <!-- 这是导航栏 -->
    <div class="nav">
        <img src="image/log.jpg" alt="">
        <span>我的博客系统</span>
        <!-- 空白元素，用来占位置 -->
        <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>
            <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>
</body>
</html>

blog_login.css

/* 登录页面的专用样式文件 */

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

    /* 需要让里面的子元素垂直水平居中 */
    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;
}

.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;
    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: rgb(0,128,0);
    border: none;
    outline: none;
    margin-top: 50px;
}

.row button:active {
    background-color: gray;
}

博客编辑页

博客编辑页： 包括一个输入框，Markdown编辑器(使用第三方组件)
在这里插入图片描述
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">
    <!-- 引入 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/log.jpg" alt="">
        <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">
            <button>发布文章</button>
        </div>
        <!-- 放置 md 编辑器 -->
        <div id="editor">

        </div>
    </div>

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

blog_edit.css

/* 博客编辑页的专用的样式文件 */

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

项目所需的图片

在这里插入图片描述

摸鱼王胖嘟嘟
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
一个简单入门的JavaWeb项目
07-14
摆脱（My）Eclipse，逐步手动搭建JavaEE项目，命令行轻松编译，轻松部署到Tomcat。代码包括连接Mysql，建立Servlet；Jar包包括Mysql驱动包和Servlet包。文件内含：开发时的项目和部署后的项目。希望对下载的人有用，谢谢。
【JavaWeb项目】博客系统
X_H学Java的博客
09-20 6925
本文介绍了博客系统的开发设计，从登陆页面，博客列表页面，博客详情页面，博客编辑页面，以及注销功能展开设计，前端使用ajax发送http请求，后端使用Servlet进行相关业务处理，数据库使用Mysql保存数据，以此来进一步加强对Web开发的学习
个人博客-javaWeb项目
weixin_44252126的博客
08-14 1413
个人博客项目后端实现
一个简单的javaweb小项目(适合新手上手)
xfengaa的博客
10-05 6746
案例说明:学习完javaweb的所有技术栈后用来上手的小项目有，用到的技术栈有jsp+JDBC+servlet，使用的工具是idea2022版+tomcat8.0.53。3.人员管理(在此界面可以进行人员信息的修改)4.任务管理(此界面可以进行任务的修改删除)6.退出系统，返回登录界面。
创建JavaWeb简单项目（超级详细、一看就会）—— 1
z15839280234的博客
04-25 4702
本文简单的介绍了JavaWeb和如果构建我们的第一个JavaWeb项目
JavaWeb项目-医疗管理系统（Vue.js、Element UI 、MySQL和 Servlet ）
最新发布
04-24
本课程将以 JavaWeb 项目为例，系统地讲解需求分析与数据库设计，同时涵盖前端原型界面搭建和后端逻辑代码编写。该项目将采用 Vue.js、Element UI 和 Servlet 等技术进行构建，实现完整的医疗管理系统功能。整体项目...
是一个通用JavaWeb项目骨架
12-04
是一个通用JavaWeb项目骨架， 积极在探索使用Java、Web等一系列技术，搭建开发高性能、高可拓展性、高可维护性，高安全性的web项目； 以及Web前端模块化、组件化开发，与后台最佳的交互；以及探索使用NoSQL、与SQL...
智慧校园JavaWeb基于ssm框架搭建心理咨询预约系统源码.zip
07-05
智慧校园JavaWeb基于ssm框架搭建心理咨询预约系统源码.zip 该项目是个人毕设项目，答辩评审分达到95分，代码都经过调试测试，确保可以运行！欢迎下载使用，可用于小白学习、进阶。 该资源主要针对计算机、通信、自动...
个人博客网站项目资料（全）
05-29
5、网站搭建全部教学视频 6、数据库文件，导入navcat即可运行 7、项目源码（全），导入idea等待安装完插件即可运行 8、在服务器（Linux）上安装jdk和mysql视频教程 9、在服务器上配置网站项目，持续运行下去 B站...
Java项目源码_ssm_Javaweb仓库管理系统项目源码.rar
03-27
**Java项目源码_ssm_Javaweb仓库管理系统项目源码.rar** 本资源为一个基于Java Web技术的仓库管理系统项目源码，采用SSM（Spring + Spring MVC + MyBatis）框架进行开发。系统功能完善，易于二次开发定制，可满足...
300套JavaWeb项目，拿去当毕业设计简直太爽了
liqz666的博客
11-27 1626
100套java web源码用来写毕业设计实在太有趣了
自己动手搭网站（六）：javaweb搭建一个简单的个人博客系统
热门推荐
Tao_Shimmer的博客
09-07 1万+
这篇博主会介绍下我用javaweb搭建的个人博客系统，源码也会打包放到gitee上，需要的朋友可以自取，大家互相学习，请不要直接CV。 tip：本篇承上篇，许多基本内容在上篇谈到，建议看之前先浏览下上篇博客。 上篇：自己动手搭网站（五）：javaweb基础：登录功能系列总目录：自己动手搭建网站系列总目录gitee仓库链接在正式介绍代码前，博主先谈谈个人了解的一点web背景知识，也是博主接触web后“东拼西凑”来的，若有不当之处，希望大家指正。最早的网站时非常简单的，基本就是用html和css写的一些静态页面
【Vue3】实现前端管理系统必备（1）——项目初始化
qq_50485858的博客
02-23 1909
【Vue3】实现前端管理系统（1） 安装Vue 引入依赖 请求接口规格化 路由跳转
JavaWeb基础
Zero摄氏度的博客
07-24 658
当表单什么都不提交时，对于单值请求，提交空白，会自动填充空字符串，而对于多值请求，因为要设到数组中，数组中如果什么都没有，就是null（空的），当request获取参数的时候，因为values为空，于是不会创建字符串数组对象，返回的是一个null，在遍历时，要调用inst1的属性length，而inst1是null，就会。像上面的访问web项目，网址直接暴露了项目的所在位置和项目名，通过配置虚拟目录，可以将项目放在电脑本地的任何一个位置，并且为项目名设置一个虚拟的项目名，访问的时候用这个虚拟名字。
《web课程设计》用HTML CSS做一个简洁、漂亮的个人博客网站
专注于dreamweaver网页设计制作
01-03 825
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
javaweb实现个人博客系统
m0_49074706的博客
07-22 6748
JAVAweb项目——个人博客系统 前端和后端功能都已实现，包括文章的筛选、阅读以及实时评论等；同时，通过登录进入后台，实现对文章的增删改查
基于javaweb+mysql的springboot朴素风个人博客系统(前后端分离+java+vue+springboot+ssm+mysql+maven+redis)
m0_71285887的博客
08-08 72
基于javaweb+mysql的springboot朴素风个人博客系统(前后端分离+java+vue+springboot+ssm+mysql+maven+redis)基于javaweb+mysql的SpringBoot朴素风个人博客系统(前后端分离+java+vue+springboot+ssm+mysql+maven+redis)本系统功能包括： 基于vue + Springboo痼J后端分离项目个人博客系统，注册 登录，首页展示，喜爰图书展示，后台图书维护，个人文 章展示，后台文章上传等等。
JavaWeb项目 -- 博客系统
yyhgo_的博客
01-05 4573
JavaWeb项目 -- 博客系统
Java项目——个人博客系统
taro_yuan的博客
08-02 289
博客系统
javaweb项目前端架构
05-13
JavaWeb项目的前端架构通常包括以下几个部分： 1. HTML/CSS/JavaScript：这是前端基础，用于网页布局、样式设计和交互效果实现。 2. 前端框架：如Bootstrap、Vue.js、React.js等，可以快速搭建界面和实现交互效果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摸鱼王胖嘟嘟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值