简单使用SpringMVC写一个图书管理系统的登入功能和图书展示功能 ...

数据人与超自然意识  金牌会员 | 2024-7-28 01:26:50 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 681|帖子 681|积分 2043

准备好前端的代码

这里已经准备好了前端的代码，这里仅仅简单的先容登入功能，和展示图书列表的功能。
如图：

如上图所示，这里的前端代码还是比力多的，在这里我先容，login.html另有book_list.html这两个。
login.html
如代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="css/bootstrap.min.css">
  9.     <link rel="stylesheet" href="css/login.css">
  10.     <script type="text/javascript" src="js/jquery.min.js"></script>
  11. </head>
  13. <body>
  14. <div class="container-login">
  15.     <div class="container-pic">
  16.         <img src="pic/computer.png" width="350px">
  17.     </div>
  18.     <div class="login-dialog">
  19.         <h3>登陆</h3>
  20.         <div class="row">
  21.             <span>用户名</span>
  22.             <input type="text" name="userName" id="userName" class="form-control">
  23.         </div>
  24.         <div class="row">
  25.             <span>密码</span>
  26.             <input type="password" name="password" id="password" class="form-control">
  27.         </div>
  28.         <div class="row">
  29.             <button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button>
  30.         </div>
  31.     </div>
  32. </div>
  33. <script src="js/jquery.min.js"></script>
  34. <script>
  35.     function login() {
  36.         //前端参数校验省略
  37.         $.ajax({
  38.             url:"/user/login",
  39.             type: "post",
  40.             data: {
  41.                 userName: $("#userName").val(),
  42.                 password: $("#password").val()
  43.             },
  44.             success: function(result){
  45.                 if(result==""){
  46.                     //登录成功
  47.                     location.href = "book_list.html";
  48.                 }else{
  49.                     alert(result);
  50.                 }
  51.             }
  52.         });
  53.         // location.href = "book_list.html";
  54.     }
  55. </script>
  56. </body>
  58. </html>
复制代码
上述代码的核心在这一块，如图：

