JavaWeb项目下对某一对象的管理-前端思考

JavaWeb项目下对某一对象的管理-前端思考

前言

最近一直在做毕设，框架采用的基于SpringBoot的SSM框架，不过框架不重要，思路都是一致的。这里的对象指的是某一个模块对象，例如：订单，用户信息等等。基于最近的学习，思考了如何做是最合理最健壮的思路。

需求

一个常见的对象管理基本上有以下需求：

• 根据某些条件进行查询出结果
• 新增对象
• 修改编辑对象
• 删除对象

解决方案

一个合理的界面应该如图所示：

1. header栏，公用部分，常见提供用户修改密码入口
2. 功能链接区，公共部分，链接到不同的功能
3. 查询结构，如需求1所示，进来后先查询自己需要的内容
4. 查询结果，数据展示区域
5. 新增按钮
6. 某一条数据
7. 修改按钮
8. 删除按钮
9. 页码管理

细节

1. 新增与修改某种程度上是相似的，都是对form表单进行操作（填写/修改），老式的方法是新建一个新的界面，适合基本不懂前端的小白，更合适的方法应该是模态窗口。各种前端框架都提供了不错的解决方案，修改和新增就可以同时采用一个模态窗口，相同的表单，不同的action。
2. 1 2 两部分是公用的，可以单独导出来，并运用技术进行调用
3. 当数据量较小的时候，可以删除3模块，直接展示所有数据。
4. 页码，这里提供一个代码例子，基于pagehelper技术

<div class="am-fr">
    <ul class="am-pagination tpl-pagination">

        <li><a th:href="@{'data-record-query-startTime-endTime?deviceId='+${queryTime.deviceId}+'&startTime='+${queryTime.startTime}+'&endTime='+${queryTime.endTime}}">|««</a></li>
        <li th:each="page,pageStat:${alarmRecordWithDataRecordList.navigatepageNums}">
            <a href="#" style="background-color: deepskyblue" th:text="${page}" th:if="${page}==${alarmRecordWithDataRecordList.pageNum}" th:href="@{'data-record-query-startTime-endTime?deviceId='+${queryTime.deviceId}+'&startTime='+${queryTime.startTime}+'&endTime='+${queryTime.endTime}+'&pageNum='+${page}}"></a>
            <a href="#" th:text="${page}" th:if="${page}!=${alarmRecordWithDataRecordList.pageNum}" th:href="@{'data-record-query-startTime-endTime?deviceId='+${queryTime.deviceId}+'&startTime='+${queryTime.startTime}+'&endTime='+${queryTime.endTime}+'&pageNum='+${page}}"></a>
        </li>
        <li><a th:href="@{'data-record-query-startTime-endTime?deviceId='+${queryTime.deviceId}+'&startTime='+${queryTime.startTime}+'&endTime='+${queryTime.endTime}+'&pageNum='+${alarmRecordWithDataRecordList.pages}}">»»|</a></li>

    </ul>
    共[[${alarmRecordWithDataRecordList.pages}]]页，共[[${alarmRecordWithDataRecordList.total}]]条记录。
</div>

总结

此次基本上一套解决大量相似的问题：对某一对象进行管理。当然以上基于我最近遇到的需求，也有一些其他需求，因为我暂时没用到，没有进行思考。例如：某一查询结果再进行详情查询，简单的思路是新界面展示，基于一个界面解决可以进行新的模态窗口。