262 lines
6.7 KiB
Markdown
262 lines
6.7 KiB
Markdown
# 项目页面API对接与代码片段预览功能实施计划
|
||
|
||
## 一、页面API对接状态分析
|
||
|
||
### 已对接页面
|
||
1. **首页（Home.vue）**：已对接fetchWorks和fetchPosts API
|
||
2. **作品列表（Works.vue）**：已对接fetchWorks API
|
||
3. **作品详情（WorkDetail.vue）**：已对接fetchWork API
|
||
|
||
### 未对接页面
|
||
1. **博客列表（Blog.vue）**：使用静态数据
|
||
2. **服务（Services.vue）**：使用静态数据，包括客户评论、合作伙伴等
|
||
3. **代码片段（Snippets.vue）**：使用静态数据
|
||
4. **关于（About.vue）**：使用静态数据
|
||
|
||
## 二、API对接实施计划
|
||
|
||
### 1. 博客列表页（Blog.vue）
|
||
- **API端点**：`GET /api/posts`
|
||
- **请求方法**：GET
|
||
- **参数**：无
|
||
- **预期响应格式**：
|
||
```json
|
||
[
|
||
{
|
||
"id": "string",
|
||
"title": "string",
|
||
"category": "string",
|
||
"date": "string",
|
||
"excerpt": "string",
|
||
"content": "string"
|
||
}
|
||
]
|
||
```
|
||
- **实施内容**：
|
||
- 引入fetchPosts API
|
||
- 替换静态数据为API调用
|
||
- 添加加载状态和错误处理
|
||
|
||
### 2. 博客详情页（待创建）
|
||
- **API端点**：`GET /api/posts/:id`
|
||
- **请求方法**：GET
|
||
- **参数**：id（路径参数）
|
||
- **预期响应格式**：
|
||
```json
|
||
{
|
||
"id": "string",
|
||
"title": "string",
|
||
"category": "string",
|
||
"date": "string",
|
||
"content": "string"
|
||
}
|
||
```
|
||
- **实施内容**：
|
||
- 创建BlogDetail.vue页面
|
||
- 实现API调用和数据展示
|
||
- 添加加载状态和错误处理
|
||
|
||
### 3. 服务页（Services.vue）
|
||
- **API端点**：
|
||
- `GET /api/testimonials`（客户评论）
|
||
- `GET /api/partners`（合作伙伴）
|
||
- **请求方法**：GET
|
||
- **参数**：无
|
||
- **预期响应格式**：
|
||
```json
|
||
// 客户评论
|
||
[
|
||
{
|
||
"id": "string",
|
||
"content": "string",
|
||
"author": "string",
|
||
"avatar": "string"
|
||
}
|
||
]
|
||
|
||
// 合作伙伴
|
||
[
|
||
{
|
||
"id": "string",
|
||
"name": "string",
|
||
"logo": "string"
|
||
}
|
||
]
|
||
```
|
||
- **实施内容**：
|
||
- 引入API调用获取客户评论和合作伙伴数据
|
||
- 替换静态数据为API调用
|
||
- 添加加载状态和错误处理
|
||
|
||
### 4. 代码片段页（Snippets.vue）
|
||
- **API端点**：`GET /api/snippets`
|
||
- **请求方法**：GET
|
||
- **参数**：无
|
||
- **预期响应格式**：
|
||
```json
|
||
[
|
||
{
|
||
"id": "string",
|
||
"title": "string",
|
||
"code": "string",
|
||
"type": "string"
|
||
}
|
||
]
|
||
```
|
||
- **实施内容**：
|
||
- 引入fetchSnippets API
|
||
- 替换静态数据为API调用
|
||
- 添加加载状态和错误处理
|
||
|
||
### 5. 关于页（About.vue）
|
||
- **API端点**：`GET /api/profile`
|
||
- **请求方法**：GET
|
||
- **参数**：无
|
||
- **预期响应格式**：
|
||
```json
|
||
{
|
||
"id": "string",
|
||
"name": "string",
|
||
"avatar": "string",
|
||
"location": "string",
|
||
"bio": "string",
|
||
"contact": {
|
||
"email": "string",
|
||
"wechat": "string"
|
||
},
|
||
"techStack": ["string"]
|
||
}
|
||
```
|
||
- **实施内容**：
|
||
- 引入fetchProfile API
|
||
- 替换静态数据为API调用
|
||
- 添加加载状态和错误处理
|
||
|
||
## 三、代码片段效果预览功能实现
|
||
|
||
### 1. 功能需求
|
||
- 允许用户输入或选择代码片段后，通过可视化方式实时预览代码运行效果
|
||
- 设计直观的预览界面
|
||
- 支持常见编程语言的语法高亮
|
||
- 实现代码输入与预览效果的同步更新
|
||
- 添加必要的错误处理机制以应对无效代码输入
|
||
|
||
### 2. 技术实现方案
|
||
|
||
#### （1）组件设计
|
||
- 创建一个新的CodePreview.vue组件，用于实现代码预览功能
|
||
- 组件包含：
|
||
- 代码编辑器区域（支持语法高亮）
|
||
- 预览效果区域
|
||
- 语言选择器
|
||
- 错误提示区域
|
||
|
||
#### （2）技术栈
|
||
- 使用Tailwind CSS进行样式设计
|
||
- 使用highlight.js或prism.js实现语法高亮
|
||
- 使用iframe或动态DOM操作实现代码预览
|
||
- 支持HTML、CSS、JavaScript等常见编程语言
|
||
|
||
#### （3）实现步骤
|
||
1. **创建CodePreview组件**
|
||
- 设计组件布局和样式
|
||
- 实现代码编辑器和预览区域
|
||
- 添加语言选择功能
|
||
|
||
2. **实现语法高亮**
|
||
- 集成highlight.js或prism.js
|
||
- 支持多种编程语言
|
||
|
||
3. **实现代码预览功能**
|
||
- 使用iframe沙箱模式实现安全预览
|
||
- 实现代码输入与预览效果的同步更新
|
||
- 处理不同类型代码的预览逻辑
|
||
|
||
4. **添加错误处理机制**
|
||
- 捕获代码执行错误
|
||
- 显示友好的错误提示
|
||
- 防止恶意代码执行
|
||
|
||
5. **集成到现有页面**
|
||
- 在SnippetModal组件中集成CodePreview组件
|
||
- 支持从代码片段列表选择代码进行预览
|
||
|
||
### 3. 组件结构
|
||
```vue
|
||
<template>
|
||
<div class="code-preview-container">
|
||
<!-- 语言选择器 -->
|
||
<div class="language-selector">
|
||
<select v-model="selectedLanguage" @change="handleLanguageChange">
|
||
<option value="html">HTML</option>
|
||
<option value="css">CSS</option>
|
||
<option value="javascript">JavaScript</option>
|
||
<!-- 其他语言选项 -->
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 代码编辑器和预览区域 -->
|
||
<div class="preview-layout">
|
||
<!-- 代码编辑器 -->
|
||
<div class="code-editor">
|
||
<pre><code :class="`language-${selectedLanguage}`" v-html="highlightedCode"></code></pre>
|
||
<textarea
|
||
v-model="code"
|
||
@input="handleCodeChange"
|
||
:class="`language-${selectedLanguage}`"
|
||
placeholder="输入或粘贴代码..."
|
||
></textarea>
|
||
</div>
|
||
|
||
<!-- 预览效果 -->
|
||
<div class="preview-area">
|
||
<iframe
|
||
ref="previewFrame"
|
||
sandbox="allow-scripts allow-same-origin"
|
||
title="Code Preview"
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 错误提示 -->
|
||
<div v-if="error" class="error-message">
|
||
<p>{{ error }}</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
## 四、实施步骤
|
||
|
||
1. **实现页面API对接**
|
||
- 博客列表页（Blog.vue）
|
||
- 服务页（Services.vue）
|
||
- 代码片段页（Snippets.vue）
|
||
- 关于页（About.vue）
|
||
|
||
2. **实现代码片段效果预览功能**
|
||
- 创建CodePreview组件
|
||
- 集成语法高亮库
|
||
- 实现代码预览逻辑
|
||
- 添加错误处理
|
||
- 集成到SnippetModal组件
|
||
|
||
3. **测试与优化**
|
||
- 测试所有API对接是否正常
|
||
- 测试代码片段预览功能
|
||
- 优化性能和用户体验
|
||
|
||
## 五、预期成果
|
||
|
||
1. **所有页面API对接完成**：博客列表、服务、代码片段和关于页面均使用真实API数据
|
||
2. **代码片段预览功能实现**：
|
||
- 支持多种编程语言的语法高亮
|
||
- 实时预览代码运行效果
|
||
- 安全的沙箱环境
|
||
- 友好的错误提示
|
||
3. **提升用户体验**：
|
||
- 加载状态和错误处理
|
||
- 流畅的交互体验
|
||
- 直观的界面设计
|
||
|
||
通过以上实施计划，将完成所有页面的API对接和代码片段预览功能，提升项目的完整性和用户体验。 |