Vue.js实现一个简易问卷平台(项目中遇到的问题总结)

时间 2019-11-06

标签 vue.js vue 实现一个简易问卷平台项目遇到问题总结栏目 JavaScript 繁體版

原文原文链接

项目地址

源码地址vue
预览地址（没有作响应式，请在电脑上打开）git
使用了我自制的日历组件（初学vue时作的，有些糙）calendar-inputgithub

任务描述

参考设计图数组
实现一个简易版的问卷管理系统，有以下功能：模块化

问卷管理列表

有一个头部能够显示logo，不须要实现登陆等操做函数
问卷管理列表页面默认为首页工具
有一个表格用于展现全部已建立的问卷fetch
列表中包括列有：问卷名称，问卷状态（未发布，发布中，已结束），和操做区域（编辑、删除、查看数据）ui
问卷状态为未发布时，能够作的操做为编辑、删除、查看问卷this
问卷状态为发布中和已结束时，能够作的操做为查看数据、查看问卷
表格最左侧有批量选择（多选）的checkbox，多选后，能够进行批量删除功能，checkbox样式用默认便可，不须要按照设计图的样式
当一个问卷都没有的时候，表格不展示，页面显示大大的新建问卷按钮

问卷新建及编辑

点击问卷管理列表中的新建按钮后，进入到问卷新建页面
点击问卷列表中某个问卷行的编辑按钮后，进入到问卷的编辑页面
新建页面和编辑页面基本相同
问卷有一个标题字段，点击后能够进入编辑状态
能够针对问卷中的问题进行增删改操做，每一个问卷最少一个问题，最多十个问题
问题类型包括：单选题、多选题、单行文本题
能够对全部问题进行位置改变（上移、下移），复用，删除的操做
最上面的问题没有上移操做，最下面的问题没有下移操做
点击复用时，在被复用的问题紧接着的下方新增一个和被复用彻底同样的问题（包括选项）
对于单选题和多选题，能够对问题的选项进行增、删、改、排序操做
文本题能够设定是必填仍是非必填的问题
有一个问卷调查填写截止时间，使用一个日历组件来进行时间的选择，日期选择不能早于当前日期
保存问卷能够进行问卷的保存
发布问卷可使得问卷状态变为发布中的状态
当点击发布时，若是截止日期早于当前日期，则须要提示修改截止日期

删除问卷

在问卷管理列表中点击某个问卷的删除按钮后，弹出一个浮出层，让用户二次确认是否删除该问卷，若是用户点击是，则删除掉该问卷

查看问卷

在问卷管理列表中点击查看问卷的按钮后，在新窗口中打开该问卷的页面，该页面是可供用户进行问卷填写的页面，在问卷未发布状态和已结束状态时，问卷提交是无效的。
该页面在移动端须要进行良好的兼容支持

查看数据

在问卷管理列表中点击查看数据按钮后，进入到一个数据报告页面，用图表形式呈现各个单选题和多选题的选择状况
如设计稿中呈现，每个问题在右侧用某种图表来呈现答题状况，自行选择合适的图表，设计稿中仅为示意，图表样式不须要和设计稿一致。推荐单选题使用饼状图，多选题使用条形图
文本题用一个百分比图展示有效回答占比便可
返回按钮点击后返回列表页面
在项目中尝试模块化的方法及工具
在项目中尝试CSS预处理工具
在项目中尝试项目构建、打包工具

问题总结

全选功能的实现

首先每一个列表项都使用了v-model进行双向数据绑定传递是否被选中状态

<template v-for="item in qsList">
  <ul>
    <li><input type="checkbox" v-model="item.checked"></li>

而后给全选按钮也用v-model绑定是否全选状态

<label><input type="checkbox" id="all-check" v-model="selectAll">全选</label>

下一步在computed中定义三个计算属性

selectAll: 是否全选
selectCount: 计算有多少项被选中
selectGroup: 存储当前选中项，以便对它们进行操做

selectAll计算属性：

selectAll: {
    get() { //this.qsList是一个数组，理解代码时能够看为[{checked: false}, {checked: false}]
      return this.selectCount === this.qsList.length && this.selectCount !== 0;
    },
    set(value) {
      this.qsList.forEach( item => {
        item.checked = value;
      } );
      return value;
    }
  }

