gitea
/
blog_front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add new

master
panda 7 months ago
parent
8705e7fd1f
commit
aa6e6dd423
5 changed files with 61 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      index.html
  2. 9
      src/stores/index.ts
  3. 27
      src/views/blog/HomePageView.vue
  4. 24
      src/views/blog/blogcontent/BlogListView.vue
  5. 19
      src/views/blog/diarycontent/DiaryListView.vue

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="http://www.wuruilin.cn/otherimg/头像.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SunFree</title> <title>SunFree</title>
</head> </head>

9
src/stores/index.ts
View File

@ -63,6 +63,8 @@ export const blogStore = defineStore("blog", () => {
ids: "", ids: "",
title:"" title:""
}) })
const isEmpty=ref(false)
const isPage=ref(true)
const formControl = ref({ const formControl = ref({
open: false, open: false,
ids: null ids: null
@ -71,7 +73,7 @@ export const blogStore = defineStore("blog", () => {
const setReadCount=(num:number)=>{ const setReadCount=(num:number)=>{
readcount.value+=num readcount.value+=num
} }
return { delControl,formControl,readcount,setReadCount }
return { delControl,formControl,readcount,isEmpty,isPage,setReadCount }
}) })
export const useContentStore = defineStore('content', () => { export const useContentStore = defineStore('content', () => {
const content = ref({ text: "" }); const content = ref({ text: "" });
@ -94,9 +96,10 @@ export const diaryStore = defineStore("diary", () => {
ids: null, ids: null,
title:"" title:""
}) })
const isEmpty=ref(false)
const isPage=ref(true)
return { delControl }
return { delControl,isEmpty,isPage }
}) })
export const classticStore = defineStore("classtic", () => { export const classticStore = defineStore("classtic", () => {
const addControl = reactive({ const addControl = reactive({

27
src/views/blog/HomePageView.vue
View File

@ -32,8 +32,8 @@
</a-tag> </a-tag>
</div> </div>
<div class="blog-content"> <div class="blog-content">
<div>
<a-image :preview="false" :width="200" :src=article.imglink />
<div class="image-container">
<a-image :preview="false" :src=article.imglink class="responsive-image"/>
</div> </div>
<div class="text-container"> <div class="text-container">
{{ article.blogcontent }} {{ article.blogcontent }}
@ -81,8 +81,8 @@
</a-tag> </a-tag>
</div> </div>
<div class="blog-content"> <div class="blog-content">
<div>
<a-image :preview="false" :width="1000" :height="500" :src=article.imglink />
<div class="image-container">
<a-image :preview="false" :src=article.imglink class="responsive-image"/>
</div> </div>
</div> </div>
<div class="read-button"> <div class="read-button">
@ -207,6 +207,25 @@ watch(() => homepageStore.homepagelist, () => {
margin: 48px; margin: 48px;
} }
.blogs .image-container {
width: 300px;
}
.blogs .responsive-image {
width: 100%;
height: auto;
}
.diarys .image-container {
width: 1000px;
}
.diarys .responsive-image {
width: 100%;
height: auto;
}
.main .blog-content>:first-child { .main .blog-content>:first-child {
padding: 4px; padding: 4px;
border: 2px solid #ccc; border: 2px solid #ccc;

24
src/views/blog/blogcontent/BlogListView.vue
View File

@ -48,7 +48,7 @@
</a-card> </a-card>
</a-badge-ribbon> </a-badge-ribbon>
</div> </div>
<div class="pagination">
<div class="pagination" v-if="blogstore.isPage">
<a-pagination v-model:current="current" v-if="dataLoaded" v-model:page-size="pageSizeRef" <a-pagination v-model:current="current" v-if="dataLoaded" v-model:page-size="pageSizeRef"
:page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange"> :page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange">
<template #buildOptionText="props"> <template #buildOptionText="props">
@ -57,19 +57,23 @@
</template> </template>
</a-pagination> </a-pagination>
</div> </div>
<div class="is-null" v-if="blogstore.isEmpty">
<a-card hoverable>
<a-empty description="没有数据" />
</a-card>
</div>
</div> </div>
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import iconComponents from '@/assets'; import iconComponents from '@/assets';
import { useContentStore } from "@/stores"
import { blogStore } from "@/stores"
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import type { blogInterface } from '@/api/admin'; import type { blogInterface } from '@/api/admin';
import { get,put } from "@/tools/request" import { get,put } from "@/tools/request"
import router from '@/router'; import router from '@/router';
const store = useContentStore()
const blogstore = blogStore()
const randomColor = () => { const randomColor = () => {
const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"]) const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"])
return labelColor.value[Math.floor(Math.random() * labelColor.value.length)]; return labelColor.value[Math.floor(Math.random() * labelColor.value.length)];
@ -104,18 +108,21 @@ const blogList = async (page: number, pageSize: number) => {
readnum: items.readnum, readnum: items.readnum,
readminite: Math.round(items.blogcontent.length/ 200), readminite: Math.round(items.blogcontent.length/ 200),
imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片.jpg', imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片.jpg',
})) }))
total.value = response.data.data.total; // 更新总数 total.value = response.data.data.total; // 更新总数
if (response.data.data.total===0) {
blogstore.isEmpty=true
blogstore.isPage=false
}else{
blogstore.isEmpty=false
blogstore.isPage=true
}
pageSizeRef.value = pageSize; // 更新页大小，如果需要从接口返回页大小也可以改为 response.data.data.page_size pageSizeRef.value = pageSize; // 更新页大小，如果需要从接口返回页大小也可以改为 response.data.data.page_size
dataLoaded.value = true dataLoaded.value = true
} catch (error) { } catch (error) {
console.error('Failed to fetch data', error); console.error('Failed to fetch data', error);
} }
} }
const blogCount=async (id:any)=>{
await put(`/blogs/update/${id}/readnum`)
}
const readMore = (id: any) => { const readMore = (id: any) => {
router.push(`/blog/${id}`) router.push(`/blog/${id}`)
@ -154,6 +161,7 @@ onMounted(() => {
.main .blog-content { .main .blog-content {
display: flex; display: flex;
margin: 48px; margin: 48px;
width: 45%;
} }
.main .blog-content>:first-child { .main .blog-content>:first-child {

19
src/views/blog/diarycontent/DiaryListView.vue
View File

@ -43,7 +43,7 @@
</a-card> </a-card>
</a-badge-ribbon> </a-badge-ribbon>
</div> </div>
<div class="pagination">
<div class="pagination" v-if="diarystore.isPage">
<a-pagination v-model:current="current" v-if="dataLoaded" v-model:page-size="pageSizeRef" <a-pagination v-model:current="current" v-if="dataLoaded" v-model:page-size="pageSizeRef"
:page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange"> :page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange">
<template #buildOptionText="props"> <template #buildOptionText="props">
@ -52,7 +52,11 @@
</template> </template>
</a-pagination> </a-pagination>
</div> </div>
<div class="is-null" v-if="diarystore.isEmpty">
<a-card hoverable>
<a-empty description="没有数据" />
</a-card>
</div>
</div> </div>
</template> </template>
@ -62,9 +66,9 @@ import iconComponents from '@/assets';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import type { diaryInterface } from '@/api/admin'; import type { diaryInterface } from '@/api/admin';
import { get,put } from "@/tools/request" import { get,put } from "@/tools/request"
import { useContentStore } from "@/stores"
import { diaryStore } from "@/stores"
import router from '@/router'; import router from '@/router';
const store = useContentStore()
const diarystore = diaryStore()
const dataLoaded = ref(false); const dataLoaded = ref(false);
// 分页 // 分页
const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']); const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
@ -99,6 +103,13 @@ const diaryList = async (page: number, pageSize: number) => {
imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片.jpg', imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片.jpg',
})); }));
total.value = response.data.data.total; // 更新总数 total.value = response.data.data.total; // 更新总数
if (response.data.data.total===0) {
diarystore.isEmpty=true,
diarystore.isPage=false
}else{
diarystore.isEmpty=false,
diarystore.isPage=true
}
pageSizeRef.value = pageSize; // 更新页大小，如果需要从接口返回页大小也可以改为 response.data.data.page_size pageSizeRef.value = pageSize; // 更新页大小，如果需要从接口返回页大小也可以改为 response.data.data.page_size
dataLoaded.value = true dataLoaded.value = true
} catch (error) { } catch (error) {

Write Preview
Loading…
Cancel
Save