☻Blog("Laziji")

System.out.print("辣子鸡的博客");

0%

接上一篇, 上一篇文章写了Dao、Service、Controller的实现, 这篇讲述其中用到的Query以及Page

还是以app表为例, 表结构如下

1
2
3
4
`id` bigint(20)
`gmt_create` datetime
`gmt_modified` datetime
`name` varchar(32)

Query 查询类

Query是select查询信息 如limit, page, order by的封装

AppQuery.java

省略其中get, set方法, Query的属性是DO的扩展,如其中nameLike为name字段的模糊查询, toBean()实现Query转换为DO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class AppQuery extends BaseQuery<AppDO> {

private Long id;
private Date gmtCreate;
private Date gmtModified;
private String name;
private String nameLike;

// ...get()
// ...set()

@Override
public ClassifyDO toBean() {
return JSON.parseObject(JSON.toJSONString(this),ClassifyDO.class);
}
}

BaseQuery.java

BaseQuery中包含公共的查询属性, 例如分页, 排序, 省略其他默认的get, set

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
public abstract class BaseQuery<D> implements Query<D> {

private Integer limit = 1;
private Integer page = 0;
private Integer offset = 0;
private String sort;
private String order;

public void setLimit(Integer limit) {
this.limit = limit > 0 ? limit : 1;
this.offset = this.page * this.limit;
}

public void setPage(int page) {
this.page = page >= 0 ? page : 0;
this.offset = this.page * this.limit;
}

// ...get()
// ...set()

@Override
public String toString() {
return JSON.toJSONString(this);
}
}

Query.java

1
2
3
4
public interface Query<D> {

D toBean();
}

Page 分页查询结果类

由于前端分页显示时常常同时需要每页数据以及总条目数, 所以对分页查询结果简单封装

Page.java

1
2
3
4
5
6
7
8
public class Page<D> {

private List<D> list;
private Integer total;

// ...get()
// ...set()
}

简述

若手动编写数据库层是繁琐, 重复且容易出错。这里尝试实现通用的Dao、Service、Controllerc 减少重复的代码。使用generator来生成Mapper.xml、DO、Query。使编写数据库层自动化。

下面以app表为例

Dao 层

编写Dao层泛型接口, 对于每一个Mapper.xml 建一个Dao继承该接口, 其中无需编写代码

AppDao.java

1
2
3
4
@Mapper
public interface AppDao extends Dao<AppDO> {

}

Dao.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public interface Dao<D> {

D selectById(Long id);

List<D> select(D bean);

int selectCount(D bean);

List<D> select(Query<D> query);

int selectCount(Query<D> query);

int insert(D bean);

int update(D bean);

int delete(Long id);
}

Service 层

service层编写 Service接口以及BaseService, service中在dao的基础上实现扩展方法, 详见service接口

AppService.java

1
2
3
4
@Service
public class AppService extends BaseService<AppDO> {

}

BaseService.java

此处注入dao 需要使用@Autowired, 若使用@Resource则会报错

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
public abstract class BaseService<D> implements Service<D> {

@Autowired
private Dao<D> mapper;

@Override
public D selectById(Long id){
return mapper.selectById(id);
}

@Override
public List<D> select(D bean){
return mapper.select(bean);
}

@Override
public int selectCount(D bean){
return mapper.selectCount(bean);
}

@Override
public List<D> selectByQuery(Query<D> query){
return mapper.select(query);
}

@Override
public int selectCountByQuery(Query<D> query){
return mapper.selectCount(query);
}

@Override
public List<D> selectAll(){
return select(null);
}

@Override
public D selectOne(D bean){
if(selectCount(bean)!=1){
return null;
}
List<D> list = select(bean);
return list.get(0);
}

@Override
public D selectOneByQuery(Query<D> query){
if(selectCountByQuery(query)!=1){
return null;
}
List<D> list = selectByQuery(query);
return list.get(0);
}

@Override
public Page<D> selectPageByQuery(Query<D> query){
Page<D> page = new Page<>();
page.setList(selectByQuery(query));
page.setTotal(selectCountByQuery(query));
return page;
}

@Override
public int insert(D bean){
return mapper.insert(bean);
}

@Override
public int update(D bean){
return mapper.update(bean);
}

@Override
public int delete(Long id){
return mapper.delete(id);
}
}

