blog/blog-vue
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request 'dev' (#4) from dev into main

Browse Source 
Reviewed-on: #4
This commit is contained in:
merlin
2025-11-04 03:16:08 +00:00
parent 2ddec47526 480ae20db5
commit 216506710c
5 changed files with 344 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitea/workflows/build.yaml
View File

@@ -8,7 +8,7 @@ jobs:
build: build:
runs-on: gitea-official-runner runs-on: gitea-official-runner
container: container:
image: harbor.merlin.xin/release/merlin/merlin/action_builder:v0.0.1 image: harbor.merlin.xin/release/merlin/action_builder:v0.0.1
steps: steps:
- name: Checkout code - name: Checkout code
uses: actions/checkout@v4 uses: actions/checkout@v4

2
.gitea/workflows/tag.yaml
View File

@@ -8,7 +8,7 @@ jobs:
build: build:
runs-on: gitea-official-runner runs-on: gitea-official-runner
container: container:
image: harbor.merlin.xin/release/merlin/merlin/action_builder:v0.0.1 image: harbor.merlin.xin/release/merlin/action_builder:v0.0.1
steps: steps:
- name: Checkout code - name: Checkout code
uses: actions/checkout@v4 uses: actions/checkout@v4

110
src/styles/show.css
View File

@@ -1,52 +1,60 @@
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 10px; padding: 10px;
} }
.show-top-text h2{ .show-top-text h2{
padding: 10px; padding: 10px;
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
margin: auto; margin: auto;
font-style: italic; font-style: italic;
} }
.welcome { .welcome {
padding: 20px; padding: 20px;
font-style: italic; font-style: italic;
text-align: right; text-align: right;
} }
.show-top-text{ .show-top-text{
text-align: center; text-align: center;
} }
.newsbox, .articlesbox{ .newsbox, .articlesbox{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.news, .articles{ .news, .articles{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: auto; margin: auto;
padding: 10px; padding: 10px;
flex: 2; flex: 2;
height: 100px; height: 100px;
} }
.newspic, .articlespic{ .newspic, .articlespic{
display: inline-block; display: inline-block;
background-color: #5b5a5a; background-color: #5b5a5a;
width: 20%; width: 20%;
min-width: 100px; min-width: 100px;
max-width: 130px; max-width: 130px;
height: 100%; height: 100%;
} }
.newscontent, .articlescontent{ .newscontent, .articlescontent{
margin-right: auto; margin-right: auto;
display: inline-block; display: inline-block;
padding: 10px; padding: 10px;
} }
.search-input{ .search-input{
width: 70%; width: 70%;
margin: auto margin: auto
}
.pagination-block{
margin-top: 10px;
}
.el-pagination{
justify-content: center;
} }

226
src/views/blog/articles.vue
View File

@@ -1,92 +1,134 @@
<template> <template>
<div class="container"> <div class="container">
<el-row :span="24" style="height: 100%;"> <el-row :span="24" style="height: 100%;">
<el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;"> <el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;">
<el-row style="height: 30%;"> <el-row style="height: 30%;">
<el-col :span="24" style="height: 100%;"> <el-col :span="24" style="height: 100%;">
<div class="show-top-text"> <div class="show-top-text">
<h2>Articles</h2> <h2>Articles</h2>
</div> </div>
<div class="search-input"> <div class="search-input">
<el-input v-model="search_text" placeholder="Type something"> <el-input v-model="search_text" placeholder="Type something" clearable @keyup.enter="doSearch">
<template #prefix> <template #prefix>
<el-icon class="el-input__icon"> <el-icon class="el-input__icon">
<search /> <search />
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="height: 60%;"> <el-row style="height: 60%;">
<el-col :span="24" style="height: 100%;"> <el-col :span="24" style="height: 100%;">
<div class="articles" v-for="item in articles" @click="openDetails(item)"> <div class="articles" v-for="item in filteredArticles" @click="openDetails(item)">
<div class="articlespic"> <div class="articlespic">
<img :src="item.pic" alt="芜湖" /> <img :src="item.pic" alt="芜湖" />
</div> </div>
<div class="articlescontent"> <div class="articlescontent">
<h2>{{ item.title }}</h2> <h2>{{ item.title }}</h2>
<p class="date">{{ item.published }}</p> <p class="date">{{ item.published }}</p>
</div> </div>
</div> </div>
</el-col> <div class="pagination-block">
</el-row> <el-pagination layout="prev, pager, next" :total=total v-model:page-size="pageSize" v-model:current-page="page"/>
</el-col> </div>
</el-row> </el-col>
</div> </el-row>
</template> </el-col>
</el-row>
<script setup> </div>
import '@/styles/show.css' </template>
import axios from 'axios'
import { onMounted, ref, computed } from 'vue' <script setup>
import { userInfoStore } from '@/store/store' import '@/styles/show.css'
import { useRouter } from 'vue-router' import axios from 'axios'
import { viewDetailsStore } from '@/store/details' import { onMounted, ref, computed,watch } from 'vue'
import { Search } from '@element-plus/icons-vue' import { userInfoStore } from '@/store/store'
import { useRouter } from 'vue-router'
const userinfo = userInfoStore() import { viewDetailsStore } from '@/store/details'
const details = viewDetailsStore() import { Search } from '@element-plus/icons-vue'
const router = useRouter() const details = viewDetailsStore()
const search_text = ref('') const router = useRouter()
const pageSize = 5 const search_text = ref('')
const page = 1
const articles = ref([]) const pageSize = 5
const page = ref(1)
const getArticles = async () => { const search_page = ref(1)
try { const total = ref(0)
const response = await axios.get('/api/blog/get/articles', { const articles = ref([])
params: { const search = ref([])
current: page,
size: pageSize const filteredArticles = computed(() => {
} return search_text.value.trim() === ''
}) ? articles.value
if (response.data.code === 200) { : search.value
articles.value = response.data.data.records })
} else {
console.log(response.data.message)
return const getArticles = async () => {
} try {
} catch (error) { const response = await axios.get('/api/blog/get/articles', {
console.log(error) params: {
return current: page.value,
} size: pageSize
}
} })
if (response.data.code === 200) {
const openDetails = async (item) => { articles.value = response.data.data.records
details.setViewDetails(item) page.value = response.data.data.current
router.push('viewDetails') total.value = response.data.data.total
} } else {
console.log(response.data.message)
return
}
onMounted(() => { } catch (error) {
getArticles() console.log(error)
return
}) }
</script> }
const doSearch = async () =>{
if (!search_text.value.trim()) return
try{
const response = await axios.post('/api/blog/search/articles',{
title: search_text.value
},{
params: {
current: search_page.value,
size: pageSize
}
})
if(response.data.code === 200){
search.value = response.data.data.records
page.value = response.data.data.current
total.value = response.data.data.total
}else {
console.log(response.data.message)
return
}
}catch(error){
console.log(error)
return
}
}
const openDetails = async (item) => {
details.setViewDetails(item)
router.push('viewDetails')
}
watch(page, getArticles, { immediate: true })
watch(search_page, doSearch)
// onMounted(() => {
// getArticles()
// })
</script>

259
src/views/blog/show.vue
View File

@@ -1,110 +1,149 @@
<template> <template>
<div class="container"> <div class="container">
<el-row :span="24" style="height: 100%;"> <el-row :span="24" style="height: 100%;">
<el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;"> <el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;">
<el-row style="height: 30%;"> <el-row style="height: 30%;">
<el-col :span="24" style="height: 100%;"> <el-col :span="24" style="height: 100%;">
<div class="show-top-text"> <div class="show-top-text">
<h2>Merlin`s blog</h2> <h2>Merlin`s blog</h2>
</div> </div>
<div class="search-input"> <div class="search-input">
<el-input v-model="search_text" placeholder="Type something"> <el-input v-model="search_text" placeholder="Type something" clearable @keyup.enter="doSearch">
<template #prefix> <template #prefix>
<el-icon class="el-input__icon"> <el-icon class="el-input__icon">
<search /> <search />
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="height: 60%;"> <el-row style="height: 60%;">
<el-col :span="24" style="height: 100%;"> <el-col :span="24" style="height: 100%;">
<div class="news" v-for="item in news" @click="openDetails(item)"> <div class="news" v-for="item in filteredNews" @click="openDetails(item)">
<div class="newspic"> <div class="newspic">
<img :src="item.pic" alt="芜湖" /> <img :src="item.pic" alt="芜湖" />
</div> </div>
<div class="newscontent"> <div class="newscontent">
<h2>{{ item.title }}</h2> <h2>{{ item.title }}</h2>
<p class="date">{{ item.published }}</p> <p class="date">{{ item.published }}</p>
</div> </div>
</div> </div>
</el-col> <div class="pagination-block">
</el-row> <el-pagination layout="prev, pager, next" :total=total v-model:page-size="pageSize" v-model:current-page="page"/>
</el-col> </div>
</el-row> </el-col>
</div> </el-row>
</el-col>
<el-dialog v-model="dialogVisible" title="Tips" :width="dialogWidth" :before-close="handleClose"> </el-row>
<span>This is a message</span> </div>
<template #footer>
<div class="dialog-footer"> <el-dialog v-model="dialogVisible" title="Tips" :width="dialogWidth" :before-close="handleClose">
<el-button type="primary" @click="dialogVisible = false"> <span>This is a message</span>
Confirm <template #footer>
</el-button> <div class="dialog-footer">
</div> <el-button type="primary" @click="dialogVisible = false">
</template> Confirm
</el-dialog> </el-button>
</template> </div>
</template>
<script setup> </el-dialog>
import '@/styles/show.css' </template>
import axios from 'axios'
import { onMounted, ref, computed } from 'vue' <script setup>
import { userInfoStore } from '@/store/store' import '@/styles/show.css'
import { useRouter } from 'vue-router' import axios from 'axios'
import { viewDetailsStore } from '@/store/details' import { onMounted, ref, computed, watch } from 'vue'
import { Search } from '@element-plus/icons-vue' import { useRouter } from 'vue-router'
import { viewDetailsStore } from '@/store/details'
const userinfo = userInfoStore() import { Search } from '@element-plus/icons-vue'
const details = viewDetailsStore()
const details = viewDetailsStore()
const router = useRouter()
const router = useRouter()
const dialogVisible = ref(true);
const dialogVisible = ref(true);
const search_text = ref('')
const search_text = ref('')
const pageSize = 5
const page = 1 const pageSize = 5
const news = ref([]) const page = ref(1)
const search_page = ref(1)
const dialogWidth = computed(() => { const total = ref(0)
return window.innerWidth < 768 ? '90%' : '60%' const news = ref([])
}) const search = ref([])
const getNews = async () => { const filteredNews = computed(() => {
try { return search_text.value.trim() === ''
const response = await axios.get('/api/blog/get/news', { ? news.value
headers: { : search.value
}, })
params: {
current: page, const dialogWidth = computed(() => {
size: pageSize return window.innerWidth < 768 ? '90%' : '60%'
} })
})
if (response.data.code === 200) { const getNews = async () => {
news.value = response.data.data.records try {
} else { const response = await axios.get('/api/blog/get/news', {
console.log(response.data.message) headers: {
return },
} params: {
} catch (error) { current: page.value,
console.log(error) size: pageSize
return }
} })
if (response.data.code === 200) {
} news.value = response.data.data.records
page.value = response.data.data.current
const openDetails = async (item) => { total.value = response.data.data.total
details.setViewDetails(item) } else {
router.push('viewDetails') console.log(response.data.message)
} return
}
} catch (error) {
console.log(error)
onMounted(() => { return
getNews() }
})
}
</script>
const doSearch = async () =>{
if (!search_text.value.trim()) return
try{
const response = await axios.post('/api/blog/search/news',{
title: search_text.value
},{
params: {
current: search_page.value,
size: pageSize
}
})
if(response.data.code === 200){
search.value = response.data.data.records
page.value = response.data.data.current
total.value = response.data.data.total
}else {
console.log(response.data.message)
return
}
}catch(error){
console.log(error)
return
}
}
const openDetails = async (item) => {
details.setViewDetails(item)
router.push('viewDetails')
}
watch(page, getNews, { immediate: true })
watch(search_page, doSearch)
// onMounted(() => {
// getNews()
// })
</script>