前端简单使用的一些东西（自用）

刺骨的言语ヽ痛彻心扉 2023-07-11 05:51 13阅读 0赞

一 icon：

二 背景图片（使用style进行 添加）

style="background-image: url(../assets/images/img_bg_1.jpg);"

三 关于元素错误-两个相同元素：

Malformed markup: Attribute "aos-duration" appears more than once in element

有一个元素错误：
    2020-03-09 16:03:22.070 [,] [http-nio-8080-exec-1] ERROR o.a.c.c.C.[.[.[.[dispatcherServlet] - [log,182] - Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/index.html]" - line 38, col 163)] with root cause
    org.attoparser.ParseException: (Line = 38, Column = 163) Malformed markup: Attribute "aos-duration" appears more than once in element
    
    原文：

这里的aos-duration元素出现了两次 导致启动时候报错。注意themleaf在解析前端在同一个标签是可能不支持两个相同名的元素

四 百度地图html 代码

<script type="text/javascript"
                                src="http://api.map.baidu.com/api?v=2.0&ak=OfldXkI591GW281wpaUBSHES"></script>
                        <style type="text/css">
                            #allmap {
                                width: 100%;
                                height: 400px;
                                margin-top: 20px;
                                overflow: hidden;
                                font-family: "微软雅黑";
                            }
    
                            #allmap b {
                                color: #CC5522;
                                font-size: 14px;
                            }
    
                            #allmap img {
                                max-width: none;
                            }
                        </style>
                        <div id="allmap"></div>
                        <script type="text/javascript">
                            var map = new BMap.Map("allmap");
                            map.centerAndZoom(new BMap.Point(111.2222225, 30.300000), 18);
                            var marker1 = new BMap.Marker(new BMap.Point(111.222222, 30.300000));  // 创建标注
                            map.addOverlay(marker1);              // 将标注添加到地图中
                            //marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                            //创建信息窗口
                            var infoWindow1 = new BMap.InfoWindow("<b>你的地址<br>电话：+86 0000 1111");
                            marker1.openInfoWindow(infoWindow1);
                            //marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
                            //向地图中添加缩放控件
                            var ctrl_nav = new BMap.NavigationControl({
                                anchor: BMAP_ANCHOR_TOP_LEFT,
                                type: BMAP_NAVIGATION_CONTROL_LARGE
                            });
                            map.addControl(ctrl_nav);
                            //向地图中添加缩略图控件
                            var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
                            map.addControl(ctrl_ove);
                            //向地图中添加比例尺控件
                            var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
                            map.addControl(ctrl_sca);
    
                            map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
                            map.enableScrollWheelZoom();//启用地图滚轮放大缩小
                            map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
                            map.enableKeyboard();//启用键盘上下左右键移动地
                        </script>
                        </div>

五：关于freemarker空指针报错的问题：

如果我们在ftl取得值还未赋值。会报错异常

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70][]

解决方法：

var xxxx = ${(RequestParameters.xxx)!};
    
    而当您写成这样的时候：${RequestParameters.xxx!}  没值的时候依然会报错，
     ${(RequestParameters.xxx)!};
    
    其实也可以直接用ajax来获取，没必要这么搞

前端依旧会有个为空的值

![20200317142125606.png][]

当然这样就比较好处理了。

\------------------------------2020年09月29日更------------------------------------

六、jquery全局替换内容

/*全局替换*/
    function replaceAll(jsonMsg) {
    
            jsonMsg = jsonMsg.replace(/\\/g, "\n");
            return jsonMsg;
    
            //这里 /g 是在jsonMsg中 ‘\\’这个出现的所有地方都会换成 '\n';
            //也就是全局搜索 
            // /g是一个正则表达式 表示的就是全局匹配 配合replace 就不是 找到第一个就替换掉。
       
    }

七、input中的内容获取、赋值

取值  
    input 根据id获取value值 ：xxx = $("xxxx").val()；
    根据id赋值: $("#xxxx").html(msg);

八、Json串格式化

将后端返回的json串进行格式化；并进行缩进。

预览效果为:

![20200929102110211.png][]

格式化后可以得到类似于这种效果:

![20200929102128965.png][]

参考（baipiao）了下大佬的逻辑代码：如下

暂时就这。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200317141834221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx,size_16,color_FFFFFF,t_70
[20200317142125606.png]: https://img-blog.csdnimg.cn/20200317142125606.png
[20200929102110211.png]: https://img-blog.csdnimg.cn/20200929102110211.png
[20200929102128965.png]: https://img-blog.csdnimg.cn/20200929102128965.png