使用zig语言制作简单博客网站（七）右边栏分类点击和文章搜索

合集 - 使用zig语言制作一个简单博客网站(9)

1.使用zig语言制作简单博客网站（一）项目搭建2024-08-21 2.使用zig语言制作简单博客网站（二）前端首页初步搭建2024-08-22 3.使用zig语言制作简单博客网站（三）后端集成sqlite数据库2024-08-23 4.使用zig语言制作简单博客网站（四）项目文件整理2024-08-25 5.使用zig语言制作简单博客网站（五）编写博客首页数据请求响应代码2024-08-27 6.使用zig语言制作简单博客网站（六）文章详情页2024-08-29

7.使用zig语言制作简单博客网站（七）右边栏分类点击和文章搜索2024-09-02

8.使用zig语言制作简单博客网站（八）归档页和关于页2024-09-03 9.使用zig语言制作简单博客网站（九）后台管理实现2024-09-21

分类点击事件处理

后端代码

sqlite数据库article表新增cate_name字段， 注意之后sql查询语句中要加上cate_name字段

 CREATE TABLE article (
    id          INTEGER        PRIMARY KEY AUTOINCREMENT,
    title       VARCHAR (1024) NOT NULL,
    description VARCHAR (1024),
    content     TEXT           NOT NULL,
    istop       INTEGER (2)    NOT NULL DEFAULT (0),
    cate_name   VARCHAR (20),
    created_at  DATETIME,
    updated_at  DATETIME
);

更新model/article.zig

 pub const Article = struct {
    id: u32,
    title: []const u8,
    description: []const u8,
    content: []const u8,
    istop: u32,
    cate_name: []const u8,
    created_at: []const u8,
    updated_at: []const u8,
};

注册路由

     // 某分类下博客
    router.get("/api/articles", &articleController.getArticlesByCateName);

article_controller.zig代码

 /// 获取分类下的文章列表
pub fn getArticlesByCateName(req: *httpz.Request, res: *httpz.Response) !void {
    const query = try req.query();
    if (query.get("cate")) |cate_name| {
        const articles = try article_server.getArticlesByCateName(cate_name);
        res.status = 200;
        try res.json(.{ .code = 200, .msg = "ok", .data = articles }, .{});
    } else {
        res.status = 400;
        try res.json(.{ .code = 400, .msg = "错误的请求" }, .{});
        return;
    }
}

article_server.zig代码

 /// 获取分类下的文章列表
pub fn getArticlesByCateName(cate_name: []const u8) ![]ArticleModel.Article {
    var db = try database.OpenDb();
    defer db.deinit();
 
    const query =
        \\SELECT id, title, description, content, istop, cate_name, created_at, updated_at FROM article WHERE cate_name = ? ORDER BY created_at DESC
    ;
 
    var stmt = try db.prepare(query);
    defer stmt.deinit();
 
    var gpa = std.heap.GeneralPurposeAllocator(.{}){};
    const allocator = gpa.allocator();
 
    const rows = try stmt.all(
        ArticleModel.Article,
        allocator,
        .{},
        .{ .cate_name = cate_name },
    );
 
    return rows;
}

前端代码

分类点击前端代码

 <!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/prism.css">
    <title>blog</title>
 
    <style>
        [v-cloak] {
            display: none;
        }
    </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:;">归档</a>
                        </li>
                        <li>
                            <a href="javascript:;">关于</a>
                        </li>
                        <li>
                            <a href="javascript:;">资源</a>
                        </li>
                        <li>
                            <a href="/light-year-admin/index.html">后台</a>
                        </li>
                    </ul>
                </div>
            </div>
 
            <!-- 中间内容 -->
            <div class="main">
                <div style="margin-top: 35px;"></div>
 
                <div v-cloak v-if="articleListIsShow">
                    <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>
 
            <!-- 右侧面板 -->
            <div class="rside" v-cloak v-if="rsideIsShow">
                <!-- 搜索框 -->
                <div class="search-box">
                    <input class="search-txt" type="text" placeholder="输入内容搜索">
                    <input class="search-bnt" type="submit" value="搜索">
                </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 articleListIsShow = ref(true); // 是否显示文章列表
                const articleDetailIsShow = ref(false); // 是否显示文章详情
                const rsideIsShow = ref(true);  // 是否显示右侧面板
 
                // 获取首页文章列表
                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;
                            }
                            layer.msg(res.msg);
                        },
                        error: function (err) {
                            console.log(err.responseText);
                            layer.msg(res.msg);
                        }
                    });
                };
 
                // 获取首页分类列表
                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;
                                articleDetailIsShow.value = true;
                            }
                        },
                        error: function (err) {
                            console.log(err.responseText);
                        }
                    });
                };
 
                // 从文章详情页返回首页
                const returnHomePage = () => {
                    articleDetailIsShow.value = false;
                    articleListIsShow.value = true;
                    rsideIsShow.value = true;
                };
 
                // 分类点击事件
                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);
                        }
                    });
                };
 
                // 页面加载时执行
                onMounted(() => {
                    getArticleList();
                    getCateList();
                });
 
                return {
                    articleList,
                    cateList,
                    article,
                    articleListIsShow,
                    articleDetailIsShow,
                    rsideIsShow,
                    getArticleDetail,
                    returnHomePage,
                    cateOnClick,
                }
            }
        }).mount('#app');
    </script>
