爱喝兽奶帝天荒

这个屌丝很懒，什么也没留下！

热门标签

手把手制作Vue3+Flask全栈项目全栈开发之路实战篇问卷网站（五）数据处理_vue3 +flask 使用

作者：爱喝兽奶帝天荒 | 2024-08-12 11:02:51

踩

vue3 +flask 使用

全栈开发一条龙——前端篇
第一篇：框架确定、ide设置与项目创建
第二篇：介绍项目文件意义、组件结构与导入以及setup的引入。
第三篇：setup语法，设置响应式数据。
第四篇：数据绑定、计算属性和watch监视
第五篇 : 组件间通信及知识补充
第六篇：生命周期和自定义hooks
第七篇：路由
第八篇：传参
第九篇:插槽，常用api和全局api。
全栈开发一条龙——全栈篇
第一篇：初识Flask&MySQL实现前后端通信
第二篇： sql操作、发送http请求和邮件发送
第三篇：全栈实现发送验证码注册账号
第四篇：图片验证码及知识补充
全栈开发一条龙——实战篇

第一篇：项目建立与login页面
第二篇：建立管理员后台和添加题目功能实现
第三篇：完善管理员后台
第四篇：用户视图

本篇将完成数据处理页面

后端

数据处理工具

我们先来写数据处理的工具，我们的思路是从数据库中取出我们之前存储的答案序列，然后分析到达不同阶段的人数和相关系数等等。
我们先从数据库中获取数据

                raw_list = db.session.execute( text("select * from data_analysis") ).fetchall()
                answer_list = list_row2list_dic(raw_list)
                temp = sql_ex()
                question_info = temp.search()

1
2
3
4
5

接下来进行基础的数据统计，各个题目的答题次数，平均分等

                # 初始化每道题的选项计数和分数统计
                question_stats = []
                for question in question_info:
                    question_stats.append({
                        'question': question['questions'],
                        'choice_counts': {'A': 0, 'B': 0, 'C': 0, 'D': 0},
                        'total_score': 0,
                        'response_count': 0,
                        'points': {
                            'A': question['point_a'],
                            'B': question['point_b'],
                            'C': question['point_c'],
                            'D': question['point_d']
                        }
                    })

                # 统计每个选项的选择次数和总分
                for answer in answer_list:
                    answer_str = answer['answer']
                    for i, char in enumerate(answer_str):
                        if char in 'ABCD':
                            question_stats[i]['choice_counts'][char] += 1
                            question_stats[i]['total_score'] += question_stats[i]['points'][char]
                            question_stats[i]['response_count'] += 1

                # 计算每道题的平均分
                for stats in question_stats:
                    if stats['response_count'] > 0:
                        stats['average_score'] = stats['total_score'] / stats['response_count']
                    else:
                        stats['average_score'] = 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

我们可以使用以下代码来查看处理的情况，当然，最后需要把他们注释掉。


                # 输出结果 question_stats
                # for stats in question_stats:
                #     print(f"Question: {stats['question']}")
                #     print(f"Choice Counts: {stats['choice_counts']}")
                #     print(f"Average Score: {stats['average_score']:.2f}")
                #     print('-' + '-' * 50)
                #输出格式：[{'question': '惺惺惜惺惺哈哈哈哈和和和和和和和和谢谢谢谢选项下下下下下下下下下下下下下下下下', 'choice_counts': {'A': 4, 'B': 0, 'C': 0, 'D': 1}, 'total_score': 3, 'response_count': 5, 'points': {'A': 0, 'B': 1, 'C': 2, 'D': 3}, 'average_score': 0.6}, {'question': 'csy——beautiful!!', 'choice_counts': {'A': 1, 'B': 1, 'C': 1, 'D': 2}, 'total_score': 9, 'response_count': 5, 'points': {'A': 0, 'B': 1, 'C': 2, 'D': 3}, 'average_score': 1.8}, {'question': '1', 'choice_counts': {'A': 0, 'B': 0, 'C': 1, 'D': 1}, 'total_score': 5, 'response_count': 2, 'points': {'A': 0, 'B': 1, 'C': 2, 'D': 3}, 'average_score': 2.5}, {'question': 'huaidan no', 'choice_counts': {'A': 1, 'B': 0, 'C': 0, 'D': 1}, 'total_score': 3, 'response_count': 2, 'points': {'A': 0, 'B': 1, 'C': 2, 'D': 3}, 'average_score': 1.5}, {'question': '8的合伙人发', 'choice_counts': {'A': 0, 'B': 0, 'C': 0, 'D': 1}, 'total_score': 3, 'response_count': 1, 'points': {'A': 0, 'B': 1, 'C': 2, 'D': 3}, 'average_score': 3.0}, {'question': '9ehwc', 'choice_counts': {'A': 0, 'B': 0, 'C': 0, 'D': 1}, 'total_score': 3, 'response_count': 1, 'points': {'A': 0, 'B': 1, 'C': 2, 'D': 3}, 'average_score': 3.0}, {'question': '接口', 'choice_counts': {'A': 0, 'B': 0, 'C': 0, 'D': 1}, 'total_score': 4, 'response_count': 1, 'points': {'A': 1, 'B': 2, 'C': 3, 'D': 4}, 'average_score': 4.0}]
