使用SpringBoot实现，在一个页面内既能查看又能修改某POJO内容：
如下图：
image.png
实现过程：
Model：
/**
* 用户转发小游戏的分享卡片，包括标题（title）和图片地址（picAddress）,
* 自定义场景值cstsrce（custom source）用于区分不同的场景来源，选择不同的标题和图片
* @author Loggyf
* @version 1.0
* @date 2018/12/17 16:35
*/
@Data
@NoArgsConstructor
@Entity
public class ShareContent {
/** 原本是打算不添加ID的，因为需求说只要提供两种场景值。
* 但是后来Hibernate规定：
* 每个持久化实体类都必须有一个用@Id 注解的标识符属性，Hibernate会将这一属性映射到名为ID 的列。
* 为了解决这个问题，我使用下面的枚举类型 CSTSRCE
* */
@Id
@GeneratedValue
private Long id;
@NotNull
private String picAddress;
@NotNull
private String title;
@Enumerated(EnumType.STRING)
private CSTSRCE cstsrce;
public ShareContent(String picAddress, String title) {
this.picAddress = picAddress;
this.title = title;
}
public ShareContent(@NotNull String picAddress, @NotNull String title, CSTSRCE cstsrce) {
this.picAddress = picAddress;
this.title = title;
this.cstsrce = cstsrce;
}
}
/**
*
* 根据需求，转发时，根据用户所在的页面，转发时显示的文字和图片不同，
* 用 Custom Source(CSTSRCE,自定义来源)区分来源
*/
public enum CSTSRCE {
//第一场景来源
FIRST,
//第二场景来源
SECOND
}
Repository:
这个例子太简单就不写service层了。
@Repository
public interface ShareContentRepostitory extends JpaRepository<ShareContent,Long> {
@Override
ShareContent save(ShareContent toSave);
Optional<ShareContent> getTopByTitleNotNullAndCstsrce(CSTSRCE cstsrce);
}
Controller:
@Slf4j
@Controller
@RequestMapping("/api/other")
public class ShareContentController {
@Autowired
ShareContentRepostitory shareContentRepostitory;
@PostMapping("/share/second")
public String updateContentSecond(ShareContent content) {
Optional<ShareContent> shareContent = shareContentRepostitory.getTopByTitleNotNullAndCstsrce(CSTSRCE.SECOND);
if (shareContent.isPresent()){
ShareContent toSave = shareContent.get();
toSave.setPicAddress(content.getPicAddress());
toSave.setTitle(content.getTitle());
toSave.setCstsrce(CSTSRCE.SECOND);
shareContentRepostitory.save(toSave);
return "share/second";
}
content.setCstsrce(CSTSRCE.SECOND);
shareContentRepostitory.save(content);
return "shareContent";
}
@GetMapping("/share/second")
public String getShareContent(Model model) {
Optional<ShareContent> shareContent = shareContentRepostitory.getTopByTitleNotNullAndCstsrce(CSTSRCE.SECOND);
if (shareContent.isPresent()){
model.addAttribute("shareContent",shareContent.get());
}else {
model.addAttribute("shareContent",new ShareContent("http://pisihs4gg.bkt.clouddn.com/share2","这是第二条原生消息22222222222222222"));
}
return "share/second";
}
}
或许也需要接口查看JSON，可以用RestController:
@RestController
@RequestMapping("/api/other")
public class SecondaryController {
@Autowired
ShareContentRepostitory shareContentRepostitory;
@GetMapping("/share2")
public ShareContent getShareContentSecond() {
Optional<ShareContent> shareContent = shareContentRepostitory.getTopByTitleNotNullAndCstsrce(CSTSRCE.SECOND);
if (shareContent.isPresent()) {
return shareContent.get();
}
return new ShareContent("http://pisihs4gg.bkt.clouddn.com/share2", "快来玩这个好玩的游戏！带你当首富");
}
}
最后在前端页面内结合Thymeleaf：
<!--share/second.html-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/fragment.css">
<link rel="stylesheet" href="/css/user/new.css">
<link rel="stylesheet" href="/css/custom.css">
</head>
<body>
<div th:include="fragment/fragment::header"></div>
<div class="container-fluid">
<div style="width:500px;margin: auto">
<br>
<div class="panel panel-default" th:object="${shareContent}">
<div class="panel-heading">
<h3 th:text="${shareContent.title}">Panel title</h3>
</div>
<div class="panel-body">
<img th:src="${shareContent.picAddress}" alt="看到这段文字说明图片损坏了" class="img-responsive">
</div>
</div>
<h3>修改内容</h3>
<form name="form" class="center-block" th:action="@{/api/other/share/second}" th:object="${shareContent}"
method="post">
<div class="input-group">
<span class="input-group-addon">分享标题</span>
<input type="text" name="title" class="form-control" id="username" th:field="*{title}">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">图片地址</span>
<input type="text" name="picAddress" class="form-control" id="password" th:field="*{picAddress}">
<br>
</div>
<br>
<input type="submit" class="form-control btn-success" value="保存"/>
<br>
</form>
</div>
</div>
</body>
</html>
网友评论