使用React、Express实现一个问卷发布/收集系统

这篇具有很好参考价值的文章主要介绍了使用React、Express实现一个问卷发布/收集系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 设置项目结构

questionnaire-system/
  client/             // 前端应用
    src/
      components/     // React组件
      pages/          // 页面
      App.js
      index.js
  server/             // 后端服务
    routes/           // 路由
    models/           // 数据模型
    app.js
  package.json

2. 启动前端应用

client目录下,创建React应用并启动它:

npx create-react-app .
npm start

3. 设置Express后端

server目录下,设置Express后端:

npm init -y
npm install express mongoose body-parser cors

server/app.js中设置Express应用:

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const app = express();

app.use(cors());
app.use(bodyParser.json());

// 设置数据库连接
mongoose.connect("mongodb://localhost/questionnaire", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on("error", console.error.bind(console, "数据库连接错误"));
db.once("open", function () {
  console.log("数据库连接成功");
});

// 设置路由
const authRoutes = require("./routes/auth");
const questionnaireRoutes = require("./routes/questionnaire");

app.use("/auth", authRoutes);
app.use("/questionnaire", questionnaireRoutes);

app.listen(5000, () => {
  console.log("后端服务已启动,端口5000");
});

4. 创建Express路由

server/routes目录下,创建路由文件,例如auth.jsquestionnaire.js,以处理用户身份验证和问卷操作。

创建auth.js用于用户身份验证:

const express = require("express");
const router = express.Router();

// 处理用户注册
router.post("/register", (req, res) => {
  // 实现用户注册逻辑
});

// 处理用户登录
router.post("/login", (req, res) => {
  // 实现用户登录逻辑
});

// 处理用户注销
router.post("/logout", (req, res) => {
  // 实现用户注销逻辑
});

module.exports = router;

创建questionnaire.js用于问卷操作:

const express = require("express");
const router = express.Router();

// 处理创建问卷
router.post("/create", (req, res) => {
  // 实现创建问卷逻辑
});

// 处理发布问卷
router.post("/publish", (req, res) => {
  // 实现发布问卷逻辑
});

// 处理填写问卷
router.post("/submit", (req, res) => {
  // 实现填写问卷逻辑
});

// 处理查看问卷结果
router.get("/results/:id", (req, res) => {
  const questionnaireId = req.params.id;
  // 实现查看问卷结果逻辑
});

module.exports = router;

5. 创建数据模型

server/models目录下,创建Mongoose模型来定义用户、问卷等数据结构。

server/models目录下,创建一个名为User.js的文件来定义用户数据模型:

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  username: {
    type: String,
    required: true,
    unique: true,
  },
  password: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
    unique: true,
  },
  // 其他用户相关字段
});

const User = mongoose.model("User", userSchema);

module.exports = User;

然后,创建一个名为Questionnaire.js的文件来定义问卷数据模型:

const mongoose = require("mongoose");

const questionnaireSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
  },
  description: String,
  questions: [
    {
      type: mongoose.Schema.Types.ObjectId,
      ref: "Question",
    },
  ],
  // 其他问卷相关字段
});

const Questionnaire = mongoose.model("Questionnaire", questionnaireSchema);

module.exports = Questionnaire;

在Express应用的server/app.js文件中,确保您已经连接了MongoDB数据库

