javaEE初阶---博客系统(前端)

已于 2022-10-07 18:52:46 修改
阅读量963 收藏 7
点赞数
分类专栏： JavaEE初阶 文章标签： 前端 java-ee html
于 2022-10-06 18:42:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baijaiyu/article/details/127176390
版权

一 : 综述

博客系统是一个典型的web程序,有前端页面,也有后端代码,同时需要进行前后端交互,本节内容主要实现前端页面.

在这里插入图片描述
基本结构 :

在这里插入图片描述

二 : 博客列表页

2.1导航栏

页面结构 :

在这里插入图片描述
样式 :

1.起手式

在这里插入图片描述

整个页面的设置

在这里插入图片描述

单独导航栏的设置

在这里插入图片描述

导航栏图标的设置

在这里插入图片描述

占位

在这里插入图片描述

a标签的设置(三个按钮)

在这里插入图片描述
最终的导航栏效果 :

在这里插入图片描述

2.2实现页面主体

页面结构 :

在这里插入图片描述

样式 :

整体容器样式设置

在这里插入图片描述

左右界面设置

在这里插入图片描述

头像设置

在这里插入图片描述
最终的左侧界面效果 :

在这里插入图片描述

右侧标题 , 日期 ,正文

在这里插入图片描述

查看全文的按钮

在这里插入图片描述
右侧界面最终效果 :

在这里插入图片描述
整个博客列表页最终效果 :

在这里插入图片描述

2.3具体代码

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/tubiao.jpg" alt="">
        <sapn class="title">我的博客系统</sapn>
        <!--用这个spacer来占位-->
        <span class="spacer"></span>
        <!--按钮-->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">编辑页</a>
        <a href="#">注销</a>
    </div>

    <!--页面主体-->
    <div class="container">
        <!--左侧个人信息-->
        <div class="container-left">
            <!-- 用.card表示用户信息 -->
            <div class="card">
                <img src="image/touxiang.jpg" alt="">
                <h3>老白在这</h3>
                <a href="#">gitee地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>5</span>
                    <span>8</span>
                </div>
            </div>
        </div>
        
        <!--右侧内容详情-->
        <div class="container-right">
            <!-- 此处表示一篇博客 -->
            <div class="blog">
                <div class="title">第一篇博客</div>
                <div class="date">2022-10-05 20:45:35</div>
                <div class="desc">从今天起,做一个幸福的人 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quaerat harum rerum magnam sapiente voluptatem, ea minima. Mollitia maxime odio harum ducimus voluptatum debitis voluptate exercitationem, error officia, vitae amet?
                    <a href="#">查看全文  &gt;&gt;</a>
                    </div>
            </div>

            <div class="blog">
                <div class="title">第二篇博客</div>
                <div class="date">2022-10-06 14:45:35</div>
                <div class="desc">俱往矣,数风流人物,还看今朝 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quaerat harum rerum magnam sapiente voluptatem, ea minima. Mollitia maxime odio harum ducimus voluptatum debitis voluptate exercitationem, error officia, vitae amet?
                    <a href="#">查看全文  &gt;&gt;</a>
                    </div>
            </div>
        </div>
</body>
</html>

common.css

    /*这是起手式,一般都一样*/
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        height: 100%;
        background-image: url(../image/beijng.jpg);
        background-repeat : no-repeat;
        background-position: center center;
        background-size: cover;
    }

    .nav {
        width:100%;
        height: 50px;
        background-color: rgba(130,130,130,0.5);
        color:blanchedalmond;

        display: flex;
        align-items: center;
    }

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

    .nav .spacer {
        width: 70%;
    }

    .nav a {
        color: rgba(255,255,255);
        text-decoration: none;
        padding:0 10px ;
    }

    .container {
        width: 1000px;
        height: calc(100%-50px);
        margin: 0 auto;

        /*实现左右布局,使用flex*/
        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;

        /*溢出之后如果内容多,自动加滚动条*/
        overflow: auto ;
    }

    .card {
        background-color: rgba(255,255,255,0.8);
        border-radius: 10px;
        padding: 30px;
    }

    /*用户头像*/
    .card img {
        width:140px;
        height:140px;
        border-radius: 70px;
    }

    /*用户名*/
    .card h3 {
        text-align:center;
        padding: 10px;
    }

    /*gitee链接*/
    .card a {
        display: block;
        text-align: center;
        text-decoration: none;
        padding: 10px;
        color :#aaa;
    }

    /*文章和分类*/
    .card .counter {
        display: flex;
        padding:5px;
        justify-content: space-around;
    }

blog_list.css

.blog {
    width: 100%;
    padding: 20px;
}

/*标题*/
.blog .title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 10px 0;
}

/*日期*/
.blog .date {
    color: cadetblue;
    text-align: center;
    padding: 5px;
}

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