</body>
 
</html>

文章搜索功能

后端代码

注册路由

     // 文章搜索
    router.get("/api/article/search", &articleController.searchArticles);

article_controller.zig代码

 /// 文章搜索
pub fn searchArticles(req: *httpz.Request, res: *httpz.Response) !void {
    const query = try req.query();
    if (query.get("keyword")) |keyword| {
        const articles = try article_server.searchArticles(keyword);
        res.status = 200;
        try res.json(.{ .code = 200, .msg = "ok", .data = articles }, .{});
    } else {
        res.status = 400;
        try res.json(.{ .code = 400, .msg = "错误的请求" }, .{});
        return;
    }
}

article_server.zig代码

 /// 文章搜索
pub fn searchArticles(keyword: []const u8) ![]ArticleModel.Article {
    var db = try database.OpenDb();
    defer db.deinit();
 
    const query =
        \\SELECT id, title, description, content, istop, cate_name, created_at, updated_at FROM article WHERE title LIKE $title ORDER BY created_at DESC
    ;
 
    var stmt = try db.prepare(query);
    defer stmt.deinit();
 
    var gpa = std.heap.GeneralPurposeAllocator(.{}){};
    const allocator = gpa.allocator();
 
    const word = try std.fmt.allocPrint(allocator, "{s}%", .{keyword});
 
    const rows = try stmt.all(
        ArticleModel.Article,
        allocator,
        .{},
        .{ .title = word },
    );
 
    return rows;
}

前端代码

文章搜索前端代码

 <!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/prism.css">
    <title>blog</title>
 
    <style>
        [v-cloak] {
            display: none;
        }
    </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:;">归档</a>
                        </li>
                        <li>
                            <a href="javascript:;">关于</a>
                        </li>
                        <li>
                            <a href="javascript:;">资源</a>
                        </li>
                        <li>
                            <a href="/light-year-admin/index.html">后台</a>
                        </li>
                    </ul>
                </div>
            </div>
 
            <!-- 中间内容 -->
            <div class="main">
                <div style="margin-top: 35px;"></div>
 
                <div v-cloak v-if="articleListIsShow">
                    <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>
 
            <!-- 右侧面板 -->
            <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 articleListIsShow = ref(true); // 是否显示文章列表
                const articleDetailIsShow = ref(false); // 是否显示文章详情
                const rsideIsShow = ref(true);  // 是否显示右侧面板
                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;
                            }
                            layer.msg(res.msg);
                        },
                        error: function (err) {
                            console.log(err.responseText);
                            layer.msg(res.msg);
                        }
                    });
                };
 
                // 获取首页分类列表
                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;
                                articleDetailIsShow.value = true;
                            }
                        },
                        error: function (err) {
                            console.log(err.responseText);
                        }
                    });
                };
 
                // 从文章详情页返回首页
                const returnHomePage = () => {
                    articleDetailIsShow.value = false;
                    articleListIsShow.value = true;
                    rsideIsShow.value = true;
                };
 
                // 分类点击事件
                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);
                        }
                    });
                };
 
                // 页面加载时执行
                onMounted(() => {
                    getArticleList();
                    getCateList();
                });
 
                return {
                    articleList,
                    cateList,
                    article,
                    searchText,
                    articleListIsShow,
                    articleDetailIsShow,
                    rsideIsShow,
                    getArticleDetail,
                    returnHomePage,
                    cateOnClick,
                    searchbtnOnClick,
                }
            }
        }).mount('#app');
    </script>
</body>
 
</html>

posted @ 2024-09-02 15:54 ※听雨※ 阅读(11) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 使用zig语言制作简单博客网站（六）文章详情页

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

· bbs项目：侧边栏筛选功能、文章详情页搭建、点赞点踩样式搭建、文章评论功能

· BBS项目

· 【七】文章详情页搭建

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

昵称： ※听雨※
园龄： 5年4个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类 (9)

Zig(9)

※听雨※

使用zig语言制作简单博客网站（七）右边栏分类点击和文章搜索

分类点击事件处理

后端代码

前端代码

文章搜索功能

后端代码

前端代码

公告

常用链接

合集 (1)

随笔分类 (9)

随笔档案 (9)

