Hexo -44- 友链朋友圈前端部署

本文最后更新于：2023年12月5日下午

之前我们记录了友链朋友圈的后端部署，本文记录前端部署相关信息。

背景

当前我们已经完成了后端部署，开放了服务器的端口，有开放的 API 可以使用。

此时我们访问 IP:Port/all 可以获取到文章列表：

1
2

{"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

这里提供两种比较简单实现的官方方案和自己实现前端部署的思路。

方案：yyyz

链接地址：https://fcircle-doc.yyyzyyyz.cn/#/frontenddeploy?id=方案：yyyz

官方建议的实现方式，推荐使用朋友圈 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 地址

示例效果

我的部署效果如下：

支持后台配置，第一次设置密码，之后输入密码可以进入配置界面：

方案：Heo

链接地址：https://anzhiy.cn/posts/3753.html

我成功实现的比较合理的前端方案，基于官方方案调整而来

有配置方案，将 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://uipv4.zywvvd.com:33030/HexoFiles/js/friend-circle/heoMainColor.css">
<script type="text/javascript" src="https://uipv4.zywvvd.com:33030/HexoFiles/js/friend-circle/app.min.js"></script>
<script type="text/javascript" src="https://uipv4.zywvvd.com:33030/HexoFiles/js/friend-circle/bundle.js"></script>

记得将 private_api_url 换成自己的 api 地址

示例效果

自己实现

获取 json 数据

<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>