Spring boot搭建博客
1、maven:
maven是项目构建和管理工具
它可以自动下载jar包
本地仓库
第三方仓库: 加速下载,国立公司(阿里等)
中央仓库:外网,国外的公司
配置指南:
打开 maven 的配置文件( windows 在 maven 安装目录的 conf/settings.xml ),在标签中添加 mirror 子节点:
<mirror>
<id>aliyunmaven</id>
<mirrorOf>*</mirrorOf>
<name>阿里云公共仓库</name>
<url>https://maven.aliyun.com/repository/public</url>
</mirror>
在系统变量中新建 变量名 MAVEN_HOME 变量值: C:\maven (根具自己的maven路径)
在系统变量中的path下创建变量为 %MAVEN_HOME%\bin
测试maven是否安装成功 cmd中 输入 mvn -version
2、idea
第一次使用时
配置jdk:configure -> structure for new project -> 选则本地jdk
配置maven: configure -> setting ->(Build ,Execution) ->Build Tools->mave
选择本地的maven: C:\maven
idea常用快捷键
Alt+ enter : 自动导包
Ctrl + shift + N :模糊匹配查找文件
Ctrl + / 和 Ctrl + shift + / 单行注释或多行注释
Ctrl + B : 快速 打开光标处的类
Tab 或 shift Tab: 缩进
3、spirng boot框架搭建
3.1构建项目的两种方式
1:基于本地服务器进行项目搭建 (有时候会失败)
2:基于官方网站进行项目搭建 https://strat.spring.io 进行项目的创建
3.2创建spring boot项目
改group组织机构 名称,项目名称
勾选spring web,模板thymeleaf,Spring Date JPA,MySQL Driver
在src/resources下将application.properties改名为application.yml
application.yml的配置为
spring:
thymeleaf:
mode: HTML
profiles:
active: pro
新建application-dev.yml (开发环境)
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/blog?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
username: root
password: 123456
jpa:
hibernate:
ddl-auto: update
show-sql: true
logging:
level:
root: info
com.jlf: debug
file:
name: log/blog-dev.log
新建application-pro.yml (生产环境)
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/blog?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
username: root
password: 123456
jpa:
hibernate:
ddl-auto: none
show-sql: true
logging:
level:
root: warn
com.jlf: info
file:
name: log/blog-pro.log
server:
port: 8081
3.3 异常处理
3.3.1定义错误页面
404
500
error
在templates下创建 index.html
在templates下创建文件夹 error,
在error文件下创建404.html,500.html,error.html
在java的com.jlf 下创建 web的package,再包下创建IndexContro.java文件
package com.jlf.blog1.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexContro {
@GetMapping("/")
public String index(){
int i = 9/0 ;
return "index";
}
}
测试页面是否成功
3.3.2定义拦截器
在java的com.jlf 下创建 handle的package,再包下创建ControllerExceptionHandler.java文件
package com.jlf.blog1.handle;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.core.annotation.AnnotationUtils;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
@ControllerAdvice
public class ControllerExceptionHandler {
private final Logger logger = LoggerFactory.getLogger(this.getClass());
@ExceptionHandler(Exception.class)
public ModelAndView exceptionHander(HttpServletRequest request, Exception e) throws Exception {
logger.error("Request URL : {},Exception : {}", request.getRequestURL(),e);
if (AnnotationUtils.findAnnotation(e.getClass(), ResponseStatus.class) != null) {
throw e;
}
ModelAndView mv = new ModelAndView();
mv.addObject("url",request.getRequestURL());
mv.addObject("exception", e);
mv.setViewName("error/error");
return mv;
}
}
测试拦截器是否成功
在error.html中,增加报错日志信息,报错信息可在网页中查看
<div>
<div th:utext="'<!--'" th:remove="tag"></div>
<div th:utext="'Failed Request URL : ' + ${url}" th:remove="tag"></div>
<div th:utext="'Exception message : ' + ${exception.message}" th:remove="tag"></div>
<ul th:remove="tag">
<li th:each="st : ${exception.stackTrace}" th:remove="tag"><span th:utext="${st}" th:remove="tag"></span></li>
</ul>
<div th:utext="'-->'" th:remove="tag"></div>
</div>
3.3.3修改
修改 IndexContro.java
package com.jlf.blog1.web;
import com.jlf.blog1.NotFoundException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexContro {
@GetMapping("/")
public String index(){
// int i = 9/0 ;
String blog = null;
if (blog == null) {
throw new NotFoundException("博客不存在");
}
return "index";
}
}
在blog1下新增加 NotFoundException.java
package com.jlf.blog1;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.ResponseStatus;
@ResponseStatus(HttpStatus.NOT_FOUND)
public class NotFoundException extends RuntimeException{
public NotFoundException (){
}
public NotFoundException (String message){
super(message);
}
public NotFoundException (String message,Throwable cause){
super(message, cause);
}
}
3.4 日志
3.4.1 日志流程
在 java的com.jlf 下创建 名为aspect的package,再在包下创建LogAspect.java文件
package com.jlf.blog1.aspect;
import org.aspectj.lang.annotation.*;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
@Aspect
@Component
public class LogAspect {
private final Logger logger= LoggerFactory.getLogger(this.getClass());
@Pointcut("execution(* com.jlf.blog1.web.*.*(..))")
public void log(){}
@Before("log()")
public void doBefore(){
logger.info("-------doBefore--------");
}
@After("log()")
public void doAfter() {
logger.info("--------doAfter--------");
}
@AfterReturning(returning = "result",pointcut = "log()")
public void doAfterRuturn(Object result) {
logger.info("Result : {}" + result);
}
}
修改IndexContro.java文件
package com.jlf.blog1.web;
import com.jlf.blog1.NotFoundException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
@Controller
public class IndexContro {
@GetMapping("/{id}/{name}")
public String index(@PathVariable Integer id,@PathVariable String name){
// int i = 9/0 ;
// String blog = null;
// if (blog == null) {
// throw new NotFoundException("博客不存在");
// }
System.out.println("---index---");
return "index";
}
}
在url中输入 http://127.0.0.1:8080/3/abc
测试是否成功
3.4.2 增加日志
修改LogAspect.java
package com.jlf.blog1.aspect;
import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.annotation.*;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import javax.servlet.http.HttpServletRequest;
import java.util.Arrays;
@Aspect
@Component
public class LogAspect {
// private final Logger logger = (Logger) LoggerFactory.getLogger(this.getClass());
// private final Logger logger = (Logger) LoggerFactory.getLogger(this.getClass());
private final Logger logger= LoggerFactory.getLogger(this.getClass());
@Pointcut("execution(* com.jlf.blog1.web.*.*(..))")
public void log(){}
@Before("log()")
public void doBefore(JoinPoint joinPoint){
ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
HttpServletRequest request = attributes.getRequest();
String url = request.getRequestURL().toString();
String ip = request.getRemoteAddr();
String classMethod = joinPoint.getSignature().getDeclaringTypeName() + "." + joinPoint.getSignature().getName();
Object[] args = joinPoint.getArgs();
RequestLog requestLog = new RequestLog(url, ip, classMethod, args);
logger.info("Request :{}",requestLog);
}
@After("log()")
public void doAfter() {
//logger.info("--------doAfter--------");
}
@AfterReturning(returning = "result",pointcut = "log()")
public void doAfterRuturn(Object result) {
logger.info("Result : {}" + result);
}
private class RequestLog{
private String url;
private String ip;
private String classMethod;
private Object[] args;
public RequestLog(String url, String ip, String classMethod, Object[] args) {
this.url = url;
this.ip = ip;
this.classMethod = classMethod;
this.args = args;
}
@Override
public String toString() {
return "{" +
"url='" + url + '\'' +
", ip='" + ip + '\'' +
", classMethod='" + classMethod + '\'' +
", args=" + Arrays.toString(args) +
'}';
}
}
}
3.4 页面处理
3.4.1导入静态页面
导入需要修改 css,图片的引入地址
3.4.2thymeleaf布局
css: th:href="@{/css/me.css}"
图片:th:src="@{/image/22.gif}"
templates下新增_fargments.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:replace="${title}">博客详情</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
<link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
<link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini">
<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 white m-moblle-hide" th:classappend="${n==1} ? 'active'"><i class=" home icon"></i> 首页</a>
<a href="#" class="m-item item white m-moblle-hide" th:classappend="${n==2} ? 'active'"><i class=" idea icon"></i> 分类</a>
<a href="#" class="m-item item white m-moblle-hide" th:classappend="${n==3} ? 'active'"><i class=" tags icon"></i> 标签</a>
<a href="#" class="m-item item white m-moblle-hide" th:classappend="${n==4} ? 'active'"><i class=" clone icon"></i> 归档</a>
<a href="#" class="m-item item white m-moblle-hide" th:classappend="${n==5} ? 'active'"><i class=" info icon"></i> 关于我</a>
<div class="right m-item item m-moblle-hide">
<div class="ui icon input inverted transparent">
<input type="text" placeholder="Search.....">
<i class="search icon"></i>
</div>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black button m-right-top m-moblile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<!-- ---------------------- -->
<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive"> <!--11 vertical --> <!--16 把框相框变大 自定义css m-padded-tb-massive-->
<div class="ui center aligned container"> <!-- 13 center aligned 居中文字-->
<div class="ui grid stackable inverted divided"> <!--11 grid 默认把文件分成16单位 现在分成3单位*3 加7单位 divided 添加线条 还要继续反色-->
<div class="three wide column ">
<div class="ui inverted link list">
<div class="item">
<img src="../static/images/me.jpg" th:src="@{/images/me.jpg}" class="ui rounded image" alt="" style="width: 10em;"> <!--12 rounded圆角 width调节大小-->
</div>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">最新博客</h4> <!-- 13 添加文字-->
<div class="ui inverted link list">
<a href="#" class="item">用户故事(user stroy)</a> <!-- 14 要写三行内容-->
<a href="#" class="item">用户故事(user stroy)</a>
<a href="#" class="item">用户故事(user stroy)</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">联系我</h4> <!-- 15 复制1份在另一个 three wide column中 -->
<div class="ui inverted link list">
<a href="#" class="item">Email: 2280606899@qq.com</a>
<a href="#" class="item">用户故事(user stroy)</a>
<a href="#" class="item">用户故事(user stroy)</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header">最新博客</h4>
<p class="m-opacity-mini "> 博客是一个面向开发者的知识分享社区。自创建以来,博客一直致力并专注于为开发者打造一个纯净的技术交流社区</p>
</div>
</div>
<div class="ui inverted section divider "></div> <!--17 添加分隔线 -->
<p class="m-text-spaced m-opacity-tiny"> Copyright@2020-2025 jianglf Design by jianglf</p> <!-- 18 自定义一些样式 透明度等-->
</div>
</footer>
<th:block th:fragment="script">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <!--2.引入jqurey-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <!-- 1.引入cdn-->
<script src="./static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
<script src="./static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script>
$('.menu.toggle').click(function(){
$('.m-item').toggleClass('m-mobile-hide');
});
$('#payButton').popup({
popup : $('.payQR.popup'),
on : 'click',
position:'bottom center'
});
tocbot.init({
// Where to render the table of contents.
tocSelector: '.js-toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.js-toc-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: true,
});
$('.toc.button').popup({
popup : $('.toc-container.popup'),
on : 'click',
position:'left center'
});
</script>
</th:block>
</body>
</html>
3.5 设计表结构
在com.jlf.blog1新建po包,创建Blog.java,comment.java,tag.java,type.java,user.java
3.5.1blog.java
package com.jlf.blog1.po;
import javax.persistence.*;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
@Entity
@Table(name = "t_blog")
public class Blog {
@Id
@GeneratedValue
private Long id;
private String title;
private String content;
private String firstPicture;
private String flag; // 标记
private Integer views; // 浏览次数
private boolean appreciation; // 赞赏次数
private boolean shareStatement; // 版权开启
private boolean commentabled; // 评论开启
private boolean published;
private boolean recommend; // 推荐
private Date createTime;
private Date updateTime;
@ManyToOne
private Type type;
@ManyToMany(cascade = {CascadeType.PERSIST})
private List<Tag> tags = new ArrayList<>();
@ManyToOne
private User user;
@OneToMany(mappedBy = "blog")
private List<Comment> comments = new ArrayList<>();
public Blog(){
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public Type getType() {
return type;
}
public void setType(Type type) {
this.type = type;
}
public String getFirstPicture() {
return firstPicture;
}
public void setFirstPicture(String firstPicture) {
this.firstPicture = firstPicture;
}
public String getFlag() {
return flag;
}
public void setFlag(String flag) {
this.flag = flag;
}
public Integer getViews() {
return views;
}
public void setViews(Integer views) {
this.views = views;
}
public boolean isAppreciation() {
return appreciation;
}
public void setAppreciation(boolean appreciation) {
this.appreciation = appreciation;
}
public boolean isShareStatement() {
return shareStatement;
}
public void setShareStatement(boolean shareStatement) {
this.shareStatement = shareStatement;
}
public boolean isCommentabled() {
return commentabled;
}
public void setCommentabled(boolean commentabled) {
this.commentabled = commentabled;
}
public boolean isPublished() {
return published;
}
public void setPublished(boolean published) {
this.published = published;
}
public boolean isRecommend() {
return recommend;
}
public void setRecommend(boolean recommend) {
this.recommend = recommend;
}
public Date getCreateTime() {
return createTime;
}
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
public Date getUpdateTime() {
return updateTime;
}
public void setUpdateTime(Date updateTime) {
this.updateTime = updateTime;
}
public List<Tag> getTags() {
return tags;
}
public void setTags(List<Tag> tags) {
this.tags = tags;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public List<Comment> getComments() {
return comments;
}
public void setComments(List<Comment> comments) {
this.comments = comments;
}
@Override
public String toString() {
return "Blog{" +
"id=" + id +
", title='" + title + '\'' +
", content='" + content + '\'' +
", firstPicture='" + firstPicture + '\'' +
", flag='" + flag + '\'' +
", views=" + views +
", appreciation=" + appreciation +
", shareStatement=" + shareStatement +
", commentabled=" + commentabled +
", published=" + published +
", recommend=" + recommend +
", createTime=" + createTime +
", updateTime=" + updateTime +
'}';
}
}
3.5.2 Comment.java
package com.jlf.blog1.po;
import javax.persistence.*;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
@Entity
@Table(name = "t_comment")
public class Comment {
@Id
@GeneratedValue
private Long id;
private String nickname;
private String email;
private String content;
private String avatar;
@Temporal(TemporalType.TIMESTAMP)
private Date createTime;
@Temporal(TemporalType.TIMESTAMP)
private Date updateTime;
@ManyToOne
private Blog blog;
@OneToMany(mappedBy = "parentComment")
private List<Comment> replyComments = new ArrayList<>();
@ManyToOne
private Comment parentComment;
public Comment(){
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public String getAvatar() {
return avatar;
}
public void setAvatar(String avatar) {
this.avatar = avatar;
}
public Date getCreateTime() {
return createTime;
}
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
public Date getUpdateTime() {
return updateTime;
}
public void setUpdateTime(Date updateTime) {
this.updateTime = updateTime;
}
public Blog getBlog() {
return blog;
}
public void setBlog(Blog blog) {
this.blog = blog;
}
public List<Comment> getReplyComments() {
return replyComments;
}
public void setReplyComments(List<Comment> replyComments) {
this.replyComments = replyComments;
}
public Comment getParentComment() {
return parentComment;
}
public void setParentComment(Comment parentComment) {
this.parentComment = parentComment;
}
@Override
public String toString() {
return "Comment{" +
"id=" + id +
", nickname='" + nickname + '\'' +
", email='" + email + '\'' +
", content='" + content + '\'' +
", avatar='" + avatar + '\'' +
", createTime=" + createTime +
'}';
}
}
3.5.3Tag.java
package com.jlf.blog1.po;
import javax.persistence.*;
import java.util.ArrayList;
import java.util.List;
@Entity
@Table(name = "t_tag")
public class Tag {
@Id
@GeneratedValue
private Long id;
private String name;
@ManyToMany(mappedBy = "tags")
private List<Blog> blogs = new ArrayList<>();
public List<Blog> getBlogs() {
return blogs;
}
public void setBlogs(List<Blog> blogs) {
this.blogs = blogs;
}
public Tag(){
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Tag{" +
"id=" + id +
", name='" + name + '\'' +
'}';
}
}
3.5.4 type.java
package com.jlf.blog1.po;
import javax.persistence.*;
import java.util.ArrayList;
import java.util.List;
@Entity
@Table(name = "t_type")
public class Type {
@Id
@GeneratedValue
private Long id;
private String name;
@OneToMany(mappedBy = "type")
private List<Blog> blogs = new ArrayList<>();
public Type() {
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public List<Blog> getBlogs() {
return blogs;
}
public void setBlogs(List<Blog> blogs) {
this.blogs = blogs;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Type{" +
"id=" + id +
", name='" + name + '\'' +
'}';
}
}
3.5.5 User.java
package com.jlf.blog1.po;
import javax.persistence.*;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
@Entity
@Table(name = "t_user")
public class User {
@Id
@GeneratedValue
private Long id;
private String nickname;
private String username;
private String password;
private String email;
private String avatar;
private Integer type;
@Temporal(TemporalType.TIMESTAMP)
private Date CreateTime;
@Temporal(TemporalType.TIMESTAMP)
private Date UpdateTime;
@OneToMany(mappedBy = "user")
private List<Blog> blogs = new ArrayList<>();
public User(){
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getAvatar() {
return avatar;
}
public void setAvatar(String avatar) {
this.avatar = avatar;
}
public Integer getType() {
return type;
}
public void setType(Integer type) {
this.type = type;
}
public Date getCreateTime() {
return CreateTime;
}
public void setCreateTime(Date createTime) {
CreateTime = createTime;
}
public Date getUpdateTime() {
return UpdateTime;
}
public void setUpdateTime(Date updateTime) {
UpdateTime = updateTime;
}
public List<Blog> getBlogs() {
return blogs;
}
public void setBlogs(List<Blog> blogs) {
this.blogs = blogs;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", nickname='" + nickname + '\'' +
", username='" + username + '\'' +
", password='" + password + '\'' +
", email='" + email + '\'' +
", avatar='" + avatar + '\'' +
", type=" + type +
", CreateTime=" + CreateTime +
", UpdateTime=" + UpdateTime +
'}';
}
}
3.6 后台登录
3.6.1 构建网页
在template下构建login.html,_fragments.html,index.html
login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>博客管理登录</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>
<br>
<br>
<br>
<br><br>
<br><br>
<div class="m-container m-padded-tb-massive" style="max-width: 30em !important;">
<div class="ur container">
<div class="column">
<h2 class="ui teal image header">
<div class="content">
管理后台登录
</div>
</h2>
<form class="ui large form" method="post" action="#" th:action="@{/admin/login}">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="username" placeholder="用户名">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="密码">
</div>
</div>
<div class="ui fluid large teal submit button">登 录</div>
</div>
<div class="ui error message"></div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>
</html>
_fragments.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:replace="${title}">博客详情</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
<link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
<link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small m-shadow-small">
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">管理后台</h2>
<a href="#" class="m-item item white m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class=" home icon"></i> 博客</a>
<a href="#" class="m-item item white m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class=" idea icon"></i> 分类</a>
<a href="#" class="m-item item white m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class=" tags icon"></i> 标签</a>
<div class="right m-item menu m-mobile-hide">
<div class="ui dropdown m-item item">
<div class="text">
<img class="ui avatar image" src="../../static/images/me.jpg">
anonymous
</div>
<i class="dropdown icon "></i>
<div class="menu">
<a href="#" class="item">注销</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black button m-right-top m-moblile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<!-- ---------------------- -->
<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive"> <!--11 vertical --> <!--16 把框相框变大 自定义css m-padded-tb-massive-->
<div class="ui center aligned container"> <!-- 13 center aligned 居中文字-->
<div class="ui grid stackable inverted divided"> <!--11 grid 默认把文件分成16单位 现在分成3单位*3 加7单位 divided 添加线条 还要继续反色-->
<div class="three wide column ">
<div class="ui inverted link list">
<div class="item">
<img src="../static/images/me.jpg" th:src="@{/images/me.jpg}" class="ui rounded image" alt="" style="width: 10em;"> <!--12 rounded圆角 width调节大小-->
</div>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">最新博客</h4> <!-- 13 添加文字-->
<div class="ui inverted link list">
<a href="#" class="item">用户故事(user stroy)</a> <!-- 14 要写三行内容-->
<a href="#" class="item">用户故事(user stroy)</a>
<a href="#" class="item">用户故事(user stroy)</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">联系我</h4> <!-- 15 复制1份在另一个 three wide column中 -->
<div class="ui inverted link list">
<a href="#" class="item">Email: 2280606899@qq.com</a>
<a href="#" class="item">用户故事(user stroy)</a>
<a href="#" class="item">用户故事(user stroy)</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header">最新博客</h4>
<p class="m-opacity-mini "> 博客是一个面向开发者的知识分享社区。自创建以来,博客一直致力并专注于为开发者打造一个纯净的技术交流社区</p>
</div>
</div>
<div class="ui inverted section divider "></div> <!--17 添加分隔线 -->
<p class="m-text-spaced m-opacity-tiny"> Copyright@2020-2025 jianglf Design by jianglf</p> <!-- 18 自定义一些样式 透明度等-->
</div>
</footer>
<th:block th:fragment="script">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <!--2.引入jqurey-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <!-- 1.引入cdn-->
<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script>
$('.menu.toggle').click(function(){
$('.m-item').toggleClass('m-mobile-hide');
});
$('#payButton').popup({
popup : $('.payQR.popup'),
on : 'click',
position:'bottom center'
});
tocbot.init({
// Where to render the table of contents.
tocSelector: '.js-toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.js-toc-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: true,
});
$('.toc.button').popup({
popup : $('.toc-container.popup'),
on : 'click',
position:'left center'
});
</script>
</th:block>
</body>
</html>
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>博客管理</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>
<!--导航-->
<nav th:replace="admin/_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small m-shadow-small">
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">管理后台</h2>
<a href="#" class="m-item item white m-mobile-hide"><i class=" home icon"></i> 博客</a>
<a href="#" class="m-item item white m-mobile-hide"><i class=" idea icon"></i> 分类</a>
<a href="#" class="m-item item white m-mobile-hide"><i class=" tags icon"></i> 标签</a>
<div class="right m-item menu m-mobile-hide">
<div class="ui dropdown m-item item">
<div class="text">
<img class="ui avatar image" src="../../static/images/me.jpg">
anonymous
</div>
<i class="dropdown icon "></i>
<div class="menu">
<a href="#" class="item">注销</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black button m-right-top m-moblile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<div class="ui attached pointing menu">
<div class="ui container">
<div class="right menu">
<a href="#" class=" item">发布</a>
<a href="#" class="active item teal">列表</a>
</div>
</div>
</div>
<div class="m-container-small m-padded-tb-massive">
<div class="ui container">
<div class="ui success large message">
<h3>Hi</h3>
<p>jianglinfu,welcome</p>
</div>
<div >
<img src="../../static/images/login.jpg" class="ui rounded bordered fluid image">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <!--2.引入jqurey-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <!-- 1.引入cdn-->
<script>
$('.menu.toggle').click(function(){
$('.m-item').toggleClass('m-mobile-hide');
});
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
3.6.2 登录的实现
构建dao层
新建UserRepository.java
package com.jlf.blog1.Dao;
import com.jlf.blog1.po.User;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User,Long> {
User findByUsernameAndPassword (String username,String password);
}
构建service层
新建 UserService.java
package com.jlf.blog1.service;
import com.jlf.blog1.po.User;
public interface UserService {
User checkUser(String username,String password);
}
新建UserServiceimpl.java
package com.jlf.blog1.service;
import com.jlf.blog1.Dao.UserRepository;
import com.jlf.blog1.po.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class UserServiceimpl implements UserService{
@Autowired
private UserRepository userRepository;
@Override
public User checkUser(String username, String password) {
User user = userRepository.findByUsernameAndPassword(username, password);
return user;
}
}
构建web层
新建LoginController.java
package com.jlf.blog1.web.admin;
import com.jlf.blog1.po.User;
import com.jlf.blog1.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import javax.servlet.http.HttpSession;
@Controller
@RequestMapping("/admin")
public class LoginController {
@Autowired
private UserService userService;
@GetMapping
public String loginPage() {
return "admin/login";
}
@PostMapping("/login")
public String login(@RequestParam String username,
@RequestParam String password,
HttpSession session,
RedirectAttributes attributes) {
User user = userService.checkUser(username, password);
if (user != null) {
user.setPassword(null);
session.setAttribute("user",user);
return "admin/index";
} else {
attributes.addFlashAttribute("message", "用户名和密码错误");
return "redirect:/admin";
}
}
@GetMapping("/logout")
public String logout(HttpSession session) {
session.removeAttribute("user");
return "redirect:/admin";
}
}
3.6.3 MD5加密
新增util包,建立MD5Utils.java
package com.jlf.blog1.util;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
public class MD5Utils {
public static String code(String str){
try {
MessageDigest md = MessageDigest.getInstance("MD5");
md.update(str.getBytes());
byte[]byteDigest = md.digest();
int i;
StringBuffer buf = new StringBuffer("");
for (int offset = 0; offset < byteDigest.length; offset++) {
i = byteDigest[offset];
if (i < 0)
i += 256;
if (i < 16)
buf.append("0");
buf.append(Integer.toHexString(i));
}
//32位加密
return buf.toString();
// 16位的加密
//return buf.toString().substring(8, 24);
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
return null;
}
}
public static void main(String[] args) {
System.out.println(code("jlfjlf"));
}
}
修改数据库的为MD5密码
修改UserServiceimpl.java
@Override
public User checkUser(String username, String password) {
User user = userRepository.findByUsernameAndPassword(username, MD5Utils.code(password));
return user;
}
3.6.5 登录拦截器
新建interceptor包,创建
LoginInterceptor.java
package com.jlf.blog1.interceptor;
import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginInterceptor extends HandlerInterceptorAdapter {
@Override
public boolean preHandle(HttpServletRequest request,
HttpServletResponse response,
Object handler) throws Exception {
if (request.getSession().getAttribute("user") == null) {
response.sendRedirect("/admin");
return false;
}
return true;
}
}
创建 WebConfig.java
package com.jlf.blog1.interceptor;
import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginInterceptor extends HandlerInterceptorAdapter {
@Override
public boolean preHandle(HttpServletRequest request,
HttpServletResponse response,
Object handler) throws Exception {
if (request.getSession().getAttribute("user") == null) {
response.sendRedirect("/admin");
return false;
}
return true;
}
}
package com.jlf.blog1.web.admin;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/admin")
public class BlogController {
@GetMapping("/blogs")
public String blogs(){
return "admin/blogs";
}
}
3.7 后台分类管理
3.7.1 构建dao层
创建TypeRepository.java
package com.jlf.blog1.Dao;
import com.jlf.blog1.po.Type;
import org.springframework.data.jpa.repository.JpaRepository;
public interface TypeRepository extends JpaRepository<Type, Long> {
Type findByName(String name); // 查重名
}
3.7.2 构建Service层
TypeService.java
package com.jlf.blog1.service;
import com.jlf.blog1.po.Type;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
public interface TypeService {
Type saveType(Type type);
Type getType(Long id);
Type getTypeByName(String name); // 不能提交重名
Page<Type> listType(Pageable pageable);
Type updateType(Long id,Type type);
void deleteType(Long id);
}
TypeServiceImpl.java
package com.jlf.blog1.service;
import com.jlf.blog1.Dao.TypeRepository;
import com.jlf.blog1.NotFoundException;
import com.jlf.blog1.po.Type;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;
import javax.transaction.Transactional;
@Service
public class TypeServiceImpl implements TypeService{
@Autowired
private TypeRepository typeRepository;
@Transactional
@Override
public Type saveType(Type type) {
return typeRepository.save(type);
}
@Transactional
@Override
public Type getType(Long id) {
return typeRepository.findOne(id);
}
@Override
public Type getTypeByName(String name) {
return typeRepository.findByName(name); // 查是否重名
}
@Transactional
@Override
public Page<Type> listType(Pageable pageable) {
return typeRepository.findAll(pageable);
}
@Transactional
@Override
public Type updateType(Long id, Type type) {
Type t = typeRepository.findOne(id);
if (t == null){
throw new NotFoundException("不存在该类型");
}
BeanUtils.copyProperties(type,t);
return typeRepository.save(t);
}
@Transactional
@Override
public void deleteType(Long id) {
typeRepository.delete(id);
}
}
3.7.3 构建control层
package com.jlf.blog1.web.admin;
import com.jlf.blog1.po.Type;
import com.jlf.blog1.service.TypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.web.PageableDefault;
import org.springframework.ui.Model;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import javax.jws.WebParam;
import javax.validation.Valid;
@Controller
@RequestMapping("/admin")
public class TypeController {
@Autowired
private TypeService typeService;
@GetMapping("/types")
public String list(@PageableDefault(size = 3,sort = {"id"}, direction = Sort.Direction.DESC)
Pageable pageable, Model model){
model.addAttribute("page",typeService.listType(pageable));
typeService.listType(pageable);
return "admin/types";
}
@GetMapping("/types/input")
public String input(Model model)
{
model.addAttribute("type",new Type());
return "admin/types-input";
}
@GetMapping("/types/{id}/input")
public String editInput(@PathVariable Long id, Model model){
model.addAttribute("type",typeService.getType(id));
return "admin/types-input";
}
@PostMapping("/types")
public String post(@Valid Type type, BindingResult result, RedirectAttributes attributes){
Type type1 = typeService.getTypeByName(type.getName());
if (type1 != null){
result.rejectValue("name","nameError","不能重复添加分类");
} // 判断是否重复添加
if (result.hasErrors()){
return "admin/types-input";
}
Type t = typeService.saveType(type);
if (t == null){
attributes.addFlashAttribute("message","操作失败");
} else {
attributes.addFlashAttribute("message","操作成功");
}
return "redirect:/admin/types";
}
@PostMapping("/types/{id}")
public String editPost(@Valid Type type, BindingResult result,@PathVariable Long id, RedirectAttributes attributes) {
Type type1 = typeService.getTypeByName(type.getName());
if (type1 != null) {
result.rejectValue("name","nameError","不能添加重复的分类");
}
if (result.hasErrors()) {
return "admin/types-input";
}
Type t = typeService.updateType(id,type);
if (t == null ) {
attributes.addFlashAttribute("message", "更新失败");
} else {
attributes.addFlashAttribute("message", "更新成功");
}
return "redirect:/admin/types";
}
@GetMapping("/types/{id}/delete")
public String delete(@PathVariable Long id,RedirectAttributes attributes) {
typeService.deleteType(id);
attributes.addFlashAttribute("message", "删除成功");
return "redirect:/admin/types";
}
}
3.7.4 重构types.html,types-input.html
types.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>分类管理</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>
<!--导航-->
<nav th:replace="admin/_fragments :: menu(2)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small m-shadow-small">
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">管理后台</h2>
<a href="#" class="m-item item white m-mobile-hide"><i class=" home icon"></i> 博客</a>
<a href="#" class="m-item item white m-mobile-hide"><i class=" idea icon"></i> 分类</a>
<a href="#" class="m-item item white m-mobile-hide"><i class=" tags icon"></i> 标签</a>
<div class="right m-item menu m-mobile-hide">
<div class="ui dropdown m-item item">
<div class="text">
<img class="ui avatar image" src="../../static/images/me.jpg">
anonymous
</div>
<i class="dropdown icon "></i>
<div class="menu">
<a href="#" class="item">注销</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black button m-right-top m-moblile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<div class="ui attached pointing menu">
<div class="ui container">
<div class="right menu">
<a href="#" class=" item">新增</a>
<a href="#" class="active item teal">列表</a>
</div>
</div>
</div>
<!--中间内容-->
<div class="m-container-small m-padded-tb-massive">
<div class="ui container">
<div class="ui success message" th:unless="${#strings.isEmpty(message)}">
<i class="close icon"></i>
<div class="header">提示:</div>
<p th:text="${message}">恭喜,操作成功!</p>
</div>
<table class="ui table celled compact teal">
<thead>
<tr>
<th></th>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="type,iterStat : ${page.content}">
<td th:text="${iterStat.count}">1</td>
<td th:text="${type.name}">什么是spirng</td>
<td>
<a href="#" th:href="@{/admin/types/{id}/input(id=${type.id})}" class="ui mini teal basic button">编辑</a>
<a href="#" th:href="@{/admin/types/{id}/delete(id=${type.id})}" class="ui mini red basic button">删除</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="6" >
<div class="ui mini pagination menu" th:if="${page.totalPages}>1">
<a th:href="@{/admin/types(page=${page.number}-1)}" class="item" th:unless="${page.first}">上一页</a>
<a th:href="@{/admin/types(page=${page.number}+1)}" class="item" th:unless="${page.last}">下一页</a>
</div>
<a href="#" th:href="@{/admin/types/input}" class="ui teal right floated mini basic button">新增</a>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<br>
<br>
<br><br>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <!--2.引入jqurey-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <!-- 1.引入cdn-->
<script>
$('.menu.toggle').click(function(){
$('.m-item').toggleClass('m-mobile-hide');
});
$('.ui.dropdown').dropdown();
$('.message .close')
.on('click', function () {
$(this)
.closest('.message')
.transition('fade');
});
</script>
</body>
</html>
types-input.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>分类新增</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>
<!--导航-->
<nav th:replace="admin/_fragments :: menu(2)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small m-shadow-small">
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">管理后台</h2>
<a href="#" class="m-item item white m-mobile-hide"><i class=" home icon"></i> 博客</a>
<a href="#" class="m-item item white m-mobile-hide"><i class=" idea icon"></i> 分类</a>
<a href="#" class="m-item item white m-mobile-hide"><i class=" tags icon"></i> 标签</a>
<div class="right m-item menu m-mobile-hide">
<div class="ui dropdown m-item item">
<div class="text">
<img class="ui avatar image" src="../../static/images/me.jpg">
anonymous
</div>
<i class="dropdown icon "></i>
<div class="menu">
<a href="#" class="item">注销</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black button m-right-top m-moblile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<div class="ui attached pointing menu">
<div class="ui container">
<div class="right menu">
<a href="#" class=" item">发布</a>
<a href="#" class="active item teal">列表</a>
</div>
</div>
</div>
<!--中间内容-->
<div class="m-container-small m-padded-tb-massive">
<div class="ui container">
<form action="#" method="post" th:action="@{/admin/types}" th:object="${type}" class="ui form">
<input type="hidden" name="id">
<div class="required field">
<div class="ui left labeled input">
<label class="ui teal basic label">名称</label>
<input type="text" name="name" placeholder="分类名称" th:value="*{name}" >
</div>
</div>
<div class="ui error message"></div>
<!--/*/
<div class="ui negative message" th:if="${#fields.hasErrors('name')}" >
<i class="close icon"></i>
<div class="header">验证失败</div>
<p th:errors="*{name}">提交信息不符合规则</p>
</div>
/*/-->
<div class="ui right aligned container">
<button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
<button class="ui teal submit button">提交</button>
</div>
</form>
</div>
</div>
<br>
<br>
<br><br>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <!--2.引入jqurey-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <!-- 1.引入cdn-->
<script>
$('.menu.toggle').click(function(){
$('.m-item').toggleClass('m-mobile-hide');
});
$('.ui.dropdown').dropdown();
$('.ui.form').form({
fields : {
title : {
identifier: 'name',
rules: [{
type : 'empty',
prompt: '请输入分类名称'
}]
}
}
});
</script>
</body>
</html>