前后端实现搜索选项进行搜索功能（时间段、用户名、类型）

最新推荐文章于 2024-05-21 10:23:42 发布

Monn.

最新推荐文章于 2024-05-21 10:23:42 发布

阅读量1k

点赞数 23

文章标签： spring java servlet html idea 前端后端

本文链接：https://blog.csdn.net/LY_LM/article/details/135289685

版权

趁着没忘，记下来！！！记下来！！记下来！！

一、实现的效果

二、前端（Html + javaScript + Ajax）

两个问题：首先开始考虑起始时间和终止时间的问题，比如怎么显示可选择的日期？起始时间的限制肯定不能选择未发生的时间，怎么实现？终止时间不能超过起始时间的问题？

1、显示可选择的日期

<div class="start">
   <label for="timeStart">起始时间：</label>
   <input type="date" id="timeStart">
</div>
<div class="end">
    <label for="timeEnd">终止时间：</label>
    <input type="date" id="timeEnd">
</div>

ps：也可以选择精确到分，代码如下：

<div class="start">
    <label for="timeStart">起始时间：</label>
    <input type="datetime-local" id="timeStart">
</div>
<div class="end">
    <label for="timeEnd">终止时间：</label>
    <input type="datetime-local" id="timeEnd">
</div>

长这样的：

2、起始时间和终止时间之间的限制

起始时间和终止时间的最大选择日期为今天；
终止时间不能早于起始时间；

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const timeStart = document.getElementById('timeStart');
        const timeEnd = document.getElementById('timeEnd');
    
        // 设置起始时间和终止时间的最大选择日期为今天
        let today = new Date();
        let todayFormatted = today.toISOString().split('T')[0];
        timeStart.max = todayFormatted;
        timeEnd.max = todayFormatted;
    
        // 当起始时间改变时更新终止时间的限制
        timeStart.addEventListener('change', function() {
            timeEnd.min = timeStart.value;
            if (timeEnd.value < timeStart.value) {
                timeEnd.value = timeStart.value;
            }
        });
    
        // 当终止时间改变时确保其不早于起始时间
        timeEnd.addEventListener('change', function() {
            if (timeEnd.value < timeStart.value) {
                alert("终止时间应在起始时间之后。");
                timeEnd.value = timeStart.value;
            }
        });
    });
</script>

3、其他搜索选项的实现

话不多说，直接看代码吧

<form id="searchForm">
   <div class="start">
       label for="timeStart">起始时间：</label>
       <input type="date" id="timeStart">
    </div>
    <div class="end">
      <label for="timeEnd">终止时间：</label>
      <input type="date" id="timeEnd">
    </div>
    <span id="statusOptions">
       <label for="status">状态：</label>
       <select id="status">
          <option value="">不限</option>
          <option value="not_communicated">未沟通</option>
          <option value="communicated">已沟通</option>
          <option value="closed">已关闭</option>
        </select>
     </span>
                    
     <div class="searchContent">
         <label for="searchContent">用户名：</label>
         <input type="text" id="searchContent" placeholder="请输入用户名">
     </div>
                    
      <button type="button"  class="searchBtn">查询</button>
</form>

4、与后端进行交互

//搜索功能的实现
$('.searchBtn').click(function(){
            const searchOption = $('#searchForm').val();
            const status = $('#status').val();
            console.log('Status:'+ status);

            const startTime = $('#timeStart').val();
            const endTime = $('#timeEnd').val();
            
            const userName = $('#searchContent').val();
            console.log('Status:', status, 'UserName:', userName, 'StartTime:', startTime, 'EndTime:', endTime);
            $.ajax({
                    type: 'POST',
                    url: serverUrl + "search.do",
                    data: { 
                            userName: userName,
                            status: status,
                            startTime: startTime,
                            endTime: endTime 
                        },
                    success: function (data) {
                        var List = data.List;
                        if (List && List.length > 0) {
                            $('#tab-artics').html(''); // 清空表格内容
                            createTable(List);      // 根据返回的数据进行填充表格，怎么实现自行编写
                        } else {
                            $('#tab-artics').html(''); 
                            // 如果 List 为空，显示提示消息
                            $('#tab-artics').html('<tr><td colspan="7" class="text-align: center">没有符合查询条件的订单</td></tr>');
                        }                  
                    }, 
                    error: function (error) {
                        console.error('提交失败:', error);
                        // alert("失败，请稍后重试");
                    }       
                });
});

