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")

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);
            })

})

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值