【JavaEE】博客前端

最新推荐文章于 2024-05-14 11:19:40 发布
最新推荐文章于 2024-05-14 11:19:40 发布
阅读量1k 收藏 18
点赞数 27
分类专栏： JavaEE 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50987960/article/details/128666313
版权

目录

 一、列表页

1.1导航条

 1.2主题区域

1.2.1个人信息框

1.2.2 内容区

 二、登录页

三、详情页

 一、列表页

整体布局如下：

1.1导航条

导航条分为三块，整体都设置id为导航栏，然后左右分为导航栏左和导航栏右。左边靠左，右边靠右。再在开头加入一张图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/list.css">
</head>
<body>
  <div id="导航栏">
    <div id="导航栏左">
      <div id="logo">
        <img src="img/logo1.jpg">
      </div>
      <div id="name">
        我的博客系统
      </div>
    </div>
    <div id="导航栏右">
      <a href="#">主页</a>
      <a href="#">写博客</a>
      <a href="#">登录</a>
    </div>
  </div>
</body>
</html>

 首先我们需要把整个框架靠上整个浏览器页面，否则正常是会有空格的，使左右上下都没有空隙，处于一个盒子中。

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

然后使小图片变小设置50px像素。

div#logo img {
    height: 50px;
}

 然后使导航条中的a标签变为白色，去掉下划线。

div#导航栏 a {
    color: #eee;
    text-decoration: none;
}

 导航条分为左右，需要让一边靠左一边靠右在父元素上设置display: flex。弹性布局:两个资源在主轴上justify-content: space-between;使导航栏出现左右两侧分区。先设置一个弹性布局：display: flex;设置颜色宽高之类的。padding-left: 100px;padding-right: 100px;使导航栏和左右有100px像素的间距。

div#导航栏 {
    background-color: rgba(0, 0, 0, .4);
    color: #eee;
    display: flex;
    width: 100%;
    height: 60px;
    align-items: stretch;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
}

然后呢继续设置弹性布局，需要使图片和文字在一行。display: flex;align-items: center;

 然后需要让图片和文字、文字和文字之间有距离需要增加一个宽度，调节弹性布局的主轴：justify-content: space-between;然后再设置宽度。

div#导航栏左 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

div#导航栏右 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

 然后使图标设置圆形border-radius: 50%;然后让被遮挡的部分都不显示：overflow:hidden;

div#logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow:hidden;
}

 1.2主题区域

下图为主体区域的大致样式：

1.2.1个人信息框

<div id="主体区域">
    <div id="个人信息">
        <div id="avatar">
            <img src="img/doge.jpg">
        </div>
        <div id="username">
            佳佳
        </div>
        <div id="git">
            <a href="https://gitee.com">git 仓库地址</a>
        </div>
        <div id="文章数量区域">
            <div id="文章数量左区域">
                <div>文章</div>
                <div>2</div>
            </div>
            <div id="文章数量右区域">
                <div>分类</div>
                <div>1</div>
            </div>
        </div>
    </div>
</div>

孩子选择器 结合 通配符选择器 此处的含义是: div#个人信息所有孩子（不是子孙）选中 。

首先配置个人信息的整体像素为6px。以及图片的像素120px。

还有小图标的形状设定。

div#个人信息 > * {
    margin: 6px;
}
div#avatar img {
    width: 120px;
}
div#avatar {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
}

 然后对有链接的文本取消下划线，设置颜色。

div#个人信息 a {
    color: #555;
    text-decoration: none;
}

 设置一个背景，使他滑动屏幕时不移动。

body {
    background-image: url(../img/cat.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

div#个人信息 {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 12px;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px; 
}

然后再设置整体得到颜色，像素，宽度，居中，设置间距等等，在导航条中讲过。

div#文章数量区域 {
    display: flex;
    text-align: center;
    width: 80px;
    justify-content: space-between;
}

