SurveyJS 库教程

2024-08-10 15:51:16作者：俞予舒Fleming

SurveyJS is an open-source JavaScript form builder library that allows developers to create dynamic forms, multi-step form wizards, and survey applications. It supports React, Angular, and Vue.js (Vue 3), and can also be used in applications built with plain JavaScript.

项目地址：https://gitcode.com/gh_mirrors/su/survey-library

1. 项目介绍

SurveyJS 是一套用于创建调查问卷和表单的免费 JavaScript 库。它提供了一个强大的形式构建器以及与多种前端技术（如 React、Angular、Vue 和 jQuery）的集成。此外，SurveyJS 还包括一个图形界面可视化调查构建器，允许非技术人员轻松创建表格，并通过仪表盘可视化响应数据。该项目是 MIT 许可下的开源解决方案，旨在成为主流 SaaS 调查平台的自由替代方案，并重视数据安全性。

2. 项目快速启动

要开始使用 SurveyJS，首先确保安装了 npm。然后，您可以按照以下步骤在你的项目中引入 SurveyJS：

安装库

npm install survey-js
# 或者，如果你使用 Yarn
yarn add survey-js

引入库并创建一个简单的调查

在 HTML 文件中引入库文件，创建一个容器元素，然后在 JavaScript 中加载调查：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>SurveyJS 示例</title>
    <!-- 在这里引入 CSS 和 JS 文件 -->
    <script src="path/to/survey.min.js"></script>
</head>
<body>
    <div id="surveyElement"></div>
    <script>
        // 创建调查模型
        var surveyJSON = {
            title: "简单调查",
            pages: [
                {
                    name: "page1",
                    questions: [
                        { type: "text", name: "username", title: "您的姓名:" },
                        { type: "radiogroup", name: "gender", title: "性别:", choices: ["Male", "Female"] }
                    ]
                }
            ]
        };

        // 创建 Survey 对象
        var survey = new Survey.Model(surveyJSON);

        // 将调查渲染到指定的 DOM 元素
        survey element = document.getElementById("surveyElement");
        survey.render(element);

        // 监听完成事件
        survey.onComplete.add(function(result) {
            alert("谢谢您的参与！这里是您的结果：" + JSON.stringify(result.data));
        });
    </script>
</body>
</html>