共计 4333 个字符，预计需要花费 11 分钟才能阅读完成。
@Controller
@RequestMapping(“/activity/”)
public class ActivityController {
@Autowired
private ActivityService activityService;
@RequestMapping("doSaveObject")
public String doSaveObject(Activity enrity) {activityService.insertObject(enrity);
return "activity";
}
@RequestMapping("doActivityUI")
public String doActivityUI(){return "activity";}
/** 查问所有流动信息 */
@RequestMapping("doFindActivitys")
@ResponseBody// 以字符串返回值;
public List<Activity> doFindActivitys() {List<Activity> list=activityService.findActivitys();
return list;
}}
前端
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
rel="stylesheet"><title>Insert title here</title>
</head>
<body>
<div class="container">
<h1>The Activity Page</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-success" data-toggle="modal"
data-target="#myModal"> 创立新流动 </button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"> 增加流动 </h4>
</div>
<div class="modal-body">
<form action="/activity/doSaveObject" method="post">
<div class="form-group">
<label for="titleId">title</label> <input type="text"
class="form-control" name="title" id="titleId"
placeholder="please input title">
</div>
<div class="form-group">
<label for="cagegoryId">Category</label> <select
class="form-control" name="category" id="category">
<option value="training"> 教育培训 </option>
<option value="Playing"> 企业流动 </option>
</select>
</div>
<div class="form-group">
<label for="startTimeId">start time</label> <input type="text"
class="form-control" name="startTime" id="startTimeId"
placeholder="please input startTime">
</div>
<div class="form-group">
<label for="endTimeId">end time</label> <input type="text"
class="form-control" name="endTime" id="endTimeId"
placeholder="please input end time">
</div>
<div class="form-group">
<label for="remarkId">Remark</label>
<textarea class="form-control" name="remark" id="remarkId"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="doSaveObject()">Save
changes</button>
</div>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>category</th>
<th>start time</th>
<th>end time</th>
<th>state</th>
<th>createdTime</th>
</tr>
</thead>
<tbody id="tbodyId">
<tr>
<td colspan="7"> 数据正在踊跃的加载中......</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也能够依据须要只加载单个插件。-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
// 点击事件
function doSaveObject(){$("form").submit();// 提交表单 submit}
// 向服务端发送异步申请获取流动信息并更新到页面上
function findActivitys(){
let url="/activity/doFindActivitys";
let params={};
// 借助 jquery 中的 ajax 函数, 向服务端发送异步申请获取流动信息
$.ajax({
url:url,
data:params,
dataType:"json",
success:function(result){doHandleQueryResult(result);
}
});
};
// 解决服务端返回的流动信息, 迭代 result, 并将 result 内容填充 tbody 地位
function doHandleQueryResult(result){
///debugger
console.log(result)
//1. 获取 tbody 对象, 并清空原有内容
var tBody=$("#tbodyId");// 原生写法 -document.querySelector("#tbodyId")
tBody.empty();// 清空 tbody 中原有内容
//2. 迭代 result, 将流动信息追加到 tbody 中
result.forEach((item)=>{// 这里的 item 为一个变量, 代表数组中某一个元素
//debugger
tBody.append(
`<tr>
<td>${item.id}</td>
<td>${item.title}</td>
<td>${item.category}</td>
<td>${item.startTime}</td>
<td>${item.endTime}</td>
<td>${item.state==1?'无效':'已完结'}</td>
<td>${item.createdTime}</td>
</tr>`
);
});
}//jquery 中定义的页面加载残缺执行形式如下:
// $(function(){// 如果所有的 js 代码放到 html 页面的 head 标签, 倡议这样写
findActivitys();//});// 页面加载实现当前执行
</script>
</body>
</html>
配置文件
server
server.port=80
server.servlet.context-path=/
spring datasource
spring.datasource.url=jdbc:mysql:///dbactivity?serverTimezone=GMT%2B8&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=dong
spring mybatis
mybatis.mapper-locations=classpath:/mapper//.xml
spring logging
logging.level.com.cy=debug
spring thymeleaf
spring.thymeleaf.prefix=classpath:/templates/modules/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false
正文完