/*查看全文的按钮*/
.blog a{
    text-align: center;
    display: block;
    width:130px;
    height: 40px;
    margin:10px auto;
    line-height: 40px;
    border: 2px black solid;
    color: black;
    text-decoration: none;
    transition: all 0.5s;
}

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

2.4实现效果

在这里插入图片描述

三 : 博客详情页

3.1具体代码

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/tubiao.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个 spacer 用来占位 -->
        <span class="spacer"></span>
        <!-- 来几个按钮 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div> 

    <!--页面主体-->
    <div class="container">
        <!--左侧个人信息-->
        <div class="container-left">
            <!-- 用.card表示用户信息 -->
            <div class="card">
                <img src="image/touxiang.jpg" alt="">
                <h3>老白在这</h3>
                <a href="#">gitee地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>5</span>
                    <span>8</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- 这个 div 里来放博客的内容 -->
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 博客时间 -->
                <div class="date">2022-10-06 20:45:35</div>
                <!-- 博客正文 -->
                <div>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
                </div>
            </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;
    color:cadetblue;
    padding: 10px 0;
}

.blog-content p {
    text-indent: 2em;
}

3.2实现效果

在这里插入图片描述

四 : 博客登录页

4.1具体代码

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/tubiao.jpg" alt="">
        <sapn class="title">我的博客系统</sapn>
        <!--用这个spacer来占位-->
        <span class="sapcer"></span>
        <!--按钮-->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">编辑页</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">
                <input type="button" value="提交" id="submit">
            </div>
        </div>
    </div>
</body>
</html>

blog_login.css

.login-container {
    height:calc(100%-50px);
    display: flex;
    /*水平居中*/
    justify-content: center;
    /*垂直居中*/
    align-items: center;
}

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


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

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

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

#username, #password {
    width: 200px;
    height: 40px;
    font-size: 24px;
    border: none;
    outline: none;
    padding-left: 5px;
    border-radius: 10px;
    background-color: beige;
}

#submit {
    width: 300px;
    height: 40px;
    color: white;
    background-color: #98FB98;
    border: none;
    border-radius: 10px;
}

#submit:active {
    background-color: grey;
}

4.2实现效果

在这里插入图片描述

五 : 博客编辑页

5.1editor.md组件导入

自己实现markdown是有一定难度的 . 所以这里最关键的步骤 ,是使用markdown组件 , 下面我将介绍如何导入这个组件 .

第一步 : 网页搜索editor.md , 进入官网下载 .
在这里插入图片描述
在这里插入图片描述

第二步 : 将下载好的文件夹放在总的博客系统目录下 .

在这里插入图片描述

editor.md这个组件要想正常使用 , 还依赖一个东西jquery . jquery是js世界最知名的库 !

在这里插入图片描述
第三步 : 在页面中引入依赖的js , 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>

需要注意目录结构 !

在这里插入图片描述

