@Controller
@RequestMapping("/activity/")
public class ActivityController {
@Autowiredprivate 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