mongoose.connect("mongodb://localhost/questionnaire", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

6. 设置React组件和页面

在前端应用中,创建React组件和页面来实现问卷设计、问卷发布、问卷填写、账户管理等功能。

在前端应用中,您需要创建React组件和页面来实现不同的功能,包括问卷设计、问卷发布、问卷填写和账户管理。以下是一个项目结构:

client/
  src/
    components/
      Auth/           // 用户身份验证相关组件
      Questionnaire/  // 问卷相关组件
      Account/        // 账户管理相关组件
    pages/
      Home.js         // 主页
      Login.js        // 登录页
      Register.js     // 注册页
      CreateQuestionnaire.js  // 创建问卷页
      FillQuestionnaire.js    // 填写问卷页
      AccountSettings.js      // 账户设置页
    App.js             // 主应用组件
    index.js           // 渲染应用

CreateQuestionnaire.js 代码

import React, { useState } from "react";

function CreateQuestionnaire() {
  const [questionnaire, setQuestionnaire] = useState({
    title: "",
    description: "",
    questions: [],
  });

  const addQuestion = () => {
    // 在状态中添加新问题
    const newQuestion = {
      text: "",
      options: [],
    };
    setQuestionnaire((prev) => ({
      ...prev,
      questions: [...prev.questions, newQuestion],
    }));
  };

  const handleQuestionChange = (index, field, value) => {
    // 更新特定问题的字段
    setQuestionnaire((prev) => {
      const updatedQuestions = [...prev.questions];
      updatedQuestions[index][field] = value;
      return { ...prev, questions: updatedQuestions };
    });
  };

  const saveQuestionnaire = () => {
    // 将问卷数据发送到后端保存
    // 可以使用Fetch或Axios发送POST请求
    console.log("保存问卷数据:", questionnaire);
  };

  return (
    <div>
      <h2>Create Questionnaire</h2>
      <div>
        <label>Title:</label>
        <input
          type="text"
          value={questionnaire.title}
          onChange={(e) => setQuestionnaire({ ...questionnaire, title: e.target.value })}
        />
      </div>
      <div>
        <label>Description:</label>
        <textarea
          value={questionnaire.description}
          onChange={(e) => setQuestionnaire({ ...questionnaire, description: e.target.value })}
        />
      </div>
      <h3>Questions</h3>
      {questionnaire.questions.map((question, index) => (
        <div key={index}>
          <input
            type="text"
            placeholder="Enter your question"
            value={question.text}
            onChange={(e) => handleQuestionChange(index, "text", e.target.value)}
          />
          <button onClick={addQuestion}>Add Question</button>
        </div>
      ))}
      <button onClick={addQuestion}>Add Question</button>
      <button onClick={saveQuestionnaire}>Save Questionnaire</button>
    </div>
  );
}

export default CreateQuestionnaire;

7. 实现问卷设计和发布

允许用户创建问卷,并将问卷保存到数据库。允许用户发布问卷链接。

  1. 在后端设置一个路由来接收前端发送的问卷数据并将其保存到数据库。
  2. 生成一个唯一的问卷标识符,以便后续用户填写问卷时使用。
  3. 返回问卷的标识符作为发布链接
const express = require("express");
const router = express.Router();
const Questionnaire = require("../models/Questionnaire");

// 创建问卷
router.post("/create", async (req, res) => {
  const { title, description, questions } = req.body;

  try {
    const newQuestionnaire = new Questionnaire({
      title,
      description,
      questions,
    });

    const savedQuestionnaire = await newQuestionnaire.save();
    res.json({ questionnaireId: savedQuestionnaire._id });
  } catch (error) {
    res.status(500).json({ error: "问卷保存失败" });
  }
});

// ...其他问卷相关路由

module.exports = router;

8. 实现问卷填写和收集

用户可以填写问卷,并将答案保存到数据库。

前端实现:

  1. 创建一个页面,显示问卷的问题,并允许用户填写答案。
  2. 用户填写完问卷后,将答案数据发送到后端以进行保存。

下面是FillQuestionnaire.js 组件的更新,以包括保存答案到后端的功能。

import React, { useState } from "react";
import axios from "axios";

function FillQuestionnaire({ questionnaireId }) {
  const [answers, setAnswers] = useState([]);
  const [questionnaire, setQuestionnaire] = useState(null);

  // 从后端获取问卷数据
  useEffect(() => {
    axios.get(`/api/questionnaire/${questionnaireId}`).then((response) => {
      setQuestionnaire(response.data);
    });
  }, [questionnaireId]);

  const handleAnswerChange = (questionIndex, answer) => {
    // 更新答案
    const updatedAnswers = [...answers];
    updatedAnswers[questionIndex] = answer;
    setAnswers(updatedAnswers);
  };

  const submitAnswers = () => {
    // 将答案数据发送到后端保存
    axios
      .post(`/api/questionnaire/submit/${questionnaireId}`, { answers })
      .then((response) => {
        console.log("答案提交成功", response.data);
        // 可以进行其他操作,如重定向到感谢页面
      })
      .catch((error) => {
        console.error("答案提交失败", error);
      });
  };

  return (
    <div>
      {questionnaire && (
        <div>
          <h2>{questionnaire.title}</h2>
          <p>{questionnaire.description}</p>
          <form>
            {questionnaire.questions.map((question, index) => (
              <div key={index}>
                <p>{question.text}</p>
                {/* 根据问题类型渲染相应的答案输入框 */}
                {question.type === "text" ? (
                  <input
                    type="text"
                    value={answers[index] || ""}
                    onChange={(e) => handleAnswerChange(index, e.target.value)}
                  />
                ) : (
                  // 渲染其他类型的答案输入框
                )}
              </div>
            ))}
          </form>
          <button onClick={submitAnswers}>Submit Answers</button>
        </div>
      )}
    </div>
  );
}

export default FillQuestionnaire;

后端实现:

  1. 在后端设置一个路由来接收前端发送的答案数据并将其保存到数据库。
  2. 根据问卷标识符,将答案与问卷关联。

以下是一个简化的后端路由 server/routes/questionnaire.js文章来源地址https://www.toymoban.com/news/detail-725054.html

const express = require("express");
const router = express.Router();
const Questionnaire = require("../models/Questionnaire");

// 提交问卷答案
router.post("/submit/:questionnaireId", async (req, res) => {
  const questionnaireId = req.params.questionnaireId;
  const answers = req.body.answers;

  try {
    const questionnaire = await Questionnaire.findById(questionnaireId);

    if (!questionnaire) {
      return res.status(404).json({ error: "问卷不存在" });
    }

    // 将答案与问卷关联,保存到数据库
    // 您可以根据实际需求设计数据库结构来存储答案数据

    res.json({ message: "答案保存成功" });
  } catch (error) {
    res.status(500).json({ error: "答案保存失败" });
  }
});

// ...其他问卷相关路由

module.exports = router;

到了这里,关于使用React、Express实现一个问卷发布/收集系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【NodeJs】使用Express框架快速搭建一个web网站

    如果电脑有安装使用Nodejs,用得次数少的话,忘了怎么弄,可以看看这个文章,按照步骤,能快速搭建一个web网站服务器, 首先,你需要保证电脑系统有安装了Node.js,然后可以用VsCode开发工具,新建一个项目文件夹, 如果你是新手,应该知道,创建nodejs项目会依赖npm, 在项

    2024年02月03日
    浏览(58)
  • 89基于java的在线调查问卷系统设计与实现(含配套lun文,可参考做毕设)

    本章节给大家带来一个基于java在线调查问卷系统设计与实现,可适用于基于java在线校园调查问卷,基于java校园问卷调查系统,java问卷调查系统,校园在线问卷调查,校园在线调查问卷系统设计,调查问卷管理系统,基于Javaweb实现在线调查问卷系统,网上调查问卷系统,网

    2024年02月08日
    浏览(48)
  • Node + Express 后台开发 —— 上传、下载和发布

    前面我们已经完成了数据库的 增删改查 ,在弄一个 上传 图片、 下载 csv,一个最简单的后台开发就已完成,最后 部署 即可。 需求 需求 :做一个 个人简介 的表单提交,有 昵称 、 简介 和 头像 。后端能接收数据并保存到数据库。 接收不到数据 用 amis-editor (amis 低代码编

    2024年02月03日
    浏览(48)
  • 一步步带你实现一个简单的express服务器,能让vue通过axios请求将图片上传到阿里云OSS

    上篇文章提到了如何用mock.js来模拟接口,方便在后端没有写好接口的时候也能顺利开发,本来计划这篇文章是讲一下用轮播图组件swiper来展示一下模拟接收到的数据和图片,但项目计划发生了变化,这个就推到后面再说。 mock模拟接口虽然很好用,但是在项目开发的时候还是

    2024年02月04日
    浏览(58)
  • React--》从零开始搭建一个文章后台管理系统

    目录 项目准备 项目搭建 scss预处理器的使用 配置基础路由 组件库antd的使用 开发者工具的安装 登录模块 基本样式搭建 创建表单结构 获取表单数据并进行相关登录操作 对登录模块的token进行相关处理 路由鉴权实现 后台页面模块 基本页面结构搭建 菜单高亮显示 展示个人信

    2023年04月17日
    浏览(49)
  • Go实现LogCollect:海量日志收集系统【上篇——LogAgent实现】

    下篇:Go实现LogCollect:海量日志收集系统【下篇——开发LogTransfer】 项目架构图: 背景 当公司发展的越来越大,业务越来越复杂时,每个业务系统都有自己的日志。此时我们就应该将不同业务线的日志进行实时收集,存储到一个日志收集中心,最后再通过web页面展示出来。

    2024年02月09日
    浏览(37)
  • 基于selenium实现自动填写问卷星的问卷调查

    废话不多说,直接上解决方案: 没用用过selenium的小朋友记得先安装配置一下: 谷歌浏览器驱动的安装及selenium的安装与使用 - 知乎  防止有人不看参数说明,再写一遍: 注意:由于时间有限,目前我只做了单选和多选这两类选择题的自动填写,后续有时间的话会继续更新其

    2024年02月04日
    浏览(57)
  • Python、Selenium实现问卷星自动填写(内含适配个人问卷的方法)

    🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:Python实用教程 Selenium :用于自动化web应用程序测试。它提供了一组API和库,使开发人员能够以编程方式控制浏览器并

    2024年02月17日
    浏览(45)
  • JavaScript 发布-订阅设计模式实现 React EventBus(相当于vue的$Bus)非父子之间通信

    参考文档:https://github1s.com/browserify/events/blob/main/events.js                  https://www.npmjs.com/package/events                  https://github.com/browserify/events                     首先先新建一个文件eventBus.tsx 然后再组件A使用=接收 然后再组件B使用=触发     安装这个events插件

    2023年04月18日
    浏览(102)
  • Go实现LogCollect:海量日志收集系统【下篇——开发LogTransfer】

    Go实现LogAgent:海量日志收集系统【上篇——LogAgent实现】 前面的章节我们已经完成了日志收集(LogAgent),接下来我们需要将日志写入到kafka中,然后将数据落地到Elasticsearch中。 项目架构图: 项目逻辑图: 如果没有docker环境的,可以在本机安装 docker desktop 1.需要保证要挂载

    2024年02月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包