SSM(Spring + SpringMVC + MyBatis)框架使用

SSM(Spring + SpringMVC + MyBatis)框架前后端交互使用

程序框架

1、前端页面入口
在jsp文件中，通过下面代码进入页面

<li><a href="${proPath}/cost/index_cost" target="_blank"><img class="list_img" src="${resPath}/img/calculator.png"/></a></li>

其中，{proPath}表示系统路径，
proPath=”{pageContext.request.contextPath}”;
resPath=”{pageContext.request.contextPath}/res”;

系统在后台查找Control 模块，根据cost/index_cost 进入costController.java进行后台数据处理。
后台控制层代码：

@Controller
@RequestMapping("/cost")
public class CostController {
    private static Logger log = Logger.getLogger(CostController.class.getName());

    @Resource
    private RentAndLabourCostService rentAndLabourCostsService;

    @RequestMapping("/index_cost")
    public String IncomeLogin(HttpServletRequest request, Model model) {
        //tab 第一页
        Integer pondid = 1; 
        List<RentAndLabourCost> allCost = this.rentAndLabourCostsService.selectAllHistoryData();
        model.addAttribute("historyAll",allCost);   
        System.out.println( "cost income test!" + allCost );
        return "index_income";
    }
}   

（1）根据注解@RequestMapping(“/cost”)查找得到对应的类，然后根据@RequestMapping(“/index_cost”)查找得到对应的方法处理；
注意：此时函数处没有 @ResponseBody注解。
（2）进入函数
public String IncomeLogin(HttpServletRequest request, Model model)
在该函数中，request表示从前端通过request获取的参数，此处未使用；model表示将后台参数传递到前端，通过 model.addAttribute(“totalRentValue”, totalRentValue);实现。
（3）返回值为字符串类型
return “index_income”;
此时系统根据返回的字符串通过web.xml静态资源过滤查找到相应的前端文件。即为index_income.jsp。
web.xml静态资源过滤为：

 <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.html</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.png</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
  </servlet-mapping>

（5）后台获取到数据后通过model传递到前端。
以租金成本为例：

float totalRentValue = rentAndLabourCostsService.selectSumByType(1,pondid);
        model.addAttribute("totalRentValue", totalRentValue);

其中addAttribute的第一个参数为key，第二个为value，前端处理通过EL表达式可以直接通过key获取value的值。

<span>租金</span><span style="margin-left: 20%"                                                           id="rentValue">${totalRentValue}</span><span>元</span>

历史记录获得的结果为List形式存储，前端采用EL表达式循环显示。
后台：

List<RentAndLabourCost> allCost = this.rentAndLabourCostsService.selectAllHistoryData();
        model.addAttribute("historyAll",allCost);

前端：在页面初始状态下，显示数据库中所有的历史记录信息。

<div id="history_list" data-spy="scroll" data-target="#navbar-example" data-offset="0" 
     style="height:400px;overflow:auto; position: relative;">
<c:forEach items="${historyAll}" var="allCost">    
<div class="form-group"  >
<!-- 记录 -->
<label class="col-md-3 control-label margin-3" id ="historyTime"><fmt:formatDate value="${allCost.sysTime}" type="both" /> </label>
<span class="col-md-3 control-label" id="historyPond"><c:if test="${allCost.pondid == 1}">a</c:if><c:if test="${allCost.pondid == 2}">b</c:if><c:if test="${allCost.pondid == 3}">c</c:if></span> 
<span   class="col-md-3 control-label"id ="historyName"><c:if test="${allCost.fixcosttype == 1}">11</c:if><c:if test="${allCost.fixcosttype == 2}">22</c:if><c:if test="${allCost.fixcosttype == 3}">33</c:if><c:if test="${allCost.fixcosttype == 4}">44</c:if><c:if test="${allCost.fixcosttype == 5}">55</c:if></span>
<span   class="col-md-1 control-label span_danger" id="historyType"><c:if test="${allCost.status == 1}">+</c:if><c:if test="${allCost.status == 0}">-</c:if></span> 
<span   class="col-md-2 control-label span_danger margin-3" id="historyValue">${allCost.value}</span>
<span class="col-md-1 control-label margin-5">元</span>
</div>
</c:forEach>
</div>