Service.java

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
public interface Service<D> {

D selectById(Long id);

List<D> select(D bean);

int selectCount(D bean);

List<D> selectByQuery(Query<D> query);

int selectCountByQuery(Query<D> query);

List<D> selectAll();

D selectOne(D bean);

D selectOneByQuery(Query<D> query);

Page<D> selectPageByQuery(Query<D> query);

int insert(D bean);

int update(D bean);

int delete(Long id);
}

Controller 层

有了 编写Controller接口和BaseController, 普通增删改查控制器只需继承BaseController

AppController.java

1
2
3
4
5
@RestController
@RequestMapping("app")
public class AdminAppController extends BaseController<AppDO,AppQuery> {

}

BaseController.java

这里注入service同样要用@Autowired

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
public abstract class BaseController<D, Q extends Query<D>> implements Controller<D,Q> {

@Autowired
private Service<D> service;

@Override
@RequestMapping("list")
public ResponseData list(@RequestBody Q query) {
return ResponseData.successResponse(service.selectPageByQuery(query));
}

@Override
@RequestMapping("save")
public ResponseData save(@RequestBody D bean) {
service.insert(bean);
return ResponseData.successResponse();
}

@Override
@RequestMapping("update")
public ResponseData update(@RequestBody D bean) {
service.update(bean);
return ResponseData.successResponse();
}
}

Controller.java

1
2
3
4
5
6
7
8
public interface Controller<D, Q extends Query<D>> {

ResponseData list(Q query);

ResponseData save(D bean);

ResponseData update(D bean);
}

js实现动态加载图片, 节省流量, 并在加载时显示动画效果

思路及实现

给图片添加额外属性data-src, 并用空白小图片填充

1
<img data-src="./image.png" src="./blank.png">

找到页面内的所有图片

1
let imgs = $("img[data-src]");

根据滚动条高度以及窗口的高度判断图片是否在视野中, 若在, 将img.src= img.data-src

1
2
3
4
5
6
7
8
9
10
let bodyScrollHeight = document.body.scrollTop 
|| document.documentElement.scrollTop;
let windowHeight = window.innerHeight;
for (let i = 0; i < imgs.length; i++) {
let imgHeight = $(imgs[i]).offset().top;
if (imgHeight <= windowHeight + bodyScrollHeight
&& imgHeight >= bodyScrollHeight) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}

源码

具体实现及添加动画效果见Github

https://github.com/GitHub-Laziji/JS-plugins

从github clone代码, 奇慢, 有时只有几K, 设置完代理直接起飞

设置代理

1
2
3
//1080 为本地ss代理端口
$ git config --global http.proxy http://127.0.0.1:1080
$ git config --global https.proxy https://127.0.0.1:1080

取消代理

1
2
$ git config --global --unset http.proxy
$ git config --global --unset https.proxy

创建Github Pages

一个Github用户可以存在多个Github Pages每个项目都可以有自己的Github Pages, 在项目的 setting > github pages 中进行设置

Github Pages访问路径为 https://username.github.io/project

若是项目名为 username.github.io 为主页项目, 则访问路径为 https://username.github.io

创建好后无需在其中添加任何文件, 待之后 git push 即可

安装Nodejs

下载

安装Hexo

1
$ npm install -g hexo-cli

创建Hexo文件

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

几个常见的Hexo命令

1
2
3
4
5
6
7
8
9
10
11
//新建文章 生成的文章在source文件夹下
$ hexo n "hello"

//构建 生成html
$ hexo g

//清除已生成的文件
$ hexo clean

//本地预览
$ hexo s

提交至Git

打开根目录下的_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
//github page的访问地址
# url: https://github-laziji.github.io
url: https://github-laziji.github.io/lllblog

# root: /
root: /lllblog/

//repo 从你新建的项目中复制过来
deploy:
type: git
repo: git@github.com:GitHub-Laziji/lllblog.git
branch: master

最后提交至github

1
$ hexo d

可以看到项目已经提交了, 访问 https://username.github.io/project 即可看到你的博客了