spring MVC 简单案例（3）我的书架管理系统

一、创建项目

最后修改以下 spring 版本 为 2.7.17

Java 版本为 8

同时在 

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.17</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ameris</groupId>
    <artifactId>spring-book</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>spring-book</name>
    <description>spring-book</description>
    <url/>
    <licenses>
        <license/>
    </licenses>
    <developers>
        <developer/>
    </developers>
    <scm>
        <connection/>
        <developerConnection/>
        <tag/>
        <url/>
    </scm>
    <properties>
        <java.version>8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

二、前端代码

三、接口定义

客户端：

1.我需要什么服务

2.我能提供什么参数，是否有这个参数

3.对方提供给我的信息，是否满足我的需求

服务器：

1.提供什么服务

2.需要什么参数

3.处理之后，需要给客户端响应什么数据

3.1 登录

URL:/user/login

参数：

userName 用户名

password 密码

返回：

true：用户名和密码正确

false:用户名或密码错误

3.2 书籍列表

URL:/book/getList

参数：

无

返回：图书列表

List<BookInfo>

四、创建类

4.1 图书信息 BookInfo

id，书名，作者，数量，定价，出版社，状态

4.2 图书控制器 BookController

4.3 用户控制器 UserController

五、编写后端代码

5.1 userController

package com.ameris.springbook;

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

import javax.servlet.http.HttpSession;

@RestController
@RequestMapping("/user")
public class UserController {
    @RequestMapping("/login")
    public boolean login(String userName, String password, HttpSession session){
        //校验参数
        if(!StringUtils.hasLength(userName)||
                "".equals(userName)||
                !StringUtils.hasLength(password)||
                "".equals(password)
        ){
            return false;
        }
        //校验用户名密码是否正确
        if("admin".equals(userName) && "admin".equals(password)){
            //存session
            session.setAttribute("userName",userName);
            return true;
        }
        return false;
    }
}

5.2 BookController

package com.ameris.springbook;

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

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

@RestController
@RequestMapping("/book")
public class BookController {
    @RequestMapping("/getList")
    public List<BookInfo> getList(){
        //1.从数据库获取 list
        //采用Mock的方式(构造虚假的数据进行测试)
        List<BookInfo> bookInfos = mockBookData();

        //2.对数据进行处理（例如：对书记借阅状态进行转换）
        for (BookInfo bookinfo:
             bookInfos) {
            if (bookinfo.getState() == 1){
                bookinfo.setStateCN("可借阅");
            } else if (bookinfo.getState() == 2) {
                bookinfo.setStateCN("不可借阅");
            }
        }
        //3.返回数据
        return bookInfos;
    }

    /**
     * 构造假的数据 进行测试
     * @return
     */
    public List<BookInfo> mockBookData(){
        List<BookInfo> bookInfos = new ArrayList<>();
        for (int i = 1; i <= 15; i++) {
            BookInfo bookInfo = new BookInfo();
            bookInfo.setId(i);
            bookInfo.setBookName("图书"+i);
            bookInfo.setAuthor("作者"+i);
            bookInfo.setCount(i*15+3);
            bookInfo.setPrice(new BigDecimal(new Random().nextInt(100)));
            bookInfo.setPublish("出版社"+1);
            bookInfo.setState(i%5==0?2:1);
            bookInfos.add(bookInfo);//放入list
        }
        return bookInfos;
    }
}

 

六、测试后端接口

七、完成前端代码

7.1 login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body>
    <div class="container-login">
        <div class="container-pic">
            <img src="pic/computer.png" width="350px">
        </div>
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" name="userName" id="userName" class="form-control">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" name="password" id="password" class="form-control">
            </div>
            <div class="row">
                <button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        function login() {
            $.ajax({
                type: "post",
                url: "/user/login",
                data: {
                    userName: $("#userName").val(),
                    password: $("#password").val()
                },
                success: function (result) {
                    if (result == true) {
                        //验证成功，跳转页面到图书列表页
                        location.href = "book_list.html";
                    } else {
                        alert("用户名或密码错误！");
                    }
                }
            });

        }
    </script>
</body>

</html>

7.2 book_list.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书列表展示</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" href="css/list.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/jq-paginator.js"></script>

</head>