1
2
3
4
5
6
7
8

然后我们统计达到各个stage的人数，逻辑是只要回答了任意一道stage3的题目，这个人就达到了stage3的阶段，counter++

                #统计stage人数
                # 初始化每个阶段的回答人数统计
                stage_answer_counts = {1: 0, 2: 0, 3: 0, 4: 0}

                # 统计每个阶段回答了至少一个问题的人数
                for answer in answer_list:
                    answer_str = answer['answer']
                    answered_stages = set()
                    for i, char in enumerate(answer_str):
                        if char in 'ABCD':
                            stage = question_info[i]['stage']
                            answered_stages.add(stage)
                    for stage in answered_stages:
                        stage_answer_counts[stage] += 1
                 
                 #  stage_answer_counts  output:{1: 5, 2: 2, 3: 1, 4: 1}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

最后，我们进行相关性分析，这里我们需要使用numpy和pandas


                answer_matrix = []
                for answer in answer_list:
                    answer_str = answer['answer']
                    answer_row = []
                    for char in answer_str:
                        if char == 'A':
                            answer_row.append(1)
                        elif char == 'B':
                            answer_row.append(2)
                        elif char == 'C':
                            answer_row.append(3)
                        elif char == 'D':
                            answer_row.append(4)
                        else:
                            answer_row.append(0)
                    answer_matrix.append(answer_row)

                # 转换为DataFrame
                df = pd.DataFrame(answer_matrix, columns=[f'Q{i+1}' for i in range(len(answer_matrix[0]))])

                # 计算相关性矩阵
                correlation_matrix = df.corr()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

这里我们需要先把内容转为pandas特定的格式，然后调用库。最后输出的结果是output type <class ‘pandas.core.frame.DataFrame’>格式的，内容是

                #     Q1        Q2        Q3        Q4        Q5        Q6        Q7
                # Q1  1.000000  0.514496  0.745601  0.968246  1.000000  1.000000  1.000000
                # Q2  0.514496  1.000000  0.826234  0.664211  0.514496  0.514496  0.514496
                # Q3  0.745601  0.826234  1.000000  0.888523  0.745601  0.745601  0.745601
                # Q4  0.968246  0.664211  0.888523  1.000000  0.968246  0.968246  0.968246
                # Q5  1.000000  0.514496  0.745601  0.968246  1.000000  1.000000  1.000000
                # Q6  1.000000  0.514496  0.745601  0.968246  1.000000  1.000000  1.000000
                # Q7  1.000000  0.514496  0.745601  0.968246  1.000000  1.000000  1.000000
                
1
2
3
4
5
6
7
8
9

这样的矩阵，至此，我们的处理工具就做好了，接下来我们需要完善后端节后，使得前端可以访问并获取到处理好的数据。

蓝图

    def post(self):
        temp = answer_ex()
        question,stage,rela = temp.search()
        response = {
        'question': question,
        'stage': stage,
        'rela': rela.to_dict()
                    }
        return jsonify({"errcode": 0, "msg": response})
1
2
3
4
5
6
7
8
9

如上就做好了，这里我们将举证转化为dict，方便我们前端展示数据。

前端

前端我们需要做以下几件事，展示基础数据，根据相关性数据绘制图表。这需要用到chart.js 我们可以用npm i一键安装。
我们的展示思路就是把一个个问题做成card，一一展示。

模板

