springboot项目个人博客总结

最新推荐文章于 2024-05-13 09:02:54 发布

m78探索者

最新推荐文章于 2024-05-13 09:02:54 发布

阅读量1.2k

点赞数 2

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/weixin_44202871/article/details/115433003

版权

文章目录

Spring Boot个人博客

Spring Boot个人博客

个人博客功能：

技术组合：

后端：Spring Boot + JPA + thymeleaf模板
数据库：MySQL
前端UI：Semantic UI框架

工具与环境：

IDEA
Maven 3
JDK 8
Axure RP 8

课程内容模块：

需求分析与功能规划
页面设计与开发
技术框架搭建
后端管理功能实现
前端管理功能实现

你能学得什么？

基于Spring Boot的完整全栈式的开发套路
Semantic UI框架的使用
一套博客系统的源代码与设计

1、需求与功能

1.1 用户故事

用户故事是敏捷框架中的一种开发方法。可以帮助开发者转换视角，以用户的角度更好的把握需求，从而实现具有商业价值的功能。

用户故事最好是用户团队编写

用户故事模板：

As a (role of user), I want (some feature) so that (some business value).
作为一个(某个角色) 使用者，我可以做(某个功能) 事情，如此可以有(某个商业价值) 的好处

关键点：角色、功能、商业价值

举例：

作为一个招聘网站注册用户，我想查看最近3天发布的招聘信息，以便于了解最新的招聘信息。
作为公司，可以张贴新工作。

个人博客系统的用户故事：

角色：普通访客，管理员（我）

访客，可以分页查看所有的博客
访客，可以快速查看博客数最多的6个分类
访客，可以查看所有的分类
访客，可以查看某个分类下的博客列表
访客，可以快速查看标记博客最多的10个标签
访客，可以查看所有的标签
访客，可以查看某个标签下的博客列表
访客，可以根据年度时间线查看博客列表
访客，可以快速查看最新的推荐博客
访客，可以用关键字全局搜索博客
访客，可以查看单个博客内容
访客，可以对博客内容进行评论
访客，可以赞赏博客内容
访客，可以微信扫码阅读博客内容
访客，可以在首页扫描公众号二维码关注我
我，可以用户名和密码登录后台管理
我，可以管理博客
- 我，可以发布新博客
- 我，可以对博客进行分类
- 我，可以对博客打标签
- 我，可以修改博客
- 我，可以删除博客
- 我，可以根据标题，分类，标签查询博客
我，可以管理博客分类
- 我，可以新增一个分类
- 我，可以修改一个分类
- 我，可以删除一个分类
- 我，可以根据分类名称查询分类
我，可以管理标签
- 我，可以新增一个标签
- 我，可以修改一个标签
- 我，可以删除一个标签
- 我，可以根据名称查询标签

1.2 功能规划

2、页面设计与开发

2.1 设计

页面规划：

前端展示：首页、详情页、分类、标签、归档、关于我

后台管理：模板页

2.1.1首页

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.scc}" >
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">Blog</h2>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
        <div class="right m-item item m-mobile-hide">
          <div class="ui icon inverted transparent input m-margin-tb-tiny">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

  <!--中间内容-->
  <div  class="m-container m-padded-tb-big">
    <div class="ui container">
      <div class="ui stackable grid">
        <!--左边博客列表-->
        <div class="eleven wide column">
          <!--header-->
          <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
              <div class="column">
                <h3 class="ui teal header">博客</h3>
              </div>
              <div class="right aligned column">
                共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${page.totalElements}"> 14 </h2> 篇
              </div>
            </div>
          </div>

          <!--content-->
          <div class="ui attached  segment">

            <div class="ui padded vertical segment m-padded-tb-large">
              <div class="ui middle aligned mobile reversed stackable grid" th:each="blog : ${page.content}" >
                <div class="eleven wide column">
                  <h3 class="ui header" ><a href="#" th:href="@{/blog/{id}(id=${blog.id})}"  class="m-black" th:text="${blog.title}">你真的理解什么是财富自由吗？</a></h3>
                  <p class="m-text" th:text="|${blog.description}......|">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">李仁密</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> <span th:text="${blog.views}">2342</span>
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005" th:src="@{${blog.firstPicture}}"  alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>

          </div>

          <!--footer-->
          <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
            <div class="ui middle aligned two column grid">
              <div class="column">
                <a href="#" th:href="@{/(page=${page.number}-1)}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
              </div>
              <div class="right aligned column">
                <a href="#" th:href="@{/(page=${page.number}+1)}"  th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
              </div>
            </div>
          </div>

        </div>

        <!--右边的top-->
        <div class="five wide column">

            <!--分类-->
            <div class="ui segments">
                <div class="ui secondary segment">
                    <</

最低0.47元/天解锁文章

m78探索者

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboot项目个人博客总结

文章目录Spring Boot个人博客1、需求与功能1.1 用户故事1.2 功能规划2、页面设计与开发2.1 设计2.1.1首页2.2 页面开发2.3 插件集成3、框架搭建3.1 构建与配置3.2 异常处理thymeleft头引用3.3 日志处理3.4 页面处理4、设计与规范4.1 实体设计4.2 应用分层4.3 命名约定5、后台管理功能实现5.1 登录5.2 分类管理5.3 标签管理5.4 博客管理6、前端展示功能实现6.1 首页展示6.2 分类页6.3 标签页6.4 归档页6.5 关于我7.看板娘6.2
复制链接

扫一扫