[云服务器7] 搭建问卷调查系统+Bootstrap美化+自定义问卷

PatrickYao0422

已于 2024-09-07 20:24:07 修改

阅读量1k

点赞数 11

文章标签：服务器 bootstrap 运维

于 2024-09-07 12:54:00 首次发布

本文链接：https://blog.csdn.net/2301_76197567/article/details/141993762

版权

在当今信息化时代，问卷调查成为了收集用户反馈和意见的重要工具。本文将指导你如何在云服务器上搭建一个简单的问卷调查系统，并使用Bootstrap进行美化。我们将实现创建问卷和参与问卷的功能。

获得服务器

我们将使用云服务器来部署我们的项目。

首先我们打开雨云官网，点击右上角的“登录/注册”，按要求注册一个账号（优惠码记得填pyao）。

在这里插入图片描述

注册好后，我们来到主页的“云服务器”这一栏，选择“购买云服务器”。

在这里插入图片描述

参考配置仅供参考：

区域：中国香港-软银大带宽[四区]

CPU：Xeon® Gold

套餐：流量叠加型-KVM 标配版

操作系统：Ubuntu 22.04 无预装（只要是linux系列都行）

购买好后，我们来到云服务器管理界面，找到你刚才的服务器，它会显示创建中，等变成运行中是，点击服务器卡片的“管理”。

在这里插入图片描述
找到这一栏：

在这里插入图片描述
然后我们打开SSH工具（Windows 10+ MacOS和Linux有自带的ssh，也可以使用雨云面板的Xtermjs或其他你喜欢的软件），连接上你的服务器。

出现root@RainYun-XXX:~#就表示连接好了，此时我们输入：

apt update
apt upgrade
reboot

这是用来更新软件的，防止后面出现各种玄学的错误。

reboot后，SSH连接将显示Connection to XXX.XXX.XXX.XXX Closed，不要慌，过个3分钟重新连接回去就好了。

安装必要的软件

为了部署，我们还需要在服务器上安装以下软件：

Node.js：用于搭建后端服务
MongoDB：用于存储问卷数据
Nginx：用于反向代理和静态文件服务

apt update
apt upgrade
curl -sL https://deb.nodesource.com/setup_18.x | bash -
apt install -y nodejs
apt install -y nginx
apt install -y mongodb
systemctl start mongodb
systemctl enable mongodb

（安装剪影）

在这里插入图片描述
有warning不用管，只要能安装就好了。

在这里插入图片描述
出现这几行五彩斑斓的文字，就表示NodeJS安装好了！

在这里插入图片描述

开始搭建

项目初始化

创建一个新的Node.js项目：

mkdir survey_sys
cd survey_sys
npm init -y

安装 Node.js 所需的依赖：

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

编写后端代码

在项目根目录下创建一个server.js文件，这个是用来创建服务器的，和WebMC项目的server.js类似，都是为了创建一个能简单发送/接受响应的服务端。

其中app.post(...)和Flask，Django等@route相似，表示一个页面。

同时，这个程序还会监听3000端口，这就意味我们可以用你的服务器IP:3000来访问你的界面。

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

const app = express();
const PORT = process.env.PORT || 3000;

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

const surveySchema = new mongoose.Schema({
    title: String,
    questions: [String],
    responses: [[String]]
});
const Survey = mongoose.model("Survey", SurveySchema);

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

app.post("/surveys",async (req,res) => {
    const survey = new Survey(req.body);
    await survey.save();
    res.status(201).send(survey);
});

app.get("/surveys",async (req,res) => {
    const surveys = await Survey.find();
    res.send(surveys);
});

app.post("/surveys/:id/responses",async (req,res) => {
    const survey = await Survey.findById(req.params.id);
    survey.responses.push(req.body.responses);
    await survey.save();
    res.status(201).send(survey);
});

app.listen(PORT, () => {
    console.log("服务器已启动,访问http://你的服务器IP:3000");
});

启动服务端

在终端中运行以下命令启动服务：

node server.js

出现服务器已启动,访问http://你的服务器IP:3000，就表示服务器已经在监听这个端口了。

搭建前端

编写index.html代码

index.html就是整个项目的核心界面了，提供了各个界面的导航。

我们加上了boostrap 3来优化界面，显得非常Pro，可以参考菜鸟教程有关bootstrap的介绍

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>问卷调查系统 - Powered by Node.JS</title>
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.js">
    <style>
    body {
    	background-color: #ccc;
	}
	</style>
</head>
<body>
    <div class="container">
        <h1 class="mt-5">问卷调查系统</h1>
        <form id="survey-form">
            <h2 class="mt-4">创建问卷</h2>
            <div class="form-group">
                <label for="title">问卷标题</label>
                <input type="text" class="form-control" id="title" required>
            </div>
            <div class="form-group">
                <label for="questions">输入问题(格式为:使用半角逗号分隔)</label>
                <input type="text" class="form-control" id="questions" required>
            </div>
            <button type="submit" class="btn btn-primary">提交问卷</button>
        </form>
        <h2 class="mt-4">参与问卷</h2>
        <div id="surveys"></div>
    </div>

    <script>
        document.getElementById("survey-form").addEventListener("submit", async (e) => {
            e.preventDefault();
            const title = document.getElementById("title").value;
            const questions = document.getElementById("questions").value.split(",");

            const response = await fetch("http://localhost:3000/surveys", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ title, questions })
            });

            if (response.ok) {
                alert("问卷创建成功！");
                document.getElementById("survey-form").reset();
                loadSurveys(); 
            }
        });

        async function loadSurveys() {
            const response = await fetch("http://localhost:3000/surveys");
            const surveys = await response.json();
            const surveysDiv = document.getElementById("surveys");
            surveysDiv.innerHTML = "";
            surveys.forEach(survey => {
                const surveyElement = document.createElement("div");
                surveyElement.className = "card mt-2";
                surveyElement.innerHTML = `
                    <div class="card-body">
                        <h5 class="card-title">${survey.title}</h5>
                        <p class="card-text">${survey.questions.join(", ")}</p>
                        <button class="btn btn-secondary" οnclick="participateSurvey("${survey._id}")">参与问卷</button>
                    </div>
                `;
                surveysDiv.appendChild(surveyElement);
            });
        }

        async function participateSurvey(surveyId) {
            const responses = prompt("请输入你的答案(格式为:使用半角逗号分隔)");
            if (responses) {
                await fetch(`http://localhost:3000/surveys/${surveyId}/responses`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ responses: responses.split(",") })
                });
                window.location.href = "/thank_participate.html";
            }
        }

        window.onload = loadSurveys;
        // 不要写loadSurveys()
    </script>
</body>
</html>

4. 配置Nginx

到此，我们可以同个你的服务器IP:3000来访问这个问卷了！

但为了能让用户通过80端口访问(不用加入:3000），我们可以使用nano or vim打开/etc/nginx/sites-available/default

添加以下内容：

server {
    listen 80;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /public {
        alias /你的SurveySys路径/public;
    }
}