本文详细介绍了一个项目中前后端如何交互实现书籍信息展示、增删改查功能，包括前端页面设计、后端Controller类编写，以及如何通过URL参数传递数据。
在搭建好项目环境之后，使后端与前端数据产生交互实现相应功能。
1.展示数据库书籍信息
- 编写前端展示书籍样式页面
<head>
<title>书籍展示</title>
<!--添加bootstrao样式连接-->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
h1{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1>
<small>书籍列表———————显示所有书籍</small>
</h1>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>书籍编号</th>
<th>书籍名称</th>
<th>书籍数量</th>
<th>书籍详情</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach var="book" items="${list}">
<tr>
<td>${book.bookID}</td>
<td>${book.bookName}</td>
<td>${book.bookCounts}</td>
<td>${book.detail}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
- 编写Controller类，跳转到allbook页面展示
list就是传入前端页面的数据变量。
@RequestMapping("/allbook")
public String list(Model model){
List<Books> books = bookService.queryAllBook();
model.addAttribute("list",books);
return "allbook";
}
- 在前端的默认页面添加一个跳转到allbook页面的超链接
2.添加新增书籍功能
展示书籍页面添加一个新增书籍功能，通过点击新增书籍，跳转到新增书籍页面，里面可以设置书籍的bookName，bookCounts，detail属性，然后添加到书籍展示页面。
2.1添加跳转新增书籍功能
- allbook页面添加超链接，跳转新增书籍页面。
<a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBook">新增书籍</a>
- 编写添加书籍页面（提供一个form表单）
<head>
<title>新增书籍</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
h1{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1>
<small>新增书籍</small>
</h1>
</div>
</div>
</div>
</div>
<form action="${pageContext.request.contextPath}/book/addBook" method="post">
<div class="form-group">
<label>书籍名称:</label>
<input type="text" name="bookName" class="from-control" required>
</div>
<div class="form-group">
<label>书籍数量:</label>
<input type="text" name="bookCounts" class="from-control" required>
</div>
<div class="form-group">
<label>书籍描述</label>
<input type="text" name="detail" class="from-control" required>
</div>
<div class="forom-group">
<input type="submit" class="form-control" value="添加">
</div>
</form>
</body>
- 编写Controller类
分别编写跳转请求与from表单提交强求，最后重定向到展示全部书籍页面
//跳转添加书籍页面
@RequestMapping("/toAddBook")
public String toAddPaper(){
return "addBook";
}
//添加书籍请求
@RequestMapping("/addBook")
public String addBook(Books books){
System.out.println("addBook=>" + books);
bookService.addBook(books);
return "redirect:/book/allbook";
}
3.修改与删除书籍功能
3.1修改书籍功能
分别在每本书的后面添加一个可以跳转到修改页面的请求链接，在修改页面提供一个from表单修改书籍信息。
1）在每本书籍的后面添加修改请求。
<a href="${pageContext.request.contextPath}/book/toUpdateBook?id=${book.bookID}">修改</a>
添加在forEach里面，为每一本书添加此功能
2）编写修改书籍页面
<head>
<title>修改书籍</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
h1{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1>
<small>修改书籍</small>
</h1>
</div>
</div>
</div>
</div>
<form action="${pageContext.request.contextPath}/book/updateBook" method="post">
<input type="hidden" name="bookID" value="${Qbook.bookID}">
<div class="form-group">
<label>书籍名称:</label>
<input type="text" name="bookName" class="from-control" value="${Qbook.bookName}" required>
</div>
<div class="form-group">
<label>书籍数量:</label>
<input type="text" name="bookCounts" class="from-control" value="${Qbook.bookCounts}" required>
</div>
<div class="form-group">
<label>书籍描述</label>
<input type="text" name="detail" class="from-control" value="${Qbook.detail}" required>
</div>
<div class="forom-group">
<input type="submit" class="form-control" value="修改">
</div>
</form>
</body>
3）编写Controller类，为form表单编写updateBook请求，以及跳转修改页面请求。
//跳转修改页面
@RequestMapping("/toUpdateBook")
public String toUpdateBook(int id, Model model){
Books books = bookService.queryBookById(id);
model.addAttribute("Qbook",books);
return "updateBook";
}
//修改页面请求
@RequestMapping("/updateBook")
public String updateBook(Books books){
System.out.println("updateBook=>"+books);
bookService.updateBook(books);
return "redirect:/book/allbook";
}
注意：我们在前端点击修改时，应该获取到此书的id传入到后端，这样后端才能准确通过sql语句对书进行修改。
3.2删除书籍功能
与修改书籍功能类似，在展示全部书籍页面的每一本书后添加一个删除功能，通过url路径从前端获取到一本书的id值传回后端，删除数据库的相关信息。
获取到书籍id后，sql语句可以直接通过id值删除一本书籍，所以直接在Controller类编写一个删除书籍请求，再重定向到allbook页面即可。
//删除书籍请求
@RequestMapping("/deleteBook/{bookID}")
public String deleteBook(@PathVariable("bookID") int id){
bookService.deleteBook(id);
return "redirect:/book/allbook";
}
4.查询书籍功能
首先需要在展示全部书籍allbook页面添加一个查询表单，输入书籍名相关的文字，然后点击查询，显示查询到的书籍。
- allbook页面添加查询请求
- 编写查询请求
dao层采用的是模糊查询sql语句，可以返回多条相关书籍信息，当输入信息无法查询到，后端返回前端一条“未查到”的报错信息，并且页面不刷新，继续展示所有书籍信息。若查询到书籍信息，返回到allbook页面，继续遍历list，在allbook页面展示出查询到的书籍信息。
@RequestMapping("/queryBook")
public String queryBook(String bookName,Model model){
List<Books> list = bookService.queryBookByName(bookName);
if (list.size() == 0){
list = bookService.queryAllBook();
model.addAttribute("error","未查到");
}
model.addAttribute("list",list);
return "allbook";
}
- 最后需要一个返回allbook页面请求，即回到展示所有书籍页面。
allbook页面添加一个现实全部书籍功能，通过超链接的方式直接跳转回allbook页面。
总结
项目的功能实现是前端与后端交互的一个过程，前端获取一个请求，通过后端的业务逻辑代码获取到数据保存，然后返回给前端所需数据，最后前端将这些数据信息展示给客户，相反，前端也可以获取一些数据信息，提供给后端，如此产生紧密的关联。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
