天天看点

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>