后端代码
// 归档文章router.get("/api/article/archive", &articleController.getArchiveArticles);
/// 用于存放归档文章信息
pub const ArchiveArticle = struct {id: u32,title: []const u8,cate_name: []const u8,created_at: []const u8,
};
/// 获取归档文章
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 }, .{});
}
/// 归档文章列表
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"><pathd="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"><pathd="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"><pathd="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()"><<返回</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()"><<返回</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)}-${newDate(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()"><<返回</div><div class="about-wrapper"><section class="about-section"><article><div class="about-content"><p style="text-align: center;"><spanstyle="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>
