minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minhnt-dev: oonly ssr fix

Browse Source
This commit is contained in:
MoreStrive
2024-06-24 16:46:59 +07:00
parent e151dda2ad
commit ab3419bd5f
7 changed files with 89 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.vue
+17 -5
View File
@@ -26,9 +26,7 @@ useHead({
<div>
<NuxtLayout>
<NuxtLoadingIndicator />
<ErrorBoundary>
<NuxtErrorBoundary>
<template #error="{ error }">
<div class="text-center my-8">
<h2 class="mb-2">404</h2>
@@ -38,12 +36,26 @@ useHead({
trang chủ</button>
</div>
</template>
</ErrorBoundary>
<ScrollToTop />
</NuxtErrorBoundary>
<KeepAlive>
<NuxtPage />
</KeepAlive>
</NuxtLayout>
</div>
</a-config-provider> -->
<NuxtLayout>
<NuxtLoadingIndicator />
<NuxtErrorBoundary>
<template #error="{ error }">
<div class="text-center my-8">
<h2 class="mb-2">404</h2>
<p class="mb-3">Trang không tồn tại.</p>
<p v-if="utils.isDev()">{{ error }}</p>
<button @click="resolveError(error)" type="button" class=" p-2 border focus:outline-none border-blue text-blue-7 hover:(bg-blue text-white) rounded-lg transition-colors">Về
trang chủ</button>
</div>
</template>
</NuxtErrorBoundary>
<KeepAlive>
<NuxtPage />
</KeepAlive>
nuxt.config.ts
+2 -4
View File
@@ -3,12 +3,12 @@ const { resolve } = createResolver(import.meta.url);
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
nitro: {
preset: 'iis_node'
},
devtools: { enabled: true },
app: {
head: {
link: [],
@@ -67,10 +67,8 @@ export default defineNuxtConfig({
propsDestructure: true,
},
target: 'server',
ssr: true,
routeRules: {
// Tất cả các route sẽ sử dụng SSR
'**': { ssr: true },
},
pages/[categories]/index.vue
+10 -7
View File
@@ -2,18 +2,21 @@
import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
import { useDynamicPageStore } from '~/stores/dynamic-page';
const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
const route = useRoute();
const store = reactive({
dynamicPage: useDynamicPageStore(),
});
await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path.replace('/', '')))
const { data } = await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path.replace('/', '')))
const asycnCurrentPage = data.value.currentPage;
const asycnSectionPublished = data.value.sectionPublished;
const asycnComponentPublished = data.value.componentPublished;
useHead({
title: () => currentPage.value.title || '',
title: () => asycnCurrentPage.title || '',
description: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
ogTitle: () => currentPage.value.title || '',
ogTitle: () => asycnCurrentPage.title || '',
ogImage: () => '~/assets/images/thumbnail.jpg',
ogDescription: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
twitterCard: () => 'summary_large_image',
@@ -21,10 +24,10 @@ useHead({
</script>
<template>
<main class="h-screen" v-if="currentPage">
<DynamicTemplate :settings="currentPage.settings">
<main class="h-screen" v-if="asycnCurrentPage">
<DynamicTemplate :settings="asycnCurrentPage.settings">
<DynamicSection
v-for="(section, index) in sectionPublished"
v-for="(section, index) in asycnSectionPublished"
:key="index"
:settings="section.settings"
:content="section.content ? JSON.parse(section.content) : null"
pages/bai-viet/[slug].vue
+28 -24
View File
@@ -10,22 +10,18 @@ import DynamicSection from "~/components/dynamic-page/page-section/templates/ind
const route = useRoute();
import { useDynamicPageStore } from '~/stores/dynamic-page';
import { useArticleStore } from '~/stores/articles';
const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
const { currentArticle } = storeToRefs(useArticleStore());
const store = reactive({
dynamicPage: useDynamicPageStore(),
article: useArticleStore(),
});
const loadPage = async () => {
const promises = [];
promises.push(store.article.getArticleBySlug(route.params.slug));
import { useDynamicPageStore } from '~/stores/dynamic-page';
import { useArticleStore } from '~/stores/articles';
const loadPage = async () => {
const article = await store.article.getArticleBySlug(route.params.slug);
let isContentType = '';
switch (currentArticle.value?.contentType) {
switch (article.value?.contentType) {
case 1:
isContentType = 'trang-chi-tiet-bai-viet-general';
break;
@@ -39,11 +35,11 @@ const loadPage = async () => {
isContentType = 'trang-chi-tiet-bai-viet-video';
break;
case 5:
if (currentArticle.value?.layoutType === 4) {
if (article.value?.layoutType === 4) {
isContentType = 'trang-chi-tiet-bai-viet-emagazine';
break;
}
if (currentArticle.value?.layoutType === 3) {
if (article.value?.layoutType === 3) {
isContentType = 'trang-chi-tiet-bai-viet-infographics';
break;
}
@@ -51,34 +47,42 @@ const loadPage = async () => {
isContentType = 'trang-chi-tiet-bai-viet-general';
break;
}
promises.push(store.dynamicPage.fetchPageByCode(isContentType));
await Promise.all(promises);
const dynamicPage = await store.dynamicPage.fetchPageByCode(isContentType);
return {
article,
dynamicPage
};
};
await useAsyncData('detail-article', () => loadPage());
const { data } = await useAsyncData('detail-article', () => loadPage());
const article = data.value?.article;
const dynamicPage = data.value?.dynamicPage;
const asycnCurrentPage = dynamicPage.currentPage;
const asycnSectionPublished = dynamicPage.sectionPublished;
const asycnComponentPublished = dynamicPage.componentPublished;
useSeoMeta({
title: () => currentArticle.value.title.replace(/<[^>]+>/g, ''),
description: () => currentArticle.value.intro.replace(/<[^>]+>/g, ''),
ogTitle: () => currentArticle.value.title.replace(/<[^>]+>/g, ''),
ogImage: () => currentArticle.value.thumbnail,
ogDescription: () => currentArticle.value.intro.replace(/<[^>]+>/g, ''),
title: () => article.title.replace(/<[^>]+>/g, ''),
description: () => article.intro.replace(/<[^>]+>/g, ''),
ogTitle: () => article.title.replace(/<[^>]+>/g, ''),
ogImage: () => article.thumbnail,
ogDescription: () => article.intro.replace(/<[^>]+>/g, ''),
twitterCard: () => 'summary_large_image',
})
</script>
<template>
<main class="h-screen" v-if="currentPage && currentPage.settings">
<DynamicTemplate :settings="currentPage.settings">
<template v-if="sectionPublished && sectionPublished.length > 0">
<main class="h-screen" v-if="asycnCurrentPage">
<DynamicTemplate :settings="asycnCurrentPage.settings">
<DynamicSection
v-for="(section, index) in sectionPublished"
v-for="(section, index) in asycnSectionPublished"
:key="index"
:settings="section.settings"
:content="section.content ? JSON.parse(section.content) : null"
:section="section"
/>
</template>
</DynamicTemplate>
</main>
</template>
pages/index.vue
+8 -5
View File
@@ -3,14 +3,17 @@ import ADSDefault from '@/assets/images/ads.jpg'
import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
import { useDynamicPageStore } from '~/stores/dynamic-page';
const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
const route = useRoute();
const store = reactive({
dynamicPage: useDynamicPageStore(),
});
await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', '')))
const { data } = await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', '')))
const asycnCurrentPage = data.value.currentPage;
const asycnSectionPublished = data.value.sectionPublished;
const asycnComponentPublished = data.value.componentPublished;
useHead({
title: () => 'Trang chủ',
description: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
@@ -22,10 +25,10 @@ useHead({
</script>
<template>
<main class="h-screen" v-if="currentPage">
<DynamicTemplate :settings="currentPage.settings">
<main class="h-screen" v-if="asycnCurrentPage">
<DynamicTemplate :settings="asycnCurrentPage.settings">
<DynamicSection
v-for="(section, index) in sectionPublished"
v-for="(section, index) in asycnSectionPublished"
:key="index"
:settings="section.settings"
:content="section.content ? JSON.parse(section.content) : null"
stores/articles.ts
+2
View File
@@ -18,6 +18,8 @@ export const useArticleStore = defineStore("article", () => {
const article = await $fetch(`/api/articles/get-by-slug/${slug}`)
currentArticle.value = {}
currentArticle.value = article?.item
return currentArticle;
} catch (error: any) { }
}
stores/dynamic-page.ts
+17 -22
View File
@@ -4,27 +4,6 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
const currentPage = ref<any>({});
const sectionPublished = ref<any[]>([]);
const componentPublished = ref<any[]>([]);
const step = ref<number>(0)
async function fetchPageByCode(slug: any) {
try {
const page = await $fetch(`/api/dynamic-page/get-by-code/${slug}`)
currentPage.value = {}
currentPage.value = page
setSectionPublished();
setComponentPublished();
} catch (error: any) {}
}
async function fetchPageById(id: string | number) {
try {
const { data } = await useFetch(`/api/dynamic-page/get-by-id/${id}`)
currentPage.value = {}
currentPage.value = data.value
} catch (error: any) {}
}
const setSectionPublished = () => {
const exsitsTemplate = ['None']
@@ -64,13 +43,29 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
setComponentPublished();
};
async function fetchPageByCode(slug: any) {
try {
const page = await $fetch(`/api/dynamic-page/get-by-code/${slug}`)
currentPage.value = {}
currentPage.value = page
setSectionPublished();
setComponentPublished();
return {
currentPage,
sectionPublished,
componentPublished
}
} catch (error: any) {}
}
return {
currentPage,
sectionPublished,
componentPublished,
fetchPageByCode,
fetchPageById,
setSectionPublished,
setComponentPublished,
setDataQuery,