使用zig语言制作简单博客网站（八）归档页和关于页

合集 - 使用zig语言制作一个简单博客网站(9)
1.使用zig语言制作简单博客网站（一）项目搭建2.使用zig语言制作简单博客网站（二）前端首页初步搭建3.使用zig语言制作简单博客网站（三）后端集成sqlite数据库4.使用zig语言制作简单博客网站（四）项目文件整理5.使用zig语言制作简单博客网站（五）编写博客首页数据请求响应代码6.使用zig语言制作简单博客网站（六）文章详情页7.使用zig语言制作简单博客网站（七）右边栏分类点击和文章搜索
8.使用zig语言制作简单博客网站（八）归档页和关于页
9.使用zig语言制作简单博客网站（九）后台管理实现
收起

后端代码

  • 注册路由
    // 归档文章
    router.get("/api/article/archive", &articleController.getArchiveArticles);
  • model/article.zig增加以下代码
/// 用于存放归档文章信息
pub const ArchiveArticle = struct {
    id: u32,
    title: []const u8,
    cate_name: []const u8,
    created_at: []const u8,
};
  • article_controller.zig代码
/// 获取归档文章
pub fn getArchiveArticles(req: *httpz.Request, res: *httpz.Response) !void {
    _ = req;
    const archives = try article_server.getArchiveArticles();
    res.status = 200;
    try res.json(.{ .code = 200, .msg = "ok", .data = archives }, .{});
 
    // 返回json时出错，弃用，放到前端处理
    // const DataItem = struct {
    //     year: u32,
    //     articles: []ArchiveArticle,
    // };
    // var gpa = std.heap.GeneralPurposeAllocator(.{}){};
    // const allocator = gpa.allocator();
 
    // var years_map = std.AutoHashMap(u32, void).init(allocator);
    // defer years_map.deinit();
    // for (archives) |archive| {
    //     const created_year = try std.fmt.parseInt(u32, archive.created_at[0..4], 10);
    //     if (!years_map.contains(created_year)) {
    //         try years_map.put(created_year, {});
    //     }
    // }
 
    // var datas = std.ArrayList(DataItem).init(allocator);
    // defer datas.deinit();
 
    // var years_itr = years_map.keyIterator();
    // while (years_itr.next()) |key| {
    //     const year = key.*;
 
    //     var articles = std.ArrayList(ArchiveArticle).init(allocator);
    //     defer articles.deinit();
 
    //     for (archives) |archive| {
    //         const created_year = try std.fmt.parseInt(u32, archive.created_at[0..4], 10);
    //         if (created_year == year) {
    //             try articles.append(archive);
    //         }
    //     }
 
    //     try datas.append(DataItem{
    //         .year = year,
    //         .articles = articles.items,
    //     });
    // }
 
    // res.status = 200;
    // try res.json(.{ .code = 200, .msg = "ok", .data = datas.items }, .{});
}
  • article_server.zig代码
/// 归档文章列表
pub fn getArchiveArticles() ![]ArticleModel.ArchiveArticle {
    var db = try database.OpenDb();
    defer db.deinit();
 
    const query =
        \\SELECT id, title, cate_name, created_at FROM article
    ;
 
    var stmt = try db.prepare(query);
    defer stmt.deinit();
 
    var gpa = std.heap.GeneralPurposeAllocator(.{}){};
    const allocator = gpa.allocator();
 
    const rows = try stmt.all(
        ArticleModel.ArchiveArticle,
        allocator,
        .{},
        .{},
    );
 
    return rows;
}

前端代码

