springboot小而美博客学习笔记
SpringBoot小而美博客学习笔记
#框架搭建
用springboot初始化工具，选模块（web，thymeleaf，jpa，mysql，Devtools，Aspects（日志处理）），等待，第一次时间较长，能干一下午也是正常的。
先逛逛pom文件，这里可以导依赖，管理版本。
配置文件，有两种（property，yml），这里用yml。
以下目录结构，第一个是总配置，里面可以定义thymeleaf，以及在什么环境下选下面（application-dev,application-pro）哪种的配置，是生产环境还是开发环境，这对于日志的打印级别是不同的。对于application-dev,application-pro这两个文件，自然就是开发时，生产时的配置。最后一个文件时，自定义一些打印日志的规范，可打破默认的10m大小的限制。
application：
application—pro：
application—dev：
#异常处理
定义404,500，error这些错误页面，springboot会根据错误状态码去跳转到对应的文件。
新建控制器，来调试这些错误页面，如果跳转不到500页面，把property文件thymeleaf那两行去掉即可。
显然，控制器内的代码有问题，分母不能为零，这会报一个500错误，因为这是服务端的错误；
如果，在浏览器里瞎打一个网址，显然会找不到，所以自然就会报一个404.
自定义错误页面，自然要自建拦截器。
这样一个处理器，通过ModelAndView，把路由和异常信息，以及自定义的错误页面路由都设置好。
这是日志信息的格式。
那在错误页面里怎么打印错误信息呢？当然，用thymeleaf模板来处理前端最合适不过了。
下面，就能使错误信息以纯文本的格式来打印。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rQQm54jX-1584108350297)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583653108507.png)]
为了更好的实现，我们自己要定义异常，以及抛出异常。
自定义异常，并设置状态为找不到资源(HTTPStatus.NOT_FOUND)，即会报404错误。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3fmHLXP-1584108350297)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583653375868.png)]
再看一下控制器，抛出异常：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qzzudIXG-1584108350298)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583653470044.png)]
当然，之前我们做了异常拦截器，这个东西会把所有的异常都跳到我们自定义的error页面，so，我们还要做点逻辑的判断，判断下状态码，不为空的话，就抛出异常。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YA5vR7j8-1584108350298)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583654103273.png)]
#使用AOP作日志处理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Exi8I6IR-1584108350298)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583654187646.png)]
以切面的方式，更爽，分为前后，创建aspect包。既然是Aop，肯定要加注解（aspect，component），来和普通类分别开。
做一个切面类，拦截下所有controller下的请求。也分三个阶段，前，后，最后，这有点像钩子函数，也就是前端的生命周期函数，都是定义好的且有规定的执行顺序的功能函数。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Obc5xJi1-1584108350299)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583654867974.png)]
先完善before，request获得ip和url，joinPoint对象获取类名，方法名，参数。在通过自定义的类，把这些值都传进去：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mYLXZ4sF-1584108350299)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583655150116.png)]
自定义的类：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yd5Ee7g4-1584108350299)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583655334887.png)]
完善剩下的两个：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KLp1p6lv-1584108350300)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583655391253.png)]
看一下控制器：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dO4JXCPQ-1584108350300)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583654705906.png)]
最终的日志效果，可以看到我们想要的信息了：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hrRGawMn-1584108350300)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583655557446.png)]
#页面处理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MBgMHN64-1584108350301)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583655959221.png)]
1.首先，前端文件导入idea，将前端页面整合成符合thymeleaf规范的形式，（即最外层包名为templates，将其他文件都拉入其中）。最后把static也copy进去。
2.布局，修改一些资源引入的格式（link标签里的自定义css，以及一些js的引入，cdn的话不用管，因为是一些网络地址，网络上的都ok，也就是相对路径都需要处理），因为，要符合thymeleaf引擎的语法。利用fragment定义一些公共的页面，类似flask里的layout。写一个文件_fragment.html,里面都是一些片段。
也可以接受参数，例：th：replace表示替换整个html元素，这样就可以使得每个页面的标题都会变。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XOo93x6N-1584108350301)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583656992677.png)]
再看看具体页面的使用，这里以首页为例（~{：：title}）表示传入title这整个元素：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tkf2ge9t-1584108350301)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583657265238.png)]
对于，th：classappend，这个的作用是在class后面能添加信息，这里是添加active，这样在点到哪个页面的时候，哪个页面就会显示**的状态，当然，要做下判断，根据n的值，才知道是具体的哪个页面。
传入n：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b5KL16ls-1584108350302)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583658107528.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LXDrAQiz-1584108350302)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583657994877.png)]
通过以下方式可实现，在模板引擎里有效，在html里是注释：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6oOJwvJi-1584108350303)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583658268739.png)]
3.美化，向错误页里添加footer，以及头部导航，不能只显示一个div，不然太low。
看下中间的：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7xy2XxKM-1584108350303)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583658509212.png)]
美化后：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zFEJ0mDo-1584108350303)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583658541966.png)]
#实体类的设计
以对象来驱动。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lbi2cPEr-1584108350304)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583658613832.png)]
关系：即一对多，多对多。一个用户可以写多个博客…
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5klBR2Y1-1584108350305)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583658731093.png)]
比较特殊的：自关联（评论实体类）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TelALBFJ-1584108350306)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583658870875.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EibQHX0r-1584108350306)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583658940148.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VWRVVfn6-1584108350307)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583658977784.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0TOElGB-1584108350307)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583659001230.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z5KOlfma-1584108350308)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583659023324.png)]
分层思想：web相当于controller层，然后，一层往下调下一层。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OdWRKjXh-1584108350308)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583659075451.png)]
当然，做一个稍微规模大一点的项目，我们肯定要和别人合作完成，就算是一个人，也是需要一点约束的，即方法的命名约定：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CNh8uBrn-1584108350309)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583659263930.png)]
具体实现：新建po包，在下面编写实体类。
blog实体类：需要两个注解，@Entity使该类具备和数据库映射的能力，@Table定义表名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tu8VyBA5-1584108350309)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583659790727.png)]
type：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gpf8pgwV-1584108350309)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583659924950.png)]
Tag：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raREp809-1584108350310)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583659958695.png)]
Commit：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T8EBfgtm-1584108350310)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583660031334.png)]
User：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x7uyd9Qo-1584108350311)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583660084525.png)]
写完类，再这些实体类之间的处理关系：
many的一端作关系维护端，比如博客与类型之间的关系：多对一。
blog端：维护端。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8kT7JJOk-1584108350311)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583660381061.png)]
type端：被维护端。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tjbs098r-1584108350311)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583660439064.png)]
对于多对多关系：要添加级联功能，即新增一个博客是否新增一个标签。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2aXQhrXJ-1584108350312)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583660625720.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KJcqb9mc-1584108350312)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583660678252.png)]
对于自关联的评论，这两个语句都写在一个实体类里：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FubebRCi-1584108350312)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583660847699.png)]
虽说五个类，但是却六张表，有一张是多对多的中间表：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7EFqXAWZ-1584108350313)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583660965245.png)]
#后台登录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8H6SOLMu-1584108350313)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583661076655.png)]
登录页面：copy semantic里自带的登录页面，若找不到的话，随便copy一个登录页面就可。
登录之后进入一个博客列表的页面：后台首页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ybiWNvMe-1584108350313)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583739096057.png)]
完善service包下的接口，先新建一个包service，包下建UserService这个接口，并配置实现类UserServiceimpl：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X25AZg99-1584108350314)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583739345864.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zB6bnAPw-1584108350315)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583739567217.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wCeFVCt8-1584108350315)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583739522176.png)]
完善Dao（使用jpa），继承JpaRepository:jpa可根据名字产生对应功能的sql语句，尿性很强
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nsibtrA2-1584108350315)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583739630175.png)]
编写controller：注意，这里在向前端发送message时，不能用model，因为下面重定向的话，要用addFlashAttribute（下面两图在同一个控制器内）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mqi0tXV8-1584108350316)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583740032466.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bmQNIRn0-1584108350316)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583740165240.png)]
对于login页面的form表单的非空验证：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uMrc4Ky8-1584108350317)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583740908660.png)]
编写登录错误的提示：negative是红色的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f2paBprV-1584108350317)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583741047811.png)]
MD5加密
新建一个工具类的包util，编写MD5Utils类：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-747wbOh9-1584108350317)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583741220919.png)]
应用在serviceimpl：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h3H2xaQq-1584108350317)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583741385544.png)]
拦截器（登录后才能访问首页）
判断session，无得话重定向到admin
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YqOp0Eye-1584108350318)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583742001939.png)]
注册拦截器，并告诉拦截器哪些路径要拦截，哪些不能拦截，不然连登录和提交登录信息的页面都进不去的话，项目显然是玩不成的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMnv6s6f-1584108350318)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583741949812.png)]
分类管理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m7Sk806Y-1584108350318)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583742568859.png)]
前端页面
types：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zkyi8ocp-1584108350319)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583744383425.png)]
type-input：添加种类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fCpNTo3p-1584108350319)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583744181313.png)]
service：每个调用dao的都封装成一个事务@Transactional，那什么是事务呢，传统的理解是和数据库相关，通俗的理解，事务是一组原子操作单元，从数据库角度说，就是一组SQL指令，要么全部执行成功，若因为某个原因其中一条指令执行有错误，则撤销先前执行过的所有指令。更简答的说就是：要么全部执行成功，要么撤销不执行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1OG4ckHV-1584108350320)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583742875301.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-esrR79yr-1584108350321)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583742919205.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zj2pEi2q-1584108350321)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583743065703.png)]
更新的话，要用BeanUtils里的方法copy下，再保存即可。
对于javabean，最直观的理解：属性只能用方法设置或使用
pojo就是一个普通的javabean。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ImkqUne9-1584108350321)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583743343030.png)]
Dao
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ybbj4EGW-1584108350322)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583743018663.png)]
Controller
穿进去的pageable这个对象可以设置每一页显示多少条数据等一系列的配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CY9bVZng-1584108350322)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583743505962.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KhXn6JG3-1584108350322)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583744121484.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8P6i5PU1-1584108350323)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583745596019.png)]
若t为空，则说明没有使用saveType这个函数，原因是已存在对应的内容（重复的）
分页对象：page对象的格式，数据库的数据传到前端是以下的json格式。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fyPFoeeO-1584108350323)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583743659452.png)]
前端显示数据，循环显示，对相应的操作配置路由：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dy8ayxTq-1584108350323)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583743932002.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rSiVrrOL-1584108350323)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583744637220.png)]
如果不是第一页，则显示上一页；反之，若不是最后一页，则显示下一页：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hJq8kIso-1584108350324)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583745181197.png)]
新增功能：不能重复添加分类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iCA2ZtT3-1584108350324)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583746585774.png)]
提示信息：close icon 删除图标
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bavQJoHv-1584108350324)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583745486612.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c3VTYQrw-1584108350325)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583745458016.png)]
那怎麽弹出错误信息呢？其实也不难，用注释可以解决。
注释的作用：对html来说是纯注释，但对thymeleaf来说，是完全可以解析的，所以，用来隐藏错误信息是最合适了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CsF32Wqi-1584108350325)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583745932118.png)]
更新分类：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MAck4elJ-1584108350325)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583747251694.png)]
删除功能：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ao0Bck5H-1584108350325)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583747639018.png)]
#博客列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6jig5BZE-1584108350326)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583748063888.png)]
service：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zqANvj0l-1584108350326)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583748207252.png)]
impl：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3yDP0ar-1584108350326)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583748236812.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MGUuUZ8S-1584108350326)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583748391403.png)]
dao：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6BuBcsCe-1584108350327)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583748284290.png)]
**动态查询：**根据条件来组合。
1.[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IFJo2hQg-1584108350327)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583748839145.png)]
继承jpa的一个类
2.修改impl，cb构建，cq查询，根据我们的拼接自动生成对应的sql语句
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6emoneQ-1584108350327)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583749341958.png)]
controller：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YQzdWBVo-1584108350327)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583749553620.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wr8vJwgS-1584108350328)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583750588996.png)]
前端：可以借鉴分类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzFkDVTG-1584108350328)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583749684362.png)]
这里的上一页，下一页需要再处理一下，th：attr，可自定义属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cq71Bkr6-1584108350328)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583750169072.png)]
对应的js方法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OVcDLdYP-1584108350328)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583750253702.png)]
这里也有个问题，每次输入条件查询时，整个页面都会刷新，会导致输入框内的信息也都清空，而且，性能上也会降低。所以，这里用局部页面刷新**（ajax）来解决这个问题，只刷新下面的查询结果。这里用thymeleaf的片段来实现**。
编写js方法，去请求/admin/blogs/search这个控制器里的方法，到达局部刷新的目的（即只提交blog-list片段），分页的时候调用loaddata。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qHuehYsy-1584108350329)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583751070318.png)]
搜索按钮：id=“search-btn”
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-weMjl095-1584108350329)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583751191240.png)]
js：也是一样的加载数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kAn5Aif6-1584108350329)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583751295395.png)]
在idea里直接使用数据库也是很方便：输个用户名密码啥的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uqgKNBqn-1584108350330)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583751444380.png)]
我们直接在渲染页面的时候，就把查询好的数据返回过去，即返回一个含有所有种类信息的列表：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bJzQo4jd-1584108350330)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583825263559.png)]
前端循环展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FWLDAyc7-1584108350331)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583825377426.png)]
vo（传值对象）：专门用于传递值，其对象属性种类数<po对象（更全面）
专用于博客查询的对象：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3lAl5VBR-1584108350331)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583825743965.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4NlrkIvo-1584108350332)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583825965083.png)]
直接从查询对象来解释。
#博客新增
引入一些公用的组件，一些js，css。
保存和发布按钮的js：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sB1Uo82C-1584108350332)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583826697778.png)]
对相关字段的校验：必填
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k70JxbFZ-1584108350332)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583826829556.png)]
定义大写常量，增强代码可读性：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-czAFxEm1-1584108350333)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583827036314.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7AyNJD5k-1584108350333)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583827454114.png)]
初始化md编辑器
添加博客的controller：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X0uwn30J-1584108350333)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583830042921.png)]
@Transient：表示该字段不会和数据库对应
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xHllndU6-1584108350334)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583830009377.png)]
在添加文章时，后台要自己为用户写的文章设置时间，浏览次数：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qaTKpGPP-1584108350334)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583829630710.png)]
由于文本内容需要很长，所以我们把这个属性定义为大字段类型，对应到数据库是longtext类型。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qMO3yrt2-1584108350334)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583828760773.png)]
清除按钮：点一下，框里的种类信息就会清零
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sfX1b75f-1584108350335)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583829391284.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IuRg3dOd-1584108350335)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583829475785.png)]
对于标签，由于一个文章可以有多个标签，所以把这些id封装为一个数组：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qhsob3ZF-1584108350335)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583829908035.png)]
#博客编辑
根据id，进入博客编辑页面，并且携带这个id对象的一些值（标题，内容）传入。其实这个页面和新建文章页面是共用的。前端接受这个id对象，把值赋到对应的地方。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Yp53ysj-1584108350336)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583832929286.png)]
初始化，将标签都先转为字符串：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2R3Zdwio-1584108350336)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583831065150.png)]
#删除
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YssE0zKH-1584108350336)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583832761982.png)]
支持自定义标签：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e4I3ZNxt-1584108350337)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583833214023.png)]
#前端展示
controller：向前端发送分好页的博客列表，种类和标签的top榜。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKMVLHpi-1584108350337)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583907592709.png)]
博客首页，种类的top榜：
业务层：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gZfU2J86-1584108350337)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583907092783.png)]
dao：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9BzcuLaD-1584108350338)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583907744242.png)]
博客首页，标签的top榜
标签dao层实现接口方法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hn6Ynrh5-1584108350338)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583907305629.png)]
业务层的实现：构造sort对象，规定每页尺寸，取第一页（page：0）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rY0V8pRS-1584108350338)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583907419143.png)]
推荐博客：
先写底层dao：根据更新时间，选最新的，并且是允许推荐的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5yKW7aKt-1584108350338)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583908008722.png)]
service:请求分页，和之前的套路一样。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vZVaaRsr-1584108350339)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583908228905.png)]
controller：提交model，取八条数据。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cXQdyaeW-1584108350339)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583908329987.png)]
日期格式化：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QOwXHHcm-1584108350339)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583908715122.png)]
传递“上一页”，“下一页”参数：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q6wgY42W-1584108350339)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583909016683.png)]
显示top榜的种类数量，因为一对多的关系，一个种类对应多个文章，也就是对应一个数组，用arrays.length()求长度，即该种类的文章数量。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xWIfGNx5-1584108350340)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583909332564.png)]
#前端首页的全局搜索
新建search.html：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6LLCXJ3-1584108350340)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583909768617.png)]
搜索框用form表单包裹：用于提交信息到search页面，跳转新页面。写上name，这样可为信息配一个key值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XBqr8rOA-1584108350340)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583910010267.png)]
dao：使用jbq语句like查询，？1表示传入第一个参数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fHmU3UNK-1584108350341)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583910740018.png)]
sercice实现：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oZR0kuOk-1584108350341)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583910809959.png)]
controller：提交查询结果page，并把插叙语句query保留在搜索框，知道自己查的啥，以及插叙的结果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7gP4JAE5-1584108350341)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583911004641.png)]
前端展示：搜索框里保存查询语句。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zt6CB6Gs-1584108350342)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583911134111.png)]
#详情页
根据博客id来进入详情页，用thymeleaf的语法来整改整个页面。
这里用个md转html的小插件：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uDG6jNOO-1584108350342)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583912173228.png)]
为了保持原数据的安全性，我们新建一个b对象，把要改的copy给b即可，并将md转为HTML。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yu6RoLBv-1584108350342)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583912579215.png)]
controller：实现详情页功能。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xLvo94xu-1584108350342)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583912752211.png)]
#评论功能
子父类循环嵌套
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aBIkfn7V-1584108350343)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583913079611.png)]
校验非空：当点击按钮时触发校验。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqenIPaj-1584108350343)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583915049408.png)]
提交内容，后续清空，添加回滚功能：commentId=-1说明没有父对象，是最顶层评论对象。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UOGmsjtV-1584108350343)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583914595805.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E2rs2oec-1584108350344)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583914629486.png)]
回复功能：给个提示 @XXX，表示回复谁的信息
实现：1.根据对应的博客id返回相应的评论列表；2.添加评论，只要该父评论id不是-1，说明不是顶层评论，那么，就绑定该评论并设置时间。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOslnAlr-1584108350344)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583916413868.png)]
controller：第一个实现局部刷新；第二个实现添加评论
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OBPwAXIq-1584108350344)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583917005870.png)]
评论信息列表展示：加载完页面，就加载评论列表
评论的层级关系：只要两级关系，级别太多不合适，只要根节点是小白，其他所有评论都是同层关系。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3uegg6ex-1584108350344)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583991215235.png)]
凡是顶级的评论，父评论id都为空，我们先把第一层（顶级评论）的数据拿出。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LBo20Pzs-1584108350345)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583993441071.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n20Ap7z6-1584108350345)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583993472243.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMLA4F2C-1584108350345)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583991757928.png)]
把顶级评论下的所有一级子级评论都做循环迭代。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-roAipJzE-1584108350345)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583992199890.png)]
将第一个子节点放入迭代器，把所有子评论都存放在tempReplys这个集合中，这样所有评论都是同级关系了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D9rOVZHu-1584108350346)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583992078713.png)]
实现@某人的效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FATMVw84-1584108350346)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583993579887.png)]
**管理员回复：**和普通访客区别，首先，从session里判断是否有用户，若有则是管理员（因为管理员才能登陆）。首先，要登录后台管理系统，这样前端就能从session里取值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EVzURKX5-1584108350346)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583994682556.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-grmV9Ev9-1584108350346)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583994953175.png)]
#更新浏览次数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qn9ACg88-1584108350347)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583995307642.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qBmayukD-1584108350347)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583995388280.png)]
#博客按分类展示
controller：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kvKqsz0A-1584108350347)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583997205376.png)]
前端：判断类型id是否一致，若一致，则追加一个teal的样式。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y4f1Wzgy-1584108350347)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583997249238.png)]
#博客按标签展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dyRgy6mS-1584108350348)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583997925046.png)]
专门构建一个tagid的查询方法：关联查询。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NwVytiDa-1584108350349)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583997988456.png)]
前端看代码，也之前的类似。
#归档页
查出所有数据的年份，再分组排序一下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jHmthGIy-1584108350350)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583998833690.png)]
service：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lqixIGud-1584108350350)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583998970791.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Os6D3A6v-1584108350350)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583999547470.png)]
自定义jpq语句：实现和sql一样的功能
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hoZkEQ5i-1584108350350)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583999280046.png)]
根据年份查博客列表：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6IjobGSf-1584108350351)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583999482942.png)]
controller调用业务获得service返回的map，并获得博客总数：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vkHFnTPU-1584108350351)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1583999713944.png)]
对应的前端展示，直接看代码，也没啥分析的。
#关于我
做一个静态页面，页面引入头部，footer，标题，这些都在_fragment.html页面里定义好的，之后写controller
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H5Ldz4yM-1584108350351)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1584080633088.png)]
#footer完善
底部可显示最新博客，并且，点击可进入
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ITDhsnq8-1584108350351)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1584080929731.png)]
js向controller请求数据，返回到newblog-container
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cMxwhupT-1584108350352)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1584081465980.png)]
数据返回到_fragment下的newblogList片段
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Pl4bWsn-1584108350352)(C:\Users\G3\AppData\Roaming\Typora\typora-user-images\1584081534255.png)]
；在message.properties里，配置邮箱及qq信息；以及在i18n文件夹里国际化信息