利用ssm框架编写个人博客心得

最新推荐文章于 2023-04-05 13:15:44 发布

邹飞鸣

最新推荐文章于 2023-04-05 13:15:44 发布

阅读量443

点赞数

文章标签： java ssm

本文链接：https://blog.csdn.net/qq_43483251/article/details/111182649

版权

遇到的问题：

1、java中Data的格式与数据库中的datetime

格式可以通用，Data中有年月日时分秒的构造方法。

2.java实体类与数据库表中属性的驼峰命名法与下划线问题？

直接使用 resultMap 来解决。

3、java将数据库datetime类型的转换问题

将java实体类中的时间的类型设置为String，因为数据库中datetime支持字符串形式的存储，只要格式正确 xxxx-xx-xx xx:xx:xx。

4、自定义的类选择器作用在分页板块时，不起作用，但是在测试时是起作用的。

猜测原因是class中有多个类选择器（外面引用的layui），可能存在冲突，致使不起作用，解决方法，在标签中定义style属性即可解决，因为标签中的style优先级最高，

但是分页板块要实现鼠标触碰时出现变化，如果在标签里面定义了style属性，再设置**.ul_li:hover{}**时这个是不起作用的。解决方法：

反其道而行之，标签不添加自定义的类选择器，将自定义的类选择器作为鼠标触碰时的效果展示，即**.ul_li:hover{}**里面填写自定义类选择器中的内容。

5、分页功能：网上的插件看的头疼，还不如自己写一个，思路：

先定义一个查询有多少条博客的sql语句
当首次访问博客首页时，进行初始化操作：先获取博客总条数，设定好elem：每一页显示的数量，设定好pageSize：从哪里开始查询。然后进行一系列的转换，变成要传出去的两个参数：当前页（currentPage）与总页数（PageCount）。计算方式就不说了，简单。不要忘记还要通过 pageSize 与 elem 查询出来对应的数据也返回前端。
之后，当点击下一页按钮或者上一页按钮时，先在前端页面对当前页（currentPage）这个属性进行加减一，然后在点击按钮时，通过在地址后面加尾巴的形式如：

?currentPage=${currentPage+1}&PageCount=${PageCount}

来传递需要的两个参数，当前页与总页数，之后，后端通过当前页继续去数据库寻找相应的数据，然后在将这两个参数返回，注：也不要忘记将查询到的数据返回。

其次，还要对前端返回的当前页进行，判断，看是否小于等于0或者大于总页数。

至此完成分页操作！

6、将markdown嵌入到博客中。

解决方法：

1、去GitHub下载markdown https://github.com/pandao/editor.md

2、解压后将指定的文件复制到项目中

在这里插入图片描述

注：存放在项目中的路径很重要，极有可能是出错的原因。

我的存放位置：在web下新建目录editormd。将上面需要的文件全部粘贴过来。

在这里插入图片描述

3、因为要markdown编辑器就是有两个用途，一个是编辑成markdown格式进行存储，另一个是将数据库中的博客以这个形式在界面显示。先说第一个。：

注：要用到jQuery，所以还要导入jQuery的包

1、编辑：

注：1、路径不要出错，可以按照你们自己的来。特别是

path : "${pageContext.request.contextPath}/editormd/lib/",

这个最后要加个 / 代表是这个文件下的全部文件，这里要是错了，很多文件会显示找不到

2、后端如何获取这个markdown

你可以把 id为test-editormd 放在表单中，表单提交后，是通过 textarea标签里面的name属性（textarea）来获取值。（要在 function 方法中将 saveHTMLToTextarea属性设置为 : true）

注：可能会出现400错误（大概是用的get请求方式，这个方式会在地址栏显示，所以不能发送太多数据，把方式改成post即可。）

新建一个jsp文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <meta charset="utf-8" />
    <title>示例</title>
<link rel="stylesheet"href="${pageContext.request.contextPath}/editormd/css/editormd.css" />
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
<script src="${pageContext.request.contextPath}/editormd/editormd.js"></script>
    
    
</head>
<body>

<form action="" method="post">
<div id="test-editormd">
    
    <textarea style="display:none;" class="form-control" id="editormd" name="editormd">你编辑的文本</textarea>
    
</div>
</form>

<script type="text/javascript">
    var testEditor;
    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "${pageContext.request.contextPath}/editormd/lib/",
            //这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
            saveHTMLToTextarea : true
        });
    });
</script>
</body>

2、将数据库中的数据以markdown格式显示

新建一个jsp文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/editormd/css/editormd.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/editormd/css/editormd.preview.css" />
<!-- Editor js -->
<script src="${pageContext.request.contextPath}/editormd/editormd.js"></script>
<script src="${pageContext.request.contextPath }/editormd/lib/marked.min.js"></script>
<script src="${pageContext.request.contextPath }/editormd/lib/prettify.min.js"></script>




<div class="padding-content" id="test-markdown-view">
    <textarea style="display:none;" >这里显示</textarea>
</div>
 

