Comment utiliser Layui pour développer un système de questionnaire modifiable-js tutoriel-php.cn

Comment utiliser Layui pour développer un système de questionnaire modifiable

王林

Libérer： 2023-10-27 14:15:27

original

1235 Les gens l'ont consulté

Comment utiliser Layui pour développer un système de questionnaire modifiable

Comment utiliser Layui pour développer un système de questionnaire prenant en charge la possibilité de modification

Introduction :
Le questionnaire est un outil important pour la collecte et l'analyse des données. Comment développer un système d’enquête par questionnaire prenant en charge les fonctions modifiables est une question clé. Cet article présentera comment utiliser le framework Layui pour développer un système de questionnaire puissant et fournira des exemples de code spécifiques.

Installer et introduire Layui :
Tout d'abord, nous devons installer et introduire le framework Layui dans le projet. Layui peut être introduit via un lien CDN, ou en téléchargeant et en introduisant des fichiers locaux.
Mise en page :
Ensuite, nous devons créer une page HTML et définir la mise en page du système de questionnaire. Vous pouvez utiliser le composant de mise en page de Layui pour implémenter rapidement cela.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>问卷调查系统</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部内容 -->
        </div>
        <div class="layui-side">
            <!-- 侧边栏内容 -->
        </div>
        <div class="layui-body">
            <!-- 主体内容 -->
        </div>
        <div class="layui-footer">
            <!-- 底部内容 -->
        </div>
    </div>
    <script src="layui/layui.js"></script>
    <script>
        layui.use('element', function(){
          var element = layui.element;

          //...这里可以写一些自定义的业务逻辑代码
        });
    </script>
</body>

</html>

Copier après la connexion

Créer un modèle de questionnaire :
Dans la zone de contenu principale, nous pouvons créer un modèle de questionnaire.

<!-- 主体内容 -->
<div class="layui-body">
 <div class="layui-container">
     <div class="layui-row">
         <div class="layui-col-md12">
             <blockquote class="layui-elem-quote layui-quote-nm">
                 <button class="layui-btn layui-btn-primary" id="add-question">添加问题</button>
                 <button class="layui-btn" id="save">保存问卷</button>
             </blockquote>
         </div>
         <div id="question-container" class="layui-col-md12">
             <!-- 问题列表容器 -->
         </div>
     </div>
 </div>
</div>

Copier après la connexion

Ajouter dynamiquement des questions :
En utilisant le composant de formulaire de Layui et la fonction d'événement de liaison dynamique, vous pouvez réaliser la fonction d'ajout dynamique de questions.

// 定义一个全局变量，用来记录当前问题的索引
var questionIndex = 0;

// 添加问题按钮的点击事件
$("#add-question").click(function() {
    // 动态创建一个问题节点
    var question = `
    <div class="layui-card">
        <div class="layui-card-header">问题${questionIndex+1}：</div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="question-${questionIndex}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-xs" id="add-option-${questionIndex}">添加选项</button>
                </div>
            </div>
            <div id="option-container-${questionIndex}">
                <!-- 选项容器 -->
            </div>
        </div>
    </div>
    `;

    // 将问题节点添加到问题列表容器中
    $("#question-container").append(question);

    // 绑定添加选项按钮的点击事件
    $("#add-option-" + questionIndex).click(function() {
        // 获取当前问题节点下的选项容器
        var optionContainer = $("#option-container-" + questionIndex);

        // 动态创建一个选项节点
        var option = `
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="option-${questionIndex}"/>
        </div>
        `;

        // 将选项节点添加到选项容器中
        optionContainer.append(option);
    });

    // 更新问题索引
    questionIndex++;
});

Copier après la connexion

Enregistrer les données du questionnaire :
Grâce au composant Ajax de Layui, les données du questionnaire peuvent être enregistrées sur le serveur backend.

// 保存问卷按钮的点击事件
$("#save").click(function() {
    var formData = layui.form.val("question-form"); // 获取表单数据

    // 发送Ajax请求，将表单数据保存到后台服务器
    layui.$.ajax({
        url: "save.php",
        type: "POST",
        data: formData,
        success: function(res) {
            if (res.code === 0) {
                layui.layer.msg("保存成功");
            } else {
                layui.layer.msg("保存失败");
            }
        },
        error: function() {
            layui.layer.msg("请求出错");
        }
    });
});

Copier après la connexion

Interface backend :
Enfin, nous devons écrire une interface backend pour enregistrer les données du questionnaire. Voici PHP à titre d'exemple :

<?php
$questionIndex = 0;
$questions = $_POST;
$questionList = [];
while(isset($questions["question-".$questionIndex])){
    $question = $questions["question-".$questionIndex];

    $options = [];
    $optionIndex = 0;
    while(isset($questions["option-".$questionIndex."-".$optionIndex])){
        array_push($options, $questions["option-".$questionIndex."-".$optionIndex]);
        $optionIndex++;
    }

    $questionData = [
        "question" => $question,
        "options" => $options
    ];
    array_push($questionList, $questionData);
    $questionIndex++;
}

// 将问卷数据保存到数据库
// TODO: 保存逻辑

// 返回保存结果给前端
$result = [
    "code" => 0,
    "message" => "保存成功"
];
echo json_encode($result);
?>

Copier après la connexion

Résumé :
Grâce aux étapes ci-dessus, nous avons utilisé avec succès Layui pour développer un système de questionnaire prenant en charge la possibilité de modification et fourni des exemples de code spécifiques. Les développeurs peuvent effectuer des ajustements et des optimisations détaillés en fonction des conditions réelles pour répondre à leurs propres besoins. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!