归档、关于前端代码 
<!DOCTYPE html>
<html lang="zh-CN">
 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>zigblog - 首页</title>
 
        <link rel="stylesheet" href="./css/index.css">
        <link rel="stylesheet" href="./css/prism.css">
 
        <style>
            /* v-cloak 隐藏未渲染的DOM */
            [v-cloak] {
                display: none;
            }
        </style>
        <style type="text/css">
            /* 归档文章页面样式 */
            .article-archive {
                background-color: white;
                height: calc(100% - 40px);
                padding-top: 35px;
            }
 
            .article-content {
                color: #555;
                margin-bottom: 60px;
                margin-left: 40px;
                margin-right: 40px;
                position: relative;
                line-height: 2;
            }
 
            .article-content::before {
                /* background: #f5f5f5; */
                background: #ececec;
                content: ' ';
                height: 100%;
                margin-left: -2px;
                position: absolute;
                top: 1.25em;
                width: 4px;
            }
 
            .article-content .collection-year {
                font-size: 1.5em;
                font-weight: bold;
                margin-bottom: 40px;
                position: relative;
            }
 
            .article-content .collection-header {
                display: block;
                margin-left: 20px;
                font-size: 26px;
            }
 
            .article-content .collection-year::before {
                background: #bbb;
                margin-left: -4px;
                margin-top: -4px;
                position: absolute;
                top: 50%;
                border-radius: 50%;
                content: ' ';
                height: 8px;
                width: 8px;
            }
 
            .article-content .article-header {
                border-bottom: 1px dashed #ccc;
                margin: 30px 2px 0;
                padding-left: 15px;
                position: relative;
                transition: border 0.2s ease-in-out;
            }
 
            .article-content .article-header::before {
                background: #bbb;
                border: 1px solid #fff;
                left: -6px;
                position: absolute;
                top: 1em;
                transition: background 0.2s ease-in-out;
                border-radius: 50%;
                content: ' ';
                height: 6px;
                width: 6px;
            }
 
            .article-content .article-meta-container {
                display: inline;
                font-size: 1em;
                margin-right: 10px;
            }
 
            .article-content .article-title {
                display: inline;
            }
 
            .article-content .article-title-link {
                font-size: 20px;
            }
 
            .article-content .article-title a {
                color: #555;
                border-bottom: 0;
                text-decoration: none;
                cursor: pointer;
            }
 
            .article-content .article-title a:hover {
                color: #2196f3;
            }
        </style>
        <style type="text/css">
            /* 关于页面样式 */
            .about-container {
                padding: 35px 0px;
                width: 80%;
                margin: 0px auto;
                color: #666;
            }
 
            .about-content h2 {
                display: block;
                margin: 40px 0 40px;
                background-color: #e4e4e4;
                font-size: 16px;
                color: #666;
                padding: 2px;
                font-weight: bold;
                padding-left: 16px;
            }
 
            .about-content p {
                margin: 14px 14px;
                line-height: 26px;
            }
        </style>
    </head>
 
    <body>
        <div id="app">
            <!-- 移动端菜单 -->
            <!-- <span class="mnavbtn" onclick="openMnav()">
                <svg width="25" height="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                    <path
                        d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
                </svg>
            </span>
            <div id="mySideMnav" class="sidemnav">
                <a href="javascript:;" class="closemnavbtn" onclick="closeMnav()">&times;</a>
                <a href="#">首页</a>
                <a href="#">归档</a>
                <a href="#">关于</a>
                <a href="#">资源</a>
            </div> -->
 
            <div class="container">
                <!-- 左侧导航 -->
                <div class="nav">
                    <div class="logo">
                        <img src="./img/logo.jpg">
                        <h2>※听雨※</h2>
                    </div>
 
                    <div style="margin: 30px auto;text-align: center;">
                        <span style="cursor: pointer;margin: 0 5px;">
                            <svg width="25" height="25" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
                                <path
                                    d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z" />
                            </svg>
                        </span>
 
                        <span style="cursor: pointer;margin: 0 5px;">
                            <svg width="25" height="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
                                <path
                                    d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
                            </svg>
                        </span>
                    </div>
 
                    <div class="navlink">
                        <ul class="navlist">
                            <li>
                                <a href="/front/index.html">首页</a>
                            </li>
                            <li>
                                <a href="javascript:;" @click="archiveOnClick()">归档</a>
                            </li>
                            <li>
                                <a href="javascript:;" @click="aboutOnClick()">关于</a>
                            </li>
                            <li>
                                <a href="/light-year-admin/index.html">后台</a>
                            </li>
                            <li>
                                <a target="_blank" href="https://www.ghxi.com/">资源</a>
                            </li>
                        </ul>
                    </div>
                </div>
 
                <!-- 中间内容 -->
                <div class="main">
                    <!-- 文章列表 -->
                    <div v-cloak v-if="articleListIsShow" style="padding-top: 35px;">
                        <template v-for="(article, index) in articleList" :key="index">
                            <div class="article-card" :class="{sticky: article.istop}">
                                <div class="article-card-container">
                                    <h4 class="article-card-title" @click="getArticleDetail(article.id)">
                                        <i class="sticky-icon" v-cloak v-if="article.istop">⚘</i>
                                        {{article.title}}
                                    </h4>
                                    <div class="article-card-des">{{article.description}}</div>
                                    <div class="article-card-footer">
                                        <span class="article-card-footer-author">作者：听雨</span>
                                        <span class="article-card-footer-date">发布时间：{{article.created_at}}</span>
                                        <span class="article-card-footer-cate">分类：{{article.cate_name}}</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
 
                    <!-- 文章详情 -->
                    <div class="article-container" v-cloak v-if="articleDetailIsShow">
                        <div style="float: right;color: red;cursor: pointer;" @click="returnHomePage()">&lt;&lt;返回</div>
                        <div class="article-main">
                            <article class="article-view">
                                <h1 class="article-title">{{article.title}}</h1>
                                <div class="article-meta">
                                    <span>作者: 听雨</span>
                                    <span>分类：{{article.cate_name}}</span>
                                    <span>发布时间： {{article.created_at}}</span>
                                </div>
 
                                <div class="article-desc">{{article.description}}</div>
 
                                <div class="article-content" v-html="article.content"></div>
                            </article>
                        </div>
                    </div>
 
                    <!-- 归档文章 -->
                    <div class="article-archive" v-cloak v-if="articleArchiveIsShow">
                        <div style="float: right;color: red;margin-right: 50px;cursor: pointer;z-index: 999;position: relative;"
                            @click="returnHomePage()">&lt;&lt;返回</div>
                        <div class="article-content" v-cloak v-for="(archive, index) in archiveList" :key="index">
                            <div class="collection-year">
                                <span class="collection-header">{{archive.year}}年</span>
                            </div>
 
                            <article v-for="(art, idx) in archive.articles" :key="idx">
                                <header class="article-header">
                                    <div class="article-meta-container">
                                        <time itemprop="dateCreated" :datetime="art.created_at"
                                            :content="art.created_at">
                                            {{ `${(new Date(art.created_at).getMonth()+1)}-${new
                                            Date(art.created_at).getDate()}` }}
                                        </time>
                                    </div>
 
                                    <div class="article-title">
                                        <a class="article-title-link" @click="getArticleDetail(art.id)">
                                            <span itemprop="name">{{art.title}}</span>
                                        </a>
                                    </div>
                                </header>
                            </article>
 
                        </div>
                    </div>
 
                    <!-- 关于 -->
                    <div class="about-container" v-cloak v-if="aboutIsShow">
                        <div style="float: right;color: red;margin-right: 50px;cursor: pointer;z-index: 999;position: relative;"
                            @click="returnHomePage()">&lt;&lt;返回</div>
 
                        <div class="about-wrapper">
                            <section class="about-section">
                                <article>
                                    <div class="about-content">
                                        <p style="text-align: center;"><span
                                                style="font-size: 28px;font-weight: bold;">※听雨※</span></p>
                                        <p style="text-align: center;padding-bottom: 30px;">
                                            分享是一种生活的信念，明白了分享的同时，也明白了存在的意义。</p>
                                        <h2>关于听雨</h2>
                                        <p style="text-align: left;">
                                            喜爱技术，乐分享，平时喜欢了解掌握各行业领域的知识，创办网站的目的在于分享自己的编程经验，也是更好的提升自己，这里记载着我的努力和想法，希望能遇到和我有共同爱好的朋友。
                                        </p>
 
                                    </div>
                                </article>
                            </section>
                        </div>
                    </div>
                </div>
 
                <!-- 右侧面板 -->
                <div class="rside" v-cloak v-if="rsideIsShow">
                    <!-- 搜索框 -->
                    <div class="search-box">
                        <input class="search-txt" type="text" placeholder="输入内容搜索" v-model="searchText">
                        <input class="search-bnt" type="submit" value="搜索" @click="searchbtnOnClick()">
                    </div>
                    <!-- 文章分类 -->
                    <div class="rside-card">
                        <div class="rside-card-container">
                            <h4 class="rside-card-title">分类</h4>
                            <div class="rside-card-body">
                                <li v-for="(cate, index) in cateList" :key="index" @click="cateOnClick(cate.name)">
                                    {{cate.name}}</li>
                            </div>
                        </div>
                    </div>
                    <!-- 文章标签 -->
                    <!-- <div class="rside-card">
                        <div class="rside-card-container">
                            <h4 class="rside-card-title">标签</h4>
                            <div class="rside-card-body">
                                <li>winform</li>
                                <li>spring</li>
                                <li>Django</li>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
 
        <script src="./js/index.js"></script>
        <script src="./js/zepto.min.js"></script>
        <script src="./js/prism.js"></script>
        <script type="module">
            import { createApp, ref, onMounted, } from "./js/vue.esm-browser.prod.js";
 
            createApp({
                setup() {
                    const articleList = ref([]);    // 首页文章列表
                    const cateList = ref([]);    // 首页分类列表
                    const article = ref({});    // 文章详情对象
                    const archiveList = ref([]);    // 归档列表
                    const articleListIsShow = ref(true); // 是否显示文章列表
                    const rsideIsShow = ref(true);  // 是否显示右侧面板
                    const articleDetailIsShow = ref(false); // 是否显示文章详情页
                    const articleArchiveIsShow = ref(false); // 是否显示文章归档页
                    const aboutIsShow = ref(false); // 是否显示关于页
                    const searchText = ref(""); // 搜索框内容
 
                    // 获取首页文章列表
                    const getArticleList = () => {
                        $.ajax({
                            url: 'http://localhost:5588/api/home/articles',
                            type: 'GET',
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 200) {
                                    let data = res.data.sort((a, b) => b.istop - a.istop);
                                    articleList.value = data;
                                    return;
                                }
                            },
                            error: function (err) {
                                console.log(err.responseText);
                            }
                        });
                    };
 
                    // 获取首页分类列表
                    const getCateList = () => {
                        $.ajax({
                            url: 'http://localhost:5588/api/home/cates',
                            type: 'GET',
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 200) {
                                    cateList.value = res.data;
                                }
                            },
                            error: function (err) {
                                console.log(err.responseText);
                            }
                        });
                    };
 
                    // 获取文章详情
                    const getArticleDetail = (id) => {
                        $.ajax({
                            url: `http://localhost:5588/api/article/${id}`,
                            type: 'GET',
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 200) {
                                    article.value = res.data;
 
                                    rsideIsShow.value = false;
                                    articleListIsShow.value = false;
                                    articleArchiveIsShow.value = false;
                                    articleDetailIsShow.value = true;
                                }
                            },
                            error: function (err) {
                                console.log(err.responseText);
                            }
                        });
                    };
 
                    // 分类点击事件
                    const cateOnClick = (cateName) => {
                        $.ajax({
                            url: "http://localhost:5588/api/articles",
                            type: 'GET',
                            dataType: 'json',
                            data: {
                                cate: cateName
                            },
                            success: function (res) {
                                if (res.code == 200) {
                                    articleList.value = res.data;
                                }
                            },
                            error: function (err) {
                                console.log(err.responseText);
                            }
                        });
                    };
 
                    // 文章搜索
                    const searchbtnOnClick = () => {
                        $.ajax({
                            url: "http://localhost:5588/api/article/search",
                            type: 'GET',
                            dataType: 'json',
                            data: {
                                keyword: searchText.value
                            },
                            success: function (res) {
                                if (res.code == 200) {
                                    articleList.value = res.data;
                                }
                            },
                            error: function (err) {
                                console.log(err.responseText);
                            }
                        });
                    };
 
                    // 文章归档点击事件
                    const archiveOnClick = () => {
                        $.ajax({
                            url: "http://localhost:5588/api/article/archive",
                            type: 'GET',
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 200) {
                                    let years = [];
                                    res.data.forEach(item => {
                                        let year = parseInt(item.created_at.slice(0, 4));
                                        if (!years.includes(year)) {
                                            years.push(year);
                                        }
                                    });
 
                                    archiveList.value = years.map(year => {
                                        return {
                                            year: year,
                                            articles: res.data.filter(item => {
                                                return parseInt(item.created_at.slice(0, 4)) == year;
                                            })
                                        }
                                    });
 
                                    rsideIsShow.value = false;
                                    articleListIsShow.value = false;
                                    articleArchiveIsShow.value = true;
                                }
                            },
                            error: function (err) {
                                console.log(err.responseText);
                            }
                        });
                    };
 
                    // 关于点击事件
                    const aboutOnClick = () => {
                        rsideIsShow.value = false;
                        articleListIsShow.value = false;
                        articleArchiveIsShow.value = false;
                        aboutIsShow.value = true;
                    };
 
                    // 返回首页
                    const returnHomePage = () => {
                        articleDetailIsShow.value = false;
                        articleArchiveIsShow.value = false;
                        aboutIsShow.value = false;
                        articleListIsShow.value = true;
                        rsideIsShow.value = true;
                    };
 
 
                    // 页面加载时执行
                    onMounted(() => {
                        getArticleList();
                        getCateList();
                    });
 
                    return {
                        articleList,
                        cateList,
                        article,
                        archiveList,
                        searchText,
                        articleListIsShow,
                        articleDetailIsShow,
                        articleArchiveIsShow,
                        rsideIsShow,
                        aboutIsShow,
                        getArticleDetail,
                        returnHomePage,
                        cateOnClick,
                        searchbtnOnClick,
                        archiveOnClick,
                        aboutOnClick,
                    }
                }
            }).mount('#app');
        </script>
    </body>
 
</html>
posted @   ※听雨※  阅读(18)  评论(0)  编辑  收藏  举报
相关博文：
· 使用zig语言制作简单博客网站（七）右边栏分类点击和文章搜索
· 使用zig语言制作简单博客网站（六）文章详情页
· BBS项目
· BBS项目
· 个人博客项目笔记_09
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