然后使文章和的分类在同一行，数量对应，再设置宽。

1.2.2 内容区

    <div id="内容区">
        <ol>
            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>
        </ol>
    </div>
div#主体区域 {
    display: flex;
    align-items: start;
    justify-content: center;
    padding-right: 100px;
}

然后再把整个区域设置为中间，并设置右侧空白100px像素。

div#内容区 {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 12px;
    width: 1000px;
    margin-left: 16px;
}

再将内容区设置离左空白16px像素，设置颜色等。

body {
    background-image: url(../img/cat.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

设置背景为指定的图片。 

div#内容区 ol {
    list-style: none;
}

然后取消每一层的标记数字。

div.文章信息 {
    margin: 30px;
}
div.文章信息 > * {
    margin: 12px;
}
div.文章信息 h2 {
    text-align: center;
}

  使每个小文章有30px像素。看的更清晰。让文章下的所有信息像素为12px。让每个文章的标题居中。

div.文章信息 p.发表时间 {
    text-align: center;
    color: #c52813;
}
div.文章信息 p.文章简介 {
    text-indent: 2em;
}

让发表时间也居中并且置为红色。让文章简介首行留出两字符。

div.文章信息 div.功能区 {
    display: flex;
    align-items: center;
    justify-content: center;
}
div.文章信息 div.功能区 a {
    border: 2px solid #000;
    padding: 5px 15px;
    color: #000;
    text-decoration: none;
}

然后让功能区在块中处于中间位置，然后利用border: 2px solid #000给链接处加一个块围住，使块为白色，将块设置一个宽和高，然后取消链接的下划线。

list.css代码：

div#内容区 ol {
    list-style: none;
}

div.文章信息 {
    margin: 30px;
}
div.文章信息 > * {
    margin: 12px;
}
div.文章信息 h2 {
    text-align: center;
}
div.文章信息 p.发表时间 {
    text-align: center;
    color: #c52813;
}
div.文章信息 p.文章简介 {
    text-indent: 2em;
}
div.文章信息 div.功能区 {
    display: flex;
    align-items: center;
    justify-content: center;
}
div.文章信息 div.功能区 a {
    border: 2px solid #000;
    padding: 5px 15px;
    color: #000;
    text-decoration: none;
}

layout.css代码：

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

body {
    background-image: url(../img/cat.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

div#logo img {
    height: 50px;
}

div#导航栏 a {
    color: #eee;
    text-decoration: none;
}

div#导航栏 {
    background-color: rgba(0, 0, 0, .4);
    color: #eee;
    display: flex;
    width: 100%;
    height: 60px;
    align-items: stretch;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
}

div#导航栏左 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

div#导航栏右 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

/* 孩子选择器 结合 通配符选择器 */
/* 此处的含义是: div#个人信息所有孩子（不是子孙）选中 */

div#个人信息 > * {
    margin: 6px;
}

div#个人信息 {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 12px;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
}


div#logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow:hidden;
}

div#个人信息 a {
    color: #555;
    text-decoration: none;
}

div#avatar {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
}

div#avatar img {
    width: 120px;
}

div#文章数量区域 {
    display: flex;
    text-align: center;
    width: 80px;
    justify-content: space-between;
}
div#内容区 {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 12px;
    width: 1000px;
    margin-left: 16px;
}

div#主体区域 {
    display: flex;
    align-items: start;
    justify-content: center;
    padding-right: 100px;
}

