layui获得列表json数据_golang实战开发之博客功能篇：文章列表的读取与展示和分类筛选展示处理...

最新推荐文章于 2024-09-13 12:56:59 发布

与绾

最新推荐文章于 2024-09-13 12:56:59 发布

阅读量1.1k

点赞数

文章标签： layui获得列表json数据

本文链接：https://blog.csdn.net/weixin_31621945/article/details/113707969

版权

本文介绍如何使用Golang和layui框架实现博客文章列表的读取、展示，包括根据分类筛选、分页显示等功能。详细讲解了前端HTML代码、控制器函数、路由配置以及模板函数的实现过程。

摘要由CSDN通过智能技术生成

前面我们介绍了文章详情页面的展示的逻辑代码实现，这一节，我们将继续讲解文章列表的读取和展示、文章根据分类进行筛选、最新文章、热门文章等的调用处理逻辑。

首先，我们先编写文章列表页的前端代码。这里，我们文章采用类似WordPress博客的形式，直接将首页作为文章列表页面的展示。因此我们在template文件夹下创建index.html：

博客首页/文章列表html代码

{% include "partial/header.html" %}
<div class="layui-container index">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-body">
                    <ul class="article-list">
                        {% for item in articles %}
                        <li class="item">
                            <a href="/article/{
    {
    item.Id}}" class="link">
                                <h5 class="title">{
    {
    item.Title}}</h5>
                                <div class="description">{
    {
    item.Description}}</div>
                                <div class="meta">
                                    {% if item.Category %}<span>{
    {
    item.Category.Title}}</span>{% endif %}
                                    <span>{
    {
    stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                                    <span>{
    {
    item.Views}} 阅读</span>
                                </div>
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% if prevPage || nextPage %}
                <div class="layui-card-body text-center">
                    <div class="layui-box layui-laypage">
                        <a href="{
    {
    prevPage}}" class="layui-laypage-prev{% if !prevPage %} layui-disabled{% endif %}">上一页</a>
                        <a href="{
    {
    nextPage}}" class="layui-laypage-next{% if !nextPage %} layui-disabled{% endif %}">下一页</a>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="layui-col-md4">
            {% include "partial/author.html" %}
            <div class="layui-card">
                <div class="la