使用zig语言制作简单博客网站（五）编写博客首页数据请求响应代码
前端请求代码
请注意前端数据渲染我换成了vue.js
前端请求代码
<script type="module">
import { createApp, ref, onMounted, } from "./js/vue.esm-browser.prod.js";
createApp({
setup() {
const articleList = ref([]); // 首页文章列表
const cateList = ref([]); // 首页分类列表
// 获取首页文章列表
const getArticleList = () => {
$.ajax({
url: 'http://localhost:5588/api/home/articles',
type: 'GET',
dataType: 'json',
success: function (res) {
if (res.code == 200) {
articleList.value = res.data;
}
},
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);
}
});
};
onMounted(() => {
getArticleList();
getCateList();
});
return {
articleList,
cateList,
}
}
}).mount('#app')
</script>
后端响应代码
首页文章
- 注册路由
// 首页博客列表
router.get("/api/home/articles", &articleController.getHomeArticles);
- 建立
article_controller.zig文件，代码如下
const std = @import("std");
const httpz = @import("httpz");
const article_server = @import("../server/article_server.zig");
/// 获取首页文章列表
pub fn getHomeArticles(req: *httpz.Request, res: *httpz.Response) !void {
_ = req;
const articles = try article_server.getHomeArticles();
res.status = 200;
try res.json(.{ .code = 200, .msg = "ok", .data = articles }, .{});
}
- 建立
article_server.zig文件，代码如下
const std = @import("std");
const database = @import("../database/db.zig");
const ArticleModel = @import("../model/article.zig");
/// 获取首页文章列表
pub fn getHomeArticles() ![]ArticleModel.Article {
var db = try database.OpenDb();
defer db.deinit();
const query =
\\SELECT id, title, description, content, istop, created_at, updated_at FROM article ORDER BY created_at DESC LIMIT 8 OFFSET 0
;
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,
.{},
.{},
);
return rows;
}
首页分类
- 注册路由
// 首页分类列表
router.get("/api/home/cates", &cateController.getHomeCategories);
- 建立
cate_controller.zig文件，代码如下
const std = @import("std");
const httpz = @import("httpz");
const cate_server = @import("../server/cate_server.zig");
/// 获取首页分类列表
pub fn getHomeCategories(req: *httpz.Request, res: *httpz.Response) !void {
_ = req;
const cates = try cate_server.getHomeCategories();
res.status = 200;
try res.json(.{ .code = 200, .msg = "ok", .data = cates }, .{});
}
- 建立
cate_server.zig文件，代码如下
const std = @import("std");
const database = @import("../database/db.zig");
const CategoryModel = @import("../model/cate.zig");
/// 获取首页分类列表
pub fn getHomeCategories() ![]CategoryModel.Category {
var db = try database.OpenDb();
defer db.deinit();
const query =
\\SELECT id, name FROM category
;
var stmt = try db.prepare(query);
defer stmt.deinit();
var gpa = std.heap.GeneralPurposeAllocator(.{}){};
const allocator = gpa.allocator();
const rows = try stmt.all(
CategoryModel.Category,
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">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/prism.css">
<title>blog</title>
</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="/">首页</a>
</li>
<li>
<a href="javascript:;">归档</a>
</li>
<li>
<a href="javascript:;">关于</a>
</li>
<li>
<a href="javascript:;">资源</a>
</li>
</ul>
</div>
</div>
<!-- 中间内容 -->
<div class="main">
<div style="margin-top: 35px;"></div>
<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">
<i class="sticky-icon" 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-date">发布时间：{{article.created_at}}</span>
<!-- <span class="article-card-footer-tag">分类</span> -->
</div>
</div>
</div>
</template>
<!-- 文章详情 -->
<!-- <div class="article-container">
<div class="article-main">
<article class="article-view">
<h1 class="article-title">ubuntu安装教程</h1>
<div class="article-meta">
<span>作者: 听雨</span>
<span>
分类:
<span>Linux</span>
</span>
<span>发布时间： 2024年8月5日 09:08:03</span>
</div>
<div class="article-desc">
ubuntu安装教程
ubuntu安装教程
</div>
<div class="article-content">
<p>ubuntu安装教程</p>
<p>ubuntu安装教程</p>
<p>ubuntu安装教程</p>
<pre>
<code class="language-java">
public class Test {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</code>
</pre>
<pre>
<code class="language-javascript">
function sayHello() {
console.log("Hello, world!");
}
</code>
</pre>
</div>
</article>
</div>
</div> -->
</div>
<!-- 右侧面板 -->
<div class="rside">
<!-- 搜索框 -->
<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">{{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 getArticleList = () => {
$.ajax({
url: 'http://localhost:5588/api/home/articles',
type: 'GET',
dataType: 'json',
success: function (res) {
if (res.code == 200) {
articleList.value = res.data;
}
},
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);
}
});
};
onMounted(() => {
getArticleList();
getCateList();
});
return {
articleList,
cateList,
}
}
}).mount('#app')
</script>
</body>
</html>
运行测试效果
- 如图
![]()
![]()
浙公网安备 33010602011771号