hooyantsing's Blog

第123次课程_框架项目案例_T2L2

字数统计: 1.6k阅读时长: 8 min
2020/03/11

源辰76班

第123次课程

2020.03.11

内容

框架项目案例_T2L2[廖彦]

项目路径:

1.分页查询

分页工具:pagehelper

引入以下依赖

pom.xml

1
2
3
4
5
6
<!-- 分页工具 -->
           <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper-spring-boot-starter</artifactId>
                <version>1.2.13</version>
           </dependency>

使用方法

神奇的是,调用PageHelper.startPage(页码,每页多少行)静态方法,自动会根据接口对象查询。

最后,将查询到的表数据以实体类数组的方式返回,再放入Model内,传送给前端。

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
package com.yc.blog.web;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.yc.blog.bean.Article;
import com.yc.blog.dao.ArticleMapper;
@Controller
public class IndexAction {
     
     @Resource
     private ArticleMapper am;
     
     @GetMapping({"/","index","index.html"})
     public String index(@RequestParam(defaultValue = "1")  Integer page,Model m) {
           Page<Article> pg = PageHelper.startPage(page, 5);
           //注意:PageHelper.startPage(page, 5)必须在查询代码的前一行
           //接口对象
           am.selectByExampleWithBLOBs(null);
           m.addAttribute("alist",pg);
           return "index";
     }
}

2.无限加载

当滚动条拉到某一位置时,列表将继续加载,一直向下延伸。应用于如百度首页,腾讯新闻评论区等。

jquery-ias-min.js

所需js文件

.png

配置代码

将以下代码加入工程js内

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
     var page = 1;
     var ias = jQuery.ias({
           container : '.content',
           item : '.excerpt',
           pagination : '.pagination',
           next : '.next-page a'
     });
     // 加分页查询参数
     ias.on(    "load", function(e){
           e.ajaxOptions.data = {page:++page};
     });
     // 加载图片
     ias.extension(new IASSpinnerExtension({
         src: 'images/loading.gif', // 图片地址
     }));
     
     ias.extension(new IASTriggerExtension({
         text: '查看更多',
         offset: 5 // 第几页后开始
     }));

例:

container:新加载的数据放在哪里

item:ajax返回的data里的哪些数据

pagination:当滚动条到哪触发

next:触发什么,如a标签地址

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jquery-ias.min.js"></script>
<script type="text/javascript">
    // 官网 : https://plugins.jquery.com/ias/
    // 文档 : https://docs.infiniteajaxscroll.com/getting-started
    var page = 1;
    $(function(){
        var ias = jQuery.ias({
            container : '#posts',
            item : '.post',
            pagination : '#pagination',
            next : '.next'
        });
        // 加分页查询参数
        ias.on(    "load", function(e){
            e.ajaxOptions.data = {page:page++};
        });
        // 加载图片
        ias.extension(new IASSpinnerExtension({
            src: 'loading.gif', // 图片地址
        }));
        
        ias.extension(new IASTriggerExtension({
            text: '查看更多',
            offset: 5 // 第几页后开始
        }));
    });
</script>
<style type="text/css">
.post {
    height: 200px;
    background-color: #bbb;
    margin: 10px
}
</style>
</head>
<body>
    <div id="posts">
        <div class="post">...</div>
        <div class="post">...</div>
        <div class="post">...</div>
        <div class="post">...</div>
    </div>

    <!-- 分页条, 当滚动到该控件时, 触发加载 -->
    <div id="pagination">
        <a href="index.html" class="next">next</a>
    </div>
</body>
</html>

3.BLOBs和CLOBs数据

如果数据库字段类型属于标题两种之一,前端通过简单的

1
<x th:text="{}"></x>

是获取不到数据的,需要调用接口对象时候用以下方法

1
am.selectByExampleWithBLOBs(null);

来调取大量数据。

4.th:utext 和 th:id

th:utext 和 th:id都是thymeleaf的springEL语法。

th:utext:将获取到的字符串解析,把字符串内的html语言加载至页面。相当于js中的html()方法。th:text就是text()方法。

th:id:给元素加入id属性。

紫色部分,通过text()方法先将数据流内的html标签洗掉,然后再通过html()方法加载至页面。当然使用正则表达式来清洗数据库数据更好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<article th:each="a:${alist}" class="excerpt excerpt-1"><a  class="focus" href="article.html" title=""><img class="thumb"  data-original="images/excerpt.jpg" src="images/excerpt.jpg"  alt=""></a>
        <header><a class="cat" href="program">后端程序<i></i></a>
          <h2><a th:text="${a.title}"  th:href="'article?id='+${a.id}" title="">php如何判断一个日期的格式是否正确</a></h2>
        </header>
        <p class="meta">
          <time class="time"><i class="glyphicon  glyphicon-time"></i>
          <span th:text="${a.createtime}">2016-1-4  10:29:39</span>
           </time>
          <span class="views"><i class="glyphicon  glyphicon-eye-open"></i> 共120人围观</span> <a class="comment"  th:href="'article?id='+${a.id}" ><i class="glyphicon  glyphicon-comment"></i> 0个不明物体</a></p>
        <div th:utext="${a.content}" th:id="'p'+${a.id}"  class="note">可以用strtotime()把日期($date)转成时间戳,再用date()按需要验证的格式转成一个日期,来跟$date比较是否相同来验证这个日期的格式是否是正确的。所以要验证日期格式 ... </div>
        <script type="text/javascript">
            var id = 'p[[${a.id}]]';
            var text = $("#" + id).text();
            text = text.substr(0,100);
            $("#" + id).html(text);
        </script>
</article>

5.复习 地址参数

如:index.html?page=1

前端发送方式:

1
<h2><a th:text="${a.title}" th:href="'article?id='+${a.id}"  title="">php如何判断一个日期的格式是否正确</a></h2>

后台接收方式

根据SpringMVC的需要

别忘记:@Controller、@Resource和@GetMapping注解的应用,否则报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package com.yc.blog.web;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.yc.blog.bean.Article;
import com.yc.blog.dao.ArticleMapper;
@Controller
public class IndexAction {
     
     @Resource
     private ArticleMapper am;
     
     @GetMapping({"article"})
     public String article(Integer id,Model m) {
           Article a = am.selectByPrimaryKey(id);
           m.addAttribute(a);
           return "article";
     }
}
CATALOG