<body>
    <div class="bookContainer">
        <h2>图书列表展示</h2>
        <div class="navbar-justify-between">
            <div>
                <button class="btn btn-outline-info" type="button" onclick="location.href='book_add.html'">添加图书</button>
                <button class="btn btn-outline-info" type="button" onclick="batchDelete()">批量删除</button>
            </div>
        </div>

        <table>
            <thead>
                <tr>
                    <td>选择</td>
                    <td class="width100">图书ID</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>数量</td>
                    <td>定价</td>
                    <td>出版社</td>
                    <td>状态</td>
                    <td class="width200">操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
                    <td>1</td>
                    <td>大秦帝国第一册</td>
                    <td>我是作者</td>
                    <td>23</td>
                    <td>33.00</td>
                    <td>北京出版社</td>
                    <td>可借阅</td>
                    <td>
                        <div class="op">
                            <a href="book_update.html?bookId=1">修改</a>
                            <a href="javascript:void(0)" onclick="deleteBook(1)">删除</a>
                        </div>
                    </td>
                </tr>


            </tbody>
        </table>

        <div class="demo">
            <ul id="pageContainer" class="pagination justify-content-center"></ul>
        </div>
        <script>
            //已进入列表网页，就开始加载书籍列表

            getBookList();
            function getBookList() {
                //发起ajax请求
                $.ajax({
                    type: "get",
                    url: "/book/getList",
                    success: function (bookinfos) {
                        console.log(bookinfos);
                        var finalHtml = "";//创建一个标签
                        for (var book of bookinfos) {
                            //拼接html
                            //将book的数据拼接到 finalhtml里
                            finalHtml += '<tr>';
                            finalHtml += '<td><input type="checkbox" name="selectBook" value="' + book.id + '" 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.stateCN + '</td>';
                            finalHtml += '<td>';
                            finalHtml += '<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>';
                            finalHtml += '</td>';
                            finalHtml += '</tr>';
                            //将这个finalhtml加紧 <tbody>里
                            $("tbody").html(finalHtml);

                        }
                    }
                })
            }

            //翻页信息
            $("#pageContainer").jqPaginator({
                totalCounts: 100, //总记录数
                pageSize: 10,    //每页的个数
                visiblePages: 5, //可视页数
                currentPage: 1,  //当前页码
                first: '<li class="page-item"><a class="page-link">首页</a></li>',
                prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',
                next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',
                last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',
                page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',
                //页面初始化和页码点击时都会执行
                onPageChange: function (page, type) {
                    console.log("第" + page + "页, 类型:" + type);
                }
            });
            function deleteBook(id) {
                var isDelete = confirm("确认删除?");
                if (isDelete) {
                    //删除图书
                    alert("删除成功");
                }
            }
            function batchDelete() {
                var isDelete = confirm("确认批量删除?");
                if (isDelete) {
                    //获取复选框的id
                    var ids = [];
                    $("input:checkbox[name='selectBook']:checked").each(function () {
                        ids.push($(this).val());
                    });
                    console.log(ids);
                    alert("批量删除成功");
                }
            }

        </script>
    </div>
</body>

</html>

 

八、调试 

 如果遇到问题，打断点调试，shif+f9

然后发送请求，代码将会执行到断点的位置停下。

选中要分析的代码，右键 点击 evaluate，就可以分析了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/843259.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[Python库](3) Arrow库

[Python库](3) Arrow库

目录 1.简介 2.安装 3.函数 3.1.获取当前UTC时间( 世界协调时时间 ) 3.2.格式化日期 3.3.创建Arrow对象 3.4.时间改变 3.5.获取时间戳 3.6.时区改变 4.小结 1.简介 Arrow库是一个Python库&#xff0c;提供了一套用于处理日期和时间的API。Arrow库特别适合在需要进行大…
阅读更多...
【算法专题】双指针算法之611. 有效三角形的个数（力扣）

【算法专题】双指针算法之611. 有效三角形的个数（力扣）

欢迎来到CILMY23的博客 &#x1f3c6;本篇主题为&#xff1a;双指针算法之611. 有效三角形的个数&#xff08;力扣&#xff09; &#x1f3c6;个人主页&#xff1a;CILMY23-CSDN博客 &#x1f3c6;系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法 | 贪心算法 | Li…
阅读更多...
web安全之跨站脚本攻击xss

web安全之跨站脚本攻击xss

