fix: view
This commit is contained in:
merlin
@@ -28,6 +28,11 @@ const router = createRouter({
|
||||
name: "me",
|
||||
component: () => import("@/views/blog/me.vue"),
|
||||
},
|
||||
{
|
||||
path: "/articles",
|
||||
name: "articles",
|
||||
component: () => import("@/views/blog/articles.vue"),
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -75,7 +75,7 @@ export const projectStore = defineStore("project", {
|
||||
export const viewDetailsStore = defineStore("viewDetails", {
|
||||
state: () => ({
|
||||
detail: {
|
||||
a_id: "",
|
||||
id: "",
|
||||
title: "",
|
||||
content: "",
|
||||
created: "",
|
||||
@@ -84,7 +84,7 @@ export const viewDetailsStore = defineStore("viewDetails", {
|
||||
}),
|
||||
actions: {
|
||||
setViewDetails(data) {
|
||||
this.detail.a_id = data.a_id;
|
||||
this.detail.id = data.id;
|
||||
this.detail.title = data.title;
|
||||
this.detail.content = data.content;
|
||||
this.detail.created = data.created;
|
||||
|
||||
155
src/views/blog/articles.vue
Normal file
155
src/views/blog/articles.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<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-row style="height: 30%;">
|
||||
<el-col :span="24" style="height: 100%;">
|
||||
<div class="show-top-text">
|
||||
<h2>Articles</h2>
|
||||
</div>
|
||||
<div class="search-input">
|
||||
<el-input v-model="search_text" placeholder="Type something">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<search />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="height: 60%;">
|
||||
<el-col :span="24" style="height: 100%;">
|
||||
<div class="news" v-for="item in news" @click="openDetails(item.a_id)">
|
||||
<div class="newspic">
|
||||
<img :src="item.pic" alt="芜湖" />
|
||||
</div>
|
||||
<div class="newscontent">
|
||||
<h2>{{ item.n_title }}</h2>
|
||||
<p class="date">{{ item.published }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import '@/styles/show.css'
|
||||
import axios from 'axios'
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { userInfoStore } from '@/store/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { viewDetailsStore } from '@/store/details'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
|
||||
const userinfo = userInfoStore()
|
||||
const details = viewDetailsStore()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const search_text = ref('')
|
||||
|
||||
const pageSize = 5
|
||||
const page = 1
|
||||
const news = ref([
|
||||
{
|
||||
a_id: '1',
|
||||
n_title: '1',
|
||||
synopsis: '1',
|
||||
published: '1',
|
||||
pic: '1'
|
||||
},
|
||||
{
|
||||
a_id: '2',
|
||||
n_title: '2',
|
||||
synopsis: '2',
|
||||
published: '2',
|
||||
pic: '2'
|
||||
},
|
||||
{
|
||||
a_id: '3',
|
||||
n_title: '3',
|
||||
synopsis: '3',
|
||||
published: '3',
|
||||
pic: '3'
|
||||
},
|
||||
{
|
||||
a_id: '1',
|
||||
n_title: '1',
|
||||
synopsis: '1',
|
||||
published: '1',
|
||||
pic: '1'
|
||||
},
|
||||
{
|
||||
a_id: '2',
|
||||
n_title: '2',
|
||||
synopsis: '2',
|
||||
published: '2',
|
||||
pic: '2'
|
||||
},
|
||||
{
|
||||
a_id: '3',
|
||||
n_title: '3',
|
||||
synopsis: '3',
|
||||
published: '3',
|
||||
pic: '3'
|
||||
},
|
||||
|
||||
])
|
||||
|
||||
const getNews = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/blog/get/news', {
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + userinfo.token
|
||||
},
|
||||
params: {
|
||||
current: page,
|
||||
size: pageSize
|
||||
}
|
||||
})
|
||||
if (response.data.code === 200) {
|
||||
news.value = response.data.data.records
|
||||
} else {
|
||||
console.log(response.data.message)
|
||||
return
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
return
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const openDetails = async (a_id) => {
|
||||
// const response = await axios.get('/api/blog/get/article/' + a_id, {
|
||||
// headers: {
|
||||
// Authorization: 'Bearer ' + userinfo.token
|
||||
// }
|
||||
// })
|
||||
// if (!response.data.code === 200) {
|
||||
// console.log(response.data.message)
|
||||
// return
|
||||
// }
|
||||
// details.setViewDetails(response.data.data)
|
||||
details.setViewDetails({
|
||||
id: "1212",
|
||||
title: "12312",
|
||||
content: "231323",
|
||||
created: "123123",
|
||||
updated: "123132",
|
||||
})
|
||||
router.push('viewDetails')
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getNews()
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
@@ -5,7 +5,7 @@
|
||||
<el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" class="menu"
|
||||
menu-trigger="click">
|
||||
<router-link to="/"><el-menu-item index="1">首页</el-menu-item></router-link>
|
||||
<router-link><el-menu-item index="2">文章</el-menu-item></router-link>
|
||||
<router-link to="/articles"><el-menu-item index="2">文章</el-menu-item></router-link>
|
||||
<!-- <router-link><el-menu-item index="3">联系站长</el-menu-item></router-link> -->
|
||||
<el-sub-menu index="4" class="sub-menu">
|
||||
<template #title>
|
||||
@@ -47,7 +47,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="login()">登录</el-button>
|
||||
<el-button @Click="goToRegister()" type="primary">注册</el-button>
|
||||
<!-- <el-button @Click="goToRegister()" type="primary">注册</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
@@ -142,16 +142,23 @@ const getNews = async () => {
|
||||
}
|
||||
|
||||
const openDetails = async (a_id) => {
|
||||
const response = await axios.get('/api/blog/get/article/' + a_id, {
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + userinfo.token
|
||||
}
|
||||
// const response = await axios.get('/api/blog/get/article/' + a_id, {
|
||||
// headers: {
|
||||
// Authorization: 'Bearer ' + userinfo.token
|
||||
// }
|
||||
// })
|
||||
// if (!response.data.code === 200) {
|
||||
// console.log(response.data.message)
|
||||
// return
|
||||
// }
|
||||
// details.setViewDetails(response.data.data)
|
||||
details.setViewDetails({
|
||||
id: "1212",
|
||||
title: "12312",
|
||||
content: "231323",
|
||||
created: "123123",
|
||||
updated: "123132",
|
||||
})
|
||||
if (!response.data.code === 200) {
|
||||
console.log(response.data.message)
|
||||
return
|
||||
}
|
||||
details.setViewDetails(response.data.data)
|
||||
router.push('viewDetails')
|
||||
}
|
||||
|
||||
|
||||
@@ -7,14 +7,9 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<h1 v-if="detail.type === 'article'">{{ articleinfo.detail.title }}</h1>
|
||||
<p v-if="detail.type === 'article'" style="padding: 20px;">发布时间:{{ articleinfo.detail.created }}---更新时间:{{
|
||||
articleinfo.detail.updated }}</p>
|
||||
<h1 v-if="detail.type === 'news'">{{ newsinfo.detail.title }}</h1>
|
||||
<p v-if="detail.type === 'news'" style="padding: 20px;">发布时间:{{ newsinfo.detail.published }}</p>
|
||||
<h1 v-if="detail.type === 'project'">{{ projectinfo.detail.title }}</h1>
|
||||
<p v-if="detail.type === 'project'" style="padding: 20px;">发布时间:{{ projectinfo.detail.created }}---更新时间:{{
|
||||
projectinfo.detail.updated }}</p>
|
||||
<h1>{{ details.detail.title }}</h1>
|
||||
<p style="padding: 20px;">发布时间:{{ details.detail.created }}---更新时间:{{
|
||||
details.detail.updated }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
@@ -29,46 +24,29 @@
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { articleStore, detailsStore, newsStore, projectStore } from '@/store/details'
|
||||
import { viewDetailsStore } from '@/store/details'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { marked } from 'marked'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const detail = detailsStore()
|
||||
const details = viewDetailsStore()
|
||||
|
||||
const articleinfo = articleStore()
|
||||
const newsinfo = newsStore()
|
||||
const projectinfo = projectStore()
|
||||
|
||||
const Content = ref('')
|
||||
|
||||
const show = ref(null)
|
||||
|
||||
|
||||
const setShow = () => {
|
||||
if (detail.type === 'article')
|
||||
show.value = articleinfo.detail
|
||||
else if (detail.type === 'news')
|
||||
show.value = newsinfo.detail
|
||||
else if (detail.type === 'project')
|
||||
show.value = projectinfo.detail
|
||||
}
|
||||
|
||||
|
||||
|
||||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
const convertContent = () => {
|
||||
const markdownContent = show.value.content
|
||||
const markdownContent = details.detail.content
|
||||
Content.value = marked.parse(markdownContent)
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
setShow()
|
||||
convertContent()
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user