之前我们记录了友链朋友圈的后端部署,本文记录前端部署相关信息。
当前我们已经完成了后端部署,开放了服务器的端口,有开放的 API 可以使用。
此时我们访问 IP:Port/all
可以获取到文章列表:
{"statistical_data":{"friends_num":28,"active_num":20,"error_num":8,"article_num":101,"last_updated_time":"2023-03-10 18:34:28"},"article_data":[{"floor":1,"title":"惠普打印机HP Laser 136W驱动包官网下载_Laser_MFP_131_133_135_138","created":"2023-03-09","updated":"2023-03-09","link":"https://www.52txr.cn/2023/LaserMFP136W.html","author":"陶小桃Bog","avatar":"https://tucdn.wpon.cn/2023/02/08/296e28f888ae1.png"},{"floor":2,"title":"内耗一周,大致想清楚人生选择","created":"2023-03-09","updated":"2023-03-09","link":"https://www.52txr.cn/2023/jingshenneihao.html","author":"陶小桃Bog","avatar":"https://tucdn.wpon.cn/2023/02/08/296e28f888ae1.png"},{"floor":3,"title":"如何做一个完整的硬件项目的项目管理之简明教程","created":"2023-03-08","updated":"2023-03-08","link":"https://blog.17lai.site/posts/d8b1e381/","author":"夜法之书的Blog","avatar":"https://blog.17lai.site/favicon.webp"},{"floor":4,"title":"配置Nginx防止Wget扒站","created":"2023-03-07","updated":"2023-03-07","link":"https://www.52txr.cn/2023/wget444.html","author":"陶小桃Bog","avatar":"https://tucdn.wpon.cn/2023/02/08/296e28f888ae1.png"},{"floor":5,"title":"张量的创建、定义以及基本的数据类型","created":"2023-03-07","updated":"2023-03-07","link":"https://www.52txr.cn/2023/creattensor.html","author":"陶小桃Bog","avatar":"https://tucdn.wpon.cn/2023/02/08/296e28f888ae1.png"}
......
此时我们已经可以获取友链文章信息了,需要在前端将这些信息展示出来,有一些官方提供的方案,也可以自己实现。
官方前端示例:https://fcircle-doc.yyyzyyyz.cn/#/frontenddeploy
这里提供两种比较简单实现的官方方案和自己实现前端部署的思路。
官方建议的实现方式,推荐使用朋友圈 5.x 版本最新前端,基于林木木的方案进行优化,同时添加管理面板,方便进行配置管理。
在友链页面中添加如下代码:
<div id="hexo-circle-of-friends-root"></div>
<script>
let UserConfig = {
// 填写你的api地址
private_api_url: 'http://127.0.0.1:8000/',
// 初始加载几篇文章
page_init_number: 20,
// 点击加载更多时,一次最多加载几篇文章,默认10
page_turning_number: 10,
// 头像加载失败时,默认头像地址
error_img: 'https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c',
// 进入页面时第一次的排序规则
sort_rule: 'created',
// 本地文章缓存数据过期时间(天)
expire_days: 1,
}
</script>
<script type="text/javascript" src="https://npm.elemecdn.com/fcircle-theme-yyyz@1.0.13/dist/fcircle.min.js"></script>
记得将 private_api_url
换成自己的 api 地址
我的部署效果如下:
我成功实现的比较合理的前端方案,基于官方方案调整而来
有配置方案,将 css 隔离了出来方便修改,也不是很浮夸,建议使用。
在友链页面中添加如下代码:
<div id="hexo-circle-of-friends-root"></div>
<script>
let UserConfig = {
// 填写你的api地址
private_api_url: 'http://127.0.0.1:8000/',
// 点击加载更多时,一次最多加载几篇文章,默认10
page_turning_number: 12,
// 头像加载失败时,默认头像地址
error_img: 'https://www.zywvvd.com/img/avatar.png',
// 进入页面时第一次的排序规则
sort_rule: 'created'
}
</script>
<link rel="stylesheet" href="https://101.43.39.125/HexoFiles/js/friend-circle/heoMainColor.css">
<script type="text/javascript" src="https://101.43.39.125/HexoFiles/js/friend-circle/app.min.js"></script>
<script type="text/javascript" src="https://101.43.39.125/HexoFiles/js/friend-circle/bundle.js"></script>
记得将 private_api_url
换成自己的 api 地址
<script>
$.ajax({
url: "http://127.0.0.1:8000/all",
async: false,//同步方式发送请求,true为异步发送
type: "GET",
data: {},
success: function (result) {
console.log(result.article_data);
}
});
</script>
获取的数据
拿到数据后可以将数据在前端展示成自己想要的格式。