这里的代码是和后端做交互的，后端的url为/user/login ，哀求的类型为post哀求，然后转达数据，后端再返回效果，如果登入成功就跳转到，“book_list.html”的界面，展示图书。
book_list.html
如代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>图书列表展示</title>
  8.     <link rel="stylesheet" href="css/bootstrap.min.css">
  10.     <link rel="stylesheet" href="css/list.css">
  11.     <script type="text/javascript" src="js/jquery.min.js"></script>
  12.     <script type="text/javascript" src="js/bootstrap.min.js"></script>
  13.     <script src="js/jq-paginator.js"></script>
  15. </head>
  17. <body>
  18. <div class="bookContainer">
  19.     <h2>图书列表展示</h2>
  20.     <div class="navbar-justify-between">
  21.         <div>
  22.             <button class="btn btn-outline-info" type="button" onclick="location.href='book_add.html'">添加图书</button>
  23.             <button class="btn btn-outline-info" type="button" onclick="batchDelete()">批量删除</button>
  24.         </div>
  25.     </div>
  27.     <table>
  28.         <thead>
  29.         <tr>
  30.             <td>选择</td>
  31.             <td class="width100">图书ID</td>
  32.             <td>书名</td>
  33.             <td>作者</td>
  34.             <td>数量</td>
  35.             <td>定价</td>
  36.             <td>出版社</td>
  37.             <td>状态</td>
  38.             <td class="width200">操作</td>
  39.         </tr>
  40.         </thead>
  41.         <tbody>
  42.         <!-- <tr>
  43.             <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
  44.             <td>1</td>
  45.             <td>大秦帝国第一册</td>
  46.             <td>我是作者</td>
  47.             <td>23</td>
  48.             <td>33.00</td>
  49.             <td>北京出版社</td>
  50.             <td>可借阅</td>
  51.             <td>
  52.                 <div class="op">
  53.                     <a href="book_update.html?bookId=1">修改</a>
  54.                     <a href="javascript:void(0)" onclick="deleteBook(1)">删除</a>
  55.                 </div>
  56.             </td>
  57.         </tr> -->
  60.         </tbody>
  61.     </table>
  63.     <div class="demo">
  64.         <ul id="pageContainer" class="pagination justify-content-center"></ul>
  65.     </div>
  66.     <script>
  68.         getBookList();
  69.         function getBookList() {
  70.             $.ajax({
  71.                 type: "get",
  72.                 url: "/book/getList",
  73.                 success: function(books){
  74.                     if(books==null){
  75.                         return;
  76.                     }
  77.                     var finalHtml = "";
  78.                     for(var book of books){
  79.                         //拼接HTML
  80.                         finalHtml +='<tr>';
  81.                         finalHtml +='<td><input type="checkbox" name="selectBook" value="'+book.bookId+'" id="selectBook" class="book-select"></td>';
  82.                         finalHtml +='<td>'+book.bookId+'</td>';
  83.                         finalHtml +='<td>'+book.bookName+'</td>';
  84.                         finalHtml +='<td>'+book.author+'</td>';
  85.                         finalHtml +='<td>'+book.num+'</td>';
  86.                         finalHtml +='<td>'+book.price+'</td>';
  87.                         finalHtml +='<td>'+book.publishName+'</td>';
  88.                         finalHtml +='<td>'+book.stateCN+'</td>';
  89.                         finalHtml +='<td>';
  90.                         finalHtml +='<div class="op">';
  91.                         finalHtml +='<a href="book_update.html?bookId='+book.bookId+'">修改</a>';
  92.                         finalHtml +='<a href="javascript:void(0)" onclick="deleteBook('+book.bookId+')">删除</a>';
  93.                         finalHtml +='</div>';
  94.                         finalHtml +='</td></tr>';
  95.                     }
  96.                     $("tbody").html(finalHtml);
  97.                 }
  98.             });
  99.         }
  101.         //翻页信息
  102.         $("#pageContainer").jqPaginator({
  103.             totalCounts: 100, //总记录数
  104.             pageSize: 10,    //每页的个数
  105.             visiblePages: 5, //可视页数
  106.             currentPage: 1,  //当前页码
  107.             first: '<li class="page-item"><a class="page-link">首页</a></li>',
  108.             prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',
  109.             next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',
  110.             last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',
  111.             page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',
  112.             //页面初始化和页码点击时都会执行
  113.             onPageChange: function (page, type) {
  114.                 console.log("第"+page+"页, 类型:"+type);
  115.             }
  116.         });
  117.         function deleteBook(id) {
  118.             var isDelete = confirm("确认删除?");
  119.             if (isDelete) {
  120.                 //删除图书
  121.                 alert("删除成功");
  122.             }
  123.         }
  124.         function batchDelete() {
  125.             var isDelete = confirm("确认批量删除?");
  126.             if (isDelete) {
  127.                 //获取复选框的id
  128.                 var ids = [];
  129.                 $("input:checkbox[name='selectBook']:checked").each(function () {
  130.                     ids.push($(this).val());
  131.                 });
  132.                 console.log(ids);
  133.                 alert("批量删除成功");
  134.             }
  135.         }
  137.     </script>
  138. </div>
  139. </body>
  141. </html>
复制代码
上述代码，不做先容了，我是主要写后端的代码的，关于这篇文章，仅仅展示图书即可，没涉及到增删改查。
后端代码

第一步：我们就先准备好图书的实体类
如代码：
  1. package com.bite.springbook.model;
  3. import lombok.Data;
  5. import java.math.BigDecimal;
  6. @Data
  7. public class BookInfo {
  8.     private Integer bookId;
  9.     private String bookName;
  10.     private String author;
  11.     private Integer num;
  12.     private BigDecimal price;
  13.     private String publishName;
  14.     private Integer state; //1- 可借阅   2- 不可借阅
  15.     private String stateCN;
  16. }
