丁又专老师作业：猜猜看总结

这个学期最后的一个项目是猜猜看，这个项目逻辑也并不难。因为我本人是更爱好Web开发的，所以将项目转移到Web上做。项目地址：课程设计，右上角可以下载，下载后直接打开index.html即可。此篇文章将放在旧博客内：猜猜看总结。

数据存储

App就放在了Web前端，本身应该有一个简单的后台来连接数据库的，鉴于时间和能力有限，所以并没有采取后台存储数据的形式。当然借助支持HTML5特性的新一代浏览器，有一个新的功能是LocalStorage，是一个和cookie类似但数据可存储量远远大于cookie的一个本地数据库。当然还要说明一下数据结构，因为并没有涉及到关系型数据库，所以我们这里处理数据其实是非常方便的。我们借助Json的格式，来做一个存储，大致格式如下：

{
    "dataArr": [
        {
            "name": "超人",
            "imgPath": "./src/image/superman.jpg",
            "rightCount": 3,
            "falseCount": 0
        },
        {
            "name": "美国队长",
            "imgPath": "./src/image/captain america.jpg",
            "rightCount": 7,
            "falseCount": 0
        },
        {
            "name": "金刚狼",
            "imgPath": "./src/image/wolverine.jpg",
            "rightCount": 5,
            "falseCount": 0
        },
        {
            "name": "蝙蝠侠",
            "imgPath": "./src/image/batman.jpg",
            "rightCount": 9,
            "falseCount": 0
        },
        {
            "name": "雷神",
            "imgPath": "./src/image/thor.jpg",
            "rightCount": 4,
            "falseCount": 0
        },
        {
            "name": "钢铁侠",
            "imgPath": "./src/image/ironman.jpg",
            "rightCount": 8,
            "falseCount": 1
        },
        {
            "name": "闪电侠",
            "imgPath": "./src/image/The Flash.jpg",
            "rightCount": 4,
            "falseCount": 1
        },
        {
            "name": "蜘蛛侠",
            "imgPath": "./src/image/spiderman.jpg",
            "rightCount": 6,
            "falseCount": 2
        }
    ]
}

如果用过类似MongoDB之类的非关系数据库，应该会非常熟悉这样的数据格式。我们将数据保存起来后，再转成字符串存到LocalSotrage。需要使用的时候，也就是解析Json字符串，也是十分方便的。

开发框架React

Web以往的开发模式，并不适用于这种App的开发。这种App有一个新的名字叫做SPA(Single Page Application)，也就是说，页面的渲染不再交给服务器了，而是在浏览器端通过Javascript进行渲染。所以鉴于此，我们需要借助一些好的工具，帮助我们处理MVC中的View，而Model我们在上一节也大致看过数据模型，所以重点应该在View和Controller。

React 是一个用来创建用户界面的JavaScript库，也就是MVC里的view层。在前端开发中，比较难区分View和Controller之间的关系，一般来说组件的事件绑定也是放在view层里。我们通过将App组件化开发的模式，可以妥善的处理各个事件和相应的行为。

而使用React更重要的原因，它是用一种单向数据流的形式，进行状态的管理。当状态发生改变，React会帮助我们更新View层相关联的组件，让我们将更多的精力放在业务上的开发。

当然在我们实际的猜猜看项目中，并没有太多的状态可以维护，但是我们任然可以尝试一下。比如当次需要显示的三张图片和其名字，这就属于一个状态。

那猜猜看的组件结构就是如下所示：

    <div className="panel">
        <AppHeader />
        <AppBody   /> 
        <AppFooter />
    </div>

相对应在应用中：

• AppHeader: 题目
• AppBody: 可选答案
• AppFooter: 提交按钮

其实这非常的繁琐，有点为了组件化而组件化，当然这也是因为项目不大的原因。组件的结构搭建好后，就是里面对状态和事件的处理了。

// 更改需要显示的图片
changeShowArr() {
    let dataArr = this.sortShowArr();
    let showArr = [];

    for (let i = 0; i < 3; i++) {
        showArr.push(dataArr[i]);
    }
    this.state.showArr = showArr;
    
    // 改变显示状态
    this.setState({showArr});
}

// 回答问题后的处理
getAnswer(answer, index, answerIndex) {
    if (answer) {
        this.state.showArr[index].rightCount += 1;
    } else {
        this.state.showArr[index].falseCount += 1;
    }
    this.db.set('dataArr', this.state.dataArr);
    
    // 重新获取显示数组
    this.changeShowArr();
}

// footer.js，提交处理
handlerClick(e){
    let selected = document.querySelectorAll("input[name=people]:checked");

    if(!selected.length) return alert("请选择");

    let value = selected[0].value;
    selected[0].checked = false;

    if(this.props.questionName === value){
        alert("回答正确！");
        this.props.getAnswer(true, this.props.randomIndex);
    }else{
        alert("回答错误！");
        this.props.getAnswer(false, this.props.randomIndex);
    }
}

其实可以看出来，我们获得sortShowArr()排序后的数组后，取前三个放入显示数组showArr中，通过改变状态的方式setState，可以自动更新前端界面。还有问答问题后，正确与错误的次数，也会相应保存，并存放到localStorage内。至于内部的事件处理，其实也就更加轻松，就是处理一个click事件，提交后判断答案，再回传到getAnswer()。

结束语

学自己感兴趣的东西，学起来更加好玩！
当然最怕还是那些不愿寻找自己兴趣的人。