定义: 后果 比如黑客可以通过恶意代码,拿到用户的cookie就可以去登陆了 分类 存储型 攻击者把恶意脚本存储在目标网站的数据库中(没有过滤直接保存)&#xff0c;当用户访问这个页面时&#xff0c;恶意脚本会从数据库中被读取并在用户浏览器中执行。比如在那些允许用户评论的…
阅读更多...
Android APP 基于RecyclerView框架工程（知识体系积累）

Android APP 基于RecyclerView框架工程（知识体系积累）

说明&#xff1a;这个简单的基于RecyclerView的框架作用在于自己可以将平时积累的一些有效demo整合起来&#xff08;比如音视频编解码的、opengles的以及其他也去方向的、随着项目增多&#xff0c;工程量的增加&#xff0c;后期想高效的分析和查找并不容易&#xff09;&#xf…
阅读更多...
java题目之评委打分

java题目之评委打分

public class Main5 {public static void main(String[] args) {//在唱歌比赛中&#xff0c;有6名评委打分&#xff0c;分数范围是[0-100]之间的整数//选手的最后得分为&#xff1a;去掉最高分&#xff0c;最低分后的4个评委的平均分&#xff0c;请完成上述过程中并计算选手的得…
阅读更多...
python实现责任链模式

python实现责任链模式

把多个处理方法串成一个list。下一个list的节点是上一个list的属性。 每个节点都有判断是否能处理当前数据的方法。能处理&#xff0c;则直接处理&#xff0c;不能处理则调用下一个节点&#xff08;也就是当前节点的属性&#xff09;来进行处理。 Python 实现责任链模式&#…
阅读更多...
若依前后端获取当前用户

若依前后端获取当前用户

后端 Autowired private TokenService tokenService;LoginUser loginUser tokenService.getLoginUser(); sysInquiry.setCreateBy(loginUser.getUsername()); sysInquiry.setCreateTime(DateUtils.getNowDate()); 前端 获取使用 const nickName this.$store.state.user.nick…
阅读更多...
为什么有网工刚毕业工资就特别高？

为什么有网工刚毕业工资就特别高？

号主&#xff1a;老杨丨11年资深网络工程师&#xff0c;更多网工提升干货&#xff0c;请关注公众号&#xff1a;网络工程师俱乐部 你们好&#xff0c;我的网工朋友。 不知道你有没有发现这样一个现象&#xff1a; 有的老兄工作了十几年&#xff0c;还是个基层员工&#xff0c…
阅读更多...
【深度学习入门篇 ⑧】关于卷积神经网络

【深度学习入门篇 ⑧】关于卷积神经网络

【&#x1f34a;易编橙&#xff1a;一个帮助编程小伙伴少走弯路的终身成长社群&#x1f34a;】 大家好&#xff0c;我是小森( &#xfe61;ˆoˆ&#xfe61; ) &#xff01; 易编橙终身成长社群创始团队嘉宾&#xff0c;橙似锦计划领衔成员、阿里云专家博主、腾讯云内容共创官…
阅读更多...
多租户分库分表同步数据库DDL脚本

多租户分库分表同步数据库DDL脚本

我们在实现多租户系统的时候&#xff0c;为了数据安全和性能&#xff0c;往往会把数据库设计成一个租户一个数据库&#xff0c;如下图,主库记录了租户信息和对应的数据库地址&#xff0c;租户数据库则存储了租户相关的数据,租户数据库的表结构都是一致的&#xff0c;这种方式有…
阅读更多...
npm 安装报错（已解决）+ 运行 “wue-cli-service”不是内部或外部命令，也不是可运行的程序（已解决）

npm 安装报错（已解决）+ 运行 “wue-cli-service”不是内部或外部命令，也不是可运行的程序（已解决）

首先先说一下我这个项目是3年前的一个项目了&#xff0c;中间也是经过了多个人的修改惨咋了布置多少个人的思想&#xff0c;这这道我手里直接npm都安装不上&#xff0c;在网上也查询了多种方法&#xff0c;终于是找到问题所在了 问题1&#xff1a; 先是npm i 报错在下面图片&…
阅读更多...
全新AI工具——PaintsUndo：一键自动还原图像绘画过程！

全新AI工具——PaintsUndo：一键自动还原图像绘画过程！

ControlNet 作者 Lvmin Zhang 又开始整活了&#xff01;这次发布的PaintsUndo 只需要上传一张图片&#xff0c; 就能够一键生成绘画过程&#xff01;快来了解学习&#xff01; 1、核心技术 PaintsUndo 是一项突破性的技术&#xff0c;旨在通过输入静态图像&#xff0c;自动生…
阅读更多...
SpringCloudAlibaba-Seata2.0.0与Nacos2.2.1

SpringCloudAlibaba-Seata2.0.0与Nacos2.2.1

一、下载 ## 下载seata wget https://github.com/apache/incubator-seata/releases/download/v2.0.0/seata-server-2.0.0.tar.gz## 解压 tar zxvf seata-server-2.0.0.tar.gz二、执行sql文件 ## 取出sql文件执行 cd /seata/script/server/db/mysql ## 找个mysql数据库执行三、…
阅读更多...
分布式服务框架zookeeper+消息队列kafka

分布式服务框架zookeeper+消息队列kafka

一、zookeeper概述 zookeeper是一个分布式服务框架&#xff0c;它主要是用来解决分布式应用中经常遇到的一些数据管理问题&#xff0c;如&#xff1a;命名服务&#xff0c;状态同步&#xff0c;配置中心&#xff0c;集群管理等。 在分布式环境下&#xff0c;经常需要对应用/服…
阅读更多...
钡铼分布式I/O系统边缘计算Modbus，MQTT，OPC UA耦合器BL206

钡铼分布式I/O系统边缘计算Modbus，MQTT，OPC UA耦合器BL206

BL206系列耦合器是一个数据采集和控制系统&#xff0c;基于强大的32 位微处理器设计&#xff0c;采用Linux操作系统&#xff0c;支持Modbus&#xff0c;MQTT&#xff0c;OPC UA协议&#xff0c;可以快速接入现场PLC、DCS、PAS、MES、Ignition和SCADA以及ERP系统&#xff0c;同时…
阅读更多...
numpy（史上最全）

numpy（史上最全）

目录 numpy简介 性能对比 ndarray属性 numpy中的数组&#xff1a; 几个创建的函数&#xff1a; 1) np.ones(shape, dtypeNone, orderC) shape: 形状&#xff0c;使用元组表示 2) np.zeros(shape, dtypefloat, orderC) 3) np.full(shape, fill_value, dtypeNone, orderC)…
阅读更多...
核函数支持向量机（Kernel SVM）

核函数支持向量机（Kernel SVM）

核函数支持向量机&#xff08;Kernel SVM&#xff09;是一种非常强大的分类器&#xff0c;能够在非线性数据集上实现良好的分类效果。以下是关于核函数支持向量机的详细数学模型理论知识推导、实施步骤与参数解读&#xff0c;以及两个多维数据实例&#xff08;一个未优化模型&a…
阅读更多...
IVI(In-Vehicle Infotainment,智能座舱的信息娱乐系统）

IVI(In-Vehicle Infotainment,智能座舱的信息娱乐系统）

IVI能够实现包括三维导航、实时路况、辅助驾驶等在线娱乐功能。 IVI人机交互形式&#xff08;三板斧&#xff09;&#xff1a;声音、图像、文字 IVI人机交互媒介I&#xff08;四件套&#xff09;&#xff1a;中控屏幕&#xff08;显示、触控&#xff09;、仪表显示、语言、方…
阅读更多...
吴恩达大模型系列课程《Prompt Compression and Query Optimization》中文学习打开方式

吴恩达大模型系列课程《Prompt Compression and Query Optimization》中文学习打开方式

Prompt Compression and Query Optimization GPT-4o详细中文注释的Colab观看视频1 浏览器下载插件2 打开官方视频 GPT-4o详细中文注释的Colab 中文注释链接&#xff1a;https://github.com/Czi24/Awesome-MLLM-LLM-Colab/tree/master/Courses/1_Prompt-Compression-and-Query-…
阅读更多...
基于 Three.js 的 3D 模型加载优化

基于 Three.js 的 3D 模型加载优化

作者&#xff1a;来自 vivo 互联网前端团队- Su Ning 作为一个3D的项目&#xff0c;从用户打开页面到最终模型的渲染需要经过多个流程&#xff0c;加载的时间也会比普通的H5项目要更长一些&#xff0c;从而造成大量的用户流失。为了提升首屏加载的转化率&#xff0c;需要尽可能…
阅读更多...
最新文章

Copyright @ 2022~2023