Vue 云开发-结合survey.js+boostrapVue

新建一个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))
        }
}

视频观看地址