阅读排行榜

	CREATE TABLE article (
	id INTEGER PRIMARY KEY AUTOINCREMENT,
	title VARCHAR (1024) NOT NULL,
	description VARCHAR (1024),
	content TEXT NOT NULL,
	istop INTEGER (2) NOT NULL DEFAULT (0),
	cate_name VARCHAR (20),
	created_at DATETIME,
	updated_at DATETIME
	);

	pub const Article = struct {
	id: u32,
	title: []const u8,
	description: []const u8,
	content: []const u8,
	istop: u32,
	cate_name: []const u8,
	created_at: []const u8,
	updated_at: []const u8,
	};

	// 某分类下博客
	router.get("/api/articles", &articleController.getArticlesByCateName);

	/// 获取分类下的文章列表
	pub fn getArticlesByCateName(req: httpz.Request, res: httpz.Response) !void {
	const query = try req.query();
	if (query.get("cate")) \|cate_name\| {
	const articles = try article_server.getArticlesByCateName(cate_name);
	res.status = 200;
	try res.json(.{ .code = 200, .msg = "ok", .data = articles }, .{});
	} else {
	res.status = 400;
	try res.json(.{ .code = 400, .msg = "错误的请求" }, .{});
	return;
	}
	}

	/// 获取分类下的文章列表
	pub fn getArticlesByCateName(cate_name: []const u8) ![]ArticleModel.Article {
	var db = try database.OpenDb();
	defer db.deinit();

	const query =
	\\SELECT id, title, description, content, istop, cate_name, created_at, updated_at FROM article WHERE cate_name = ? ORDER BY created_at DESC
	;

	var stmt = try db.prepare(query);
	defer stmt.deinit();

	var gpa = std.heap.GeneralPurposeAllocator(.{}){};
	const allocator = gpa.allocator();

	const rows = try stmt.all(
	ArticleModel.Article,
	allocator,
	.{},
	.{ .cate_name = cate_name },
	);

	return rows;
	}

	<!DOCTYPE html>
	<html lang="zh-CN">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./css/index.css">
	<link rel="stylesheet" href="./css/prism.css">
	<title>blog</title>

	<style>
	[v-cloak] {
	display: none;
	}
	</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()">×</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:;">归档</a>
	</li>
	<li>
	<a href="javascript:;">关于</a>
	</li>
	<li>
	<a href="javascript:;">资源</a>
	</li>
	<li>
	<a href="/light-year-admin/index.html">后台</a>
	</li>
	</ul>
	</div>
	</div>

	<!-- 中间内容 -->
	<div class="main">
	<div style="margin-top: 35px;"></div>

	<div v-cloak v-if="articleListIsShow">
	<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()"><<返回</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>

	<!-- 右侧面板 -->
	<div class="rside" v-cloak v-if="rsideIsShow">
	<!-- 搜索框 -->
	<div class="search-box">
	<input class="search-txt" type="text" placeholder="输入内容搜索">
	<input class="search-bnt" type="submit" value="搜索">
	</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 articleListIsShow = ref(true); // 是否显示文章列表
	const articleDetailIsShow = ref(false); // 是否显示文章详情
	const rsideIsShow = ref(true); // 是否显示右侧面板

	// 获取首页文章列表
	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;
	}
	layer.msg(res.msg);
	},
	error: function (err) {
	console.log(err.responseText);
	layer.msg(res.msg);
	}
	});
	};

	// 获取首页分类列表
	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;
	articleDetailIsShow.value = true;
	}
	},
	error: function (err) {
	console.log(err.responseText);
	}
	});
	};

	// 从文章详情页返回首页
	const returnHomePage = () => {
	articleDetailIsShow.value = false;
	articleListIsShow.value = true;
	rsideIsShow.value = true;
	};

	// 分类点击事件
	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);
	}
	});
	};

	// 页面加载时执行
	onMounted(() => {
	getArticleList();
	getCateList();
	});

	return {
	articleList,
	cateList,
	article,
	articleListIsShow,
	articleDetailIsShow,
	rsideIsShow,
	getArticleDetail,
	returnHomePage,
	cateOnClick,
	}
	}
	}).mount('#app');
	</script>
	</body>

	</html>

	// 文章搜索
	router.get("/api/article/search", &articleController.searchArticles);

	/// 文章搜索
	pub fn searchArticles(req: httpz.Request, res: httpz.Response) !void {
	const query = try req.query();
	if (query.get("keyword")) \|keyword\| {
	const articles = try article_server.searchArticles(keyword);
	res.status = 200;
	try res.json(.{ .code = 200, .msg = "ok", .data = articles }, .{});
	} else {
	res.status = 400;
	try res.json(.{ .code = 400, .msg = "错误的请求" }, .{});
	return;
	}
	}

	/// 文章搜索
	pub fn searchArticles(keyword: []const u8) ![]ArticleModel.Article {
	var db = try database.OpenDb();
	defer db.deinit();

	const query =
	\\SELECT id, title, description, content, istop, cate_name, created_at, updated_at FROM article WHERE title LIKE $title ORDER BY created_at DESC
	;

	var stmt = try db.prepare(query);
	defer stmt.deinit();

	var gpa = std.heap.GeneralPurposeAllocator(.{}){};
	const allocator = gpa.allocator();

	const word = try std.fmt.allocPrint(allocator, "{s}%", .{keyword});

	const rows = try stmt.all(
	ArticleModel.Article,
	allocator,
	.{},
	.{ .title = word },
	);

	return rows;
	}