三、后端（javaweb框架）

因为一些原因，使用的是java7，传统的javaweb框架，主要是使用Bean + mapper + service + controller ，sql语句是自定义的SQL语句查询，可供参考。有另外更好的方法可选（比如Spring Data JPA、全文搜索引擎Elasticsearch等），本段记下来只是算是个笔记。

1、Bean层实体的 Java 类

package com.bean;
import java.util.Date;

public class Pay {

    private int id;
    private String userName;
    private  String status;
    private Date payTime;

    //Getter和Setter方法、构造方法 就省略了
}

有个小坑：import java.util.Date的date能精确到2023-12-29 15:08:15；但是当使用的是import java.sql.Date的date时查询到的所有数据时间的分秒确是00:00:00，日期是正常的，数据库中也是正常的，后来查了一下，是因为导入包错误的问题导致date的分秒被格式化了，所以才会是00:00:00。

java.sql.Date 只包含日期信息，不包含时间信息； java.util.Date 表示一个特定的瞬时点，精确到毫秒。

哦对了，写一嘴：mysql中，payTime是数据库根据当前时间戳进行更新的，大概是长这样的：

2、mapper层数据访问与sql数据库进行交互

public interface PayItemMapper {
    /**搜索功能的实现
     *
     * @param username
     * @return
     */

     // 1. 搜索，根据用户名
    @Select("select * from pay where userName=#{userName}")
    List<Pay> selectByUsername(@Param("userName") String username);

    // 2.搜索，根据状态
    @Select("select * from pay where status=#{status} ")
    List<Pay> selectByStatus(@Param("status") String status);

    // 3.搜索，根据时间段
    @Select("select * from pay where payTime BETWEEN #{startTime} AND #{endTime}")
    List<Pay> selectByPayTime(@Param("startTime") Date startTime, @Param("endTime") Date endTime);

    // 4.搜索，根据用户名和状态
    @Select("select * from pay where userName=#{userName} and status=#{status} ")
    List<Pay> selectByUserNameAndStatus(@Param("userName")String userName, @Param("status")String status);

    // 5.搜索，根据时间段和状态
    @Select("select * from pay where status=#{status} AND payTime BETWEEN #{startTime} AND #{endTime}  ")
    List<Pay> selectByPayTimeAndStatus(@Param("startTime") Date startTime, @Param("endTime") Date endTime, @Param("status")String status);

    // 6.搜索，根据时间段和用户名
    @Select("select * from pay where userName=#{userName} AND payTime BETWEEN #{startTime} AND #{endTime}  ")
    List<Pay> selectByPayTimeAndUserName(@Param("userName")String userName ,@Param("startTime") Date startTime, @Param("endTime") Date endTime);

    // 7.搜索，根据时间段和状态、用户名
    @Select("select * from pay where status=#{status} AND userName=#{userName} AND payTime BETWEEN #{startTime} AND #{endTime}  ")
    List<Pay> selectByUserAndPayTimeStatus(@Param("userName")String userName,@Param("startTime") Date startTime,
                                           @Param("endTime") Date endTime, @Param("status")String status);
}

比较麻烦耗费人力哦，不推荐哦~

3、service层

@Service
public class PayItemService {
   //注入payMapper
    @Autowired
    private PayItemMapper payItemMapper;

    // 1. 搜索，根据用户名
    public List<Pay> selectByUsername(String userName) {
        return payItemMapper.selectByUsername(userName);
    }

    // 2. 搜索，根据状态
    public List<Pay> selectByStatus(String status) {
        return payItemMapper.selectByStatus(status);
    }

