zoukankan html css js c++ java

大型运输行业实战_day07_1_订单查看实现

1.业务分析

每个在窗口售票的售票员都应该可以随时查看自己的售票信息

简单的界面入口如图所示:

对应的html代码:

对应的js函数:

function orderDetail(){
    //进入订单明细页面
    window.location.href="http://localhost:8080/order/index";
}
对应的后端请求页面的控制层方法:

1   /**
2      * 获取订单页面
3      * @return
4      */
5     @RequestMapping("/index")
6     public String index() {
7         return "/WEB-INF/views/order.jsp";
8     }

2.  order.jsp 页面与js函数

  1 <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
  2 <html>
  3 <head>
  4     <title>订单明细</title>
  5     <script type="text/javascript" src="/static/jquery-2.1.3.min.js"></script>
  6     <script type="text/javascript">
  7        // alert($);
  8     </script>
  9 </head>
 10 <body>
 11 开始车站:<input id="startStation" type="text" value="" />  到
 12 到达车站:<input id="stopStation" type="text" value="" />
 13 <button onclick="query(5,1)">查询</button>
 14 <table id="orderList" width="50%" border="1" cellspacing="1">
 15 
 16 </table>
 17 
 18 <button onclick="firstPage()">首页</button>
 19 <button onclick="upPage()">上页</button>
 20 <button onclick="nextPage()">下页</button>
 21 <button onclick="lastPage()">末页</button>
 22 跳转到<input id="currentPage1" value="" size="1"/>页 <button onclick="jumpPage()">跳转</button>,
 23 每页显示<span id="pageSize">10</span>条,
 24 当前<span id="currentPage">5</span>/<span id="totalPage">10</span>页,
 25 总共<span id="count">48</span>条
 26 </body>
 27 <script type="text/javascript">
 28     //首页
 29     function firstPage(){
 30         alert("--firstPage--");
 31         //获取每页显示条数
 32         var _pageSize =  $("#pageSize").html();
 33         query(_pageSize,1);
 34     }
 35     //上页
 36     function upPage(){
 37         alert("--upPage--");
 38         var _pageSize =  $("#pageSize").html();
 39         //当前页
 40         var currentPage=$("#currentPage").html();
 41         var _currentPage=currentPage-1;
 42         query(_pageSize,_currentPage);
 43     }
 44     //下页
 45     function nextPage(){
 46         alert("--nextPage--");
 47         var _pageSize =  $("#pageSize").html();
 48         //当前页
 49         var currentPage=$("#currentPage").html();
 50         //var _currentPage=currentPage+1;//不能这样直接加必须使用函数
 51         var _currentPage= parseInt(currentPage)+1;
 52         query(_pageSize,_currentPage);
 53     }
 54     //末页
 55     function lastPage(){
 56         alert("--lastPage--");
 57         var _pageSize =  $("#pageSize").html();
 58         //当前页
 59         var _currentPage=$("#totalPage").html();
 60         query(_pageSize,_currentPage);
 61     }
 62     //跳转到
 63     function jumpPage(){
 64 
 65         alert("--jumpPage--");
 66         var _pageSize =  $("#pageSize").html();
 67         //当前页
 68         var _currentPage=$("#currentPage1").val();
 69         query(_pageSize,_currentPage);
 70     }
 71 
 72     function query(_pageSize,_currentPage){
 73         // alert("------query------");
 74         //1.获取参数
 75         var  startStation = $("#startStation").val();
 76         var  stopStation = $("#stopStation").val();
 77         //2.发送请求
 78         var params = {
 79             // startStation:startStation,
 80             stopStation:stopStation,
 81             _pageSize:_pageSize,//分页需要的数据
 82             _currentPage:_currentPage//分页需要的数据
 83         };
 84 
 85         if (null!=startStation && ''!=startStation){//开始车站有值的时候才传递参数
 86             params['startStation']=startStation;  //动态向json中添加参数
 87         }
 88 
 89         var url = 'http://localhost:8080/order/data';
 90         jQuery.ajax({
 91             type: 'POST',
 92             contentType: 'application/x-www-form-urlencoded',
 93             url: url,
 94             data: params,
 95             dataType: 'json',
 96             success: function (data) {
 97               var pageData =  data.data;
 98                 //取出列表
 99                 var orderList = pageData.list;
100                 //取出分页数据
101                 var currentPage= pageData.currentPage;
102                 var count= pageData.count;
103                 var pageSize= pageData.pageSize;
104                 var totalPage= pageData.totalPage;
105                 var html='<tr>'+
106                         '<td>编号</td>'+
107                         '<td>开始车站</td>'+
108                         '<td>到达车站</td>'+
109                         '<td>用户名</td>'+
110                         '</tr>';
111                 //解析数据到table表中
112                 for (var i=0;i<orderList.length;i++){
113                     //取出一个对象   java里面的内省机制
114                     var  ticket = orderList[i];
115                     var id = ticket.id;
116                     var startStation=  ticket.startStation;
117                     var stopStation=  ticket.stopStation;
118                     var userName=  ticket.userName;
119 
120                     html+='<tr>'+
121                             '<td>'+id+'</td>'+
122                             '<td>'+startStation+'</td>'+
123                             '<td>'+stopStation+'</td>'+
124                             '<td>'+userName+'</td>'+
125                             '</tr>';
126                 }
127                 //3.填充数据
128                 //填充列表
129                 $("#orderList").html(html);
130                 //填充分页数据
131                 $("#totalPage").html(totalPage);
132                 $("#pageSize").html(pageSize);
133                 $("#count").html(count);
134                 $("#currentPage").html(currentPage);
135             },
136             error: function (data) {
137                 alert("失败啦");
138             }
139         });
140     }
141 
142     query(5,1);
143 </script>
144 </html>