<template>
  <div class="container">


    <div class="header">
      <button class="custom-button" @click="rt">返回编辑页</button>
    </div>


    <h1>数据统计</h1>

    <div class="card">
      <h2>数据总览</h2>
      <div class="data-row"><strong>总问卷数:</strong> {{ stage[1] }}</div>
      <h3>累计人数统计</h3>
      <div class="data-row"><strong>二阶段以上:</strong> {{ stage[2] }}</div>
      <div class="data-row"><strong>三阶段以上:</strong> {{ stage[3] }}</div>
      <div class="data-row"><strong>四阶段以上:</strong> {{ stage[4] }}</div>
      <h3>阶段人数统计</h3>
      <div class="data-row"><strong>一阶段人数:</strong> {{ stage[1]-stage[2] }}</div>
      <div class="data-row"><strong>二阶段人数:</strong> {{ stage[2] - stage[3]}}</div>
      <div class="data-row"><strong>三阶段人数:</strong> {{ stage[3] - stage[4] }}</div>
      <div class="data-row"><strong>四阶段人数:</strong> {{ stage[4] }}</div>
      <h2>人数分布图表</h2>
      <div class="chart-container">
        <canvas id="stage-chart"></canvas>
      </div>
    </div>
    <h1>题目详情</h1>
    <div class="card" v-for="(item, index) in question" :key="index">
      <h2>{{ index + 1 }}. {{ item.question }}</h2>
      <div class="data-row"><strong>答题统计:</strong></div>
      <div class="choice">
        <div>A: {{ item.choice_counts.A }}</div>
        <div>B: {{ item.choice_counts.B }}</div>
        <div>C: {{ item.choice_counts.C }}</div>
        <div>D: {{ item.choice_counts.D }}</div>
      </div>
      <div class="data-row"><strong>回答次数:</strong> {{ item.response_count }}</div>
      <div class="data-row"><strong>均分（期望为1.5）:</strong> {{ item.average_score }}</div>
      <h3>题目相关性
        <button @click="toggleRelaVisibility(index)" class="bt">
          {{ relaVisible[index] ? '隐藏相关系数' : '显示相关系数' }}
        </button>
      </h3>
      <ul v-if="relaVisible[index]">
        <li v-for="(value, key) in getRelaValues(index)" :key="key">与{{ key }}的相关系数为: {{ value }}</li>
      </ul>
      <canvas :id="'chart-' + index"></canvas>
    </div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

这里，我们定义了一个标题，枚举了各个问题的card以展示。

脚本

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import axios from 'axios';
import { Chart, CategoryScale, BarController, BarElement, PointElement, LinearScale, Title, PieController, ArcElement, Tooltip, Legend } from 'chart.js';
import { useRouter } from 'vue-router';
import { useUrlStore } from '@/store/urlStore'; // 确保路径正确
const urlStore = useUrlStore(); // 使用URL Store

const router = useRouter();
Chart.register(
  CategoryScale,
  BarController,
  BarElement,
  PointElement,
  LinearScale,
  Title,
  PieController,
  ArcElement,
  Tooltip,
  Legend
);

const question = ref([]);
const stage = ref({});
const rela = ref({});
const relaVisible = ref([]);

const fetchData = async () => {
  try {
    const response = await axios.post(urlStore.urls.data);
    if (response.data.errcode === 0) {
      question.value = response.data.msg.question;
      stage.value = response.data.msg.stage;
      rela.value = response.data.msg.rela;
      relaVisible.value = new Array(question.value.length).fill(false);
      await nextTick();
      renderCharts();
      renderStageChart();
    } else {
      console.error('Error fetching data:', response.data.msg);
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

const formatNumber = (number) => number.toFixed(3);

const getRelaValues = (index) => {
  const key = `Q${index + 1}`;
  const values = rela.value[key] || {};
  const formattedValues = {};
  Object.keys(values).forEach(k => {
    formattedValues[k] = formatNumber(values[k]);
  });
  return formattedValues;
};

const toggleRelaVisibility = (index) => {
  relaVisible.value[index] = !relaVisible.value[index];
};

const renderCharts = () => {
  question.value.forEach((item, index) => {
    const ctx = document.getElementById('chart-' + index).getContext('2d');
    const correlations = getRelaValues(index);
    const correlationValues = Object.values(correlations).map(value => parseFloat(value));
    const backgroundColors = correlationValues.map(value =>
      value < 0 ? 'rgba(255, 99, 132, 0.5)' : 'rgba(75, 192, 192, 0.5)'
    );
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: Object.keys(correlations),
        datasets: [{
          label: `Correlations for Q${index + 1}`,
          data: correlationValues,
          backgroundColor: backgroundColors,
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          x: {
            type: 'category',
            display: true,
            title: {
              display: true,
              text: 'Questions'
            }
          },
          y: {
            type: 'linear',
            beginAtZero: true,
            display: true,
            title: {
              display: true,
              text: 'Correlation Value'
            }
          }
        }
      }
    });
  });
};

const renderStageChart = () => {
  const ctx = document.getElementById('stage-chart').getContext('2d');
  const stageData = [
    stage.value['1'] - stage.value['2'],
    stage.value['2'] - stage.value['3'],
    stage.value['3'] - stage.value['4'],
    stage.value['4']
  ];
  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['stage1', 'stage2', 'stage3', 'stage4'],
      datasets: [{
        data: stageData,
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'right'
        },
        tooltip: {
          enabled: true
        }
      }
    }
  });
};

