SpringBoot第二节：跳转页面，登录功能_springboot登录页面跳转首页

1.json数据格式:

{“id”:123,“name”:“张三”,“age”:23,“address”:“哈尔滨”}

是js演变而来的 ，前端解析快速。

2.index.html:

1)table和按钮都写完

2）按钮的监听，监听按钮的点击，把后端返回的数据放进table里

$("#test").on("click",function () {
			//匿名函数function里的参数是后端返回的数据
            $.get("jsonTest",function (data) {
          //因为后端返回的是jason格式的数据，所以现在的data
          //参数就是jason类型的对象
                var tr = '<tr><td>'+data.id+'</td><td>'+data.name+'</td><td>'+data.age+'</td><td>'+data.address+'</td></tr>'
         //append方法，是在当前table代码基础上，追加一行数据，不会覆盖之前的
                $("#data").append(tr);
            })

})
IndexController:

```java
//produces可以设置response的contentType，前端根据响应的contentType类型，把返回的数据转换成json对象
//如果不设置成application/json的类型，前端则不会帮我们转换成json对象
@RequestMapping(value = "jsonTest",produces = "application/json; charset=utf-8")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

alert:弹窗输出

index.html:(拼接数据比较麻烦)

 $("#test").on("click",function () {
            $.get("jsonTest",function (data) {
                //因为后端返回的是jason格式的数据，所以现在的data
                //参数就是jason类型的对象
                var tr = '<tr><td>'+data.id+'</td><td>'+data.name+'</td><td>'+data.age+'</td><td>'+data.address+'</td></tr>'
                //append方法，是在当前table代码基础上，追加一行数据，不会覆盖之前的
                $("#data").append(tr);
            })

})
1
2
3
4
5
6
7
8
9
10

3.使用springboot自动进行json转换：map，set

//页面顺序与赋值顺序不一致，HashMap无序
@RequestMapping(value = “jsonTest2”,produces = “application/json; charset=utf-8”)
@ResponseBody
public Map<String, String> jsonTest2(){
//方法返回值是map类型，springboot会自动的帮我们把map里的数据，转换成json数据格式
Map<String,String> result=new HashMap<>();
result.put(“id”,“234”);
result.put(“name”,“李四”);
result.put(“age”,“21”);
result.put(“address”,“北京”);
return result;
}

//页面顺序与赋值顺序一致
@RequestMapping(value = “jsonTest3”,produces = “application/json; charset=utf-8”)
@ResponseBody
public User jsonTest3(){
User user = new User();
user.setId(111);
user.setName(“王五”);
user.setAge(20);
user.setAddress(“上海”);
return user;
}

//属性名作为key，属性值作为value，springboot自动进行转换

3）更加简便的方式：省略prodeuces和@ResponseBody

JsonController:
//让这个类里所有的方法返回的数据都是json格式，
//不需要再加@ResponseBody注解
@RestController
public class JsonController {
@Value("${myphone}")
private String phone;
@RequestMapping(“jsonTest5”)
public User jsonTest5(){
User user = new User();
user.setId(111);
user.setName(“王五”);
user.setAge(20);
user.setAddress(“上海”);
System.out.println(phone);
return user;
}
返回多个用户时,用List：
@RequestMapping(“jsonTest6”)
public List jsonTest6(){
ArrayList result = new ArrayList<>();
for (int i = 0; i < 10; i++) {
User user = new User();
user.setId(111+i);
user.setName(“王五”+i);
user.setAge(20+i);
user.setAddress(“上海”+i);
result.add(user);
}
//springboot默认使用jackson工具对对象进行json序列化
//springboot会帮我们把list集合的数据，转换成json数组
return result;
}
4.前后端分离技术实现登录：

login.html:

用户名：
密码：
使用js监听点击，获取用户名和密码框的值，使用ajax请求，传递后端接口，后端接口判断输入的对不对，返回不同的状态码，决定跳回的不同页面。

JsonController：
@RequestMapping(“login”)
public Map<String,Object> login(String username,String password){
//返回类型
HashMap<String, Object> result = new HashMap<>();
if (“admin”.equals(username) && “1”.equals(password)){
result.put(“code”,1);
result.put(“msg”,“success”);
}else {
result.put(“code”,2);
result.put(“msg”,“用户名或密码错误”);
}
return result;
session的验证要在后端，js在访问后端接口的时候验证。前后端分离

springboot的配置文件可以自定义：配置文件名和属性名可以不同，但是注解里面表达式的名字和配置文件名里必须相同

springboot可以把项目打成jar包，用于在命令行cmd中运行。



org.springframework.boot
spring-boot-maven-plugin



配置之后install