zoukankan      html  css  js  c++  java
  • ssm框架前后端数据交互完整示例

     1、sprinMvc控制层

    package com.dengfeng.house.controller;
    
    import java.text.ParseException;
    import java.util.Date;
    import java.util.List;
    
    import javax.annotation.Resource;
    import javax.servlet.http.HttpSession;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.github.pagehelper.PageHelper;
    import com.github.pagehelper.PageInfo;
    import com.dengfeng.house.pojo.District;
    import com.dengfeng.house.pojo.House;
    import com.dengfeng.house.pojo.HouseQuery;
    import com.dengfeng.house.pojo.Street;
    import com.dengfeng.house.pojo.Type;
    import com.dengfeng.house.pojo.User;
    import com.dengfeng.house.service.IDistrictService;
    import com.dengfeng.house.service.IHouseService;
    import com.dengfeng.house.service.IStreetService;
    import com.dengfeng.house.service.ITypeService;
    
    
    @Controller
    @RequestMapping("/house")
    public class HouseController {
        
        @Resource
        private IHouseService houseService;
        @Resource
        private ITypeService typeService;
        @Resource
        private IDistrictService districtService;
        @Resource
        private IStreetService streetService;
        
        //manage页面全查
        @RequestMapping("/findAll")    
        @ResponseBody
        public PageInfo findAll(@RequestParam(defaultValue="1")int pageIndex){
            
            PageHelper.startPage(pageIndex, 3);    
            List<House> housList = houseService.selectHouse();
            PageInfo pageInfo=new PageInfo<House>(housList);
            return pageInfo;
        }
        
        //修改渲染
        @RequestMapping("/update/{id}")
        public String update(Model model,@PathVariable int id){
            List<Type> typeList = typeService.findAllType();
            List<District> districtList = districtService.findAllDistrict();
            List<Street> streetList= streetService.findAllStreet();
            House house = houseService.findHouseById(id);
            model.addAttribute("house", house);
            model.addAttribute("typeList", typeList);
            model.addAttribute("districtList", districtList);
            model.addAttribute("streetList", streetList);
            return "/page/update";
        }
        
        //保存修改
        @RequestMapping("/updateSave")
        public String update(House house){
            houseService.alterHouse(house);
            return "redirect:/page/manage.jsp";
        }
        
        //渲染增加,下拉框推荐用ajxj做,,=所有这个方法没什么用
        @RequestMapping("/add")
        public String add(Model model){
            List<Type> typeList = typeService.findAllType();
        /*    List<District> districtList = districtService.findAllDistrict();
            List<Street> streetList= streetService.findAllStreet();*/
            
            model.addAttribute("typeList", typeList);
        /*    model.addAttribute("districtList", districtList);
            model.addAttribute("streetList", streetList);
            */
    
    
            return "/page/add";
        }
        
        
        //真正保存增加的方法
        @RequestMapping("/addSave")
        public String addSave(House house,HttpSession session){
    
            
            houseService.insertHouse(house);
            return "redirect:/page/manage.jsp";
            
        }
        
        
        /*house_list.jsp查询。*/
        @RequestMapping("/find")
        @ResponseBody
        public List<House> find(HouseQuery houseQuery,String money,String size){
            //如果是选中状态
            if(money!=null&&!money.equals("")){
                String[] moneyArray=money.split("-");
                houseQuery.setMinPrice(Integer.parseInt(moneyArray[0]));
                houseQuery.setMaxPrice(Integer.parseInt(moneyArray[1]));
            }
            if(size!=null&&!size.equals("")){
                String[] sizeArray=size.split("-");
                houseQuery.setMinFloorAge(Integer.parseInt(sizeArray[0]));
                houseQuery.setMaxFloorAge(Integer.parseInt(sizeArray[1]));
            }
            List<House> list = houseService.find(houseQuery);
            
            return list;
        }
        
        
        //推荐,多条件模糊查询
    /*    @RequestMapping("/findAllHouseList")
        @ResponseBody
        public PageInfo<House> findAll(HttpSession session,@RequestParam(defaultValue="1")Integer pageIndex,
                @RequestParam(defaultValue="")String title,
                @RequestParam(defaultValue="")String price,
                @RequestParam(defaultValue="")Integer typeId,
                @RequestParam(defaultValue="0")String floorage,Date beginTime,Date endTime) throws ParseException{
            User user=(User)session.getAttribute("userSession");
            String[] prices = price.split("-");
            String[] floorages = floorage.split("-");
            
            if(user!=null) {
                PageHelper.startPage(pageIndex,2);
                House house =new House ();
                house.setTitle(title);
                house.setMinPrice(Integer.parseInt(prices[0]));
                house.setMaxPrice(Integer.parseInt(prices[1]));
                house.setTypeId(typeId);
                house.setMinFloorage(Integer.parseInt(floorages[0]));
                house.setMaxFloorage(Integer.parseInt(floorages[1]));
                if(beginTime!=null && endTime!=null){
                    house.setBeginTime(beginTime);
                    house.setEndTime(endTime);
                }else if(beginTime!=null){
                    house.setBeginTime(beginTime);
                }else if(endTime!=null){
                    house.setEndTime(endTime);
                }
                List<House> list = houseService.findByCondition(house);
                PageInfo<House> pageInfo=new PageInfo<House>(list);
                return pageInfo;
                
            }
            return new PageInfo<House>();
        }*/
        
        //删除房子
        @RequestMapping("/deleteById")
        @ResponseBody
        public String delete(int id){
            houseService.deletehouse(id);
            return "删除成功";
        }
    }

     2、前端页面

    <%@ page language="java" contentType="text/html;charset=UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    int total = (Integer)request.getAttribute("total");
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>用户管理</title>
    <%--     <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}css/style.css" />
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/function.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.min.js"></script> --%>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.min.js"></script>
        <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />    
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/function.js"></script>
            
            <style type="text/css">
            /*     .space{
                        给js里的td设置字体颜色有效
                        color: red
                } */
            </style>
    
    </head>
    <body>
    <input type="hidden" id="path" value="${pageContext.request.contextPath}"/>
    
    <div id="header" class="wrap">
        <div id="logo"></div>
        <div class="search">
            <label class="ui-green"><a href="${pageContext.request.contextPath }/house/add"><input type="button" name="search" value="发布房屋信息" /></a></label>    
            <label class="ui-green"><a href="${pageContext.request.contextPath }/user/logout"><input type="button" name="search" value="退       出" /></a></label>
        </div>
    </div>
    <div class="main wrap">
    <div id="houseArea">
    
    <!--     <table class="house-list">
            有房屋
            <tr>
                <td class="house-thumb">
                <span>
                    <img src="images/thumb_house.gif" />
                </span>
                </td>
                
                <td>
                    <dl>
                        <dt>
                    <a href="#">sss</a>
                    </dt>
                        <dd>
                            dddd   区,
                            ddddd  街,
                            10000    平米<br/>
                            联系方式     ssss
    
                        </dd>
                    </dl>
                </td>
                
                自己发布的信息有权限删除
                <td class="house-type"><label class="ui-green"><input type="button"  name="search" value="修    改" /></label></td>
                <td class="house-price"><label class="ui-green"><input type="button" name="search" value="删    除" /></label></td>
                
                不是自己发布的信息没有权限删除 
                <td colspan="2"></td>
                
            </tr>
        无房屋 
        <tr>
            <td>无房屋信息输出</td>
        </tr>
        
        </table>
    </div -->
            
              <!-- 这个隐藏框用于分页查询 -->
          <input type="hidden" name="pageIndex" value="1"/>
           
            <table class="house-list">
                <!-- <img src="../images/thumb_house.gif" /> -->
            </table>
            
             <div class="page-bar">
                <ul class="page-num-ul clearfix">
                    <li>共${param.totalCount }条记录&nbsp;&nbsp; ${param.currentPageNo }/${param.totalPageCount }页</li>
                    <c:if test="${param.currentPageNo > 1}">
                        <a href="javascript:page_nav(document.forms[0],1);">首页</a>
                        <a href="javascript:page_nav(document.forms[0],${param.currentPageNo-1});">上一页</a>
                    </c:if>
                    <c:if test="${param.currentPageNo < param.totalPageCount }">
                        <a href="javascript:page_nav(document.forms[0],${param.currentPageNo+1 });">下一页</a>
                        <a href="javascript:page_nav(document.forms[0],${param.totalPageCount });">最后一页</a>
                    </c:if>
                    &nbsp;&nbsp;
                </ul>
                <!--  <span class="page-go-form"><label>跳转至</label>
                     <input type="text" name="inputPage" id="inputPage" class="page-key" />页
                     <button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>
                 </span> -->
            </div>    
            
        <!-- <div class="pager">
            
            <ul>
                <li class="current">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href='#'>上一页</a>
                </li>
                <li>
                    <a href='#'>下一页</a>
                </li>
                <li>
                    <a href='#'>末页</a>
                </li>
            </ul>
            <span class="total">共 页</span>
        </div> -->
    </div>
            <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/manage.js"></script>
    </body>
    </html>

     

    3、JS代码

    <script type="text/javascript">
    var path; $(function(){ alert("1") path=$("#path").val(); findHouse(); }); /* 页面一加载完就调用走这个函数 */ //这个方法用于查找所有 function findHouse(){ /*alert("2")*/ $.post(path+"/house/findAll",{"pageIndex":$("[name='pageIndex']").val()},function(data){ /* 每次获取用户列表,都需要将上一次的结果清除 */ /*alert("3")*/ $("tr").remove(); $(data.list).each(function(i,e){ /*alert("6")*/ var content="
    <tr>"; content+="<td class="house-thumb"><span><img src="../images/thumb_house.gif" /></span></td>"; content+="<td class="space"><dl><dt><a href="#">"+e.title+"</a></dt>"; content+="<dd>"+e.districtName+"区"+""; content+="<span style="margin-left:20px"></span>"; content+=""+e.streetName+"街"+""; content+="<span style="margin-left:20px"></span>"; content+=""+"面积"+e.floorage+"平米"+"<br/>"; content+=""+"联系方式:"+e.contact+"</dd></dl></td>"; /* this指a标签自己 ,javascript:void(0)的意思是让这个标签有a标签的样式,但没有a标签的功能,找到a标签自己把父节点删除,tr*/ content+="<td class="house-type"><label class="ui-green"><a href=""+path+"/house/update/"+e.id+"" class="modifyBill"><input type="button" name="search" value="修 改" />"+"</a></label></td>"+ "<td class="house-price"><label class="ui-green"><input type="button" name="search" onclick="deleteHouse("+e.id+",this)" value="删 除" />"+"</label></td>"; content+="</tr>"; $("table").append(content); }); //开始覆盖分页节点 $(".page-num-ul li").html("共"+data.total+"条记录&nbsp;&nbsp; "+data.pageNum+"/"+data.pages+"页"); //每次添加上一页、下一页都要把上一次的结果清除,否则会累加 $(".page-num-ul a").remove(); //动态的添加上一页、下一页 if(!data.isFirstPage){ $(".page-num-ul").append("<a href="javascript:jump(1)">首页</a>"+ "<a href="javascript:jump("+(data.pageNum-1)+")">上一页</a>"); } if(!data.isLastPage){ $(".page-num-ul").append("<a href="javascript:jump("+(data.pageNum+1)+")">下一页</a>"+ "<a href="javascript:jump("+(data.pages)+")">末页</a>"); } },"json"); } function jump(pageNum){ //动态的修改当前页数 $("[name='pageIndex']").val(pageNum); //提交 findHouse(); } function update(id){ alert("3") /* 上面a标签点击事件调用方法时候 把商品的id传了过来,再把这个商品的id传到后台*/ $.post(path+"/house/update",{"id":id},function(data){ /*alert(data);*/ /*onclick="update("+e.id+")" */ },"text"); } function deleteHouse(id,a){ /* 上面a标签点击事件调用方法时候 把商品的id传了过来,再把这个商品的id传到后台*/ $.post(path+"/house/deleteById",{"id":id},function(data){ //现在后台已经删除成功了,前台页面也需要从对应的节点删掉 alert(data); $(a).parents("tr").remove(); },"text"); }  //时间函数,从数据库拿的时间需要处理一下才能正确显示在前端,直接在ajax调用这个函数即可 function getDateTime(obj){ var date = new Date(parseInt(obj,10)); //月份得+1,且只有个位数时在前面+0 var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; //日期为个位数时在前面+0 var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //拼接日期显示格式 var hours = date.getHours()<10?"0"+date.getHours():date.getHours(); var minutes = date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes(); var seconds = date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds(); var newTime = date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+minutes+":"+seconds; return newTime; }
    </script>
  • 相关阅读:
    IntelliJ IDEA 如何在同一个窗口创建多个项目--超详细教程
    spring IOC原理
    java工作错误总结
    java跬步积累
    简单易懂设计模式——简单工厂模式
    Argo 项目入驻 CNCF,一文解析 Kubernetes 原生工作流
    电子书下载 | 超实用!阿里售后专家的 K8s 问题排查案例合集
    在生产环境中,阿里云如何构建高性能云原生容器网络?(含 PPT 下载)
    SIG Cloud Provider Alibaba 网研会第 2 期顺利召开 | 云原生生态周报 Vol. 46
    提问赠书 | 我们请了 7 位云原生专家,等你来问
  • 原文地址:https://www.cnblogs.com/binghuaZhang/p/10809844.html
Copyright © 2011-2022 走看看