body {
    background-image: url(../img/cat.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

 二、登录页

 登录页大致就长成这样，然后根据这个进行设计。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>博客列表页</title>
  <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div id="导航栏">
  <div id="导航栏左">
    <div id="logo">
      <img src="img/logo1.jpg">
    </div>
    <div id="name">
      我的博客系统
    </div>
  </div>
  <div id="导航栏右">
    <a href="#">主页</a>
    <a href="#">写博客</a>
    <a href="#">登录</a>
  </div>
</div>

<div id="主体区域">

  <div id="登录框">
    <form>
      <h1>登录</h1>
      <div id="输入区域">
        <div id="用户名区域" class="输入">
          <label>
            <span>用户名</span>
            <input type="text" name="username">
          </label>
        </div>

        <div id="密码区域" class="输入">
          <label>
            <span>密码</span>
            <input type="password" name="password">
          </label>
        </div>

        <div id="按钮区域">
          <button>提交</button>
        </div>
      </div>
    </form>
  </div>

</div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url(../img/cat.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

div#logo img {
    height: 50px;
}

div#导航栏 a {
    color: #eee;
    text-decoration: none;
}

div#导航栏 {
    background-color: rgba(0, 0, 0, .4);
    color: #eee;
    display: flex;
    width: 100%;
    height: 60px;
    align-items: stretch;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
}

div#导航栏左 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

div#导航栏右 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

div#logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow:hidden;
}

div#主体区域 {
    height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}

div#登录框 {
    background-color: rgba(255, 255, 255, .8);
    width: 500px;
    padding: 16px;
    font-size: 1.5em;
    border-radius: 16px;
}

div#登录框 h1 {
    text-align: center;
}

div#用户名区域, div#密码区域, div#按钮区域 {
    margin: 16px 0;
    display: flex;
}

.输入 label {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.输入 span {
    width: 80px;
}

.输入 input {
    width: 388px;
    height: 100%;
    font-size: 1.5em;
    padding: 6px 15px;
    border: none;
    background-color: #fff;
    outline: none;
    border-radius: 8px;
}

button {
    width: 100%;
    font-size: 1.5rem;
    background-color: #531748;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 0;
}

 ​

三、详情页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/detail.css">
</head>
<body>
<div id="导航栏">
    <div id="导航栏左">
        <div id="logo">
            <img src="img/logo1.jpg">
        </div>
        <div id="name">
            我的博客系统
        </div>
    </div>
    <div id="导航栏右">
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">登录</a>
    </div>
</div>

<div id="主体区域">
    <div id="个人信息">
        <div id="avatar">
            <img src="img/doge.jpg">
        </div>
        <div id="username">
            比特老陈
        </div>
        <div id="git">
            <a href="https://gitee.com/peixinchen2">git 仓库地址</a>
        </div>
        <div id="文章数量区域">
            <div id="文章数量左区域">
                <div>文章</div>
                <div>2</div>
            </div>
            <div id="文章数量右区域">
                <div>分类</div>
                <div>1</div>
            </div>
        </div>
    </div>
    <div id="内容区">
        <h1>我的第一篇文章</h1>
        <p class="发表时间">2023-01-05 11:18:23</p>
        <p id="第1段" class="文章段">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。</p>
        <p id="第2段" class="文章段">种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 计算的框架自定义函数，该函数一般是 c++ 层的。c++ 层的自定义函数中，功能是用于生成一个 Operation 的符号表达。比如一个对于加法运算，trace 就是记录一个符号化的加法算子。如此一连串的运算就被转换了符号化的计算图。</p>
        <p id="第3段" class="文章段">另外一种计算图生成是基于 AST（抽象语法树） 解析的。在代码执行前，直接根据 Python 文本代码得到 Python AST，然后根据 AST 来翻译成计算图（也叫做中间代码 IR）。</p>
        <p id="第4段" class="文章段">Python（特指 CPython）解释器执行，第一阶段会先把 Python 源码解析成 AST，第二阶段根据 AST 生成和优化 ByteCode（字节码），第三阶段在虚拟机中执行 ByteCode。</p>
        <p id="第5段" class="文章段">基于 AST 解析的计算图生成，发生在这里的第一阶段；基于 trace tensor 的计算图生成，发生在第三阶段之后。</p>
    </div>

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

详情页简单些来就更简单了，延续列表页大部分的代码，左侧的个人信息以及导航条都延续，只更改内容区。

div#内容区 {
    padding: 16px;
    /* 100vh：浏览器的高度 */
    min-height: calc(100vh - 60px);
}

