ssm项目第二天记录手稿：

1.纸质版过程

page1:

page2:

2.demo

2.1.添加

product-list1.jsp:

<!--${pageContext.request.contextPath}/product/save.do，form表单提交数据到后台-->
<form action="${pageContext.request.contextPath}/product/save.do"
				method="post">
				<!-- 正文区域 -->
				<section class="content"> <!--产品信息-->

				<div class="panel panel-default">
					<div class="panel-heading">产品信息</div>
					<div class="row data-type">

						<div class="col-md-2 title">产品编号</div>
						<div class="col-md-4 data">
						<!--为每一项添加输入框-->
							<input type="text" class="form-control" name="productNum"
								placeholder="产品编号" value="">
						</div>
						<div class="col-md-2 title">产品名称</div>
						<div class="col-md-4 data">
							<input type="text" class="form-control" name="productName"
								placeholder="产品名称" value="">
						</div>
						<div class="col-md-2 title">出发时间</div>
						<div class="col-md-4 data">
						<!--时间输入框的开始-->
							<div class="input-group date">
								<div class="input-group-addon">
									<i class="fa fa-calendar"></i>
								</div>
								<input type="text" class="form-control pull-right"
									id="datepicker-a3" name="departureTime">
							</div>
							<!--时间输入框的结束-->
						</div>


						<div class="col-md-2 title">出发城市</div>
						<div class="col-md-4 data">
							<input type="text" class="form-control" name="cityName"
								placeholder="出发城市" value="">
						</div>

						<div class="col-md-2 title">产品价格</div>
						<div class="col-md-4 data">
							<input type="text" class="form-control" placeholder="产品价格"
								name="productPrice" value="">
						</div>

						<div class="col-md-2 title">产品状态</div>
						<div class="col-md-4 data">
							<select class="form-control select2" style="width: 100%"
								name="productStatus">
								<option value="0" selected="selected">关闭</option>
								<option value="1">开启</option>
							</select>
						</div>

						<div class="col-md-2 title rowHeight2x">其他信息</div>
						<div class="col-md-10 data rowHeight2x">
							<textarea class="form-control" rows="3" placeholder="其他信息"
								name="productDesc"></textarea>
						</div>

					</div>
				</div>
				<!--订单信息/--> <!--工具栏-->
				<div class="box-tools text-center">
					<button type="submit" class="btn bg-maroon">保存</button>
					<button type="button" class="btn bg-default"
						onclick="history.back(-1);">返回</button>
				</div>
				<!--工具栏/--> </section>
				<!-- 正文区域 /-->
			</form>

dao:

@Insert("insert into product (productNum,productName,cityName,departureTime,productPrice,productDesc,productStatus) values(#{productNum},#{productName},#{cityName},#{departureTime},#{productPrice},#{productDesc},#{productStatus})")
    public void save(Product product);

service的实现类：

@Override
    public void save(Product product){
         productDao.save(product);
    }

controller:

 @Autowired
    private IProductService productService;

    @RequestMapping("/save.do")
    public String save(Product product){
        productService.save(product);
        return "redirect:findAll.do";//新增后要从数据库重新获取数据
    }

2.2.删除(含批量)：

dao:

@Delete({"<script>",
            "delete from product where id in",
            "<foreach collection='list' item='id' open='(' close=')' separator=','>",
            "#{id}",
            "</foreach>",
            "</script>"}
    )
    public int  deleteProduct(List<String> id);

service的实现类：

@Override
    public boolean deleteProduct(List<String> id){

            int result = productDao.deleteProduct(id);
        if(result>0) {
            System.out.println(result);
            return true;
        }else {
            return false;
        }

    }

controller:

@RequestMapping("/delete.do")
    @ResponseBody
    //@RequestParam("productList")与前端ajax中data:{productList:productList.toString()},data里的属性名（key）productList要一致
    public Object deleteProduct(@RequestParam("productList") String productList, Model model){
        //js数组默认以逗号为分隔符，转为字符串传过来需要过滤逗号
        String[] strs=productList.split(",");
        List<String> ids=new ArrayList<>();
        for(int i=0;i<strs.length;i++){
            ids.add(strs[i]);
        }
        Map<String, Integer> map=new HashMap<String, Integer>();
        boolean isOk = productService.deleteProduct(ids);
        if(isOk) {
            map.put("result",1);
        }else {
            map.put("result",0);
        }
        //返回一个键值对给前端中data:{productList:productList.toString()}里的data，即data（也是一个key），也就是将data对应的值改为map
        return JSON.toJSONString(map);
    }

前端：

<!--onclick="deleteAll()绑定点击事件-->
<button type="button" class="btn btn-default" title="删除" onclick="deleteAll()"><i class="fa fa-trash-o"></i> 删除</button>

点击删除按钮触发的事件：

<!-- 批量删除的操作 -->
        function deleteAll() {
        //name的值要与复选框中name一致
            var checkNum=$("input[name='ids']:checked").length;
            if(checkNum==0){
                alert("请至少选择一项");
                return;
            }
            if(confirm("确定要删除吗？")){
                var productList=new Array();
                $("input[name='ids']:checked").each(function () {
                    productList.push($(this).val())
                });
            }
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/product/delete.do",//controller中的请求路径
                async:false,
                <!--data为属性，productList为数组，转化为字符串后作为请求参数传到后端-->
                data:{productList:productList.toString()},//controller返回的数据为data，{'productList':productList.toString()}为json对象，例如data:{result:1}
                dataType:'json',
                success:function (data) {
                <!--data.result获取result的值-->
                    if(data.result > 0 ){
                        alert("删除成功")
                    }

                },
                error:function () {
                    alert("删除失败")
                    document.execCommand('Refresh')
                }
            })
            window.location.reload(true)
        }

以上是选择1个或者多个删除，全选和全不选前端代码已实现，无需改动。

3.总结

• 在ssm项目中，oracle数据库插入数据需要提交才能在页面上获取数据
• 对@RequestMapping("/findAll.do")和${pageContext.request.contextPath}/product/findAll.do有了更深层次的理解:
  ${pageContext.request.contextPath}取出部署的应用程序名或者是当前的项目名称，如下图箭头所指，即/xlh_ssm_web,而"/"代表的含义就是http://localhost:8888,这个端口是配置tomcat时定义的，也就是说${pageContext.request.contextPath}取出了http://localhost:8888/xlh_ssm_web,特别注意的是：webapp下的直接文件或目录都属于xlh_ssm_web下的直接下属目录或文件，例子：${pageContext.request.contextPath}/pages/product-add.jsp：
  
  至于在controller类中的@RequestMapping("/findAll.do")意为只要请求路径最后为/findAll.do都会被该类中带有该注解的方法拦截请求并处理。