复制代码
这里我们必要学习，@Data这个注解的作用，这个注解是lombok这个工具内里的，这里他会主动封装好get和set方法，还会重写toStirng方法。
以上就是实体的属性。
第二步：这里我们先写登入功能
如代码：
  1. package com.bite.springbook.controller;
  3. import jakarta.servlet.http.HttpSession;
  4. import org.springframework.util.StringUtils;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  6. import org.springframework.web.bind.annotation.RestController;
  8. @RequestMapping("/user")
  9. @RestController
  10. public class UserController {
  11.     @RequestMapping("/login")
  12.     public String login(String userName , String password , HttpSession session){
  13.         if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){
  14.             return "用户不能为空";
  15.         }
  16.         if(!"zhangsan".equals(userName) || !"123456".equals(password)){
  17.             return "用户或密码错误";
  18.         }
  19.         session.setAttribute("username" , userName);
  20.         return "";
  21.     }
  22. }
复制代码
如上述所述，这里我们用StringUntils的haslength方法，判定输入是否为空，这样可以节省代码量，然后判定用户是否输入错误，其次存储session信息，最后返回效果，和前端校验。
登入代码这些就结束了。
第三步：誊写图书的展示功能
1）controller层
如代码：
  1. package com.bite.springbook.controller;
  4. import com.bite.springbook.model.BookInfo;
  5. import com.bite.springbook.Service.BookService;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.bind.annotation.RestController;
  10. import java.util.List;
  12. @RequestMapping("/book")
  13. @RestController
  14. public class BookController {
  16.     @Autowired
  17.     private BookService bookService;
  19.     @RequestMapping("/getList")
  20.     public List<BookInfo> getList(){
  21.         List<BookInfo> bookInfos = bookService.getList();
  22.         return bookInfos;
  23.     }
  26. }
复制代码
这里我们主要是和前端响应数据用的，controller层调用service层，service层是用于处理业务数据的，这里我们用到了，依赖注入的属性注入来获取service层的对象，如代码中的@Autowired注解。
2）service层
如代码：
  1. package com.bite.springbook.Service;
  3. import com.bite.springbook.dao.BookDao;
  4. import com.bite.springbook.model.BookInfo;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Service;
  8. import java.util.List;
  10. @Service
  11. public class BookService {
  12.     @Autowired
  13.     private BookDao bookDao;
  14.     public List<BookInfo> getList(){
  15.         List<BookInfo> bookInfos = bookDao.mockData();
  16.         for(BookInfo bookInfo : bookInfos){
  17.             if (bookInfo.getState()==1){
  18.                 bookInfo.setStateCN("可借阅");
  19.             }else {
  20.                 bookInfo.setStateCN("不可借阅");
  21.             }
  22.         }
  23.         return bookInfos;
  24.     }
  25. }
复制代码
如图这里通过调用dao层的数据，来举行处理，也用到了对属性注入依赖，在这里我们用到了@Service注解，为了把对象交给Spring管理，通过依赖注入就可以取到对象。
3）dao层
如代码：
  1. package com.bite.springbook.dao;
  3. import com.bite.springbook.model.BookInfo;
  4. import org.springframework.stereotype.Repository;
  6. import java.math.BigDecimal;
  7. import java.util.ArrayList;
  8. import java.util.List;
  10. @Repository
  11. public class BookDao {
  12.     public List<BookInfo> mockData() {
  13.         List<BookInfo> bookInfos = new ArrayList<>();
  14.         for (int i = 0; i < 15; i++) {
  15.             BookInfo bookInfo = new BookInfo();
  16.             bookInfo.setBookId(i);
  17.             bookInfo.setBookName("图书"+i);
  18.             bookInfo.setAuthor("作者"+i);
  19.             bookInfo.setNum(15*i+1);
  20.             bookInfo.setPrice(new BigDecimal(22*i+5-0.5*i));
  21.             bookInfo.setPublishName("出版社"+i);
  22.             bookInfo.setState(i%5==0?2:1);
  23.             bookInfos.add(bookInfo);
  24.         }
  25.         return bookInfos;
  26.     }
  27. }
复制代码
如图上述是主动生成的数据，到后面我会运用mybatis写一个完整的图书系统。这里的@Repository注解和service层的@Service作用一样。
如图运行效果：


等到后面，我会写一个完整的图书管理系统。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

数据人与超自然意识

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表