div#内容区 h1 {
    text-align: center;
    margin-bottom: 12px;
}

div#内容区 p.发表时间 {
    text-align: center;
    color: #c52813;
    margin-bottom: 12px;
}

div#内容区 p.文章段 {
    text-indent: 2em;
    line-height: 2em;
    margin-bottom: 12px;
}

 

世界级白日梦冠军
关注
  • 27
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 48
    评论
专栏目录
JavaEE - 博客系统(使用前后端分离)
旧时言的博客
06-06 1163
博客系统(使用前后端分离)前面的代码中我们基于模板的方式来开发了博客系统.在基于模板方式中, 主要是通过服务器把数据渲染到页面中, 然后直接返回完整的页面给浏览器.目前现在更主流的开发方式是 “前后端分离” 的方式. 这种方式下服务器端不关注页面的内容, 而只是给 网页端提供数据.网页端通过 ajax 的方式和服务器之间交互数据, 网页拿到数据之后再根据数据的内容渲染到页面上.创建 web 项目创建目录结构前后端分离的方式不需要使用 Thymeleaf 了.......
myblog:项目：一款Github上开源的博客系统项目 目的：对学到的框架、开源组件、前端技术进行应用学习。同时开发完成后写技术博客，开源到Github上
05-13
目的：对学到的JavaEE框架、开源组件、前端技术进行应用学习。同时开发完成后写技术博客，开源到Github上 开源 前端是采用一个个人网站分享的前端模板，感谢作者 【技术介绍】 JavaEE后端技术： JPA产品：Hibernate ...
【JavaEE初阶】前端篇：综合案例 _ 博客系统（页面设计）
哎呀是小张啊 的博客
10-07 2320
这篇博客主要是关于 博客系统的页面设计 的一个简单的实现，利用好前面所介绍的前端知识，做出来了四个小页面，同时 也顺便复习和巩固了一下知识 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
基于JavaEE开发博客系统项目开发与设计(附源码)
学习交流，答疑解惑，可以查看博客主页左侧我的推广哦！
03-10 1013
这是一个基于JavaEE开发的一个博客系统。实现了博客的基本功能，前台页面可以进行文章浏览，关键词搜索，登录注册；登陆后支持对文章进行感谢、评论；然后还可以对评论进行评论和点赞。后台可以对文章进行增删改查(支持`MarkDown`文本编辑与发布)，分类分页查找，标签管理等。
java小区管理的项目描述,基于jsp的小区信息管理-JavaEE实现小区信息管理 - java项目源码...
weixin_39657444的博客
03-11 243
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的小区信息管理, 该项目可用各类java课程设计大作业中, 小区信息管理的系统架构分为前后台两部分, 最终实现在线上进行小区信息管理各项功能,实现了诸如用户管理, 登录注册, 权限管理等功能, 并实现对各类小区信息管理相关的实体进行管理。该小区信息管理为一个采用mvc设计模式进行开发B/S架构项目,并采用分层架构对...
自学Java导航栏
凌枫ozo的博客
09-27 484
说明 此仓库是我自己的学习经历的点点滴滴，有JavaSE,JavaEE,Web前端等文章 ☕️Java基础 Java基础文章：包括封装、继承、多态、集合等 ?开发前言 ?数据类型转换、运算符、方法入门 ?流程控制语句 ?初始idea、方法 ?数组 ?类与对象、封装、构造方法 开发前言 数据类型、运算符、方法入门 流程控制语语句 初始idea、方法 数组 类与对象、封装、构造方法 ?Scanner类、R...
javaEE初阶---博客系统(前端)
baijaiyu的博客
10-06 936
基本结构 :页面结构 : 样式 : 最终的导航栏效果 :页面结构 :样式 : 最终的左侧界面效果 : 右侧界面最终效果 : 整个博客列表页最终效果 : 三 : 博客详情页 博客详情页最终效果 : 五 : 博客编辑页 自己实现markdown是有一定难度的 . 所以这里最关键的步骤 ,是使用markdown组件 , 下面我将介绍如何导入这个组件 .第一步 : 网页搜索editor.md , 进入官网下载 . 第二步 : 将下载好的文件夹放在总的博客系统目录下 . 第三步 : 在页面中
前端 - 博客系统(页面设计) - JavaEE初阶 - 细节狂魔
DarkAndGrey的博客
05-13 2920
文章目录前言博客系统 前言 前面的博客，只是快速带着大家过了一下前端。 学习了一些最简单，最常用的前端知识。 1、HTML的常用标签 2、CSS选择器 + 常用样式 3、JS的基础语法 4、DOM API 常用方法 真的要讲明白的话，光一个 CSS，要写的博客至少 10篇起步。 【以我的博客质量为基准】 但是！博主是后端的，不会学得太深入， 走前端方向的朋友，自己报个班，深入学习， 我是比较推荐 报比特的。 因为 我就是 比特的一份子。   博客系统 我们是仿照 CSDN 实现一个 最简化的版
基于Java ee的博客系统blog_javaEE.zip
04-29
【博客个人资源】 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、...
JavaEE期末大作业博客系统源码基于springboot和vue实现的前后端分离的博客系统源代码.zip
06-09
JavaEE期末大作业博客系统源码基于springboot和vue实现的前后端分离的博客系统源代码.zip 运行项目流程如下： 选择一个数据库执行 m_blog.sql 文件。 用 idea 打开 blog_demo ，更改配置文件 application.yml 中的...
javaee-blog-master.zip
04-28
采用JSP＋Servlet＋JavaBean开发模式进行底层设计，前端采用h5前端框架和JavaScript的Ajax库进行前台页面设计,在持久层采用C3P0数据库连接池框架将数据库存入mysql。这个系统功能包括登录注册，导航栏，搜索栏，个人...
JAVAEE博客系统源码-javaee8-jaxrs-sample:使用JavaEE8和JAXRS2.1构建的RESTfulAPI演示
06-15
EE博客系统源码javaee8-jaxrs-sample(WIP) 我已经创建来演示如何使用 Java EE 7 和 JAX-RS 2.0 构建 RESTful API。 在这个示例中，我将使用最新的 Java EE 8 重写它。我将使用 Glassfish v5 作为目标运行时，因为...
picoCTF-Web Exploitation-Web Gauntlet
huckers的博客
05-12 463
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
前端Vue架构
weixin_45678402的博客
05-12 294
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
前端面试题日常练-day05 【面试题】
qq_44640575的博客
05-11 386
解释：在CSS中，使用`.`作为类选择器，可以选择所有具有指定class名称的元素。例如，如果想选择所有class为"my-class"的元素，可以使用`.my-class`选择器来实现。这样的选择器可以为元素添加特定的样式或者在JavaScript中进行处理。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
最新发布
s_sos0的博客
05-14 364
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
根据地址栏url上key获取值
wwf1225的博客
05-10 264
/ 根据url上key获取值，key为参数名字，例如token。
前端页面 贴边拖拽 盒子
m0_46512929的博客
05-13 218
vue 悬浮球(带自动吸附功能)_vue悬浮球-CSDN博客
javaee怎么用前端配合后端
07-08
JavaEE 是一个用于开发企业级应用程序的Java平台，它提供了一套完整的解决方案，包括前端和后端的开发。下面是使用JavaEE开发时前端与后端配合的一般流程： 1. 前端开发：使用HTML、CSS和JavaScript等前端技术进行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

世界级白日梦冠军

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

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

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

打赏作者

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

抵扣说明：

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

余额充值