a大体结构
一 、后台传前台
先建一个实体类:NameBean
public class NameBean {
private String name;
private String kecheng;
private String fenshu;
private int id;
public NameBean() {
}
public NameBean(String name, String kecheng, String fenshu, int id) {
this.name = name;
this.kecheng = kecheng;
this.fenshu = fenshu;
this.id = id;
}
/get/set 略
新建一个FirstController
@Controller
@RequestMapping(value = "/users")
public class FirstController {
@Autowired
public QueryName queryName;
/*向前台传参*/
@RequestMapping(value = "/user")
public ModelAndView index(){
List <NameBean> lists =new ArrayList();
NameBean nameBean=new NameBean("小明","12","11",1);
lists.add(nameBean);
nameBean=new NameBean("小明","13","11",1);
lists.add(nameBean);
nameBean=new NameBean("小明","14","11",1);
lists.add(nameBean);
ModelAndView modelAndView=new ModelAndView("/query");
modelAndView.addObject("lists",lists);
return modelAndView;
}}
新建一个HTML页面 query.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 1000px;" >
<h3 align="center">第一个项目</h3>
<table width="100%" border="1" cellspacing="1" cellpadding="0">
<tr>
<td>姓名</td>
<td>课程</td>
<td>分数</td>
<td>编号</td>
</tr>
<!--/*@thymesVar id="lists" type=""*/-->
<tr th:each="users : ${lists}">
<td th:text="${users.name}">作者</td>
<td th:text="${users.kecheng}">22</td>
<td th:text="${users.fenshu}">22</td>
<td th:text="${users.id}">22</td>
</tr>
</table>
</div>
</body>
</html>
注意:在pom.xml要增加如下配置 注释内容得有 users.后面有红线不影响运行
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.9.RELEASE</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>3.0.9.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
打开http://localhost:9090/users/user 后台数据就会爱前台呈现
二、前后交互
需要一个js
在html里写个表单
然后在head标签里写function tijiao(){}
后台在FristController接收
访问http://localhost:9090/users/query,
查看后台和前台得返回,一个简单得数据交互完成