一.html

1.抽取公共部分

1
2
3
4
抽取片段		th:fragment="sidebar"
引用片段		<div th:replace="head::sidebar"></div>
连接带信息用（）引用
<div th:replace="commons/bars::sidebar(activeUri = 'main.html')"></div>

2.引入webjar依赖

1
2
3
4
5
 <dependency>
	<groupId>org.webjars</groupId>
	<artifactId>jquery</artifactId>
	<version>3.3.1</version>
</dependency>

3.样式表引用

1
2
3
4
5
6
7
8
9
10
有提示：		
<html lang="en" xmlns:th="http://www.thymeleaf.org">


核心引用
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css"  th:href="@{/webjars/bootstrap/4.4.1/css/bootstrap.css}" rel="stylesheet">

单个引用
<link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">

4.根据选择来显示或者隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  $(function() {
    //隐藏div
    $("#userinput").hide(); 
  //给div添加change事件
  $("#select").change(function() {
  if($(this).val() == 4 ) {
    $("#userinput").show();
  } else
  {
    $("#userinput").hide();
  }
})
  })
</script>

5.在页面用循环显示信息

1
2
3
4
5
6
7
<ul class="clearfix" th:each="top,num:${session.goods}" >  //最外层，num是计数器 num.index == 当前第几个 
    top.id 属性
    [[${top.grprice }]] 行内写法
    th:text = ${top.gname }  <>内写法
    
    ${num.index+1} 当前第几个

6.url显示携带信息

1
<a href="#" th:href="@{/details(orderId=${o.id})}"></a>

7.Post请求携带数据跳转页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function httpPost(id) {
    <!-- temp为form表单-->
    var temp = document.createElement("form");
    <!-- 跳转连接-->
    temp.action = "/messagedetial";
    <!-- 方式为post-->
    temp.method = "post";
    temp.style.display = "none";

    <!-- opt为携带数据-->
    var opt = document.createElement("textarea");
    opt.name = "messageid";
    opt.value = id;

    <!--提交 -->
    temp.appendChild(opt);
    document.body.appendChild(temp);
    temp.submit();
    return temp;
}

调用
<button th:onclick="'httpPost('+${allmessage.getId()}+')'">
    调用方式为拼串！
</button>
数字不用加''  字符串须加''用转义字符\'   
abc('abc'); abc(123);
th:href="'javascript:regPost(\''+${top.getEmial()}+'\');'"
th:onclick="'httpPost('+${allmessage.getId()}+')'"