    // 3. 搜索，根据时间段
    public List<Pay> selectByPayTime(Date startTime, Date endTime) {
        return payItemMapper.selectByPayTime(startTime, endTime);
    }

    // 4. 搜索，根据用户名和状态
    public List<Pay> selectByUserNameAndStatus(String userName, String status) {
        return payItemMapper.selectByUserNameAndStatus(userName, status);
    }

    // 5. 搜索，根据时间段和状态
    public List<Pay> selectByPayTimeAndStatus(Date startTime, Date endTime, String status) {
        return payItemMapper.selectByPayTimeAndStatus(startTime, endTime, status);
    }

    // 6. 搜索，根据时间段和用户名
    public List<Pay> selectByPayTimeAndUserName(String userName, Date startTime, Date endTime) {
        return payItemMapper.selectByPayTimeAndUserName(userName, startTime, endTime);
    }

    // 7. 搜索，根据时间段和状态、用户名
    public List<Pay> selectByUserAndPayTimeStatus(String userName, Date startTime, Date endTime, String status) {
        return payItemMapper.selectByUserAndPayTimeStatus(userName, startTime, endTime, status);
    }
}

也是比较耗费人力哦，不推荐哦~

4、controller层

@Controller
@RequestMapping
public class payItemController {
    @Autowired
    private PayItemService payItemService;

/**
     * 搜索订单，支持根据用户名、状态、时间段、用户名和状态、状态和时间段、用户名和时间段、用户名、状态和时间段搜索
     */
    @RequestMapping(value = "/search.do", method = RequestMethod.POST)
    @ResponseBody
    public JSONObject searchPays(
            @RequestParam(required = false) String userName,
            @RequestParam(required = false) String status,
            @RequestParam(required = false) @DateTimeFormat(pattern="yyyy-MM-dd")Date startTime,
            @RequestParam(required = false) @DateTimeFormat(pattern="yyyy-MM-dd")Date endTime) {
        
        List<Pay> pays;
        if (userName != null && !userName.isEmpty() && status != null && !status.isEmpty() && startTime != null && endTime != null) {

            System.out.println("selectByUserAndPayTimeStatus");
            pays = payItemService.selectByUserAndPayTimeStatus(userName, startTime, endTime, status);

        } else if (userName != null && !userName.isEmpty() && status != null && !status.isEmpty()) {

            System.out.println("selectByUserNameAndStatus");
            pays = payItemService.selectByUserNameAndStatus(userName, status);

        } else if (status != null && !status.isEmpty() && startTime != null && endTime != null) {

            System.out.println("selectByPayTimeAndStatus");
            pays = payItemService.selectByPayTimeAndStatus(startTime, endTime, status);

        } else if (userName != null && !userName.isEmpty() && startTime != null && endTime != null) {

            System.out.println("selectByPayTimeAndUserName");
            pays = payItemService.selectByPayTimeAndUserName(userName, startTime, endTime);

        } else if (userName != null && !userName.isEmpty()) {

            pays = payItemService.selectByUsername(userName);
            System.out.println("selectByUsername");

        } else if (status != null && !status.isEmpty()) {

            pays = payItemService.selectByStatus(status);
            System.out.println("selectByStatus");

        } else if (startTime != null && endTime != null) {

            pays = payItemService.selectByPayTime(startTime, endTime);
            System.out.println("selectByPayTime");

        } else {

            pays = payItemService.getAllPays();
            System.out.println("getAllPays");

        }

        System.out.println("payList:"+convertPayListToJsonArray(pays));
        JSONObject resultJson = new JSONObject();
        resultJson.put("message", pays.isEmpty() ? "无数据" : "查询成功");
        resultJson.put("payList", convertPayListToJsonArray(pays));
        return resultJson;
    }

}

@DateTimeFormat(pattern="yyyy-MM-dd") 用于将前端传递的日期字符串转换为 Java 的 Date 对象，或者将 Date 对象格式化为指定的日期字符串。不使用会导致前端传递参数报错哦，报错页面大概是：