diff --git a/frontend/admin/.env b/frontend/admin/.env new file mode 100644 index 0000000..6eb63ea --- /dev/null +++ b/frontend/admin/.env @@ -0,0 +1,4 @@ +NODE_ENV=development +VUE_APP_API_URL=/api +VUE_APP_TITLE=趣云CMS(开发模式) + diff --git a/frontend/admin/README.md b/frontend/admin/README.md index 1511959..1dd9f72 100644 --- a/frontend/admin/README.md +++ b/frontend/admin/README.md @@ -1,5 +1,32 @@ -# Vue 3 + Vite +# 趣云管理后台 -This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` + + diff --git a/frontend/admin/package.json b/frontend/admin/package.json index da3d228..9558e78 100644 --- a/frontend/admin/package.json +++ b/frontend/admin/package.json @@ -10,9 +10,11 @@ }, "dependencies": { "@tailwindcss/vite": "^4.0.17", + "axios": "^1.8.4", "daisyui": "^5.0.9", "tailwindcss": "^4.0.17", - "vue": "^3.5.13" + "vue": "^3.5.13", + "vue-router": "4" }, "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", diff --git a/frontend/admin/posts.html b/frontend/admin/posts.html new file mode 100644 index 0000000..db734cd --- /dev/null +++ b/frontend/admin/posts.html @@ -0,0 +1,231 @@ + + + + + + 文章列表 - 管理后台 + + + +
+
+

文章列表

+
+ +
+ + +
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 标题 + + 价格 + + 发布时间 + + 发布状态 + + 媒体类型 + + 观看次数 + + 操作 +
+
+
+ 文章缩略图 +
+
+
如何高效学习编程
+
作者: 张三
+
+
+ 		+
¥29.99
+ 		+
2023-06-15 14:30
+ 		+ + 已发布 + + +
文章, 视频
+ 		+ 1,254 + +
+ + + +
+
+
+
+ 文章缩略图 +
+
+
前端开发最佳实践
+
作者: 李四
+
+
+ 		+
¥49.99
+ 		+
2023-06-10 09:15
+ 		+ + 草稿 + + +
文章
+ 		+ 789 + +
+ + + +
+
+
+
+ 文章缩略图 +
+
+
数据分析入门指南
+
作者: 王五
+
+
+ 		+
¥0.00
+ 		+
2023-06-05 16:45
+ 		+ + 已下架 + + +
文章, 音频
+ 		+ 2,567 + +
+ + + +
+
+
+
+
+
+ + 上一页 + + + 下一页 + +
+ +
+
+
+
+ + diff --git a/frontend/admin/src/App.vue b/frontend/admin/src/App.vue index 1aadd3e..1939366 100644 --- a/frontend/admin/src/App.vue +++ b/frontend/admin/src/App.vue @@ -1,9 +1,42 @@ \ No newline at end of file +
+
+
+
+

Hello