经过get方法获取当前选中数，从而实现当列表项全被选中时，全选按钮自动被选中

经过set方法实现当全选按钮选中时，全部列表项也被选中

selectCount计算属性

selectCount() {
    let i = 0;
    this.qsList.forEach( item => {
      if (item.checked) i++;
    } );
    return i;
  },

计算当前有多少项被选中，selectAll经过此变量来计算当前是否全部列表项都被选中

selectGroup计算属性

selectGroup() {
    let group = [];
    this.qsList.forEach( item => {
      if (item.checked) group.push(item);
    } );
    return group;
  }

存储被选中项，进行统一操做

检测表单必填项是否填写

这个问题我使用了v-model来解决，问卷中总共有三种类型的表单项，radio，checkbox，textarea 由于对于radio的v-model来讲只能绑定一个基本类型的值, checkbox的v-model应该绑定一个数组，这样选中项就会一个一个push到数组中，并且是双向绑定的，textarea的v-model也应该是一个基本类型，我设置的是字符串

<p v-for="option in item.options" class="option">
        <label>
          <input 
          type="radio" 
          :name="`${item.num}-${item.title}`"
          v-model="requiredItem[item.num]"
          v-if="item.type === 'radio'"
          :value="option">
          <input 
          type="checkbox" 
          :name="`${item.num}-${item.title}`"
          v-model="requiredItem[item.num]"
          v-if="item.type === 'checkbox'"
          :value="option">{{option}}
        </label>
      </p>
      <textarea 
      v-if="item.type === 'textarea'" 
      v-model="requiredItem[item.num]"></textarea>
      
      
      //获取必选项，用对象存储起来，至关于 {1: '', 2: [], 3: ''}
      getRequiredItem() {
        this.qsItem.question.forEach( item => {
        if (item.isNeed) {
          if (item.isNeed) {
            if (item.type === 'checkbox') {
              this.requiredItem[item.num] = [] //多选框双向绑定的值
            } else {
              this.requiredItem[item.num] = '' //单选框 文本框双向绑定的值
            }
          }
        }
      } )
    }
    
    //直接检测双向绑定的值的内容长度便可知道必填项是否有值
     validate() {
      for (let i in this.requiredItem) {
        if (this.requiredItem[i].length === 0) return false
      }
      return true
    }

这里还有一个问题，我如今在v-for中经过v-if来判断表单项类型，这样看起来有些冗余，为何不直接动态绑定type来渲染表单项呢，这样就不用v-if了

<p v-for="option in item.options" class="option">
  <input 
    :type="item.type" 
    :name="`${item.num}-${item.title}`"
    v-model="requiredItem[item.num]"
    :value="option">
</p>

这样看起来简洁多了，可是这样写会报错，v-model不能绑定在type属性为动态值的表单项上，即type是bind的表单项不能用v-model，因此这里只能退一步使用v-if来选择渲染哪一种类型的表单项

延迟执行函数

当用户点击删除某一项时，通常的作法时弹出一个弹出层询问用户是否删除，用户点击肯定再进行删除操做。这时只要给肯定按钮绑定一个点击事件进行删除操做便可，可是当要屡次点击肯定进行下一个步骤，或者页面多个操做事件都是弹出这个弹出层，这时肯定按钮就要去判断绑定哪一个操做事件等等，很快就变得很是复杂起来
这里可使用ES6的Generator函数，能够很方便的解决这个问题

<div class="shadow" v-if="showDialog">
  <div class="del-dialog">
    <header>
      <span>提示</span>
      <span class="close-btn" @click="showDialog = false">X</span>
    </header>
    <p>{{info}}</p>
    <div class="btn-box">
      <button class="yes" @click="iterator.next();">肯定</button>
      <button @click="showDialog = false">取消</button>
    </div>
  </div>
</div>

弹出层内容

data() {
  return {
    qsList: [],
    showDialog: false, //是否显示弹出层
    iterator: {}, //当前迭代器
    info: '' //弹出层提示内容
  }
}

data中的数据

