Fork me on GitHub

选题列表

发表于

前言修改

  这是一篇阐述在实际业务需求中应该如何的去面对

当你接到新需求时，一定不要慌，稳住（磨刀不误砍柴功）此时此刻你就是上帝、造物主。你要纵观全局，去思考一下自己业务场景，合理的分配好各个模块。然后在开始动手去撸代码，千万不要着急赶项目，需求没理解明白就开始写页面，写逻辑，这样会使你的工作效率大大的降低。—–谨记于心

选题答题列表（vue）

需求：
  1.一共有十道题，每页答题一道，点击下一题切换下一题，点击上一题切换上一题并且记录当前页答案，最后把十到题的答案展示在尾页。
  2.一个页面有三道选这题可以是多选也可以是单选，还有的是点击标题的之后显示对应input框输入内容。最下面有一个提交按钮。（题目和标题都纯静态的，只是提交的时候需要发送请求）

需求一

根据需求分析，这里我们使用 SPA 单页面应用，提高用户的体验，这里有两种方案。
  1.初始化请求把十道题全部获取到，存放在 data 里面。点击下一题的时候展示对应题目和问题。
  2.另一种方式就是复杂化，这里我们使用 vuex 来管理全局状态。对 vuex 的深入理解（也可以理解为 vuex 的经典实例）
这里我们着重讲解 vuex ,强化 vuex 的使用，规范化 vuex。

如果你使用vue，那么此时你一定要明白一个道理就是，数据就是核心，我们只关心数据就好了，这样会减轻你不少的负担。首先我们根据页面的结构定义一个 json 对象在 store/state.js 里面。光是这么说稍微有点空洞，我在下面简单的写一个。

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
const state = {
    itemNum:1,
    itemDetail:[
        {
            active_title: "请选择：图中XXX是一级股性关节炎？",
            active_img: "http://img1.imgtn.bdimg.com/it/u=3020063939,1371374340&fm=27&gp=0.jpg",
            answerArr:[],
            topic_answer: [
                {
                    content:"第一题答题选项",
                    questionId: "1526266004245",
                    sortId:1
                },
                {
                    content:"正确答案二",
                    questionId: "1526266004245",
                    sortId:2
                },
                {
                    content:"第一题答题选项",
                    questionId: "1526266004245",
                    sortId:3
                },
                {
                    content:"第一题答题选项",
                    questionId: "1526266004245",
                    sortId:4
                }
            ]
        }
    ]
}

在选项列表上绑定点击事件 @click="next(index,item)" 执行 next() 方法
判断是否是最后一道题，如果是最后一道题我们路由到日result页面每。每次点击的时候我们只是需要把 state 里面的数据同步一下 itemNum 递增 并且 置空题目的索引choosedNum（进入下一题的时候无状态展示）。
返回上一题的时候获取上一个数组里面存储的下标值赋值给choosedNum（这样每次返回的时候就会展示上一题构建的答案）。不要忘记还要在 state 里面的数据同步一下 itemNum 递减。

需求二

首先我们根据页面的结构定义一个 json 对象放在 data 里面。（操控数据是重点）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
dataList: [
    {
        title: 'XXX医生给您的治疗建议是？',
        question: [
            {desc: '先做检查', type: 'text', select: false},
            {desc: '吃药/康复锻炼', type: 'text', select: false},
            {desc: '建议手术', type: 'text', select: false},
            {desc: '等住院', type: 'text', select: false},
            {desc: '定期复查', type: 'text', select: false},
        ]
    },
    {
        title: '此次您来报到的主要目的是？',
        question: [
            {desc: '请医生查看检查结果', type: 'text', select: false},
            {desc: '询问手术/住院相关事情', type: 'text', select: false},
            {desc: '随访复查', type: 'text', select: false},
            {desc: '请医生查看检查结果', type: 'text', select: false},
            {desc: '其他', type: 'write', select: false,info:''},
        ]
    }
]

soo easy! 定义好 json 以后，下面的事情就是操作数据，给 title 元素上绑定事件 @click="checkFn(ele)"。

1
2
3
checkedFn(ele){
    ele.select = !ele.select;
}

铺数据展示的时候判断 select 是否为真，是否添加 active 类
最后是点击提交按钮的时候，我们要把勾选的参数发送给后台。这个时候我们只需要循环判断 question 字段里面的 select，如果为true的时候说明该条内容被勾选。获取相应的 desc 拼接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let response = '';
this.dataList[0].question.forEach(function(item,index){
    if(item.select){
        if (item.type == 'write') {
              response = response + ',' + 0 + '_' + item.info;
            } else if (response.length == 0) {
              response = (parseInt(index) + 1) + '_' + item.desc;
            } else {
              response = response + ',' + (parseInt(index) + 1) + '_' + item.desc;
            }
    }
})
//格式为：  
        1_先做检查,2_吃药/康复锻炼
        3_随访复查,0_'这里是其他input框内容'
        ,0_'只有一个input被选'

最后我们根据需求判断哪些是必填项，哪些是选填项来做一次提交的请求。
这里提交请求拼接字符的格式是根据后台需要而来的~