From 9e8d0f0e11d3261cd6c745a2bdeae806d82fbb19 Mon Sep 17 00:00:00 2001 From: aaron <> Date: Wed, 16 Apr 2025 22:27:39 +0800 Subject: [PATCH] first commit --- .env | 2 + .env.production | 2 + .gitignore | 38 ++++++ Dockerfile | 32 +++++ README.md | 67 +++++++++++ docker-compose.yml | 17 +++ index.html | 13 ++ nginx.conf | 37 ++++++ package.json | 21 ++++ src/App.vue | 84 +++++++++++++ src/api/index.js | 38 ++++++ src/assets/main.css | 69 +++++++++++ src/main.js | 9 ++ src/router/index.js | 22 ++++ src/views/Home.vue | 82 +++++++++++++ src/views/TryonHistory.vue | 236 +++++++++++++++++++++++++++++++++++++ vite.config.js | 25 ++++ 17 files changed, 794 insertions(+) create mode 100644 .env create mode 100644 .env.production create mode 100644 .gitignore create mode 100644 Dockerfile create mode 100644 README.md create mode 100644 docker-compose.yml create mode 100644 index.html create mode 100644 nginx.conf create mode 100644 package.json create mode 100644 src/App.vue create mode 100644 src/api/index.js create mode 100644 src/assets/main.css create mode 100644 src/main.js create mode 100644 src/router/index.js create mode 100644 src/views/Home.vue create mode 100644 src/views/TryonHistory.vue create mode 100644 vite.config.js diff --git a/.env b/.env new file mode 100644 index 0000000..eb0935c --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +VITE_APP_TITLE=美搭 +VITE_APP_API_URL=http://127.0.0.1:8000 \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..243ed55 --- /dev/null +++ b/.env.production @@ -0,0 +1,2 @@ +VITE_APP_TITLE=美搭 +VITE_APP_API_URL=https://meida-api.beefast.co \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a41126a --- /dev/null +++ b/.gitignore @@ -0,0 +1,38 @@ +# 依赖包 +node_modules +npm-debug.log +yarn-debug.log +yarn-error.log +package-lock.json + +# 打包输出 +/dist +/build + +# 本地环境文件 +.env.local +.env.*.local + +# 日志文件 +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# 编辑器目录和文件 +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +# 操作系统文件 +.DS_Store +Thumbs.db + +# 测试覆盖率 +/coverage \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..92a19c6 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,32 @@ +# 构建阶段 +FROM node:18-alpine as build-stage + +# 设置工作目录 +WORKDIR /app + +# 复制package.json和package-lock.json +COPY package*.json ./ + +# 安装依赖 +RUN npm install + +# 复制项目文件 +COPY . . + +# 构建应用 +RUN npm run build + +# 生产阶段 +FROM nginx:stable-alpine as production-stage + +# 将构建好的文件复制到nginx目录 +COPY --from=build-stage /app/dist /usr/share/nginx/html + +# 复制nginx配置文件 +COPY nginx.conf /etc/nginx/conf.d/default.conf + +# 暴露80端口 +EXPOSE 80 + +# 启动nginx +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..9478347 --- /dev/null +++ b/README.md @@ -0,0 +1,67 @@ +# 美搭项目展示平台 + +这是一个基于Vue 3开发的美搭时尚穿搭项目展示平台，用于展示用户的穿搭历史和效果。 + +## 功能特点 + +- 展示用户的穿搭历史记录 +- 查看搭配效果和专业评分 +- 响应式设计，适配各种设备 + +## 开发技术 + +- Vue 3 +- Vue Router 4 +- Axios +- Vite + +## 安装与运行 + +### 安装依赖 + +```bash +npm install +``` + +### 启动开发服务器 + +```bash +npm run dev +``` + +### 构建生产版本 + +```bash +npm run build +``` + +### 预览生产构建 + +```bash +npm run serve +``` + +## 环境配置 + +项目配置了两个环境的API接口： + +- 开发环境：http://127.0.0.1:8000 +- 生产环境：https://meida-api.beefast.co/ + +## 项目结构 + +``` +meida-portal/ +├── public/ # 静态资源 +├── src/ # 源代码 +│ ├── api/ # API接口 +│ ├── assets/ # 资源文件 +│ ├── components/ # 通用组件 +│ ├── router/ # 路由配置 +│ ├── views/ # 页面视图 +│ ├── App.vue # 根组件 +│ └── main.js # 入口文件 +├── index.html # HTML模板 +├── vite.config.js # Vite配置 +└── package.json # 项目配置 +``` \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..d718680 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,17 @@ +version: '3' + +services: + meida-portal: + build: + context: . + dockerfile: Dockerfile + container_name: meida-portal + ports: + - "80:80" + restart: always + networks: + - meida-network + +networks: + meida-network: + driver: bridge \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1faadbc --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + 美搭 - 时尚穿搭展示平台 + + +
+ + + \ No newline at end of file diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..ae6b00b --- /dev/null +++ b/nginx.conf @@ -0,0 +1,37 @@ +server { + listen 80; + server_name localhost; + + #access_log /var/log/nginx/host.access.log main; + + location / { + root /usr/share/nginx/html; + index index.html index.htm; + try_files $uri $uri/ /index.html; + } + + # 开发环境API代理配置 + # location /api/ { + # proxy_pass http://127.0.0.1:8000/; + # proxy_set_header Host $host; + # proxy_set_header X-Real-IP $remote_addr; + # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + # proxy_set_header X-Forwarded-Proto $scheme; + # } + + # 生产环境API代理配置 + # 如需使用生产环境API，请取消下面的注释并注释上面的配置 + # location /api/ { + # proxy_pass https://meida-api.beefast.co/; + # proxy_set_header Host $host; + # proxy_set_header X-Real-IP $remote_addr; + # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + # proxy_set_header X-Forwarded-Proto $scheme; + # } + + # redirect server error pages to the static page /50x.html + error_page 500 502 503 504 /50x.html; + location = /50x.html { + root /usr/share/nginx/html; + } +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..58eeddb --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "meida-portal", + "version": "1.0.0", + "description": "美搭项目展示平台", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview" + }, + "keywords": ["vue", "meida", "fashion"], + "author": "", + "license": "ISC", + "dependencies": { + "@vitejs/plugin-vue": "^5.2.3", + "axios": "^1.8.4", + "vite": "^6.3.0", + "vue": "^3.5.13", + "vue-router": "^4.5.0" + } +} diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..01e3a50 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,84 @@ + + + + + \ No newline at end of file diff --git a/src/api/index.js b/src/api/index.js new file mode 100644 index 0000000..7c1bdf0 --- /dev/null +++ b/src/api/index.js @@ -0,0 +1,38 @@ +import axios from 'axios' + +// 创建axios实例 +const api = axios.create({ + baseURL: import.meta.env.PROD ? 'https://meida-api.beefast.co/' : 'http://127.0.0.1:8000/', + timeout: 10000, + headers: { + 'Content-Type': 'application/json' + } +}) + +// 响应拦截器 +api.interceptors.response.use( + response => { + // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 + if (response.status === 200) { + return response.data + } + // 否则的话抛出错误 + return Promise.reject(new Error('网络请求错误')) + }, + error => { + let message = error.message || '请求失败' + if (error.response && error.response.data) { + message = error.response.data.message || message + } + console.error(`API错误: ${message}`) + return Promise.reject(error) + } +) + +// 定义API方法 +export default { + // 获取所有试穿历史 + getAllTryonHistories() { + return api.get('/api/v1/tryon/histories/all') + } +} \ No newline at end of file diff --git a/src/assets/main.css b/src/assets/main.css new file mode 100644 index 0000000..3fb1496 --- /dev/null +++ b/src/assets/main.css @@ -0,0 +1,69 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 16px; + color: #f0f0f0; + line-height: 1.5; + background-color: #181818; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.card { + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + overflow: hidden; + background-color: #252525; + transition: transform 0.3s ease; +} + +.card:hover { + transform: translateY(-5px); +} + +.btn { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: 500; + transition: all 0.3s ease; +} + +.btn-primary { + background-color: #fe2c55; + color: white; +} + +.btn-primary:hover { + background-color: #e6254d; +} + +.text-center { + text-align: center; +} + +.mt-10 { + margin-top: 10px; +} + +.mt-20 { + margin-top: 20px; +} + +.mb-10 { + margin-bottom: 10px; +} + +.mb-20 { + margin-bottom: 20px; +} \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..4d066c3 --- /dev/null +++ b/src/main.js @@ -0,0 +1,9 @@ +import { createApp } from 'vue' +import App from './App.vue' +import router from './router' +import './assets/main.css' + +const app = createApp(App) + +app.use(router) +app.mount('#app') \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..0a37891 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,22 @@ +import { createRouter, createWebHistory } from 'vue-router' +import Home from '../views/Home.vue' + +const routes = [ + { + path: '/', + name: 'home', + component: Home + }, + { + path: '/tryon-history', + name: 'tryon-history', + component: () => import('../views/TryonHistory.vue') + } +] + +const router = createRouter({ + history: createWebHistory(), + routes +}) + +export default router \ No newline at end of file diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..4657705 --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,82 @@ + + + + + \ No newline at end of file diff --git a/src/views/TryonHistory.vue b/src/views/TryonHistory.vue new file mode 100644 index 0000000..cb76fb0 --- /dev/null +++ b/src/views/TryonHistory.vue @@ -0,0 +1,236 @@ + + + + + \ No newline at end of file diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..60b2cc0 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,25 @@ +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import { fileURLToPath } from 'url'; +import { dirname, resolve } from 'path'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +export default defineConfig({ + plugins: [vue()], + resolve: { + alias: { + '@': resolve(__dirname, './src'), + }, + }, + server: { + proxy: { + '/api': { + target: 'http://127.0.0.1:8000', + changeOrigin: true, + rewrite: (path) => path + } + } + } +}); \ No newline at end of file