前后端交互案例,图书管理系统

先引入前端代码运行看看是否有问题

图书管理系统

定义前后端交互接口

1.登录

URL : /user/login

参数 : userName=?&password=?

响应 : true/false

2.图书列表展示 :

URL : /book/getBookList

参数 : 无

响应 : List

后端代码如下:

package com.example.book;

import lombok.Data;

import java.math.BigDecimal;

@Data
public class BookInfo {
    private Integer id;
    private String bookName;
    private String author;
    private Integer count;
    private BigDecimal price;
    private String publish;
    private Integer status;//0表示可借阅,1表示不可借阅
    private String statusCN;
}

package com.example.book;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;

@RequestMapping("/user")
@RestController
public class UserController {
    @RequestMapping("/login")
    public Boolean login(String userName, String password, HttpSession session){
        //校验参数
        if (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){
            return false;
        }
        //验证账号密码是否正确
        if ("aaa".equals(userName)&&"aaa".equals(password)){
            //这里不要写成 if(userName.equals("aaa")){}这种写法,因为如果userName为null,会报空指针异常
            //这是开发习惯,需要养成
            //存Session
            session.setAttribute("userName",userName);
            //账号密码正确
            return true;
        }
        return false;
    }
}

package com.example.book;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.awt.print.Book;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;

@RequestMapping("/book")
@RestController
public class BookController {
    @RequestMapping("/getBookList")
    public List getBookList(){
        //1.获取图书的数据
        //2.对图书的数据进行一些处理
        //3.返回数据
        //4.mock 表示虚拟的假数据,专业术语
        List bookInfos = mockData();
        for (BookInfo bookInfo:bookInfos){
            if (bookInfo.getStatus()==1){
                bookInfo.setStatusCN("可借阅");
            }else{
                bookInfo.setStatusCN("不可借阅");
            }
        }
        return bookInfos;
    }

    private List mockData() {
        //优化小tip:对于已知的数据量,或者大概知道这个集合的数据量时,创建List时,建议指定初始化容量
        List bookInfos = new ArrayList<>(15);
        for (int i = 0;i<15;i++){
            BookInfo bookInfo = new BookInfo();
            bookInfo.setId(i);
            bookInfo.setBookName("图书"+i);
            bookInfo.setAuthor(("作者"+i));
            bookInfo.setCount(new Random().nextInt(200));
            bookInfo.setPrice(new BigDecimal(new Random().nextInt(100)));
            bookInfo.setPublish("出版社"+1);
            bookInfo.setStatus(i%5==0?2:1);
            bookInfos.add(bookInfo);
        }
        return bookInfos;
    }
}

然后我们在postman 先进行测试看看有没有问题,返回 true 那就是没问题了

另一个也没问题

然后对前端的代码进行补充,这样就做完了