order.jsp

3.控制层处理加载订单数据

 /**
     * 高级查询获取订单数据数据
     */
    @RequestMapping("/data")
    @ResponseBody  //请求数据必须写这个
    public Result getData(HttpServletRequest req,OrderQueryObj orderQueryObj, String _pageSize, String _currentPage) {
        Result<Object> objectResult = new Result<>();
        //获取登录用户信息
        HttpSession session = req.getSession();
        LoginUser loginUser = (LoginUser) session.getAttribute("LOGIN_IN_SESSION");
        orderQueryObj.setUserId(loginUser.getId());
        //接收参数
        if (_pageSize != null && !_pageSize.equals("")) {
            orderQueryObj.setPageSize(Integer.valueOf(_pageSize));
        }
        if (_currentPage != null && !_currentPage.equals("")) {
            orderQueryObj.setCurrentPage(Integer.valueOf(_currentPage));
        }
        //调用方法
        ResultPageList page = orderService.getPage(orderQueryObj);
        objectResult.setData(page);
        //控制跳转
        return objectResult;
    }

4.业务层

 1  @Override
 2     public ResultPageList getPage(OrderQueryObj orderQueryObj) {
 3         ResultPageList resultPageList = new ResultPageList();
 4        //获取数据列表
 5         List<OrderPage> list = ticketOrderDao.getOrderPageList(orderQueryObj);
 6         resultPageList.setList(list);
 7         //总共条数查询数据库
 8         Integer count = ticketOrderDao.count(orderQueryObj);
 9         resultPageList.setCount(count);
10         //当前页
11         Integer currentPage = orderQueryObj.getCurrentPage();
12         resultPageList.setCurrentPage(currentPage);
13         //每页显示条数
14         Integer pageSize = orderQueryObj.getPageSize();
15         resultPageList.setPageSize(pageSize);
16         //总共页数
17         Integer totalPage=((count-1)/pageSize)+1;
18         resultPageList.setTotalPage(totalPage);
19         return resultPageList;
20     }