打开新页面
<script type="text/javascript">
        function openNotice(id) {
            var url = "/selectANotice/"+ id;
            window.open(url, '站内公告', 'height=400, width=400, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
        }
        function clearValue() {
            document.myForm.mykey.value = "";
        }
</script>
调用javascript
<a href="javascript:openNotice('/selectANotice?id=${nt.id }');" th:href="'javascript:openNotice('+${note.id }+');'">[[${note.ntile}]]</a>

8.修改标签用表达式

1
2
<!--如果value是1 的话值为第一个否则为第二个-->
th:class="${value==1?'a':'b'}"

9.是否显示此标签

1
2
<!--如果message是空的话就不显示此标签-->
<a th:if="${not (message == null)}"   ></a>

10.根据某些值得改变来选择显示隐藏DIV

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  $(function() {
    //隐藏div
    $("#otherReason").hide();
    //给div添加change事件
    $("#select").change(function() {
      if($(this).val() == 4 ) {
        $("#otherReason").show();
      } else
      {
        $("#otherReason").hide();
      }
    })
  })
</script>

11.用data-whatever来传递信息

1
2
3
4
5
6
7
8
9
10
11
<a data-target=".bs-example-modal-sm"  th:data-whatever="@mdo"> 连接 </a>
 
获取到data-whatever的值来传递到新的页面中去

$('.bs-example-modal-sm').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var recipient = button.data('whatever')
  var modal = $(this)
  modal.find('.modal-title').text('发送新消息给 ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

12.通过js修改span标签的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" >
<!-- 搜索框js -->
function changeType(type) {
  document.getElementById("type").value = type;
  var a = document.getElementById("display");

  if (type == 0) {
    a.innerHTML = "标题";
  } else if (type == 1) {
    a.innerHTML = "内容";
  } else if (type == 2) {
    a.innerHTML = "发件人";
  }
}
 </script>

13.HTML页面空格+换行+居中

1
2
3
4
5
6
7
&nbsp;&nbsp;  空格 
<br>	换行
<hr>	分割线
style="text-align:center"  文字居中
  <div class="alert alert-danger" role="alert" style="text-align:center">
                                    此处暂时没有信息！
                                </div>

14.html分页页码

1
2
3
4
5
6
7
8
9
10
11
<ul class="pagination" style="float: right; margin-right: 30px;" th:if="${message.totalPage > 1}">
<li><a th:href="'javascript:httpPost('+${type}+',1)'">首页</a></li>
<li th:class="${message.currentPage>1?'':'disabled'}"><span th:if="${message.currentPage==1}">上一页</span><a th:href="'javascript:httpPost('+${type}+','+${message.currentPage-1}+')'" th:if="${message.currentPage>1}">上一页</a></li>
<li th:if="${(message.currentPage-2)>=1}" ><a th:href="'javascript:httpPost('+${type}+','+${message.currentPage-2}+')'" th:text="${message.currentPage-2}">1</a></li>
<li th:if="${(message.currentPage-1)>=1}"><a th:href="'javascript:httpPost('+${type}+','+${message.currentPage-1}+')'" th:text="${message.currentPage-1}">2</a></li>
<li class="active"><a th:href="'javascript:httpPost('+${type}+','+${message.currentPage}+')'" th:text="${message.currentPage}">3</a></li>
<li th:if="${(message.currentPage+1)<=message.totalPage}"><a th:href="'javascript:httpPost('+${type}+','+${message.currentPage+1}+')'" th:text="${message.currentPage+1}">4</a></li>
<li th:if="${(message.currentPage+2)<=message.totalPage}"><a th:href="'javascript:httpPost('+${type}+','+${message.currentPage+2}+')'" th:text="${message.currentPage+2}">5</a></li>
<li th:class="${message.currentPage<message.totalPage?'':'disabled'}"><span th:if="${message.currentPage==message.totalPage}">下一页</span><a th:href="'javascript:httpPost('+${type}+','+${message.currentPage+1}+')'" th:if="${message.currentPage<message.totalPage}">下一页</a></li>
<li><a th:href="'javascript:httpPost('+${type}+','+${message.totalPage}+')'">尾页</a></li>
</ul>

15.js中alert几种弹出方式

16.用ajax异步提交form表单

先自己下载jquery.form.js,链接https://pan.baidu.com/s/1-IfvBikx4DXQLTJYkoTzDA

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
@RestController
或者 @ResponseBody +@Controller 否则接受不到返回数据



<!-- 导入jquery.form.js用于异步提交form表单 -->
<script type="text/javascript" th:src="@{/js/jquery.form.js}"></script>


@PostMapping(value = "/order/add")
@ResponseBody				//返回json数据判断是否成功！！
public String
    
    
//这是提交按钮
<button type="button" class="btn btn-primary" οnclick="addOrder()">
    确认添加
</button>
    
    
    //这是提交js
    function addOrder() {
        $('#orderAddForm').ajaxSubmit( {
            url : "/url",
            //这里data是@Controller返回的数据
            success: function(data) {	
                if(data=="1"){
                    alert("添加成功")
                }
                else{
                    alert("添加失败")
                }
            },
        });
        $('#myModal').modal("hide")
        return false;
}

//跳转位置
success: function (data) {
                    window.location.href = "/toRegister";
                }




ajax无表单提交
    
    <!--获取页面元素 input[name=****]-->
   var title = $('input[name=mailTitle]').val(),
    txt =  $('textarea[name=mailTxt]').val();
    

$('button').on('click', function() {
    $('form').on('submit', function() {
        var title = $('inpur[name=title]').val(),
            content = $('textarea').val();
        $(this).ajaxSubmit({
            type: 'post', // 提交方式 get/post
            url: 'your url', // 需要提交的 url
            data: {
                'title': title,
                'content': content
            },
            success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
                // 此处可对 data 作相关处理
                alert('提交成功！');
            }
            $(this).resetForm(); // 提交后重置表单
        });
        
        return false; // 阻止表单自动提交事件，必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
    });
});


17.admin页面提交等待效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 通知消息-->
<script type="text/javascript" th:src="@{/js/bootstrap-notify.min.js}"></script>
<script type="text/javascript" th:src="@{/js/lightyear.js}"></script>
<script type="text/javascript" th:src="@{/js/main.min.js}"></script>

<script type="text/javascript">
    // 消息提示示例 按钮的id为example-success-notify
    $('#example-success-notify').on('click', function(){
        lightyear.loading('show');
        // 假设ajax提交操作
        setTimeout(function() {
            lightyear.loading('hide');
            lightyear.notify('修改成功，页面即将自动跳转~', 'success', 3000);
        }, 1e3)
    });
    $('#example-error-notify').on('click', function(){
        lightyear.loading('show');
        // 假设ajax提交操作
        setTimeout(function() {
            lightyear.loading('hide');
            lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
        }, 1e3)
    });
</script>

页面加载等待效果

1
2
3
4
5
6
7
8
lightyear.loading('show');  // 显示
lightyear.loading('hide');  // 隐藏

//延时执行在1000毫秒后执行这个function
setTimeout(function() {
                        lightyear.loading('hide');
                        lightyear.notify('修改成功，页面即将自动跳转~', 'success', 3000);
                    }, 1000);

消息提示

消息提示采用的是bootstrap-notify插件，这里包装了一下(包装方法来自DolphinPHP)，您也可以直接使用bootstrap-notify。

参数 说明
$msg 提示信息
$type 提示类型：’info’, ‘success’, ‘warning’, ‘danger’
$delay 定义消息提示消失的时间，毫秒数
$icon 图标，例如：’mdi-emoticon-happy’，具体参考图标
$from ‘top’ 或 ‘bottom’
$align ‘left’, ‘right’, ‘center’ 
1
lightyear.notify('修改成功，页面即将自动跳转~', 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');

实例-发信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
1.引入js

<!-- 通知消息-->
<script type="text/javascript" th:src="@{/js/bootstrap-notify.min.js}"></script>
<script type="text/javascript" th:src="@{/js/lightyear.js}"></script>
<script type="text/javascript" th:src="@{/js/main.min.js}"></script>
<!-- 导入jquery.form.js用于异步提交form表单 -->
<script type="text/javascript" th:src="@{/js/jquery.form.js}"></script>

2.用@Controller+@ResponseBody  或者 @RestController

@PostMapping("/url")
@ResponseBody				//返回json数据判断是否成功！！
public String test(){
    reyurn "a";
}

3.页面加载等待效果

lightyear.loading('show');  // 显示
lightyear.loading('hide');  // 隐藏

//延时执行在1000毫秒后执行这个function
setTimeout(function() {
                        lightyear.loading('hide');
                        lightyear.notify('修改成功，页面即将自动跳转~', 'success', 3000);
                    }, 1000);

4.提交js




var options = { 
    target: ‘#output1',     //把服务器返回的内容放入id为output1的元素中 
    beforeSubmit: showRequest,   //提交前的回调函数 
    success: showResponse,     //提交后的回调函数 
    error: errorResponse,		//遇到后台报错函数
    url: url,      //默认是form的action，如果声明，则会覆盖 
    type: type,   //默认是form的method，如果声明，则会覆盖 
    dataType: json ,  //接受服务端返回的类型 
    clearForm: true,  //成功提交后，清除所有表单元素的值 
    resetForm: true,  //成功提交后，重置所有表单元素的值 
    timeout: 3000    //限制请求的时间，当请求大于3秒后，跳出请求 
}；



示例：

<!--发送信息-->
function adminSendMail(){
    
    //显示等待效果   --一直转圈！！！！
    lightyear.loading('show');

    //提交form表单 #id
    $('#sendMail').ajaxSubmit({
        url : "/admin/mail/send",
        //data为返回数据
        success: function(data) {
            //结果成功
            if(data == 1){
                setTimeout(function() {
                    lightyear.loading('hide');
                    lightyear.notify('发送信息成功，请前往已发送信息查看~', 'success', 3000);
                }, 1000);
            }//结果失败
            else{
                setTimeout(function() {
                    lightyear.loading('hide');
                    lightyear.notify('发送信息失败，请稍后再试~', 'danger', 3000);
                }, 1000);
            }
        },
        error : function() {
            setTimeout(function() {
                lightyear.loading('hide');
                lightyear.notify('出现了错误，请稍后再试~', 'danger', 3000);
            }, 1000);
        },
        //超时5秒跳出
        timeout: 5000
    });
    
    //断后操作隐藏窗口之类
    //隐藏输入表单弹窗
    $('#exampleModal').modal("hide");
    return false;
}

18.对话框

19.返回上一层

1
<button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>

20.模态框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!--  修改id 和 aria-lableledby 即可修改模态框-->
<div class="modal fade" id="mailEdit" tabindex="-1" role="dialog" aria-labelledby="mailEdit">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑消息</h4>
            </div>
            <form  method="post" id="admin/mail/edit" name="sendMail" >
                <div class="modal-body">
                    <div class="form-group">
                        <label  class="control-label"><h5>标题：</h5></label>
                        <input class="form-control" id="mailTitle" name="title">
                        <label  class="control-label"><h5>消息内容：</h5></label>
                        <textarea class="form-control" id="mailTxt" name="message"></textarea>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submit" onclick="adminSendMail()">发送消息</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!--触发模态框 添加data-toggle 和 data-target（对应aria-lableledby的值） -->
 data-toggle="modal" data-target="#mailEdit"

21.html强制刷新当前页面（延时3秒后）

1
2
3
setTimeout(function() {
    window.location.reload();
}, 3000);

22.js修改input的placeholder

方法1：通过js来设置文本框input的placeholder值

1
document.getElementById("input").setAttribute("placeholder","新文本内容");

方法2：通过jquery设置文本框input的placeholder值

1
$('#input').attr('placeholder','新文本内容')；

23.判断input值为空

https://blog.csdn.net/weixin_42645716/article/details/87984442

一、Input获取value

二、判断value是否为空

// 方法一:
if(name == null || name == undefined || name == ‘’){
console.log(“value 为空”)
}
// 方法二:
if(name.length > 0 ){
console.log(“value 不为空”)
}
三、null、undefined、‘’的区别

null:空对象\不是对象,转为数值为0
undefined:全局对象window的一个特殊属性.undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。转为数值为NaN.典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。

二.springboot

1.获取时间戳

1
Timestamp timestamp = new Timestamp(System.currentTimeMillis());
1
2
3
4
5
SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd hh:mm:ss");
String timestamp = sdf.format(log.getTime());//格式化器

thymeleaf 时间戳格式化器
  th:text="${#dates.format(Time, 'yyyy-MM-dd hh:mm:ss')}"

2.从html页面的form表单提取数据与封装

1
2
3
4
5
@RequestParam("select") Integer val   //根据name获取值
    Model model         //封装model
    model.addAttribute("focusgoods",selectallfocusbyid);   //名值对形式
    HttpSession session
    session.setAttribute("goodshot",goods);

3.添加log日志

1
2
3
4
Timestamp timestamp = new Timestamp(System.currentTimeMillis());
log us_login_log = new log(0,"用户登录",timestamp,email);
logService.insertlog(us_login_log);
//操作类型 0增1删2改3查4登录 、 操作 、时间 、 操作者

4.SpringBoot热部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!--dependency 中devtools热部署-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
            <scope>true</scope>
        </dependency>



<!--build 中devtools设置true-->

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <fork>true</fork>
                </configuration>
            </plugin>
        </plugins>
    </build>
    
<!--application.yml中配置一下devtools-->    
spring:
  devtools:
    restart:
      enabled: true  #设置开启热部署
      additional-paths: src/main/java #重启目录
      exclude: WEB-INF/**
  
  
 修改idea设置。
（1）File-Settings-Compiler-Build Project automatically
（2）ctrl + shift + alt + / ,选择Registry,勾上 Compiler autoMake allow when app running

crtl+s 热启动

5.String 转Int

1
Integer.parseInt(id)

6.模糊查询

1
@Select("Select * From message where title like CONCAT('%',#{title},'%')")

7.判断一个list集合是否为空

isEmpty() 和(list.size() == 0)都是判断List内容是否为空。

null判断是判断有没有对list集合分配内存空间，而不是list里面内容是否为空

8.转发与重定向

1.转发

1.使用 “forword” 关键字

1
return "forword:/url";

2.使用servlet 提供的API

1
request.getRequestDispatcher("/url").forward(request,response);

2.重定向

1.使用servlet 提供的API

1
2
HttpServletResponse response;
response.sendRedirect("/url");			//转发到制定的url及对应Controler

2.使用 “redirect” 关键字

1
return "redirect:/url";

9.分页配置

1.分页工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
package utils;

import java.util.List;

/**
 * 分页工具
 */
public class PageUtils<T> {
    private int currentPage; //当前页码
    private int pageSize;    //每页显示的记录数
    private int totalPage;   //总页数
    private int totalCount;  //总记录数
    private List<T> list;   //封装查询结果的集合

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }
}

2.html分页配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@RequestParam(value = "currentPage", defaultValue = "1") int currentPage
    //传入页面，如不制定默认为3
    //还可以接受一些其他参数
    
    
    //页面显示情况
    <tr>
            <td colspan="5" align="right">
                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;共${allGoods.totalCount}条记录&nbsp;&nbsp;共${allGoods.totalPage}页&nbsp;&nbsp;
                第${allGoods.currentPage}页&nbsp;&nbsp;
                <c:if test="${allGoods.currentPage != 1}">
                    <a href="/adminGoods/selectGoods?currentPage=1">首页</a>&nbsp;&nbsp;
                    <a href="/adminGoods/selectGoods?currentPage=${allGoods.currentPage-1}">上一页</a>&nbsp;&nbsp;
                </c:if>
                <c:if test="${allGoods.currentPage != allGoods.totalPage}">
                    <a href="/adminGoods/selectGoods?currentPage=${allGoods.currentPage+1} ">下一页</a>&nbsp;&nbsp;
                    <a href="/adminGoods/selectGoods?currentPage=${allGoods.totalPage}">尾页</a>
                </c:if>
            </td>
        </tr>

3.分页实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
PageUtils<Goods> page = adminGoodsService.selectGoods(currentPage);   //currentPage:当前页数

	//service层方法
	@Override
    public PageUtils<Goods> selectGoods(int currentPage) {
        PageUtils<Goods> goods = new PageUtils<>();
        //定义每页显示的记录数
        int pageSize = 15;
        //查询总记录数
        int totalCount = goodsMapper.findCount();  //查询当前总记录数
        double tc = totalCount;
        //查询总页数
        int totalPage = (int) Math.ceil(tc / pageSize);
        //查询每页显示的结果集
        int start = (currentPage - 1) * pageSize;
        List<Goods> lists = goodsMapper.findLists(start, pageSize);

        //开始封装
        goods.setCurrentPage(currentPage);
        goods.setPageSize(pageSize);
        goods.setTotalCount(totalCount);
        goods.setTotalPage(totalPage);
        goods.setList(lists);
        return goods;
    }