yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新前端首页显示文章

Browse Source
This commit is contained in:
云泽网
2025-05-12 01:52:39 +08:00
parent b1356231d4
commit f55b0068a2
20 changed files with 624 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index/controller/Index.php
+94 -68
View File
@@ -11,76 +11,102 @@ use think\facade\Config;
class Index extends Base
{
// 首页
/**
* 首页
*/
public function index()
{
// 获取文章列表
$articles = Db::table('yz_article')
->where('delete_time', null)
->where('status', '<>', 3)
->order('id DESC')
->select()
->toArray();
$articleList = [];
foreach ($articles as $article) {
$cate = $article['cate'];
// 获取分类信息
$cateInfo = Db::table('yz_article_category')
->where('id', $cate)
->where('delete_time', null)
->where('status', 1)
->field('name, image')
->find();
if ($cateInfo) { // 只添加有效的分类
// 如果文章没有图片，使用分类的图片
if (empty($article['image']) && !empty($cateInfo['image'])) {
$article['image'] = $cateInfo['image'];
}
// 转换发布日期格式为Y-m-d
$article['publishdate'] = date('Y-m-d', $article['publishdate']);
if (!isset($articleList[$cateInfo['name']])) {
$articleList[$cateInfo['name']] = [];
}
$articleList[$cateInfo['name']][] = $article;
}
}
// 调试信息
trace('Articles: ' . json_encode($articles, JSON_UNESCAPED_UNICODE));
trace('ArticleList: ' . json_encode($articleList, JSON_UNESCAPED_UNICODE));
// 将变量传递给视图
View::assign([
'articleList' => $articleList,
]);
return view('index');
}
// 文章列表
public function articlelist()
{
$articles = Db::table('yz_article')
->where('delete_time', null)
->where('status', 1)
->order('id DESC')
->select()
->toArray();
$articleList = [];
foreach ($articles as $article) {
$cate = $article['cate'];
$cateName = Db::table('yz_article_category')->where('id', $cate)->value('name');
if (!isset($articleList[$cateName])) {
$articleList[$cateName] = [];
}
$articleList[$cateName][] = $article;
}
View::assign('articleList', $articleList);
return View::fetch();
}
/**
* 获取站点资讯列表
*/
public function siteNewslist()
{
// 获取站点资讯分类（顶级分类id为1的子分类）
$categories = Db::name('yz_article_category')
->where('cid', 1)
->where('delete_time', null)
->select()
->toArray();
$articles = [];
$categoryData = [];
// 提取分类名称和ID用于前端tab显示
foreach ($categories as $category) {
$categoryData[] = [
'id' => $category['id'],
'name' => $category['name']
];
// 获取该分类下的文章
$articles = Db::name('yz_article')
->where('cate', $category['id'])
->where('delete_time', null)
->where('status', 2)
->order('id', 'desc')
->field('id, cate, title, image, author, publishdate, views')
->select()
->toArray();
}
return json([
'code' => 1,
'msg' => '获取成功',
'articles' => $articles,
'categories' => $categoryData
]);
}
/**
* 获取技术文章列表
*/
public function technicalArticleslist()
{
// 获取技术文章分类（顶级分类id为3的子分类）
$categories = Db::name('yz_article_category')
->where('cid', 3)
->where('delete_time', null)
->select()
->toArray();
// 组装分类数据，方便后续查找
$categoryData = [];
$categoryImageMap = [];
foreach ($categories as $category) {
$categoryData[] = [
'id' => $category['id'],
'name' => $category['name']
];
$categoryImageMap[$category['id']] = $category['image'] ?? '';
}
// 获取所有技术分类下的文章
$technicalarticles = Db::name('yz_article')
->whereIn('cate', array_column($categories, 'id'))
->where('delete_time', null)
->where('status', 2)
->order('id', 'desc')
->field('id, cate, title, image, author, publishdate, views')
->select()
->toArray();
// 替换image为空的文章
foreach ($technicalarticles as &$article) {
if (empty($article['image']) && !empty($categoryImageMap[$article['cate']])) {
$article['image'] = $categoryImageMap[$article['cate']];
}
}
unset($article);
return json([
'code' => 1,
'msg' => '获取成功',
'articles' => $technicalarticles,
'categories' => $categoryData
]);
}
}
app/index/view/component/main.php
+189 -128
View File
@@ -1,75 +1,28 @@
<main class="main-content">
<div class="container">
<!-- 文章模块 -->
<!-- 站点资讯模块 -->
<div class="core-block core-module" id="opencourse" style="order: 3;">
<div class="module-header">
<div>
<div class="ModuleTitle_titleWrapper">
<h3 class="ModuleTitle_title">站点新闻</h3>
<div class="ModuleTitle_subtitle">新鲜资讯 尽在掌握</div>
<h3 class="ModuleTitle_title">站点资讯</h3>
<div class="tab-container">
<div class="tab-header">
<div class="tab-item active" data-tab="all">全部</div>
<!-- 分类标签将通过JavaScript动态加载 -->
</div>
</div>
</div>
</div>
<div class="more-btn">更多</div>
</div>
<div class="product-list">
<div class="opencourse product-item">
<div class="video"><img data-v-4477fdbc=""
src="https://static001.geekbang.org/resource/image/ff/b8/ff18d73bec1040abf3d7bc7bffb532b8.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover"><!----></div>
<div class="introduction">
<div class="title">闪客 · 怎么理解 AI？</div>
<div class="subtitle">闪客 | B 站知名科普 UP 主</div>
</div>
<div class="bottom">
<div class="desc">1025人学过</div>
<!-- <div class="btn">观看： 123人</div> -->
</div>
</div>
<div class="opencourse product-item">
<div class="video"><img data-v-4477fdbc=""
src="https://static001.geekbang.org/resource/image/76/cd/762ee7f34a76fbff61d20aae313833cd.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover">
</div>
<div class="introduction">
<div class="title">多模态对话引擎实战</div>
<div class="subtitle">吴桐 | 网易云信音视频技术负责人，流媒体首席架构师</div>
</div>
<div class="bottom">
<div class="desc">380人学过</div>
<!-- <div class="btn">观看： 123人</div> -->
</div>
</div>
<div class="opencourse product-item">
<div class="video"><img data-v-4477fdbc=""
src="https://static001.geekbang.org/resource/image/4y/da/4yyfb232bfbfbdcc6ed827c16b04a9da.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover"><!----></div>
<div class="introduction">
<div class="title">极客视点</div>
<div class="subtitle">极客时间 | 编辑部</div>
</div>
<div class="bottom">
<div class="desc">12.4w人学过</div>
<!-- <div class="btn">观看： 123人</div> -->
</div>
</div>
<div class="opencourse product-item">
<div class="video"><img data-v-4477fdbc=""
src="https://static001.geekbang.org/resource/image/0f/69/0f95b62cf7yy6d6yy674f090d063b669.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover"><!----></div>
<div class="introduction">
<div class="title">周志明的软件架构课</div>
<div class="subtitle">周志明 | 博士，远光软件研究院院长，《深入理解Java虚拟机》《凤凰架构》等书作者</div>
</div>
<div class="bottom">
<div class="desc">6.0w人学过</div>
<!-- <div class="btn">观看： 123人</div>d -->
</div>
</div>
<div class="product-list" id="webArticlesList">
<!-- 文章将通过JavaScript动态加载 -->
</div>
</div>
<!-- 文章模块 -->
<div class="core-block core-module" id="opencourse" style="order: 3;">
<!-- 技术文章模块 -->
<div class="core-block core-module" id="techArticles" style="order: 3;">
<div class="module-header">
<div>
<div class="ModuleTitle_titleWrapper">
@@ -77,96 +30,204 @@
<div class="tab-container">
<div class="tab-header">
<div class="tab-item active" data-tab="all">全部</div>
{foreach $articleList as $cateName => $articles}
<div class="tab-item" data-tab="{$cateName}">{$cateName}</div>
{/foreach}
<!-- 分类标签将通过JavaScript动态加载 -->
</div>
</div>
</div>
</div>
<div class="more-btn">更多</div>
</div>
<div class="product-list">
<!-- 全部文章 -->
<div class="tab-content active" data-tab="all">
{foreach $articleList as $cateName => $articles}
{foreach $articles as $article}
<div class="opencourse product-item"
onclick="window.open('{:url('article/detail')}?id={$article.id}', '_blank')">
<div class="video">
<img src="{$article.image}" alt="" class="cover">
</div>
<div class="introduction">
<div class="title">{$article.title}</div>
<div class="publishdate">{$article.publishdate}</div>
</div>
<div class="bottom">
<div class="views"><i class="fa-solid fa-eye "></i><span style="margin-left: 5px;">{$article.views}</span></div>
<div class="author"><i class="fa-regular fa-user"></i><span style="margin-left: 5px;">{$article.author}</span></div>
</div>
</div>
{/foreach}
{/foreach}
</div>
<!-- 分类文章 -->
{foreach $articleList as $cateName => $articles}
<div class="tab-content" data-tab="{$cateName}">
{foreach $articles as $article}
<div class="opencourse product-item"
onclick="window.open('{:url('article/detail')}?id={$article.id}', '_blank')">
<div class="video">
<img src="{$article.image}" alt="" class="cover">
</div>
<div class="introduction">
<div class="title">{$article.title}</div>
<div class="publishdate">{$article.publishdate}</div>
</div>
<div class="bottom">
<div class="views"><i class="fa-solid fa-eye "></i><span style="margin-left: 5px;">{$article.views}</span></div>
<div class="author"><i class="fa-regular fa-user"></i><span style="margin-left: 5px;">{$article.author}</span></div>
</div>
</div>
{/foreach}
</div>
{/foreach}
<div class="product-list" id="techArticlesList">
<!-- 文章将通过JavaScript动态加载 -->
</div>
</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 获取所有tab项和内容
const tabItems = document.querySelectorAll('.tab-item');
const tabContents = document.querySelectorAll('.tab-content');
// 加载站点新闻
function loadWebArticles() {
fetch('/index/index/siteNewslist')
.then(response => response.json())
.then(result => {
if (result.code === 1) {
// 渲染分类标签
if (result.categories) {
renderCategoryTabs(result.categories, 'opencourse');
}
// 渲染文章列表
if (result.articles && result.articles.length > 0) {
renderWebArticles(result.articles, 'webArticlesList');
} else {
showNoData('webArticlesList');
}
} else {
showNoData('webArticlesList');
}
})
.catch(error => {
console.error('请求失败:', error);
showError('webArticlesList');
});
}
// 为每个tab项添加点击事件
// 加载技术文章
function loadTechArticles() {
fetch('/index/index/technicalArticleslist')
.then(response => response.json())
.then(result => {
if (result.code === 1) {
// 渲染分类标签
if (result.categories) {
renderCategoryTabs(result.categories, 'techArticles');
}
// 渲染文章列表
if (result.articles && result.articles.length > 0) {
renderWebArticles(result.articles, 'techArticlesList');
} else {
showNoData('techArticlesList');
}
} else {
showNoData('techArticlesList');
}
})
.catch(error => {
console.error('请求失败:', error);
showError('techArticlesList');
});
}
// 显示无数据提示
function showNoData(containerId) {
document.getElementById(containerId).innerHTML = '<div class="no-data">暂无数据</div>';
}
// 显示错误提示
function showError(containerId) {
document.getElementById(containerId).innerHTML = '<div class="error-message">网络请求失败</div>';
}
// 渲染分类标签
function renderCategoryTabs(categories, moduleId) {
const tabHeader = document.querySelector(`#${moduleId} .tab-header`);
if (!tabHeader) return;
// 保留"全部"标签
const allTab = tabHeader.querySelector('.tab-item[data-tab="all"]');
tabHeader.innerHTML = '';
tabHeader.appendChild(allTab);
// 添加分类标签
if (Array.isArray(categories)) {
categories.forEach(category => {
const tabItem = document.createElement('div');
tabItem.className = 'tab-item';
tabItem.setAttribute('data-tab', category.id);
tabItem.textContent = category.name;
tabHeader.appendChild(tabItem);
});
}
// 重新绑定点击事件
bindTabEvents(moduleId);
}
// 绑定标签点击事件
function bindTabEvents(moduleId) {
const tabItems = document.querySelectorAll(`#${moduleId} .tab-item`);
tabItems.forEach(tab => {
tab.addEventListener('click', function () {
tab.addEventListener('click', function() {
// 移除所有active类
tabItems.forEach(item => item.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// 添加active类到当前点击的tab
this.classList.add('active');
// 显示对应的内容
const tabName = this.getAttribute('data-tab');
const activeContent = document.querySelector(`.tab-content[data-tab="${tabName}"]`);
if (activeContent) {
activeContent.classList.add('active');
// 获取选中的分类ID
const selectedCategoryId = this.getAttribute('data-tab');
// 重新加载对应分类的文章
if (moduleId === 'opencourse') {
loadCategoryArticles(selectedCategoryId, 'webArticlesList');
} else {
loadCategoryArticles(selectedCategoryId, 'techArticlesList');
}
// 添加切换动画效果
activeContent.style.opacity = '0';
setTimeout(() => {
activeContent.style.opacity = '1';
}, 50);
});
});
}
// 加载分类文章
function loadCategoryArticles(categoryId, containerId) {
const url = containerId === 'webArticlesList' ? '/index/index/siteNewslist' : '/index/index/technicalArticleslist';
fetch(url)
.then(response => response.json())
.then(result => {
if (result.code === 1) {
if (categoryId === 'all') {
// 显示所有文章
renderWebArticles(result.articles, containerId);
} else {
// 过滤显示选中分类的文章
const filteredArticles = result.articles.filter(article => article.cate == categoryId);
renderWebArticles(filteredArticles, containerId);
}
} else {
showNoData(containerId);
}
})
.catch(error => {
console.error('请求失败:', error);
showError(containerId);
});
}
// 渲染文章列表
function renderWebArticles(articles, containerId) {
const container = document.getElementById(containerId);
if (!container) return;
let html = '';
if (Array.isArray(articles)) {
articles.forEach(article => {
html += createArticleHtml(article);
});
}
container.innerHTML = html || '<div class="no-data">暂无数据</div>';
}
// 创建文章HTML
function createArticleHtml(article) {
if (!article) return '';
// 格式化日期
const publishDate = new Date(article.publishdate * 1000);
const formattedDate = publishDate.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
return `
<div class="opencourse product-item" onclick="window.open('/index/article/detail?id=${article.id || ''}', '_blank')">
<div class="video">
<img src="${article.image || ''}" alt="" class="cover">
</div>
<div class="introduction">
<div class="title">${article.title || '无标题'}</div>
<div class="publishdate">${formattedDate}</div>
</div>
<div class="bottom">
<div class="views"><i class="fa-solid fa-eye"></i><span style="margin-left: 5px;">${article.views || 0}</span></div>
<div class="author"><i class="fa-regular fa-user"></i><span style="margin-left: 5px;">${article.author || '未知作者'}</span></div>
</div>
</div>
`;
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
loadWebArticles();
loadTechArticles();
});
</script>
</script>