SSM整合系统的总结，前端layiu

首次以团队合作的方式进行前后端分离。
前端的同学主要使用layui的框架，书写格式为html。
后端的同学主要使用SSM框架。
周围的同学有使用Springboot，将静态页面放在资源包中，轻松完成映射，然后我们一脸不知所措。
其实两种解决办法，第一种将页面的放在webapp下，修改springmvc-config.xml，添加HTML页面的解析器，可以跳转，但出现的问题是无法将其他需要使用的静态资源加载进页面中，使用了多种方法，无疾而终，不理智的将路径粗暴添加进页面倒是成功，但显得太傻，放弃。
第二种是退步，将HTML更改为jsp格式，成功。

以上是不重要。

第一次整合前后端还有颇多学习的地方。
总是被困扰在获取页面值的问题上，还有页面显示理解不能。
以下记录一些小点。
1.除了垂直的导航栏以外，iframe的src是表示将一个页面组合一起，可以显示和操作。需要从url导向相应的页面。
2.在script中取得页面中的值，判断是否有取到正确的值可以用console.log()，来在浏览器中开发者工具的console中输出
3.在jsp中有用到JSTL中<c:forEach>在页面中循环输出。比如说

<c:forEach items="${topicList}" var="its" begin="${status.index}" end="${status.index+2}" >
        <div class="layui-col-md4">
            <div class="layui-card" >
                <div class="layui-card-header"><span class="card-title">${its.topicName}</span></div>
                <div class="layui-card-body" >
		            <input type="text" id="topicId" value="${its.topicId}" hidden>
		            <input type="text" hidden>
                    <p>招募${its.numberLimit}人：${its.majorLimit}</p>
                </div>
                <div class="btn-select">
                    <div class="limit fl">${its.numberNow}/${its.numberLimit}</div>
                    <button  class="layui-btn layui-btn-normal addClass  fr">添加课程</button>
                </div>
                <div class="detail fl">
                   ${its.demand}
                </div>
            </div>
        </div>       
        </c:forEach>

以上是一张卡片，在循环输出以后可出现多张卡片，我需要被我隐藏的input中的value，根据id来获取显然是不现实的，在重复输出的卡片中存在相同id的input，可以通过var topicId=$(this).parent().prev().children(":first").val();（在layui框架中带着jquery）this定点（？），后面一串确定位置（？根据div分层），val()是input取值

如果是table表格输出，取值

var list=$(this).parent().parent().children('td')//定点为一行后面的操作，list一行所有
list.eq(0).html()//eq取到第一个格子,html()取值

给固定的id的input赋值
$(’#EtopicId’).val(‘值’);
有说 $(’#EtopicId’).attr({“value”:“112”})

4.常会有删除确认，或者修改确认

$(".del").click(function () {
            console.log($(this).parent().parent().children('td').eq(0).html());
            var topicId=$(this).prev().prev().val()
            layer.confirm('确定删除吗？', {
                btn: ['确定','取消'], //按钮
                yes:function () {
                    $.ajax({
                        url:'<%=basePath%>admin/deleteCourses.action',
                        type:'get',
                        data:{topicId:topicId},/json
                        success:function (data) {
                            alert(data);
                            window.location.reload();
                        }
                    })
                }
            }, function(){//大概就到这
                layer.msg('删除成功', {icon: 1});
            }, function(){
            });
        });

5.table.render有自带的数据选择，数据导出一些功能，但是需要json的导入，需要将后端的传输类型改为JSONArray，大概是这样子但是没有成功过

6.页面弹窗

layer.open({
                type: 1,                //弹窗类型
                title: '修改信息',     //显示标题
                closeBtn: 1,         //是否显示关闭按钮
                shadeClose: true, //显示模态窗口
                skin: 'layui-layer-rim', //加上边框
                area: ['500px', '550px'], //宽高
                content: $str  //弹窗内容
                ,btn: ['修改', '取消'] 
                ,btn1: function(){
                   /* alert("修改成功");点了修改以后*/
                    layer.closeAll();
                }
                ,btn2: function(){
                    layer.closeAll();
                }

            });
        });

大概就是这些。