+
+
+
+
+ + 文章管理 + + + 媒体库 + +
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/frontend/admin/src/api/httpClient.js b/frontend/admin/src/api/httpClient.js new file mode 100644 index 0000000..5051bf1 --- /dev/null +++ b/frontend/admin/src/api/httpClient.js @@ -0,0 +1,48 @@ +import axios from 'axios'; + +// Create axios instance with default config +const httpClient = axios.create({ + baseURL: '/api', + timeout: 10000, + headers: { + 'Content-Type': 'application/json', + } +}); + +// Request interceptor +httpClient.interceptors.request.use( + config => { + // You can add auth token here if needed + // const token = localStorage.getItem('token'); + // if (token) { + // config.headers.Authorization = `Bearer ${token}`; + // } + return config; + }, + error => { + return Promise.reject(error); + } +); + +// Response interceptor +httpClient.interceptors.response.use( + response => { + return response.data; + }, + error => { + // Handle HTTP errors here + if (error.response) { + // Server responded with error status + console.error('API Error:', error.response.status, error.response.data); + } else if (error.request) { + // Request made but no response received + console.error('API Error: No response received', error.request); + } else { + // Something else happened + console.error('API Error:', error.message); + } + return Promise.reject(error); + } +); + +export default httpClient; diff --git a/frontend/admin/src/api/mockService.js b/frontend/admin/src/api/mockService.js new file mode 100644 index 0000000..d3022ef --- /dev/null +++ b/frontend/admin/src/api/mockService.js @@ -0,0 +1,31 @@ +/** + * Mock service that provides fake data for development + */ +export const mockService = { + /** + * Get mock count of posts + * @returns {Promise<{count: number}>} + */ + getPostsCount() { + console.log('Using MOCK service for posts count'); + return Promise.resolve({ count: 42 }); + }, + + /** + * Get mock count of media items + * @returns {Promise<{count: number}>} + */ + getMediasCount() { + console.log('Using MOCK service for medias count'); + return Promise.resolve({ count: 18 }); + }, + + /** + * Get all mock statistics in a single call + * @returns {Promise<{posts: number, medias: number}>} + */ + getAllStatistics() { + console.log('Using MOCK service for all statistics'); + return Promise.resolve({ posts: 42, medias: 18 }); + } +}; diff --git a/frontend/admin/src/api/statisticsService.js b/frontend/admin/src/api/statisticsService.js new file mode 100644 index 0000000..a971fe1 --- /dev/null +++ b/frontend/admin/src/api/statisticsService.js @@ -0,0 +1,67 @@ +import httpClient from './httpClient'; +import { mockService } from './mockService'; + +// Simplify environment detection and ensure the console log works +let isDevelopment = true; // Default to development mode + +// Try different ways to detect environment +try { + if (typeof process !== 'undefined' && process.env) { + console.log('Detected process.env, NODE_ENV:', process.env.NODE_ENV); + isDevelopment = process.env.NODE_ENV === 'development'; + } else if (typeof import.meta !== 'undefined' && import.meta.env) { + console.log('Detected import.meta.env, MODE:', import.meta.env.MODE); + isDevelopment = import.meta.env.MODE === 'development'; + } else { + console.log('No environment variables detected, defaulting to development mode'); + } +} catch (error) { + console.error('Error detecting environment:', error); +} + +// Force console log with timeout to ensure it runs after other initialization +setTimeout(() => { + console.log('%cCurrent environment: ' + (isDevelopment ? 'DEVELOPMENT' : 'PRODUCTION'), + 'background: #222; color: #bada55; font-size: 16px; padding: 4px;'); +}, 0); + +// Use the appropriate service based on environment +const apiService = isDevelopment ? mockService : { + getPostsCount() { + return httpClient.get('/posts/count'); + }, + + getMediasCount() { + return httpClient.get('/medias/count'); + }, + + getAllStatistics() { + return httpClient.get('/statistics'); + } +}; + +export const statisticsService = { + /** + * Get count of posts + * @returns {Promise<{count: number}>} + */ + getPostsCount() { + return apiService.getPostsCount(); + }, + + /** + * Get count of media items + * @returns {Promise<{count: number}>} + */ + getMediasCount() { + return apiService.getMediasCount(); + }, + + /** + * Get all statistics in a single call + * @returns {Promise<{posts: number, medias: number}>} + */ + getAllStatistics() { + return apiService.getAllStatistics(); + } +}; diff --git a/frontend/admin/src/main.js b/frontend/admin/src/main.js index 2425c0f..df3c224 100644 --- a/frontend/admin/src/main.js +++ b/frontend/admin/src/main.js @@ -1,5 +1,16 @@ -import { createApp } from 'vue' -import './style.css' -import App from './App.vue' +import { createApp } from 'vue'; +import App from './App.vue'; +import { router } from './router'; +import './style.css'; -createApp(App).mount('#app') +// Log environment information during app initialization +console.log('=== Environment Information ==='); +console.log('NODE_ENV:', process.env.NODE_ENV); +if (typeof import.meta !== 'undefined') { + console.log('Vite MODE:', import.meta.env.MODE); + console.log('Vite DEV:', import.meta.env.DEV); + console.log('Vite PROD:', import.meta.env.PROD); +} +console.log('============================='); + +createApp(App).use(router).mount('#app'); diff --git a/frontend/admin/src/pages/HomePage.vue b/frontend/admin/src/pages/HomePage.vue new file mode 100644 index 0000000..fac9492 --- /dev/null +++ b/frontend/admin/src/pages/HomePage.vue @@ -0,0 +1,135 @@ + + + + + diff --git a/frontend/admin/src/pages/MediasPage.vue b/frontend/admin/src/pages/MediasPage.vue new file mode 100644 index 0000000..bc7375e --- /dev/null +++ b/frontend/admin/src/pages/MediasPage.vue @@ -0,0 +1,481 @@ + + + + + \ No newline at end of file diff --git a/frontend/admin/src/pages/PostsPage.vue b/frontend/admin/src/pages/PostsPage.vue new file mode 100644 index 0000000..a879735 --- /dev/null +++ b/frontend/admin/src/pages/PostsPage.vue @@ -0,0 +1,341 @@ + + + \ No newline at end of file diff --git a/frontend/admin/src/router.js b/frontend/admin/src/router.js new file mode 100644 index 0000000..a686a8f --- /dev/null +++ b/frontend/admin/src/router.js @@ -0,0 +1,26 @@ +import { createRouter, createWebHistory } from 'vue-router'; + +// Define your routes here +const routes = [ + { + path: '/', + name: 'Home', + component: () => import('./pages/HomePage.vue') + }, + { + path: '/posts', + name: 'Posts', + component: () => import('./pages/PostsPage.vue') + }, + { + path: '/medias', + name: 'Medias', + component: () => import('./pages/MediasPage.vue') + } +]; + +// Create the router instance +export const router = createRouter({ + history: createWebHistory(), + routes +}); diff --git a/frontend/admin/vite.config.js b/frontend/admin/vite.config.js index 1bda050..c708ed1 100644 --- a/frontend/admin/vite.config.js +++ b/frontend/admin/vite.config.js @@ -1,8 +1,20 @@ -import tailwindcss from '@tailwindcss/vite' -import vue from '@vitejs/plugin-vue' -import { defineConfig } from 'vite' +import tailwindcss from '@tailwindcss/vite'; +import vue from '@vitejs/plugin-vue'; +import { resolve } from 'path'; +import { defineConfig } from 'vite'; -// https://vite.dev/config/ export default defineConfig({ - plugins: [vue(), tailwindcss()], -}) + plugins: [ + vue(), + tailwindcss(), + ], + resolve: { + alias: { + '@': resolve(__dirname, 'src') + } + }, + server: { + port: 3000, + open: true + } +});