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))
        }
}

视频观看地址

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值