新建一个vue项目并配置
脚手架版本为3.0.4
首先创建一个新的vue项目并且安装router、boostrapVue、survey.js(都安装默认安装
)
vue create survey
vue add router
vue add bootstrap-vue
接下来安装survey.js
npm install survey-vue --save
在Survey 页面中初始化配置
<template>
<Survey :survey="survey" />
</template>
<script>
import { Survey, StylesManager, Model } from "survey-vue";
export default {
name: "survey",
components: {
Survey,
},
data() {
let data = {
title: "问卷标题",
pages: [
{
questions: [
{
name:'邮箱',
type:'text',
title:'填写邮箱'
}
],
},
],
};
StylesManager.applyTheme("bootstrap"); //使用bootstrap的样式
let model = new Model(data);
return {
survey: model,
result: null,
};
},
};
</script>
开通cms内容管理器
可在小程序开发工具-云开发开通
云开发-登录验证(举例邮箱)
若是匿名登录,如果匿名登录的话需要使用自定义安全规则
安装云开发vue插件
npm install --save @cloudbase/vue-provider
安装之后在main.js里面配置
import Cloudbase from "@cloudbase/vue-provider";
Vue.use(Cloudbase, {
env: "xxx"
});
登录验证
登录方式有多种,可以使用邮箱登录
在腾讯云控制台-环境-登录授权开启邮箱登录,并且配置好
注意,SMTP 账号密码要到qq邮箱首页-设置-账户-开启SMTP,若已开启,可关闭后再开启来获取密码
在你登录注册页面引入,注册成功后需要在邮箱中确认邮件
<template>
<div class="home">
<h1>请使用邮箱和密码注册或登录</h1>
<div class="container">
<b-form-input
v-model="email"
type="email"
placeholder="Enter your email"
></b-form-input>
<b-form-input
v-model="password"
type="password"
placeholder="Enter your password"
></b-form-input>
<b-button-group>
<b-button @click="signup" variant="success">注册</b-button>
<b-button @click="login">登录</b-button>
</b-button-group>
</div>
</div>
</template>
<script>
import cloudbase from "@cloudbase/js-sdk";
cloudbase.init({
env: "xxx",
});
export default {
name: "login",
data() {
return {
email: null,
password: null,
};
},
methods: {
async signup() {
console.log(this);
await this.$cloudbase
.auth()
.signUpWithEmailAndPassword(this.email, this.password)
.then((res) => {
console.log("成功", res);
})
.catch((err) => {
console.log("失败", err);
});
},
async login() {
await this.$cloudbase
.auth()
.signInWithEmailAndPassword(this.email, this.password)
.then((res) => {
console.log("成功", res);
this.$router.push({
path:'/survey'
})
})
.catch((err) => {
console.log("失败", err);
});
},
},
};
</script>
新建云函数
云开发VS Code 插件 CloudBase Toolkit 云函数调试
安装
npm i -g @cloudbase/cli
检查是否安装成功
tcb -v
在根目录右键点击创建cloudbaserc配置文件,将里面函数名改成你新建的云函数名称(此时vscode工作区不要有其他项目,否则可能新建到别的项目去)
再到cloud文件右键选择本地新建云函数
选择第一个Node Hello World,此时云函数名称为hello-world可自行更改为uploadAnswer
再执行此3行命令进行环境初始化
将其上传并部署到云端
将survey页面收集的数据通过云函数添加到数据库中
survey页面,添加create函数
async created() {
//获取相应授权
const auth = this.$cloudbase.auth();
const db = this.$cloudbase.database();
// 应用初始化时
if (auth.hasLoginState()) {
//获取数据
db.collection("form")
.field({
_createTime: false,
_updateTime: false,
_id: false,
})
.get()
.then((res) => {
console.log("返回数据表单", res.data);
// 此时已经登录
let data = {
title: "问卷标题",
pages: [
{
questions: [...res.data],
},
],
};
StylesManager.applyTheme("bootstrap"); //使用bootstrap的样式
let model = new Model(data);
model.onUploadFiles.add(async (survey,options)=>{//将上传文件转换格式,原本为base64
let flie=await this.$cloudbase.uploadFile({
cloudPath:`${Math.random()}`,
filePath:options.files[0]
})
options.callback('success',[{
file:options.files[0],
content:file.fileID
}])
})
model.onComplete.add((result) => {//添加数据处理,会将提交的数据保存到result中
this.$cloudbase.callFunction({//调用uploadAnswer云函数
name:"uploadAnswer",
data:result.data
}).then(item =>{
console.log("函数提交完成",item)
alert("提交的信息已收到")
}).catch(error =>{
console.log("函数提交错误",error);
})
this.result = result.data;
console.log("提交数据", this.result);
});
this.survey = model;
})
.catch((err) => {
console.log("数据查询错误", err);
});
console.log("登录", auth.hasLoginState());
} else {
// 此时未登录,执行您的登录流程
this.$router.push({ path: "/" });
}
},
survey页面完整代码
<template>
<Survey :survey="survey" />
</template>
<script>
import { Survey, StylesManager, Model } from "survey-vue";
export default {
name: "survey",
components: {
Survey,
},
data() {
let data = {
title: "问卷标题",
pages: [
{
questions: [],
},
],
};
StylesManager.applyTheme("bootstrap"); //使用bootstrap的样式
let model = new Model(data);
return {
survey: model,
result: null,
};
},
async created() {
//获取相应授权
const auth = this.$cloudbase.auth();
const db = this.$cloudbase.database();
// 应用初始化时
if (auth.hasLoginState()) {
//获取数据
db.collection("form")
.field({
_createTime: false,
_updateTime: false,
_id: false,
})
.get()
.then((res) => {
console.log("返回数据表单", res.data);
// 此时已经登录
let data = {
title: "问卷标题",
pages: [
{
questions: [...res.data],
},
],
};
StylesManager.applyTheme("bootstrap"); //使用bootstrap的样式
let model = new Model(data);
model.onUploadFiles.add(async (survey,options)=>{//将上传文件转换格式,原本为base64
let flie=await this.$cloudbase.uploadFile({
cloudPath:`${Math.random()}`,
filePath:options.files[0]
})
options.callback('success',[{
file:options.files[0],
content:file.fileID
}])
})
model.onComplete.add((result) => {//添加数据处理,会将提交的数据保存到result中
this.$cloudbase.callFunction({//调用uploadAnswer云函数
name:"uploadAnswer",
data:result.data
}).then(item =>{
console.log("函数提交完成",item)
alert("提交的信息已收到")
}).catch(error =>{
console.log("函数提交错误",error);
})
this.result = result.data;
console.log("提交数据", this.result);
});
this.survey = model;
})
.catch((err) => {
console.log("数据查询错误", err);
});
console.log("登录", auth.hasLoginState());
} else {
// 此时未登录,执行您的登录流程
this.$router.push({ path: "/" });
}
},
methods: {},
};
</script>
在云函数uploadAnswer/inedx.js中
const cloudbase = require('@cloudbase/node-sdk')
const app = cloudbase.init({
env:'xxx'
})
// 1. 获取数据库引用
var db = app.database()
exports.main = async (event,context) => {
return {
code:0,
data:(await db.collection("answer").add(event))
}
}