PHP和原生JS实现九型人格在线测试源码分析(含GitHub地址)

前言

开源代码总有朋友不大会用,小编很忙也顾不过来。所以,github版本是引用第三方库的版本,想要DIY修改CSS文件即可。

不用找我调代码了哈~


人生第一份开源代码,GitHub地址:https://github.com/yixzm/nine_style_people

之前学习九型后心血来潮开发了一个在线测试应用,又随便写了篇帖子:
《PHP和原生JS实现九型人格在线测试(144题)》

没想到有挺多朋友对源码挺感兴趣,So,小编将本该刷剧的时间腾出来整理了下源码。

开发环境:
LAP,Linux安装Apache,支持PHP运行即可。数据很简单,用不到数据库。

主要功能代码简要解释下。

HTML

HTML,页面包括答题板、结果雷达图和结果描述区域

        <div id="question_number">总共 144 道题目</div>
        <div class="social" id="question_board"></div>
        <div>
            <div class="social" id="stylePicture"></div>
            <div class="social" id="styleInfo"></div>
        </div>

JS

JS源码

JS,获取问题描述、获取结果描述、想服务端提交测试结果

function get_9style_people_question() {
    if (g_qid >= 0) {
        var uri = api_host + "?api=get_9style_people_question&qid=" + g_qid;
        ajax("GET", uri, case_get_9style_people_question, null);
    }
}

function get_9style_people_info(typeID) {
    var uri = api_host + "?api=get_9style_people_info&typeID=" + typeID;
    ajax("GET", uri, case_get_9style_people_info, null);
}

function post_9style_people_result() {
    var uri = api_host + "?api=post_9style_people_result";
    var jsonStr = encodeURIComponent(JSON.stringify(g_answer));
    var body = "result=" + jsonStr;
    //console.log(body);

    ajax("POST", uri, case_post_9style_people_result, body);
}

JS封装

这里,小编模仿jQuery的写法,实现了$() 和 ajax

function $(id) {
    return document.getElementById(id);
}

function $$(className) {
    return document.getElementsByClassName(className);
}

function ajax(req, uri, func, body) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //TODO response增加鉴权code
            func(xmlhttp.responseText);
        }
    }
    //uri增加Code字段
    xmlhttp.open(req, uri, true);
    if (req == "POST") {
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    }
    xmlhttp.send(body);
}

PHP

极简路由,区分API和页面请求

if (isset($_GET['api'])) {
    require_once(__DIR__."/nine_style/api/q_144.php");
    // echo file_get_contents(__DIR__."/nine_style/api/q_144.php");
    $api = $_GET['api'];
    switch ($api) {
        case "get_9style_people_question":
        echo get_9style_people_question();
        case "get_9style_people_info":
        echo get_9style_people_info();
        case "post_9style_people_result":
        echo post_9style_people_result();
        default:
        return null;
    }
} else {
    // var_dump(scandir(__DIR__."/nine_style/view/"));
    // 请求入参为空,则加载测试页面
    require_once(__DIR__."/nine_style/view/q_144.html");
}

API实现

函数命名都很语义化,应该不需要注释吧~

function get_9style_people_question()
{
    $q_count = 144;
    if (isset($_GET['qid']) && ((int)$_GET['qid'] >= 0) && ((int)$_GET['qid'] < $q_count)) {
        require_once(get_lib_path("question"));
        $json = array();
        array_push($json, $question[$_GET['qid']]);
        return json_encode($json, JSON_UNESCAPED_UNICODE);
    }
}

function get_9style_people_info()
{
    $q_count = 9;
    if (isset($_GET['typeID']) && ((int)$_GET['typeID'] >= 0) && ((int)$_GET['typeID'] < $q_count)) {
        require_once(get_lib_path("info"));
        $json = array();
        array_push($json, $people_style_info[$_GET['typeID']]);
        return json_encode($json);
    }
}

function post_9style_people_result()
{
    if (isset($_POST['result']) && (NULL !== $_POST['result'])) {
        $response = json_decode($_POST['result']);
        //return json_encode($response);
        require_once(get_lib_path("answer"));
        $score = array(
            'A' => 0, 'B' => 0, 'C' => 0,
            /** 9-6-3 */
            'D' => 0, 'E' => 0, 'F' => 0,
            /** 1-4-2 */
            'G' => 0, 'H' => 0, 'I' => 0,
            /** 8-5-7 */
        );
        for ($i = 0; $i < count($response); $i++) {
            ++$score[$answer[$i][$response[$i]]];
        }
        //var_dump($score);
        return json_encode($score);
    }
}

问题、人格描述和答案,小编将其以数组的形式写死在代码里,速度杠杠的~

库篇幅太长,又没啥逻辑性,如果需要自行到GitHub clone即可。

Over

至此,代码贴完啦~

如果需要更细致的解释,请提醒小编补充。

版权声明

弈心博客


本文首发弈心博客,转载请附上博文链接!