承接上文,在测试完成后,简单实现猴子信息的增删改查
1,编写公共页面,test.jsp,并且自带查询全部猴子信息功能
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title>Title</title> <%--BootStrap美化界面--%> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet""> </head> <body style="background: aquamarine"> <div> <div class="container" align="center"> <div class="col-md-12 column"> <div class="page-header" > <h1> <small>猴子信息------显示列表</small> </h1> </div> </div> </div> <div class="container"> <div class="col-md-4 column"> <a href="${pageContext.request.contextPath}/t1/addMonkey">增加猴子</a> </div> </div> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-hover table-striped"> <thead> <tr> <th>猴子id</th> <th>猴子姓名</th> <th>猴子地址</th> <th>猴子email</th> <th>操作</th> </tr> </thead> <tbody> <c:forEach var="monkey" items="${list}"> <tr> <td>${monkey.id}</td> <td>${monkey.name}</td> <td>${monkey.address}</td> <td>${monkey.email}</td> <td> <a href="/t1/toUpdate?id=${monkey.id}">修改</a> | <a href="/t1/delete?id=${monkey.id}">删除</a> </td> </tr> </c:forEach> </tbody> </table> </div> </div> </div> </body> </html>
2,一个简单地页面显示出来
3,控制层中MonkeyCon类
package controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Qualifier; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import pojo.Monkey; import services.MonkeyServicesImpl; import java.util.List; @Controller //浏览器访问的映射路径:(/t1/c1) @RequestMapping("/t1") public class MonkeyCon { @Autowired @Qualifier("monkeyServicesImpl") private MonkeyServicesImpl monkeyServices; //主界面 @RequestMapping("/c1") public String qaq(Model model){ List<Monkey> list = monkeyServices.select(); model.addAttribute("list",list); return "test"; } //跳转到增加猴子 @RequestMapping("/addMonkey") public String addMonkey(){ return "addMonkey"; } //增加猴子完返回到首页,首页自带查询功能 @RequestMapping("/returnC1") public String returnC1(Monkey monkey){ //控制层调用业务层,将数据加入到数据库中 monkeyServices.insert(monkey); //重定向到页面 return "redirect:/t1/c1"; } //更新界面 @RequestMapping("/toUpdate") public String getMonkey(int id,Model model){ System.out.println("修改了" + id + "几本数"); Monkey monkey = monkeyServices.getMonkey(id); model.addAttribute(monkey); return "update"; } //更新完提交事务的界面 @RequestMapping("/updateOver") public String UpdateOver(Monkey monkey){ int update = monkeyServices.update(monkey); System.out.println("猴子更新成功!"); return "redirect:/t1/c1"; } //删除界面,根据id删除一只猴子 @RequestMapping("/delete") public String delete(int id){ int delete = monkeyServices.delete(id); System.out.println("删除成功!"); return "redirect:/t1/c1"; } }
4,点击增加猴子超链接后增加猴子信息的页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head style="background: deepskyblue"> <title>增加猴子</title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet""> </head> <body> <div class="container" align="center"> <div class="col-md-12 column"> <div class="page-header" > <h3>更新猴子信息</h3> </div> </div> </div> <div align="center"> <form action="/t1/returnC1" method="get"> <div class="form-group"> <label>猴子id</label> <input type="text" class="form-control" name="id" placeholder="请输入id" required><br> <label>猴子名称</label> <input type="text" class="form-control" name="name" placeholder="请输入名称" required><br> <label>猴子地址</label><br> <input type="text" class="form-control" name="address" placeholder="请输入地址" required><br> <label>猴子email</label><br> <input type="text" class="form-control" name="email" placeholder="请输入email" required><br> <input type="submit" value="添加"> </div> </form> </div> </body> </html>
5,修改猴子信息的页面
思路:在每一个猴子信息后面中都有更新和删除键,在更新的超链接后面新增一个id参数,为猴子当前id,可以直接通过获取id获取数据库中猴子的全部信息,一次需要在业务层以及dao层中添加一个业务,即多写一个sql查询语句,通过id查询猴子所有的信息,在进行页面跳转时,交给controller中的MonkeyCon处理,然后将信息展示在页面上,供修改,在修改完成之后,再进行重定向到公共页面,公共页面自带查询功能!
//通过id获取猴子 //在dao接口中增加的业务 public Monkey getMonkey(int id);
修改页面,在每个标签中加上一个value值,value值需要从MonkeyCon中通过Model携带,即可将当前要修改信息的猴子的信息展示出来,再修改完成之后,在将信息交给controller中的MonkeyCon,让修改的信息的值传给数据库中进行修改,再重定向到自带查询功能的公共页面中
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head style="background: aqua"> <title>修改猴子</title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet""> </head> <body> <div class="container" align="center"> <div class="col-md-12 column"> <div class="page-header" > <h3>修改猴子信息</h3> </div> </div> </div> <div align="center"> <form action="/t1/updateOver" method="get"> <div class="form-group"> <label>猴子id</label> <input type="text" class="form-control" name="id" value=${monkey.id} placeholder="请输入id" required><br> <label>猴子名称</label> <input type="text" class="form-control" name="name" value=${monkey.name} placeholder="请输入名称" required><br> <label>猴子地址</label><br> <input type="text" class="form-control" name="address" value=${monkey.address} placeholder="请输入地址" required><br> <label>猴子email</label><br> <input type="text" class="form-control" name="email" value=${monkey.email} placeholder="请输入email" required><br> <input type="submit" value="修改"> </div> </form> </div> </body> </html>
6,删除猴子
只需在猴子的超链接后携带参数id,再交给controller中的MonkeyCon处理,通过id删除数据库这的信息