SSM框架---之遇到的问题

最新推荐文章于 2022-11-03 20:16:20 发布

单眼皮女孩i

最新推荐文章于 2022-11-03 20:16:20 发布

阅读量929

点赞数 2

文章标签： javascript html spring

本文链接：https://blog.csdn.net/weixin_44889526/article/details/120845298

版权

滑动条的css属性

style="height:300px;overflow:auto"

handlerbars模板

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>">
    <title>$</title>
    //<%-- jquery框架   --%>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    //<%--  使用JavaScript模板简化操作 ：Handlebars.js：http://handlebarsjs.com  --%>
    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
</head>
<body>
<input type="button" id="btn" value="ajax点击">

<div style="display: none" id="imgId">
    <img src="/imges/ajax-loader.gif"/>
</div>
<div class="container">
    <table class="tab table-striped" id="tab">
        <tbody>

        </tbody>
    </table>
</div>
<%--//注意：type为：text/template--%>：模板
<script type="text/template" id="temp">
   <tr>//模板简化操作模式
       <td>{{id}}</td>
       <td>{{bookname}}</td>
       <td>{{author}}</td>
       <td>{{publisher}}</td>
   </tr>
</script>

<script type="text/javascript">
    $(function () {

        $("#btn").click(function () {

            $.getJSON("/json", {name: "Rose", age: 12}, function (data) {
                $("#tab").html("");//每次点击前清空一下页面
                var template = Handlebars.compile($("#temp").text())//text():获取文本节点的值  编译模板
                $(data).each(function(){//遍历
                    let tr = template(this);//获取到的值放入当前对象代表的标签中
                    $("#tab").append(tr);//tr标签放入tbody
                });
            });
    });
</script>


</body>
</html>

前后端时间格式化（加注解）

//将Date转化为String  后台传值给前台时
 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
 private Date createTime;
 //String转为Date  前端转到后端时
 @DateTimeFormat(pattern = "yyyy-MM-dd")

前端获取当前时间

jsp和js

<span id="curTime" style="display: inline-block"></span>


window.onload = function () {
    setInterval(function () {
        getDate();
    }, 10);    //定时器每秒调用一次getDate()
}
function getDate() {   //js 获取当前时间
    var oDiv = document.getElementById("curTime");
    var date = new Date();
    var year = date.getFullYear();//当前年份
    var month = date.getMonth();//当前月份
    var data = date.getDate();//天
    var hours = date.getHours();//小时
    var minute = date.getMinutes();//分
    var second = date.getSeconds();//秒
    var time = year + "-" + fnW((month + 1)) + "-" + fnW(data) + " " + fnW(hours) + ":" + fnW(minute) + ":" + fnW(second);
    var a = new Array("日", "一", "二", "三", "四", "五", "六");
    var week = new Date().getDay();
    var str = "星期" + a[week];
    oDiv.innerHTML = time + "　" + str;
}
function fnW(str){return str > 9 ?  str :  "0" + str;}  //补位 当某个字段不是两位数时补0

ajax格式化后端时间（毫秒整数）

				//从后端获取到的日期
                var time = new Date(data.testDate).toJSON();
                var d = new Date(time);
                //如果小于9，前面加0
                var day = ("0" + d.getDate()).slice(-2);
                 //如果小于9，前面加0
                var month = ("0" + (d.getMonth() + 1)).slice(-2);
                //拼接日期
                var times=d.getFullYear() + '-' + (month) + '-' + (day);

jsp格式化时间

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<td><fmt:formatDate value="${order.orderDate}" pattern="yyyy-MM-dd HH:mm:ss">
</fmt:formatDate> </td>

WdatePicker 时间选择器插件

在这里插入图片描述

引入js和css

 	<link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/js/skin/default/datepicker.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="/static/js/WdatePicker.js"></script>
    <script language="javascript" type="text/javascript" src="/static/js/calendar.js"></script>
    <script src="/static/js/lang/en.js"></script>
    <script src="/static/js/lang/zh-cn.js"></script>
    <script src="/static/js/lang/zh-tw.js"></script>

使用

<form class="navbar-form navbar-left" method="post">

        <span>发车时间自</span>
        <input class="form-control" onfocus="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd'})"
               style="background: url('/static/js/datePicker.gif') no-repeat right" size="16"
               type="text" name="orderStartDate" value="${orderStartDate}">
        <span>至</span>
        <input size="16" type="text" class="form-control"
               onfocus="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd'})"
               style="background: url('/static/js/datePicker.gif') no-repeat right"
               name="orderEndDate" value="${orderEndDate}">

        <button type="submit" class="btn btn-default">搜索</button>
        <button type="reset" class="btn btn-default">重置</button>
    </form>

全选和全不选

<th><input type="checkbox" id="checkAll"></th>

<td><input type="checkbox" class="checkbox" name="ids" value="${station.id}"></td>

js：

$(function () {
    $("#checkAll").click(function () {
        var c = $("#checkAll").prop("checked");
        $(".checkbox").prop("checked",c);
    })
})

批量删除

点击批量删除按钮

js

$("#batch").click(function (){
    var str = "";
    var count = 0;
    $("[name='ids']").each(function () {
        if ($(this).prop("checked")){
            count++;
            str += ","+$(this).val();
            console.log(str)
        }
    })
    str = str.substring(1);
    if(count >0){
        if (confirm("确定是否删除这"+count+"条数据吗?")){
            $.ajax({
                url:"/station/batch",
                type:"POST",
                data:{ids:str},
                success:function (result) {
                    if (result.y == 'true'){
                        alert("删除成功！")
                        window.location.href = "/station/staList";
                    }
                },
                error:function () {
                    alert("系统错误")
                }
            })
        }
    }else {
        alert("请先选择");
    }

});

controller

   //批量删除
    @RequestMapping("/batch")
    @ResponseBody
    public String batch(String[] ids){
        stationService.delBatch(ids);
        return "{'y':'true'}";
    }

mapper.xml

    <!--批量删除-->
    <delete id="delBatch" parameterType="string">
        DELETE FROM station WHERE id IN
        <foreach collection="array" item="ids" open="(" close=")" separator=",">
            #{ids}
        </foreach>
    </delete>

省市县三省联动

<div class="form-group">
            <label class="col-sm-2 control-label">所在地区</label>
            <div class="col-sm-2">
                <select class="form-control" name="province" id="provinceId">
                    <option value="0">--请选择--</option>
                </select>
            </div>
            <div class="col-sm-2">
                <select class="form-control" name="city" id="cityId">
                    <option value="0">--请选择--</option>
                </select>
            </div>
            <div class="col-sm-2">
                <select class="form-control" name="areaId" id="areaId">
                    <option value="0">--请选择--</option>
                </select>
            </div>

 </div>

js：


$(function () {

    $.ajax({
        type:"GET",
        url:"/station/getChina",
        success:function(data) {
            var china = data.china;
            // console.log(china);

            //遍历省
            for (let i = 0; i < china.length; i++) {
                var option1 = ("<option value='" + china[i].province_id + "'>" + china[i].province + "</option>")
                $("#provinceId").append(option1);
            }

            //点击省
            $("#provinceId").change(function () {
                $("#cityId").html("\"<option value='0'>--请选择--</option>\"");
                for (let i = 0; i < china.length; i++) {
                    if(this.value == china[i].province_id){
                        var cities = china[i].hatCityList;
                        for (var j = 0;j < cities.length;j++){
                            //遍历市
                            var option2 = ("<option value='"+ cities[j].city_id +"'>"+cities[j].city+"</option>")
                            $("#cityId").append(option2);


                            //点击市
                            $("#cityId").change(function () {
                                $("#areaId").html("\"<option value='0'>--请选择--</option>\"");
                                for (let i = 0; i < china.length; i++) {
                                    var cities = china[i].hatCityList;

                                    for (var j = 0;j < cities.length;j++){
                                        if(this.value == cities[j].city_id){
                                            var areas = cities[j].hatAreaList;

                                            //遍历县
                                            for (var k = 0;k < areas.length;k++){
                                                var option3 = ("<option value='"+ areas[k].id +"'>"+areas[k].area+"</option>")
                                                $("#areaId").append(option3);
                                                console.log(areas[k].area);
                                            }

                                        }
                                    }

                                }

                            })
                        }
                    }
                }
            })

        }
    });

})

controller

 //三级联动
    @GetMapping("/getChina")
    public @ResponseBody
    Map<String,Object> china(){
        Map<String,Object> map = new HashMap<>();
        List<HatProvince> china = chinaMapper.getChina();
        map.put("china",china);
        return map;
    }

mapper.xml

    <!--省市区 多表查询-->
    <resultMap id="allMap" type="HatProvince" autoMapping="true">
        <id column="id" property="id"/>
        <result column="province_id" property="province_id"/>
        <collection property="hatCityList" javaType="List" ofType="HatCity" autoMapping="true">
            <id column="cid" property="id"/>
            <result column="city_id" property="city_id"/>
            <result column="father" property="father"/>
            <collection property="hatAreaList" javaType="List" ofType="HatArea" autoMapping="true">
                <id column="aid" property="id"/>
                <result column="area_id" property="area_id"/>
                <result column="father" property="father"/>
            </collection>
        </collection>
    </resultMap>


    <!--省市区-->
    <select id="getChina" resultMap="allMap">
        select *,c.id cid,a.id aid from hat_province p
        LEFT JOIN hat_city c ON  p.province_id =c.father
        LEFT JOIN hat_area a ON  c.city_id = a.father
    </select>

ueditor富文本编辑器

//引入
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

//使用
<script id="editor" name="lostDescribe" type="text/plain" textarea="editorValue"
                                style="width: 750px;height: 200px"></script>
<script type="text/javascript">
        var ue = UE.getEditor('editor');
    </script>

ueditor文本动态放值

			 ue.ready(function () {
                     ue.setContent(text);
               })

模态框使用

	<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

<div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 800px">
                <div class="modal-content" style="height:500px;overflow:auto">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h5 class="modal-title" id="myModalLabel">
                            修改发布信息
                        </h5>
                    </div>
                    <%--弹框内容--%>
                    <div class="modal-body">
                        <strong><span>标题：</span></strong>
                        <input id="messageName" size="10" type="text">&nbsp;
                        <strong><span>作者：</span></strong>
                        <input id="author" size="10" type="text">&nbsp;
                        <strong><span>标题图</span></strong>
                        <input size="8" type="file" style="display: inline;width: 180px" value="选择文件">
                        <strong><span>栏目：</span></strong>
                        <input id="type" size="10" type="text">&nbsp;
                        <br><br>
                        <strong><span>坐标经度：</span></strong>
                        <input id="longitude" size="10" type="text">&nbsp;
                        <strong><span>坐标纬度：</span></strong>
                        <input id="latitude" size="10" type="text">&nbsp;
                        <br><br>
                        <%--ueditor文本框--%>
                        <script id="editor" name="lostDescribe" type="text/plain" textarea="editorValue"
                                style="width: 750px;height: 200px"></script>
                        <button type="submit" class="btn-primary" id="sum">发布</button>

                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>