<script>
    $(function() {
        var testView = editormd.markdownToHTML("test-markdown-view", {
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });
</script>
</body>

附加：如果想将博客截取一部分作为在显示全部博客时作为摘要，可以将编辑好的markdown传给后端，让后端进行截取一部分，并且因为是markdown的字符串，所以会夹带一些markdown的特殊语法（#：代表标题。*，-）等，这时我们可以将截取好的字符串进行特定字符替换操作，用以消除markdown格式的博客变成纯文本时夹杂的符号（如：#…）

7、两个 < d i v > 设置了 display: inline-block; 属性时，右边的总是不能和左边的顶端对齐，这时，只需要在右边的div的样式中添加一个样式： vertical-align: top; 即可。

8、固定定位：将按钮固定在屏幕上，不会因为屏幕滑动而消失。

#fixedbutton {
            position: fixed;
            bottom: 50px;
            right: 150px;
            z-index: 1000;
        }

9、关于js操作Dom节点：

// 获取节点
let bottom = document.getElementById('bottom');// 通过id获取
通过class获取...
通过标签获取...

// 删除子节点

let bottom = document.getElementById('bottom'); // 获取父节点，利用父节点删除子节点
let bottom1 = document.getElementById('button1'); // 子节点
bottom.removeChild(bottom1); // 删除节点

// 在定义父节点里面创建节点
a = document.createElement("a");// 创建新节点
let a1 = bottom.appendChild(a); // 将创建的节点插入到父节点中

// 对新节点设置属性
// 设置节点的属性，点击后跳转到首页  
a1.setAttribute("href","${pageContext.request.contextPath}/blog/queryAllBlog")

//设置标签显示的内容，内容可以添加样式
a1.innerHTML='<i  class="ul_li layui-btn layui-btn-primary layui-btn-sm layui-icon " style="border-radius: 30px;">返回首页</i>';

 // 操作查询框，用以提醒
let textName = document.getElementById("textName"); // 通过id获取
// 设置查询框的提醒属性（placeholder）的值
textName.setAttribute("placeholder","查询成功！退出查询点击首页");

10、编写一个弹出式登陆框

一把辛酸泪！，思虑良久，觉得跳转到另一个界面来登陆太low，于是写了个弹出式登陆，差点绝望到想放弃。

思路：将登陆界面写在一个jsp文件中，然后利用 iframe 标签内嵌网页，计算好大小，利用layui的弹出式动画实现。

问题：

1、因为是要将登陆页弹出时在网页的最上面，但是div是以流的形式排列的，就是两个div之间，要么并排（将其转换成行内元素但是保存块元素特性），要么就是原来的块元素占满一行，就是不可以将一个div放在另一个的上面，此时就必须要用到样式中的：position属性

作用：分别上下

1.position: absolute：要放在上面的div设置的属性

2.position: relative：要放在下面的div设置的属性。

这样就实现类内嵌网页悬浮在最上面的样子。

2、但是 iframe 有属于自己的边框，这不行得去除，

添加样式：border: medium none;，去除边框。

3、不登录时隐藏 iframe 框框，

因为就算，没有边框，不登录时，iframe 还是在网页最上方占了一块位置，导致这块位置下的按钮不能被点击，于是要使用 js 来将其隐藏，只在需要登陆时拿出来：

操作方式：先用div包裹住 iframe 标签，然后在div标签中设置样式：

display: none：隐藏元素

display: block：显示元素

然后通过 js 操作Dom的方式可以在点击登陆按钮时，动态的显示与隐藏：js代码：就不告诉你

4、href="javascript:search() 和 οnclick="search();"

都是点击后执行一个 js 方法，前者什么时候都可以使用，后者如果方法名与页面中的id名一样，就可能报错。参考链接：https://blog.csdn.net/chenchunlin526/article/details/79013192

5、返回按钮，本来想在登陆页面直接写返回按钮，即隐藏内联框架的操作。但是发现登陆页面获取不到包裹内联框架的 id 因为是两个不同的jsp文件，于是只好在首页设置一个与内联框架同现，同失的相对定位的返回按钮。

11、当后端的数据在前端的js中比较时，利用 ’ ’ 将后端的数据包裹，这样即使后端数据为空，前端js也不会报错，反之，前端传后端也可以。

12、parent.location.reload();

js的方法，作用是刷新当前网页，从服务器里面重新获取网页，

当你使用了内联框架时，且想让框架里面的按钮能刷新外面的网页，可以调用这个函数

13、通过js修改a标签的href属性

document.getElementById(“myId”).setAttribute(“href”,“www.xxx.com”);

14、window.location.href="${pageContext.request.contextPath}/blog/queryAllBlog"

邹飞鸣

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
利用ssm框架编写个人博客心得

遇到的问题：1、java中Data的格式与数据库中的datetime格式可以通用，Data中有年月日时分秒的构造方法。2.java实体类与数据库表中属性的驼峰命名法与下划线问题？直接使用 resultMap 来解决。3、java将数据库datetime类型的转换问题将java实体类中的时间的类型设置为String，因为数据库中datetime支持字符串形式的存储，只要格式正确 xxxx-xx-xx xx:xx:xx。4、自定义的类选择器作用在分页板块时，不起作用，但是在测试时是起作用的。
复制链接

扫一扫