function rt(){
  alert("切换成功，一秒后跳转编辑页面");
  setTimeout(() => { router.push({ path: "/home" }) }, 1000);
}

onMounted(fetchData);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

我们脚本实现的逻辑就是先访问后端接口获取数据，然后解析数据，绘制图表。我们绘制了一个pie图，用于展示各个阶段人数。也制作了一个柱状图来展示各个题目之间的相关性。

完整前端代码

<template>
  <div class="container">


    <div class="header">
      <button class="custom-button" @click="rt">返回编辑页</button>
    </div>


    <h1>数据统计</h1>

    <div class="card">
      <h2>数据总览</h2>
      <div class="data-row"><strong>总问卷数:</strong> {{ stage[1] }}</div>
      <h3>累计人数统计</h3>
      <div class="data-row"><strong>二阶段以上:</strong> {{ stage[2] }}</div>
      <div class="data-row"><strong>三阶段以上:</strong> {{ stage[3] }}</div>
      <div class="data-row"><strong>四阶段以上:</strong> {{ stage[4] }}</div>
      <h3>阶段人数统计</h3>
      <div class="data-row"><strong>一阶段人数:</strong> {{ stage[1]-stage[2] }}</div>
      <div class="data-row"><strong>二阶段人数:</strong> {{ stage[2] - stage[3]}}</div>
      <div class="data-row"><strong>三阶段人数:</strong> {{ stage[3] - stage[4] }}</div>
      <div class="data-row"><strong>四阶段人数:</strong> {{ stage[4] }}</div>
      <h2>人数分布图表</h2>
      <div class="chart-container">
        <canvas id="stage-chart"></canvas>
      </div>
    </div>
    <h1>题目详情</h1>
    <div class="card" v-for="(item, index) in question" :key="index">
      <h2>{{ index + 1 }}. {{ item.question }}</h2>
      <div class="data-row"><strong>答题统计:</strong></div>
      <div class="choice">
        <div>A: {{ item.choice_counts.A }}</div>
        <div>B: {{ item.choice_counts.B }}</div>
        <div>C: {{ item.choice_counts.C }}</div>
        <div>D: {{ item.choice_counts.D }}</div>
      </div>
      <div class="data-row"><strong>回答次数:</strong> {{ item.response_count }}</div>
      <div class="data-row"><strong>均分（期望为1.5）:</strong> {{ item.average_score }}</div>
      <h3>题目相关性
        <button @click="toggleRelaVisibility(index)" class="bt">
          {{ relaVisible[index] ? '隐藏相关系数' : '显示相关系数' }}
        </button>
      </h3>
      <ul v-if="relaVisible[index]">
        <li v-for="(value, key) in getRelaValues(index)" :key="key">与{{ key }}的相关系数为: {{ value }}</li>
      </ul>
      <canvas :id="'chart-' + index"></canvas>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import axios from 'axios';
import { Chart, CategoryScale, BarController, BarElement, PointElement, LinearScale, Title, PieController, ArcElement, Tooltip, Legend } from 'chart.js';
import { useRouter } from 'vue-router';
import { useUrlStore } from '@/store/urlStore'; // 确保路径正确
const urlStore = useUrlStore(); // 使用URL Store

