vue文档已经看了一遍又一遍，一直想拿个项目练练手。想了又想不如就写个图片站吧，复杂的也搞不来~~嘿嘿。图片站需要图片支撑，自己上传怕是不可能，直接爬吧。百度了几个图片网站然后开干。
预期功能
- 图组浏览
- 图组收藏，点赞
- 用户个人中心
- 图组自动更新
- 图组管理
技术栈
后端：
- blade：轻量级微服务web框架
- jsoup：Java Html文档解析框架
- anima：轻量级ActionRecord模式的数据库框架
前端：
- vue
- vuex：vue状态管理插件
- vue-router：vue路由组件
- axios：js网络请求库
- muse-ui：vue前端框架
数据库：
- sqlite
项目开发（后端部分）
一、数据库设计
根据图片站结构，定义一下三个数据表：
- 图片类型表：
@EqualsAndHashCode(callSuper = false)
@Data
@ToString
@Table(name = "img_type")
public class ImgType extends Model {
private Integer id;
@JsonIgnore
private String host; // 分类所属网站 *
@JsonIgnore
private String uri; // 分类标题 英文 *
private String name; // 分类名 *
@JsonIgnore
private String pageUriReg; // 分页打开规则如: "list_1_$.html" $: 页码 *
private Integer totalPages; // 网站上的 该分类下总页数 *
private Integer pageSize; // 网站上的 分页尺寸
private Integer pageNum; // 已经加载的页码 默认0 *
private String time;
/**
* 获取本页url
* @param page 页码
*/
public String getUrl(int page) {
if (page > totalPages) return null;
if (page > 1) {
return host + uri + pageUriReg.replace("$", page + "");
}
return host + uri;
}
}
- 图组表
@EqualsAndHashCode(callSuper = false)
@Data
@Table(name = "img_group", pk = "uuid")
@ToString
public class ImgGroup extends Model {
private String uuid; // not null
@JsonIgnore
private String host; // 来源网站
@JsonIgnore
private String uri; // 网络图片组路径
private Integer typeId; // 图片组类型id
private String type; // 图片组类型名
private String title; // 图片组标题
@JsonIgnore
private String coverNetPath; // 图片组封面网络地址 not null
private String coverUuid;// 封面图片的uuid
private String time; // 图片组添加时间
private Integer views; // 图片组查看次数
private Integer total; // 该图片组图片数
public String getUrl() {
return host + uri;
}
}
- 图片表
@EqualsAndHashCode(callSuper = false)
@Data
@Table(name = "img_info", pk = "uuid")
public class ImgInfo extends Model {
private String uuid;
private String groupId; // 图片组id，图片组的uuid
@Ignore
private ImgGroup group;
private String name; // 图片名
@JsonIgnore
private String netPath; // 图片网络地址
@JsonIgnore
private String path; // 图片本地地址
private String time;
private Integer views;
}
二、确定爬取目标，编写爬虫接口
之前就爬过妹子图的图片，这次并不打算只爬一个网站，这样图片量太少。因此就要有一个统一的爬虫接口，以便于将不同网站整合在一起。
/**
* @AUTHOR soft
* @DATE 2018/9/20 23:01
* @DESCRIBE 图片爬取器基础接口
*/
public interface ImgCrawlerBase {
/**
* 获取目标网站地址
*/
String getHost();
/**
* 获取网站下所有图片分类
*/
List getTypes();
/**
* 获取图片组
* 页码要是对应网站的分页形式的页码
* @param type 图片组类型
* @param page 页码
*/
List getGroups(@NonNull ImgType type, int page);
/**
* 分页获取图片，降低响应时间
* 根据图片组获取指定页码的图片
* @param group 图片组
*/
List getImages(@NonNull ImgGroup group, int page);
/**
* 图片搜索
* @param keyword 搜索关键字
*/
ImgSearch search(String keyword, int page);
/**
* 下载图片
* @param webPath 图片网络地址
*/
static String downImage(String webPath) {
Logger log = LoggerFactory.getLogger(ImgCrawlerBase.class);
Optional execute = RequestKit.of().execute(webPath);
if (execute.isPresent()) {
Connection.Response response = execute.get();
String filename = FileUtils.getFilenameByNetPath(webPath);
byte[] bytes = response.bodyAsBytes();
try {
return Files.write(new File(Const.TEMP, filename).toPath(), bytes)
.toAbsolutePath().toString();
} catch (IOException e) {
log.error("保存文件失败! {}", e.getMessage());
}
}
return null;
}
}
定义一个爬虫程序获取工具
/**
* @AUTHOR soft
* @DATE 2018/9/21 1:08
* @DESCRIBE 根据网址获取对应的爬取工具
*/
@Slf4j
public class CrawlerFactory {
private static List crawlers = new ArrayList<>();
static {
crawlers = getImgCrawlerClasses().stream().map(cls -> {
try {
return (ImgCrawlerBase) cls.newInstance();
} catch (InstantiationException | IllegalAccessException e) {
log.error("获取实例失败! {}, 返回默认实例: Mzitu", e.getMessage());
return new Mzitu();
}
}).collect(Collectors.toList());
}
public static List getImgCrawlers() {
return crawlers;
}
public static ImgCrawlerBase getImgCrawlerRandom() {
int i = new Random().nextInt(3);
return crawlers.get(i);
}
public static ImgCrawlerBase getImgCrawlerByRemove(List crawlers) {
int i = new Random().nextInt(crawlers.size());
return crawlers.remove(i);
}
/**
* 获取对应网站的爬取工具
* @param host 网址
*/
public static ImgCrawlerBase getImgCrawler(String host) {
Optional first = getImgCrawlers().stream().filter(crawler -> {
return host.equals(crawler.getHost());
}).findFirst();
return first.orElse(null);
}
private static List getImgCrawlerClasses() {
return Arrays.asList(Mzitu.class, I99mm.class, Mm131.class);
}
}
三、为app提供接口
提供json格式数据，便于前端展示
/**
* @AUTHOR soft
* @DATE 2018/9/20 21:13
* @DESCRIBE 接口
*/
@Path(value = "/api", restful = true)
public class ApiController {
@Inject
private ImgTypeService typeService;
@Inject
private ImgGroupService groupService;
@Inject
private ImgInfoService infoService;
@Route("/titles")
public RestResponse title(Request request) {
List list = typeService.findList();
if (list != null && !list.isEmpty()) {
return RestResponse.ok(list);
}
return RestResponse.fail();
}
@Route("/group")
public RestResponse group(@Param(defaultValue = "1") Integer page,
@Param(defaultValue = "10") Integer size,
@Param(defaultValue = "性感美女") String type) {
Page page1 = groupService.page(page, size, type);
if (page1 != null) {
return RestResponse.ok(page1);
}
return RestResponse.fail();
}
@Route("/images")
public RestResponse images(@Param(defaultValue = "1") Integer page,
@Param(defaultValue = "10") Integer size,
@Param String gid) {
Page page1 = infoService.page(page, size, gid);
if (page1 != null) {
return RestResponse.ok(page1);
}
return RestResponse.fail();
}
@Route("/search")
public RestResponse search(@Param String key,
@Param(defaultValue = "1") Integer page,
@Param(defaultValue = "10") Integer size) {
Page search = groupService.search(key, page, size);
if (search != null) {
return RestResponse.ok(search);
}
return RestResponse.fail();
}
}
后端基本框架就是这样。未完待续...
最终效果图