--- theme: cyanosis highlight: a11y-dark --- # 用vue3制作【问卷调查】 ## 前言问卷调查，这个东西真的随处可见，那不如自己做一个**问卷调查**？话不多说，我们来实现它！！！我们需要实现的**效果图**如下：

动画.gif

## 开发工具 **vscode**(里面预先装好vue) ## 思路准备通过分析调查问卷的功能，我们来梳理一下实现它的方式： 1. 首先我们把这个问卷调查分为**三个板块**：**首页**(home)，**答题页**(item)，**得分页**(score)。实现这三个板块的跳转采用**路由**的方式。 2. 我们可以看到 **首页**(home) 和 **答题页**(item) 中每道题目的**切换**都只是**中间部分**发生**变化**，其他的地方并没有改变，那么我们可以把其作为一个**组件**分离出去，在这个组件中完成代码编写。 3. 最后单独编写**得分页**(score)。 ## 正文 ### 一、创建vue3项目我们使用`vue create xxx`命令创建这个项目，我这以happy命名，并安装好**路由**，**less预处理器**。 ### 二、构建目录结构

创建完毕后，我们对这些文件夹做进一步操作： > - `assets`： > 1.创建`images`文件夹放置**图片** > 2.创建`style`文件夹，在其中创建`common.less`，让html5常用的标签**初始化** > - `components`： > 1.创建`item.vue`作为**组件** > - `mock`： > 1.创建`index.js`,其中存放**后端数据**（这里采用**静态**的数据） > - `router`： > 1.创建`index.js`,这是对**路由的配置** > - `utils`： > 1.创建`rem.js`,为了让用户在不同设备上有更好的查看效果，这里做了一个**适配** > - `views`： > 1.创建`home`文件夹,其中放置 `index.vue`用于**首页**的页面编写 > 2.创建`item`文件夹,其中放置 `item.vue`用于**答题页**的页面编写 > 3.创建`score`文件夹,其中放置 `score.vue`用于**得分页**的页面编写另外我们需在`App.vue`中的template中添加router-view： ``` ``` 以及在`main.js`中引入必要的文件： ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' import '@/utils/rem.js' import '@/assets/style/common.less' createApp(App).use(router).mount('#app') ``` ### 三、代码编写 #### 1. 屏幕适配(rem.js) ```js (function (doc) { let docEl = doc.documentElement doc.addEventListener('DOMContentLoaded', () => { let clientWidth = docEl.clientWidth //获取屏幕宽度 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px' //让1rem=20px }) })(document) ``` #### 2. 标签初始化(common.less) ```less html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } html{ height: 100%; width: 100%; } body{ height: 100%; width: 100%; background: url(../images/1-1.jpg) no-repeat; //设置背景图片 background-size: 100% 100%; } .clear:after{ content: ''; display: block; clear: both; } .clear{ zoom:1; } .back_img{ background-repeat: no-repeat; background-size: 100% 100%; } .margin{ margin: 0 auto; } .left{ float: left; } .right{ float:right; } .hide{ display: none; } .show{ display: block; } ``` #### 3. 后端数据(mock/index.js) ```js export const questions=[ { "topic_id": 20, "active_topic_id": 4, "type": "ONE", "topic_name": "题目一", "active_id": 1, "active_title": "欢乐星期五标题", "active_topic_phase": "第一周", "active_start_time": "1479139200", "active_end_time": "1482163200", "topic_answer": [{ "topic_answer_id": 1, "topic_id": 20, "answer_name": "答案aaaa", "is_standard_answer": 0 }, { "topic_answer_id": 2, "topic_id": 20, "answer_name": "答案bbbb", "is_standard_answer": 0 }, { "topic_answer_id": 3, "topic_id": 20, "answer_name": "答案cccc", "is_standard_answer": 0 }, { "topic_answer_id": 4, "topic_id": 20, "answer_name": "正确答案", "is_standard_answer": 1 }] }, { "topic_id": 21, "active_topic_id": 4, "type": "MORE", "topic_name": "题目二", "active_id": 1, "active_title": "欢乐星期五标题", "active_topic_phase": "第一周", "active_start_time": "1479139200", "active_end_time": "1482163200", "topic_answer": [{ "topic_answer_id": 5, "topic_id": 21, "answer_name": "正确答案", "is_standard_answer": 1 }, { "topic_answer_id": 6, "topic_id": 21, "answer_name": "答案B", "is_standard_answer": 0 }, { "topic_answer_id": 7, "topic_id": 21, "answer_name": "答案C", "is_standard_answer": 0 }, { "topic_answer_id": 8, "topic_id": 21, "answer_name": "答案D", "is_standard_answer": 0 }] } //后面数据省略，数据条数可多条，看题目量 ] ``` #### 4. 组件编写(item.vue) 由于首页和答题页拥有**共同部分**，我们把其作为**组件**单独拿出来编写，那么在home页面和item页面中只需**引入这个组件**即可。（1）首先编写组件中的**首页**： > **思路**： > - 首页分为**图片背景**，**云朵**里的第一周，**开始**按钮（用路由跳转） ``` ``` （2）编写组件中的**答题页**： > **思路**： > - 用**props**实现**父子组件的通信**，**v-if**用来判断主页面和答题页面谁**显示**在页面上。 > - 用**index**记录**选项的下标**，若选中的下标**等于**这个选项的下标即**添加**这个**样式**，将其变为**黄色**。 > - 点击**下一题**按钮时**未选择**选项，需弹出**提示框**。 > - 后端数据的选项的**topic_answer_id**是**唯一**值，可以利用这个特点将**选中的**所有选项的**id值**保存在**result数组**中，以便之后判断是否为正确答案计算得分。 > - 当答题为**最后一题**时，按钮变为**提交**按钮，为其绑定**点击事件**，利用router的**push**方法实现**路由传参**和**跳转**，参数为存放用户选择答案的数组**result**。 > - 点击**提交**按钮时，最后一题还**未选择**，需弹出**提示框**。 ``` ``` #### 5. 组件引入 home/index.vue: ``` ``` item/index.vue: ``` ``` #### 6. 路由配置（router/index.js） ```js import { createRouter, createWebHistory } from 'vue-router' import Home from '@/views/home' const routes = [ { path:'/', redirect:'/home' //重定向 }, { path:'/home', //根路径下展示 name:'home', component:Home }, { path:'/item', name:'item', component:()=>import('@/views/item') }, { path:'/score', name:'score', component:()=>import('@/views/score') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router ``` #### 7. 得分页（score/index.vue） > **思路**： > - 修改图片**背景**。 > - 得到用户选中答案的result数组后，利用**forEach遍历**找到和后端数据**匹配题目的选项**并判断**选中的选项**是否为**正确**答案，是则加上这一题的分数。 > - 利用得到的**总分**计算**答对的题数**，把它作为**提示语数组**的**下标**，这样不同的分数就能对应不同的提示语了。 ``` ``` ## 最后以上就是调查问卷的详细实现过程，如果觉得还不错的话，记得点个赞支持呀！文章可能有一些错误，欢迎评论指出，也欢迎一起讨论。