5.mapper 映射文件  查询列表 与 查询总条数

 1  <!--  查询列表-->
 2     <select id="getOrderPageList" parameterType="com.day02.sation.query.OrderQueryObj"  resultType="com.day02.sation.entity.OrderPage">
 3         SELECT o.id,o.order_number orderNumber,t.start_station startStation,t.stop_station stopStation,l.user_name userName
 4         FROM ticket_order o
 5         LEFT JOIN ticket t ON (o.ticket_id=t.id)
 6         LEFT JOIN login_user l ON (o.user_id=l.id)
 7         <where>
 8             <if test="userId!=null and userId!='' ">
 9                 AND  user_id = #{userId}
10             </if>
11             <if test="startStation!=null and startStation!='' ">
12                 AND  start_station = #{startStation}
13             </if>
14             <if test="stopStation!=null and stopStation!='' ">
15                 AND stop_station=#{stopStation}
16             </if>
17         </where>
18         limit #{startIndex},#{pageSize}
19     </select>
20 
21     <!--
22    查询总共条数
23    -->
24     <select id="count" parameterType="com.day02.sation.query.OrderQueryObj" resultType="int">
25         SELECT COUNT(1)
26         FROM ticket_order o
27         LEFT JOIN ticket t ON (o.ticket_id=t.id)
28         LEFT JOIN login_user l ON (o.user_id=l.id)
29         <where>
30             <if test="userId!=null and userId!='' ">
31                 AND  user_id = #{userId}
32             </if>
33             <if test="startStation!=null and startStation!='' ">
34                 AND  start_station = #{startStation}
35             </if>
36             <if test="stopStation!=null and stopStation!='' ">
37                 AND stop_station=#{stopStation}
38             </if>
39         </where>
40     </select>

View Code

6.mapper测试

 1  @Test
 2     public void testList(){
 3         OrderQueryObj orderQueryObj = new OrderQueryObj();
 4         orderQueryObj.setUserId(2);
 5         List<OrderPage> orderPageList = ticketOrderDao.getOrderPageList(orderQueryObj);
 6         System.out.println("  orderPageList="+orderPageList);
 7     }
 8 
 9     @Test
10     public void testCount1(){
11         OrderQueryObj orderQueryObj = new OrderQueryObj();
12         Integer count = ticketOrderDao.count(orderQueryObj);
13         System.out.println("  count="+count);
14     }

View Code

7.用到的查询对象

 1 package com.day02.sation.query;
 2 
 3 /**
 4  * Created by Administrator on 12/28.
 5  */
 6 public class OrderQueryObj extends  BaseQueryObj {
 7 
 8     //业务查询字段
 9     private String startStation;
10     private String stopStation;
11     //当前登录用户id
12     private Integer userId;
13 
14     public Integer getUserId() {
15         return userId;
16     }
17 
18     public void setUserId(Integer userId) {
19         this.userId = userId;
20     }
21     
22     public String getStartStation() {
23 
24         return startStation;
25     }
26 
27     public void setStartStation(String startStation) {
28         this.startStation = startStation;
29     }
30 
31     public String getStopStation() {
32         return stopStation;
33     }
34 
35     public void setStopStation(String stopStation) {
36         this.stopStation = stopStation;
37     }
38 }

OrderQueryObj.java

8.用到的查询对象父类 BaseQueryObj.java

 1 package com.day02.sation.query;
 2 
 3 /**
 4  * Created by Administrator on 12/28.
 5  */
 6 public class BaseQueryObj {
 7     //当前页
 8     private Integer currentPage = 1;
 9     //每页显示条数
10     private Integer pageSize = 3;
11     //开始下标
12     private Integer startIndex = 0;
13 
14     public Integer getStartIndex() {
15         //开始下标 使用户传来的,但是他是间接传来的  传的是当前页  和  每页显示条数,应该计算得出开始下标
16         if (currentPage == null || pageSize == null) {
17             return 0;
18         }
19         this.startIndex = (this.currentPage - 1) * this.pageSize;
20         return startIndex;
21     }
22 
23     public void setStartIndex(Integer startIndex) {
24         this.startIndex = startIndex;
25     }
26 
27     public Integer getPageSize() {
28         if (pageSize == null || pageSize == 0) {
29             return 3;
30         }
31         return pageSize;
32     }
33 
34     public void setPageSize(Integer pageSize) {
35         this.pageSize = pageSize;
36     }
37 
38     public Integer getCurrentPage() {
39         if (currentPage == null || currentPage == 0) {
40             return 1;
41         }
42         return currentPage;
43     }
44 
45     public void setCurrentPage(Integer currentPage) {
46         this.currentPage = currentPage;
47     }
48 
49 }

