南瑾i1. 项目背景与核心价值
三端问卷调查系统是当前企业调研、学术研究和市场分析中不可或缺的工具。传统单端系统存在数据同步困难、操作体验割裂等问题，而基于ThinkPHP+Vue的三端协同方案完美解决了这些痛点。
我去年为某连锁餐饮品牌实施的这套系统，实现了总部后台、门店Pad端和顾客手机端的无缝衔接。仅用两周时间就完成了3000+门店的菜品满意度调研，数据实时汇总分析效率提升80%。这种技术组合带来的优势主要体现在：
- 后端ThinkPHP提供稳定高效的数据处理和API支持
- 前端Vue实现灵活的多端界面适配
- 三端数据实时同步确保调研结果准确性
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 整体技术选型
系统采用分层架构设计，这是我经过多个项目验证的稳定方案：
code复制[浏览器/移动端]
↑
[Vue前端层]
↑
[RESTful API]
↑
[ThinkPHP服务层]
↑
[MySQL数据库]
关键组件版本选择：
- ThinkPHP 6.0（LTS版本）
- Vue 2.6 + Element UI 2.15
- Axios 0.21（HTTP请求库）
- ECharts 5.0（数据可视化）
2.2 数据库设计要点
问卷系统的核心表结构设计需要特别注意关联关系：
sql复制CREATE TABLE `surveys` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL COMMENT '问卷标题',
`description` text COMMENT '问卷说明',
`start_time` datetime DEFAULT NULL COMMENT '开始时间',
`end_time` datetime DEFAULT NULL COMMENT '结束时间',
`status` tinyint(1) DEFAULT '0' COMMENT '0未发布 1进行中 2已结束',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 问题表
CREATE TABLE `questions` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`survey_id` int(11) NOT NULL,
`content` text NOT NULL COMMENT '问题内容',
`type` enum('radio','checkbox','text','rate') NOT NULL COMMENT '问题类型',
`is_required` tinyint(1) DEFAULT '0' COMMENT '是否必填',
`sort` int(11) DEFAULT '0' COMMENT '排序',
PRIMARY KEY (`id`),
KEY `survey_id` (`survey_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
重要提示：实际项目中务必添加适当的索引，特别是survey_id、user_id等高频查询字段
3. 核心功能实现
3.1 问卷创建模块
后台管理端采用Vue+Element UI实现拖拽式问卷设计：
vue复制<template>
<div class="question-editor">
<el-draggable v-model="questions" @end="handleDragEnd">
<div v-for="(q,index) in questions" :key="q.tempId">
<question-item
:question="q"
@delete="removeQuestion(index)"
@change="updateQuestion(index, $event)"/>
</div>
</el-draggable>
<el-button @click="addQuestion('radio')">添加单选题</el-button>
<el-button @click="addQuestion('checkbox')">添加多选题</el-button>
</div>
</template>
<script>
export default {
data() {
return {
questions: []
}
},
methods: {
addQuestion(type) {
this.questions.push({
tempId: Date.now(),
type,
content: '',
options: type === 'text' ? [] : ['选项1', '选项2'],
isRequired: true
})
},
handleDragEnd() {
// 更新排序逻辑
this.questions.forEach((q,index) => {
q.sort = index
})
}
}
}
</script>
3.2 三端数据同步方案
实现实时数据同步的三种技术方案对比：
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 轮询 | 实现简单 | 资源浪费 | 低频更新场景 |
| WebSocket | 实时性好 | 服务器压力大 | 高实时性要求 |
| 长轮询 | 折中方案 | 实现复杂 | 一般实时需求 |
我们最终采用混合方案：
- 管理端：WebSocket实时推送
- 移动端：智能轮询（根据网络状况动态调整间隔）
- 后台服务：消息队列削峰
ThinkPHP中的WebSocket服务实现：
php复制class WebSocketController
{
public function onMessage($connection, $data)
{
$surveyId = $data['survey_id'] ?? 0;
// 验证问卷权限
if (!$this->checkAccess($connection, $surveyId)) {
return $connection->send(json_encode([
'code' => 403,
'msg' => '无访问权限'
]));
}
// 处理不同类型消息
switch ($data['type']) {
case 'join':
$this->joinSurvey($connection, $surveyId);
break;
case 'answer':
$this->saveAnswer($data);
$this->broadcastUpdate($surveyId);
break;
}
}
private function broadcastUpdate($surveyId)
{
$stats = SurveyModel::getStats($surveyId);
$message = json_encode([
'type' => 'stats_update',
'data' => $stats
]);
foreach ($this->connections as $conn) {
if (in_array($surveyId, $conn->surveyIds)) {
$conn->send($message);
}
}
}
}
4. 性能优化实践
4.1 前端性能提升技巧
- 组件懒加载：
javascript复制const QuestionEditor = () => import('./QuestionEditor.vue')
const ChartDisplay = () => import('./ChartDisplay.vue')
- API请求优化：
javascript复制// 使用axios拦截器实现自动重试
axios.interceptors.response.use(null, (error) => {
const config = error.config;
if (!config || !config.retry) return Promise.reject(error);
config.__retryCount = config.__retryCount || 0;
if (config.__retryCount >= config.retry) {
return Promise.reject(error);
}
config.__retryCount += 1;
return new Promise(resolve => {
setTimeout(() => resolve(), config.retryDelay || 1000);
}).then(() => axios(config));
});
4.2 后端缓存策略
采用多级缓存方案：
- 热点数据使用Redis缓存
- 问卷模板使用文件缓存
- 统计结果使用内存表
ThinkPHP缓存配置示例：
php复制// 问卷基础信息缓存
$survey = Cache::remember('survey_'.$id, 3600, function() use ($id) {
return Survey::with(['questions.options'])
->find($id);
});
// 实时统计使用更短缓存
$stats = Cache::remember('stats_'.$id, 60, function() use ($id) {
return Answer::where('survey_id', $id)
->selectRaw('count(*) as total, question_id')
->groupBy('question_id')
->get();
});
5. 安全防护措施
5.1 常见攻击防护
- XSS防护：
php复制// 入库前过滤
$content = Input::get('content', '', 'htmlpurifier');
// 输出时转义
{{ question.content | escape }}
- CSRF防护：
javascript复制// axios全局配置
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;
- 接口限流：
php复制// 使用中间件限制答题接口
class RateLimitMiddleware
{
public function handle($request, $next)
{
$key = 'answer_limit_'.$request->ip();
$count = Redis::incr($key);
Redis::expire($key, 60);
if ($count > 30) {
return response()->json([
'code' => 429,
'msg' => '操作过于频繁'
], 429);
}
return $next($request);
}
}
5.2 数据权限控制
实现基于RBAC的问卷权限管理：
php复制class SurveyPolicy
{
public function view(User $user, Survey $survey)
{
// 管理员可查看所有
if ($user->isAdmin()) return true;
// 创建者可查看自己的问卷
if ($survey->user_id == $user->id) return true;
// 部门共享问卷
if ($survey->department_id
&& $survey->department_id == $user->department_id) {
return true;
}
return false;
}
}
6. 移动端适配方案
6.1 响应式布局实现
使用Vue的响应式特性配合CSS媒体查询：
css复制/* 手机端样式 */
@media screen and (max-width: 768px) {
.question-item {
padding: 10px;
margin-bottom: 15px;
}
.options-list {
grid-template-columns: 1fr;
}
}
/* Pad端样式 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.options-list {
grid-template-columns: repeat(2, 1fr);
}
}
6.2 移动端特殊处理
- 手势滑动支持：
javascript复制const touch = {
startX: 0,
startY: 0,
handleTouchStart(e) {
this.startX = e.touches[0].clientX
this.startY = e.touches[0].clientY
},
handleTouchEnd(e, callback) {
const deltaX = e.changedTouches[0].clientX - this.startX
const deltaY = e.changedTouches[0].clientY - this.startY
if (Math.abs(deltaY) < 50 && deltaX > 100) {
callback('swipe-right')
}
}
}
- 离线答题功能：
javascript复制// 使用localStorage暂存答案
function saveAnswerLocal(surveyId, answers) {
const key = `survey_${surveyId}_answers`
localStorage.setItem(key, JSON.stringify(answers))
}
// 网络恢复后同步
function syncLocalAnswers() {
Object.keys(localStorage).forEach(key => {
if (key.startsWith('survey_') && key.endsWith('_answers')) {
const surveyId = key.replace(/survey_|_answers/g, '')
const answers = JSON.parse(localStorage.getItem(key))
api.submitAnswers(surveyId, answers).then(() => {
localStorage.removeItem(key)
})
}
})
}
7. 项目部署实践
7.1 服务器环境配置
推荐使用Docker Compose部署：
yaml复制version: '3'
services:
app:
build: .
ports:
- "8000:8000"
volumes:
- .:/var/www/html
depends_on:
- redis
- mysql
redis:
image: redis:alpine
ports:
- "6379:6379"
volumes:
- redis_data:/data
mysql:
image: mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
MYSQL_DATABASE: survey
volumes:
- mysql_data:/var/lib/mysql
ports:
- "3306:3306"
volumes:
redis_data:
mysql_data:
7.2 持续集成方案
GitLab CI配置示例：
yaml复制stages:
- test
- build
- deploy
phpunit:
stage: test
image: php:7.4
script:
- apt-get update && apt-get install -y libzip-dev
- docker-php-ext-install zip pdo_mysql
- curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
- composer install
- vendor/bin/phpunit
build-frontend:
stage: build
image: node:14
script:
- cd frontend
- npm install
- npm run build
artifacts:
paths:
- frontend/dist
deploy-prod:
stage: deploy
image: alpine
script:
- apk add --no-cache rsync openssh
- rsync -avz --delete -e "ssh -o StrictHostKeyChecking=no" ./ user@server:/path/to/deploy
only:
- master
8. 实际项目经验分享
在最近一个政府民生调研项目中，我们遇到了高并发提交的挑战。某天上午10点突然涌入2万+的问卷提交，导致服务器响应变慢。通过以下措施解决了问题：
-
数据库优化：
- 将答案表改为按月份分表
- 添加复合索引
(survey_id, question_id, created_at)
-
队列处理：
php复制// 使用ThinkPHP队列处理答案提交
class SaveAnswerJob
{
public function handle($data)
{
try {
$answer = new Answer($data);
$answer->save();
// 更新统计缓存
Cache::forget('stats_'.$data['survey_id']);
} catch (\Exception $e) {
Log::error('保存答案失败: '.$e->getMessage());
$this->release(30); // 30秒后重试
}
}
}
// 提交时放入队列
Queue::push(new SaveAnswerJob($answerData));
- 前端优化：
- 添加提交节流控制
- 实现排队进度显示
- 提供离线保存选项
这个案例让我深刻体会到，三端系统必须从设计阶段就考虑性能扩展性。现在我通常会在项目初期就：
- 设计好分表策略
- 规划队列处理流程
- 实现基础监控告警
最后分享一个实用技巧：对于选项类问题，可以在数据库中使用JSON存储选项关系，既节省空间又方便扩展：
php复制// questions表
Schema::create('questions', function (Blueprint $table) {
$table->json('options')->nullable()->comment('选项配置');
});
// 存储示例
{
"options": [
{"id":1,"text":"非常满意","score":5},
{"id":2,"text":"满意","score":4}
],
"other_option": true
}