const router = useRouter();
Chart.register(
  CategoryScale,
  BarController,
  BarElement,
  PointElement,
  LinearScale,
  Title,
  PieController,
  ArcElement,
  Tooltip,
  Legend
);

const question = ref([]);
const stage = ref({});
const rela = ref({});
const relaVisible = ref([]);

const fetchData = async () => {
  try {
    const response = await axios.post(urlStore.urls.data);
    if (response.data.errcode === 0) {
      question.value = response.data.msg.question;
      stage.value = response.data.msg.stage;
      rela.value = response.data.msg.rela;
      relaVisible.value = new Array(question.value.length).fill(false);
      await nextTick();
      renderCharts();
      renderStageChart();
    } else {
      console.error('Error fetching data:', response.data.msg);
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

const formatNumber = (number) => number.toFixed(3);

const getRelaValues = (index) => {
  const key = `Q${index + 1}`;
  const values = rela.value[key] || {};
  const formattedValues = {};
  Object.keys(values).forEach(k => {
    formattedValues[k] = formatNumber(values[k]);
  });
  return formattedValues;
};

const toggleRelaVisibility = (index) => {
  relaVisible.value[index] = !relaVisible.value[index];
};

const renderCharts = () => {
  question.value.forEach((item, index) => {
    const ctx = document.getElementById('chart-' + index).getContext('2d');
    const correlations = getRelaValues(index);
    const correlationValues = Object.values(correlations).map(value => parseFloat(value));
    const backgroundColors = correlationValues.map(value =>
      value < 0 ? 'rgba(255, 99, 132, 0.5)' : 'rgba(75, 192, 192, 0.5)'
    );
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: Object.keys(correlations),
        datasets: [{
          label: `Correlations for Q${index + 1}`,
          data: correlationValues,
          backgroundColor: backgroundColors,
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          x: {
            type: 'category',
            display: true,
            title: {
              display: true,
              text: 'Questions'
            }
          },
          y: {
            type: 'linear',
            beginAtZero: true,
            display: true,
            title: {
              display: true,
              text: 'Correlation Value'
            }
          }
        }
      }
    });
  });
};

const renderStageChart = () => {
  const ctx = document.getElementById('stage-chart').getContext('2d');
  const stageData = [
    stage.value['1'] - stage.value['2'],
    stage.value['2'] - stage.value['3'],
    stage.value['3'] - stage.value['4'],
    stage.value['4']
  ];
  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['stage1', 'stage2', 'stage3', 'stage4'],
      datasets: [{
        data: stageData,
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'right'
        },
        tooltip: {
          enabled: true
        }
      }
    }
  });
};

function rt(){
  alert("切换成功，一秒后跳转编辑页面");
  setTimeout(() => { router.push({ path: "/home" }) }, 1000);
}

onMounted(fetchData);
</script>

<style scoped>
.chart-container {
  width: 60%;
  margin: auto;
}

.header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.custom-button {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #f0adcd;
  color: white;
  border: none;
  width: 120px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-button:hover {
  background-color: #e5347d;
}

.bt {
  background-color: #77d6dd;
  width: 150px;
  height: 29%;
}

.container {
  padding: 20px;
  font-family: 'Arial', sans-serif;
  color: #333;
  display: flex;
  flex-direction: column;
  width: 700px;
  margin-left: 15vw;
}

h1 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
}

.card {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: scale(1.005);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card h2 {
  font-size: 24px;
  color: #3498db;
  margin-bottom: 10px;
}

.data-row {
  font-size: 16px;
  margin: 8px 0;
}

.choice {
  margin-left: 20px;
}

.card h3 {
  font-size: 20px;
  color: #2c3e50;
  margin-top: 20px;
}

.card ul {
  list-style-type: none;
  padding: 0;
}

.card li {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

canvas {
  margin-top: 20px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322

以上是前端的完整代码，你可以自己修改样式。

效果展示

在questionlist里加入一个按钮，来跳转数据处理页面，很简单就不说了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/969417

手把手制作Vue3+Flask全栈项目 全栈开发之路实战篇 问卷网站（五）数据处理_vue3 +flask 使用

文章目录

后端

数据处理工具

蓝图

前端

模板

脚本

完整前端代码

效果展示

手把手制作Vue3+Flask全栈项目全栈开发之路实战篇问卷网站（五）数据处理_vue3 +flask 使用