*delItem(num) {
    yield this.showDialogMsg('确认要删除此问卷')

    yield (() => {
      let index = 0;
      for (let length = this.qsList.length; index < length; index++) {
        if (this.qsList[index].num === num) break;
      }
      this.qsList.splice(index, 1);
      this.showDialog = false;
    })();
  },
  *delItems() {
    yield this.showDialogMsg('确认要删除选中的问卷？');

    yield (() => {
      this.showDialog = false;
      if (this.selectAll) {
        this.qsList = [];
        return;
      }
      if (this.selectGroup == []) return;

      this.selectGroup.forEach( item => {
        if (this.qsList.indexOf(item) > -1) this.qsList.splice(this.qsList.indexOf(item), 1);
      } )
    })();     
  },
  *edit(item) {
    yield (() => {
      if (item.state === 'noissue') {
        this.showDialogMsg('确认要编辑？');
      } else {
        this.showDialogMsg('只有未发布的问卷才能编辑');
      }
    })();
    yield (() => {
      if (item.state !== 'noissue') {
        this.showDialog = false;
      } else {
        this.showDialog = false;
        this.$router.push({name: 'qsEdit', params: { num: item.num }})
      }
    })();
  },
  *watchData(item) {
    yield (() => {
      if (item.state === 'noissue') {
        this.showDialogMsg('未发布的问卷无数据可查看');
      } else {
        this.$router.push({ name: 'qsData', params: { num: item.num }})
      }
    })();
    yield this.showDialog = false;
  }

能够看到页面中多个操做都绑定在一个弹出层上，实现最大程度的复用，并且不会冲突，只要把当前要执行的操做的迭代器赋给肯定按钮，肯定按钮执行next方法便可

v-for每次渲染元素就自动执行一个函数

有时咱们须要v-for的每次遍历中就执行一个函数，咱们能够这样

<li v-for="item in data">{{doSomething()}}</li>

可是这种作法若是执行比较复杂的方法很容易出现一些错误好比无限循环等错误，并且也不推荐

根据须要能够考虑在js中再次遍历这个数据而后在遍历中对每一项进行操做

watch无心中形成的无限循环错误

在编辑问卷功能中，题目号应该要根据题目的上移下移复用删除新建等操做进行变化，我使用了watch来监测变化而后更改题号

watch: {
  '$route': 'fetchData',
  qsItem: {
    handler(newVal) {
      newVal.question.forEach( (item, index) => {
        item.num = `Q${index + 1}`
      } )
    },
    deep: true
  }
}

我在进行上移，下移，删除，新建问题等操做时都没有问题，可是在复用操做时产生了无限循环的问题

<div class="questions" v-for="(qs, index) in qsItem.question">
    <span @click="copy(index, qs)">复用</span>
</div>

复用按钮，和复用方法

copy(index, qs) {
  if (this.questionLength === 10) return alert('问卷已满！')
  this.qsItem.question.splice(index, 0, qs)
}

这样写看起来没什么问题，哪一个item下的复用按钮被点击，就将这个item添加到本身下一项。
可是qs添加到watch监测的变量中后，会触发watch的方法，更改题目号，即qs的题目号被更改，同时qs又是那个被点击的item，它们之间存在引用，这就会形成qs题目号的更改会使点击的item的题目号跟着一块儿变化，这样item一变化，watch又被触发，同时item的题目号由于跟着一块儿变化，致使题目号不是它正确的题目号，watch触发后，item的题目号又会变化为原来的，由于存在引用qs的又会跟着变，而后再次触发watch....一直循环下去
解决方法是用Object.assign()进行一次深拷贝，这样qs和item之间就不存在引用了

copy(index, qs) {
  if (this.questionLength === 10) return alert('问卷已满！')
  qs = Object.assign({}, qs)
  this.qsItem.question.splice(index, 0, qs)
}

这种作法不推荐，由于这种状况下使用watch原本就是不该该的，很是容易形成想不到的问题

推荐的作法是将watch中的方法封装成一个函数，每次操做时就调用这个函数，固然仍是须要Object.assign()来解除复用元素之间的绑定

这里我为了练习仍是使用了watch这个不推荐的方法

总结完成，交做业了