项目四-图书管理系统

1.创建项目

流程与之前的项目一致，不再进行赘述。

2.需求定义

需求:
1. 登录: ⽤⼾输⼊账号,密码完成登录功能
2. 列表展⽰: 展⽰图书

3.前端界面测试

无法启动！！！--->记得加入mysql相关操作记得在yml进行配置

配置后启动成功！！

我们在测试前端的时候同时可以对用户的需求进行分析。

3.1 需求分析

3.1.1 用户登录

3.1.2 图书列表

根据需求可以得知, 后端需要提供两个接口

1. 账号密码校验接口: 根据输入用户名和密码校验登录是否通过

获取参数：用户名和密码

返回：true或者false

2. 图书列表: 提供图书列表信息

直接返回所有的图书数据

4.接口定义

4.1 登录接口

[URL]

POST /user/login

[ 请求参数 ]

name=admin&password=admin

[ 响应 ]

true // 账号密码验证成功

false// 账号密码验证失败

4.2 图书列表展示

[URL]

POST /book/getList

[ 请求参数 ]

⽆

[ 响应 ]

返回图书列表

[

{

"id": 1,

"bookName": " 活着 ",

"author": " 余华 ",

"count": 270,

"price": 20,

"publish": " 北京⽂艺出版社 ",

"status": 1,

"statusCN": " 可借阅 "

},

...

]

5.服务器代码

5.1 建包

目前我们先建立四个包，

由于现在还没有引入数据库，

dao是mock的数据。

controller是表现层，

model是图书类，

逻辑是controller调用service（写一些逻辑代码），service调用controller。

5.2 建立数据类

5.2.1 图书添加接口

5.2.1.1 图书类(model)

//@Data 注解会帮助我们⾃动⼀些⽅法, 包含getter/setter, equals, toString等

package com.example.demo.model;
import lombok.Data;
import org.springframework.stereotype.Component;

import java.math.BigDecimal;
import java.util.Date;
@Data
@Component
public class BookInfo {
    //图书ID
    private Integer id;
    //书名
    private String bookName;
    //作者
    private String author;
    //数量
    private Integer count;
    //定价
    private BigDecimal price;
    //出版社
    private String publish;
    //状态 0-⽆效 1-允许借阅 2-不允许借阅
    private Integer status;
    private String statusCN;
    //创建时间
    private Date createTime;
    //更新时间
    private Date updateTime;
}

5.2.1.2 数据层(dao/mapper)

//数据访问层: 负责数据访问操作，包括数据的增、删、改、查

//mock了一些假信息

package com.example.demo.dao;

import com.example.demo.model.BookInfo;

import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class BookDao {
    public List<BookInfo> mockData(){
        List<BookInfo> books = new ArrayList<>();
        for (int i=0;i<5;i++){
            BookInfo book = new BookInfo();
            book.setId(i);
            book.setBookName("书籍"+i);
            book.setAuthor("作者"+i);
            book.setCount(i*5+3);
            book.setPrice(new BigDecimal(new Random().nextInt(100)));
            book.setPublish("出版社"+i);
            book.setStatus(1);
            books.add(book);
        }
        return books;
    }
}

5.2.1.3 业务逻辑层（service）

业务逻辑层: 处理具体的业务逻辑

package com.example.demo.service;

import com.example.demo.dao.BookDao;
import com.example.demo.model.BookInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.awt.print.Book;
import java.util.List;

@Service
public class BookService {
    BookDao bookDao=new BookDao();
    public List<BookInfo> getBookList(){
        List<BookInfo> bookInfos=bookDao.mockData();
        for(BookInfo bookInfo:bookInfos){
            if(bookInfo.getStatus()==1){
                bookInfo.setStatusCN("可借阅");
            }else{
                bookInfo.setStatusCN("不可借阅");
            }
        }
        return bookInfos;
    }
}

5.2.1.4 控制层（controller）

@RestController
@RequestMapping("/book")
public class BookController {
    @RequestMapping("/getList")
    public List<BookInfo> getList(){
        BookService bookService=new BookService();
        return bookService.getBookList();
    }
}

5.2.1.5 测试前端接口

上面完成了图书页面展示，我们先来测试以下前端接口

成功！！！

5.2.1.6 前后端交互

我们想要页面加载时就显示图书信息，可以直接写ajax相关语句

为了美观，我们定义一个函数，在函数内部写相关语句，在进行调用。

            getBookList();
            function getBookList() {
                $.ajax({
                    type: "post",
                    url: "/book/getList",
                    //我们想把相关语句，存入<tbody>内，循环
                    success: function(result){
                        console.log(result);//控制台进行打印，方便我们进行检查，看我们是否从服务器拿到信息，可以定位错误
                        if(result!=null){
                            var finalHtml="";
                            for(var book of result){
                                finalHtml += '<tr>';
                                finalHtml += '<td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>';
                                finalHtml += '<td>' + book.id + '</td>';
                                finalHtml += '<td>' + book.bookName + '</td>';
                                finalHtml += '<td>' + book.author + '</td>';
                                finalHtml += '<td>' + book.count + '</td>';
                                finalHtml += '<td>' + book.price + '</td>';
                                finalHtml += '<td>' + book.publish + '</td>';
                                finalHtml += '<td>' + book.statusCN + '</td>';
                                finalHtml += '<td><div class="op">';
                                finalHtml += '<a href="book_update.html?bookId=' + book.id +'">修改</a>';
                                finalHtml += '<a href="javascript:void(0)" onclick="deleteBook('+book.id+')">删除</a>';
                                finalHtml += '</div></td>';
                                finalHtml += "</tr>";
                            }
                        }
                        $("tbody").html(finalHtml);
                    }
                });
            }

正确！！！

5.2.2 用户登录接口

5.2.2.1 控制层

    @RequestMapping("/login")
    public Boolean login(String password, String admin, HttpSession session){
        //账号为空，错误
        if(!StringUtils.hasLength(password)||!StringUtils.hasLength(admin)){
            return false;
        }
        if("admin".equals(admin)&&"password".equals(password)){
            session.setAttribute("admin",admin);
            return true;
        }
        return false;
    }

5.2.2.2 测试

成功！！！

5.2.2.3 前后端交互

 function login() {
            $.ajax({
                type: "post",
                url: "/user/login",
                data:{
                    admin: $("#userName").val(),
                    password: $("#password").val()
                },
                success: function(result){
                    if(result==true){
                        location.href = "book_list.html";
                    }else{
                        alert("账号或密码不正确!!!");
                    }
                }
            });
            
        }