环境配置在这里省略.
完成第一个功能:查询功能:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>查询页面信息</title> <style> * { font-family: 楷体; font-size: 20px; } input { width: 120px; background-color: black; color: white; border-radius: 12px; } td{ text-align: center; border-right: 3px solid darkcyan; border-bottom: 3px solid black; opacity: 0.9; } th{ border-top: 3px solid rosybrown; } </style> <script src="js/jquery-3.2.1.min.js"></script> </head> <body> <div align="center"> <h1>查询数据库中的信息页面</h1> <table> <tr> <th>订单编号</th> <th>用户名</th> <th>商品名称</th> <th>订单时间</th> <th>数量</th> <th>单价</th> <th>金额</th> <th>操作</th> </tr> </table> </div> </body> </html>
查询的内容需要动态的展示在页面上需要用到的是Ajax的知识点：
利用Ajax技术发送请求给服务器:
//Ajax请求访问 $(function () { $.ajax({ url: "list.do", type: "GET", data: "", success: function (json) { //定义方法解析数据信息 parsTale(json); }, error: function () { alert("用户已经连接失败") }, dataType: "json" }) })
1 @RequestMapping("list.do") 这个注解是用来接收Ajax的地址的==> url: "list.do"。
2 @ResponseBody的作用其实是将java对象转为json格式的数据。==>Java格式转为Json格式。
3 @Autowired IOrderService service 的作用是自动写入:在控制层中调用Service层的对象。
@Autowired是一种注解，可以对成员变量、方法和构造函数进行标注，来完成自动装配的工作，@Autowired标注可以放在成员变量上，也可以放在成员变量的set方法上，也可以放在任意方法上表示，自动执行当前方法，如果方法有参数，会在IOC容器中自动寻找同类型参数为其传值。
4 @Controller 创建控制层的对象
分析这张表中的数据在java中用什么方式存放数据。
在MVC三层架构中归属于控制层.
@Controller public class OrderController { @Autowired IOrderService service; // 查询数据信息 @RequestMapping("list.do") @ResponseBody public Object list() { List<Map<String, String>> list = service.getList(); return ""; }
在MVC三层架构中归属于业务逻辑层接口中定义方法在业务逻辑层中实现接口中定义的方法.
public interface IOrderService { List<Map<String, String>> getList(); }
在接口中定义的方法在实现类中去实现.
@Service(value = "sService") public class OrderServiceImp implements IOrderService { @Autowired IOrderDao dao; @Override public List<Map<String, String>> getList() { return dao.getList(); }
public class OrderServiceImp implements IOrderService {}
5 @Service(value = "sService") 创建业务逻辑层的对象。
public interface IOrderDao { @Select("SELECT * FROM orders") List<Map<String, String>> getList(); }
然后层层返回到控制层的内容:
@Controller public class OrderController { @Autowired IOrderService service; // 查询数据信息 @RequestMapping("list.do") @ResponseBody public Object list() { List<Map<String, String>> list = service.getList(); return list; }
解析数据的格式为Json格式:将数据展示在页面上:
// 定义方解析页面 function parsTale(jsons) { for (var i = 0; i < jsons.length; i++) { $("table").append("<tr>" + "<td>" + jsons[i].id + "</td>" + "<td>" + jsons[i].name + "</td>" + "<td>" + jsons[i].foondname + "</td>" + "<td>" + jsons[i].ordertime + "</td>" + "<td>" + jsons[i].count + "</td>" + "<td>" + jsons[i].price + "</td>" + "<td>" + jsons[i].amount + "</td>" + "<td><input type='button' onclick='update(" + jsons[i].id + ")' value='修改按钮'> " + "<input value='增加' type='button' onclick='add()'> " + "<input value='删除' type='button'></td>" + "</tr>") } }
完成第二个功能为:修改功能:
<td><input type='button' οnclick='update(" + jsons[i].id + ")' value='修改按钮'> " + "<input value='增加' type='button' οnclick='add()'> " + "<input value='删除' type='button'></td>
// 定义方法修改页面 //转入参数id function update(id) { confirm("开始修改页面的数据") location.href = "update1.do?id=" + id; }
//用户修改页面信息 // 定义方修改页面 @RequestMapping("update1.do") public String update1(@RequestParam int id, HttpSession session) { session.setAttribute("id", id); return "update.html"; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改页面信息内容哦</title> <style> *{ font-size: 30px; font-family: 楷体; color: teal; } table{ background-color: whitesmoke; color: black; } td{ border-right: 2px solid orange; } </style> <script src="js/jquery-3.2.1.min.js"></script> <script> $(function () { $.ajax({ url: "Update2.do", type: "GET", data: "", success: function (json) { }, error: function () { alert("连接数据库失败") }, dataType: "json" }) }) </script> </head> <body> <div align="center"> <h1>淘宝页面修改页面的内容管理</h1> <form action="update3.do" method="get"> <table> <tr> <td>用户名:</td> <td><input type="text" name="name"></td> </tr> <tr> <td>商品名称:</td> <td><input type="text" name="foondname"></td> </tr> <tr> <td>商品单价:</td> <td><input type="text" name="price"></td> </tr> <tr> <td>商品数量:</td> <td><input type="number" name="count"></td> </tr> <tr> <td>订单更新时间</td> <td><input type="text" name="ordertime"></td> </tr> <tr> <td>金额</td> <td><input type="text" name="amount"></td> </tr> <tr> <th colspan="2"><input type="submit" value="完成修改信息"></th> </tr> </table> </form> </div> </body> </html>
url: "Update2.do" 在Ajax中有这个请求
//定义方法 @ResponseBody @RequestMapping("Update2.do") public Object update2(HttpSession session) { int id = (int) session.getAttribute("id"); Map<String, Object> map = service.update2(id); return map; }
Map<String, Object> update2(int id);
@Override public Map<String, Object> update2(int id) { return dao.update2(id); }
@Select("SELECT * FROM orders where id=#{id}") Map<String, Object> update2(@Param("id") int id);
$(function () { $.ajax({ url: "Update2.do", type: "GET", data: "", success: function (json) { $("input[name='name']").val(json.name) $("input[name='foondname']").val(json.foondname) $("input[name='price']").val(json.price) $("input[name='count']").val(json.count) $("input[name='ordertime']").val(json.ordertime) $("input[name='amount']").val(json.amount) }, error: function () { alert("连接数据库失败") }, dataType: "json" }) })
完成了上面信息的页面展示内容的信息
<form action="update3.do" method="get"> <table> <tr> <td>用户名:</td> <td><input type="text" name="name"></td> </tr> <tr> <td>商品名称:</td> <td><input type="text" name="foondname"></td> </tr> <tr> <td>商品单价:</td> <td><input type="text" name="price"></td> </tr> <tr> <td>商品数量:</td> <td><input type="number" name="count"></td> </tr> <tr> <td>订单更新时间</td> <td><input type="text" name="ordertime"></td> </tr> <tr> <td>金额</td> <td><input type="text" name="amount"></td> </tr> <tr> <th colspan="2"><input type="submit" value="完成修改信息"></th> </tr> </table> </form>
<form action="update3.do" method="get">
@RequestMapping("/update3.do") public String update3( @RequestParam String name, @RequestParam String foondname, @RequestParam String ordertime, @RequestParam int count, @RequestParam double price, @RequestParam double amount, HttpSession session) { Map<String, Object> map = new HashMap<>(); int id = (int) session.getAttribute("id"); map.put("id",id); map.put("name",name); map.put("foondname",foondname); map.put("ordertime",ordertime); map.put("count",count); map.put("price", price); map.put("amount",amount); int i = service.update3(map); return "Service.html"; }
int update3(Map<String, Object> map);
@Override public int update3(Map<String, Object> map) { return dao.update3(map); }
@Update("UPDATE `demossmtest`.`orders` SET name = #{name}, foondname = #{foondname}, ordertime = #{ordertime}, count = #{count}, price = #{price}, amount =#{amount} where id = #{id}") int update3(Map<String, Object> map);
运行结果完毕
