天天看點

SSM(Spring + SpringMVC + MyBatis)架構使用SSM(Spring + SpringMVC + MyBatis)架構前後端互動使用

SSM(Spring + SpringMVC + MyBatis)架構前後端互動使用

程式架構

SSM(Spring + SpringMVC + MyBatis)架構使用SSM(Spring + SpringMVC + MyBatis)架構前後端互動使用

1、前端頁面入口

在jsp檔案中,通過下面代碼進入頁面

其中,{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 = ; 
        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(,pondid);
        model.addAttribute("totalRentValue", totalRentValue);
           

其中addAttribute的第一個參數為key,第二個為value,前端處理通過EL表達式可以直接通過key擷取value的值。

曆史記錄獲得的結果為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>