第四步 : 在js代码中 , 初始化editor.md .

    <script>
        // 初始化编辑器
        var editor = editormd("editor", {
            width:"100%",
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>

在这里插入图片描述
在书写这部分代码时 , 还有一些注意事项 :

在这里插入图片描述

5.2具体代码

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/tubiao.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个 spacer 用来占位 -->
        <span class="spacer"></span>
        <!-- 来几个按钮 -->
        <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" id="title" placeholder="请输入文章标题">
            <input type="button" id="submit" value="发布文章">
        </div>
        <!-- 博客编辑器标签 -->
        <div id="editor">

        </div>
    </div>

    <script>
        // 初始化编辑器
        var editor = editormd("editor", {
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>
</body>
</html>

blog_edit.css

.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

.title {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#title {
    width: 895px;
    height: 40px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-size: 22px;
    padding-left: 5px;

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


#submit {
    width: 100px;
    height: 40px;
    border-radius: 10px;
    color: white;
    background-color: orange;
    border: none;
    outline: none;
}


#submit:active {
    background-color: rgb(32, 22, 22);
}

#editor {
    border-radius: 10px;

    /* background-color: rgba(255, 255, 255, 0.8); */
    opacity: 80%;
}

5.3实现效果

在这里插入图片描述

至此 , 博客系统的前端部分代码全部完成 !

在这里插入图片描述

知行&
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于JavaEE的个人博客管理系统_JSP网站设计_MySQL数据库设计
qiaoyan9241的博客
07-23 647
目 录 摘 要I ABSTRACTII 第1章 绪论1 1.1 博客系统概述1 1.2 博客发展趋势2 1.3 系统开发的背景2 1.4 技术路线3 1.5 系统设计目标分析3 第2章 基本技术方案4 2.1 JSP中的各种技术4 2.1.1 JSP概述4 2.1.2 Servlet概述4 2.1.3 JavaBean概述5 2.2 基于B/S的WEB应用体系结构5 2.2.1 传统的两层体系结构5 2.2.2 三层体系结构6 2.2.3 JSP网站开发模式6 ...
博客系统——JAVAEE
12-15
博客系统是基于Hibernate实现DAO，基于dom4j实现DAO与表现层层解耦的系统，有用户管理模块，博客管理模块，博客访问模块。
Java EE个人博客系统
03-13
jsp完整博客系统.课程设计毕业设计用的上的. jsp完整博客系统.课程设计毕业设计用的上的.
【JavaEE】博客系统【前后端分离版本】
孙宇航的博客
11-29 2167
测试网站：小孙的博客系统idea创建maven项目引入依赖 这些文件属于静态资源，后续打包部署的时候，这些静态资源也会一并打包部署。后续也就可以在浏览器中访问到了。下面就是C和M了，我们先来实现Model层。一、编写数据库的操作代码二、封装数据库操作 完成上面的步骤，数据库的基本操作就准备好了。接下来，我们就来实现服务器中的代码。（Model搞定，写Controller）此时我们就需要阅读前后端交互接口。针对给各个页面”约定前后端交互接口“，”编写服务器代码“，”编写客户端代码“在页面加载对的时候，
个人博客网站，javaEE
08-14
个人博客网站，自己在别人的基础上改动了很多，基本上（全改了），还可以用
javaee-api-8.0-javadoc.jar
10-12
javaee-api-8.0-javadoc.jar，这是javaee1.8api的jar包，解压后可用javadoc2chm制作成chm帮助文档。
Javaee --- 学生成绩管理系统
12-09
这个系统利用了JavaEE的多层次架构，包括前端展示层、业务逻辑处理层以及数据访问层，以实现高效、安全的数据存储和交互。 **JavaEE技术栈** JavaEE（Java Enterprise Edition）是Java平台上用于构建企业级应用的...
javaEE servlet-api
09-01
Servlet API提供了一个框架，让开发者可以通过编写Java代码来处理HTTP请求，生成动态内容，并与数据库或其他后端系统进行交互。这个API包括一系列接口和类，例如`javax.servlet.Servlet`、`javax.servlet....
JavaEE-图书管理系统.zip
08-19
【JavaEE-图书管理系统】是一个基于Java企业版（Java Enterprise Edition，简称JavaEE）技术实现的项目，旨在提供一个高效、便捷的图书管理解决方案。在这个系统中，用户可以进行图书的借阅、归还、查询等操作，管理...
javaee-api-7.0.jar
最新发布
05-22
javaweb/javaEE常用jar包，亲测可用，导入到java工程中使用
javaEE-个人网上博客
03-25
大学时代的课后大作业，练手项目。
基于java EE个人博客交友系统
05-30
基于java EE个人博客交友系统 源码，经测试完美运行，并提供更多系统供参考
基于java开发的博客管理系统
05-18
使用java开发的小型博客管理系统，使用了mysql数据库
基于Java EE的个人博客系统.pdf
07-02
基于Java EE的个人博客系统.pdf
博客管理系统
03-16
这是一个博客管理系统，jfinal设计的博客管理系统，具有添加博客，删除和修改博客的功能，仅供大家学习交流。
javaEE初阶---博客系统(前后端分离)
baijaiyu的博客
11-07 582
之前我们已经写好了博客系统页面的前端部分 , 主要包括 :本节内容就是要给这些页面提供对应的后端功能 .我们需要把博客内容和用户信息保存起来 , 就需要使用数据库 . 设计的关键 , 是找到数据库中的实体 , 对于博客系统来说 , 就是博客内容和用户信息 . 为了方便数据库内容在别的主机上部署 , 我们可以把对数据库的操作都写入一个文件中保存起来 . 此处在main目录下创建了db.sql文件 , 并将对数据库操作的语句写入 . 主要有什么操作呢 ? 此处我们先重点关注model中的操作 . 3.2一篇博
JavaEE - 博客系统(使用前后端分离)
旧时言的博客
06-06 1195
博客系统(使用前后端分离)前面的代码中我们基于模板的方式来开发了博客系统.在基于模板方式中, 主要是通过服务器把数据渲染到页面中, 然后直接返回完整的页面给浏览器.目前现在更主流的开发方式是 “前后端分离” 的方式. 这种方式下服务器端不关注页面的内容, 而只是给 网页端提供数据.网页端通过 ajax 的方式和服务器之间交互数据, 网页拿到数据之后再根据数据的内容渲染到页面上.创建 web 项目创建目录结构前后端分离的方式不需要使用 Thymeleaf 了.......
Java EE初阶---博客系统（使用模板技术）
weixin_51912875的博客
08-16 239
Java EE初阶
Java EE初阶---博客系统（使用前后端分离）
weixin_51912875的博客
08-16 413
Java EE初阶
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值