我在尝试使用 SurveyJS 功能的地方制作 Vue 应用程序时遇到问题：
- 我有一个 .vue 页面（Questionnaire.vue），其中有一个调查功能，询问预评估问题。在完成时，我希望它保存到 JSON 文件。
- 我有另一个 .vue 页面（contactInfo.vue），我有一个调查功能，用户可以在其中输入他们的联系信息（名字、姓氏、电话号码和电子邮件。在页面的末尾，我希望它能够有上传文件的能力，我有一个实现它的方法。我需要更好的 Axios 吗？
我的问题是我：
- 在完成第一个调查（问卷）时遇到问题，让 Vue 应用程序转换到第二个 .vue 页面（ContactInfo）。它应该在一个 vue 页面中还是我正在实施并称它错误？
- 我在 POST 到我的 MongoDB 数据库时遇到问题。我希望能够将 JSON 文件中的所有信息发送到数据库，但我遇到了连接问题或其他问题。
示例代码不包括我的数据库 URL 连接，但代码显示了其他所有内容。
PreScreen.vue
<template>
<survey :survey="survey"/>
</template>
<script>
import * as Survey from "survey-vue";
import "survey-vue/survey.css";
import "./index.css";
Survey.StylesManager.applyTheme("default");
export default {
name: 'PreScreen',
data() {
var json = {
showQuestionNumbers: "off",
pages: [
{
questions: [
{
type: "radiogroup",
name: "q1",
title: "Do you know the safety specs of commercial buildings code?",
isRequired: true,
choices: [
"Yes", "No"
],
colCount: 0
}, {
type: "radiogroup",
name: "q2",
title: "Question 2",
visibleIf: "{q1}='Yes'",
isRequired: true,
choices: ["Yes", "No"]
}, {
type: "radiogroup",
name: "q3",
title: "Question 3:",
visibleIf: "{q1}='Yes' and {q2} ='Yes'",
isRequired: true,
choices: ["Yes", "No"]
}, {
type: "radiogroup",
name: "q4",
title: "Question 4:",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No']",
isRequired: true,
choices: ["Yes", "No"]
}, {
}, {
type: "radiogroup",
name: "q5",
title: "Question 5:",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No']",
isRequired: true,
choices: ["Yes", "No"]
}, {
type: "radiogroup",
name: "q6",
title: "Question 6:",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No']",
isRequired: true,
choices: ["Yes", "No"]
},
],
}
]
};
const survey = new Survey.Model(json);
function sendDataToServer(sender) {
var resultAsString = JSON.stringify(sender.data);
alert(resultAsString);
}
survey
.onComplete.add(sendDataToServer);
return {survey: survey};
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
这是我的Upload.vue
<template>
<survey :survey="survey"/>
</template>
<script>
import * as Survey from "survey-vue";
import "survey-vue/survey.css";
import "./index.css";
Survey.StylesManager.applyTheme("default");
export default {
name: 'Upload',
data() {
Survey.StylesManager.applyTheme("modern");
var json = {
questions: [
{
type: "file",
title: "Please upload your files",
name: "files",
storeDataAsText: false,
allowMultiple: true,
maxSize: 102400
},{
name: "first_Name",
type: "text",
title: "Please enter your First Name:",
placeHolder: "Jon",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']",
isRequired: true,
autoComplete: "name"
},
{
name: "last_Name",
type: "text",
title: "Please enter your Last Name:",
placeHolder: "Snow",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']",
isRequired: true,
autoComplete: "name"
},
{
name: "email",
type: "text",
title: "Please enter your Email:",
placeHolder: "jonsnow@gmail.com",
inputMask: "email",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']",
isRequired: true,
autoComplete: "name"
},
{
type: "file",
title: "Please upload your files",
name: "files",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']" ,
storeDataAsText: false,
allowMultiple: true,
maxSize: 902400
}
]
};
const survey = new Survey.Model(json);
survey.onComplete.add(function (sender) {
document
.querySelector('#surveyResult')
.textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
survey.onClearFiles.add(function (survey, options) {
// Code to remove files stored on your service
// SurveyJS Service doesn't allow to remove files
options.callback("success");
});
survey
.onUploadFiles
.add((survey, options) => {
var formData = new FormData();
options
.files
.forEach(function (file) {
formData.append(file.name, file);
});
var xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open("POST", "mongodb+srv://''CONNECTION_WAS_HERE''");
xhr.onload = function () {
var data = xhr.response;
options.callback("success", options.files.map(file => {
return {
file: file,
content: data[file.name]
};
}));
};
xhr.send(formData);
});
survey
.onDownloadFile
.add((survey, options) => {
var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open("GET", "mongodb+srv://'CONNECTION_WAS_HERE'" + options.content);
xhr.onload = function () {
var reader = new FileReader();
reader.onload = function (e) {
options.callback("success", e.target.result);
};
reader.readAsDataURL(new File([xhr.response], options.fileValue.name, {type: options.fileValue.type}));
};
xhr.send();
});
}}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
这是我的App.vue
<template>
<div id="app">
<Home/>
<div id="surveyElement">
<PreScreen/>
<Upload></Upload>
</div>
</div>
</template>
<script>
import Home from './components/Home.vue'
import PreScreen from './components/PreScreen.vue'
import Upload from './components/Upload.vue'
export default {
name: 'App',
components: {
Home,
PreScreen,
Upload
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>