Rumah >hujung hadapan web >tutorial js >Cara menggunakan Layui untuk membangunkan sistem soal selidik yang boleh diedit
Cara menggunakan Layui untuk membangunkan sistem soal selidik yang boleh diedit
- 王林asal
- 2023-10-27 14:15:271239semak imbas
Cara menggunakan Layui untuk membangunkan sistem soal selidik yang menyokong kebolehsuntingan
Pengenalan:
Soal selidik ialah alat penting untuk mengumpul dan menganalisis data. Cara membangunkan sistem tinjauan soal selidik yang menyokong fungsi boleh diedit adalah isu utama. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Layui untuk membangunkan sistem soal selidik yang berkuasa dan menyediakan contoh kod khusus.
- Pasang dan perkenalkan Layui:
Pertama, kita perlu memasang dan memperkenalkan rangka kerja Layui ke dalam projek. Layui boleh diperkenalkan melalui pautan CDN, atau dengan memuat turun dan memperkenalkan fail tempatan. - Susun atur halaman:
Seterusnya, kita perlu membuat halaman HTML dan menentukan susun atur sistem soal selidik. Anda boleh menggunakan komponen susun atur Layui untuk melaksanakannya dengan cepat.
<!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>-
Buat templat soal selidik:
Di kawasan kandungan utama, kita boleh membuat templat soal selidik.<!-- 主体内容 --> <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> - Tambah soalan secara dinamik:
Menggunakan komponen bentuk Layui dan fungsi acara mengikat dinamik, anda boleh merealisasikan fungsi menambah soalan secara dinamik.
// 定义一个全局变量，用来记录当前问题的索引
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++;
});- Simpan data soal selidik:
Melalui komponen Ajax Layui, data soal selidik boleh disimpan ke pelayan bahagian belakang.
// 保存问卷按钮的点击事件
$("#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("请求出错");
}
});
});- Antara muka belakang:
Akhir sekali, kita perlu menulis antara muka belakang untuk menyimpan data soal selidik. Berikut ialah PHP sebagai contoh:
<?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);
?>Ringkasan:
Melalui langkah di atas, kami berjaya menggunakan Layui untuk membangunkan sistem soal selidik yang menyokong keboleheditan dan menyediakan contoh kod khusus. Pembangun boleh membuat pelarasan dan pengoptimuman terperinci berdasarkan keadaan sebenar untuk memenuhi keperluan mereka sendiri. Harap artikel ini membantu anda!
Atas ialah kandungan terperinci Cara menggunakan Layui untuk membangunkan sistem soal selidik yang boleh diedit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!