BaseQueryObj.java

9.用到的分页对象 ResultPageList.java

 1 package com.day02.sation.page;
 2 
 3 import java.util.List;
 4 
 5 /**
 6  * Created by Administrator on 12/28.
 7  */
 8 public class ResultPageList<L> {
 9    // 列表数据:数据库查询来的
10     private List<L> list;
11     //当前页
12     private Integer currentPage;
13    // 总条数 数据库查询出来的
14     private Integer count;
15    // 总共页数=总条数/每页显示条数  (判断是否有余数)
16     private Integer totalPage;
17    // 每 页显示条数:用户设定或者默认
18    private Integer pageSize;
19 
20     public List<L> getList() {
21         return list;
22     }
23 
24     public void setList(List<L> list) {
25         this.list = list;
26     }
27 
28     public Integer getCurrentPage() {
29         return currentPage;
30     }
31 
32     public void setCurrentPage(Integer currentPage) {
33         this.currentPage = currentPage;
34     }
35 
36     public Integer getCount() {
37         return count;
38     }
39 
40     public void setCount(Integer count) {
41         this.count = count;
42     }
43 
44     public Integer getTotalPage() {
45         return totalPage;
46     }
47 
48     public void setTotalPage(Integer totalPage) {
49         this.totalPage = totalPage;
50     }
51 
52     public Integer getPageSize() {
53         return pageSize;
54     }
55 
56     public void setPageSize(Integer pageSize) {
57         this.pageSize = pageSize;
58     }
59 }

ResultPageList.java

10.用到的前端显示订单模型OrderPage.java

 1 package com.day02.sation.entity;
 2 
 3 /**
 4  * Created by Administrator on 1/3.
 5  */
 6 public class OrderPage {
 7     // o.id,o.order_number,t.start_station,t.stop_station,l.user_name
 8     private Integer id;
 9     private String orderNumber;
10     private String startStation;
11     private String stopStation;
12     private String userName;
13 
14     public Integer getId() {
15         return id;
16     }
17 
18     public void setId(Integer id) {
19         this.id = id;
20     }
21 
22     public String getOrderNumber() {
23         return orderNumber;
24     }
25 
26     public void setOrderNumber(String orderNumber) {
27         this.orderNumber = orderNumber;
28     }
29 
30     public String getStartStation() {
31         return startStation;
32     }
33 
34     public void setStartStation(String startStation) {
35         this.startStation = startStation;
36     }
37 
38     public String getStopStation() {
39         return stopStation;
40     }
41 
42     public void setStopStation(String stopStation) {
43         this.stopStation = stopStation;
44     }
45 
46     public String getUserName() {
47         return userName;
48     }
49 
50     public void setUserName(String userName) {
51         this.userName = userName;
52     }
53 }

OrderPage.java

11.重启项目查看订单明细如下图:

到此查询用户自己的订单完成!重启项目查看订单吧!

查看全文

相关阅读:
JS 中的require 和 import 区别
 DIV为空时占据空间的解决办法
 学习Web标准不要对IE抱有偏见
 JspSmartUpload上传常见问题解析
 Windows下JSP开发环境的配置
 Div CSS网页布局：用class组合实现
 WEB2.0标准教程：如何应用WEB标准改善现有网站?
高效整洁CSS代码原则【转载】
51Test.NET-input标签写CSS时需要注意一些
 程序员应该怎么做呢？【转载】

原文地址：https://www.cnblogs.com/newAndHui/p/8183512.html