Vue 云开发问卷实战

Vue 云开发问卷实战
- 起步，技术选型和方案设计
- 前端页面构建
- 配置邮箱登录
- 利用云开发的CMS来配置问卷数据
- 云数据库的存储
- 使用云函数进行填写内容的校验
- 文件上传
- 用云开发CMS来查看问卷的数据
- - 系统开发总结
  - 最终效果

Vue 云开发问卷实战

第一次写博客，跟着腾讯云的实战案例一步步做的一个问卷调查重现

起步，技术选型和方案设计

写这篇文章的目的还是为了方便之后回顾技术特点，这是笔者第一次比较完整的实战安利开发，第一次写博客，菜鸟入门多多包涵
使用单页面应用的方式开发一个问卷调查系统
使用vue.js+Vue Router+Vuex完成开发
后端使用腾讯云开发
问卷模块使用Survey.js完成开发

前端整体通过vue.js、Vue Router、Vuex、Bootstrap、Survey.js完成构建
通过云开发sdk tcb-js-sdk连接到后端云开发Cloudbase上。

前端页面构建

问卷系统采用VueRouter来实现路由分发，即页面跳转，用Vuex完成页面之间的数据状态同步

安装完vue的环境下，在命令行界面中vue create survey首先创建一个vue项目
cd进入目录然后npm run serve来运行这个vue项目，这里使用的是课程界面的截图，因为项目已经完成了。

然后用vue add router来添加router，添加之后刷新界面就有了切换按钮
用vue add vuex来安装vuex，我好像还不是很懂vuex在这个项目中有什么作用

Vuex是专门为Vue服务，用于管理页面的数据状态、提供统一数据操作的生态系统，相当于数据库mongoDB，MySQL等，任何组件都可以存取仓库中的数据。
Vuex采用MVC模式中的Model层，规定所有的数据必须通过action—>mutaion—>state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。

我们使用Bootstrap来完成基本页面样式的构建，然后用survey.js来完成表单的构建，survey用起来非常的方便快捷，易于理解。
用vue add bootstrap-vue来安装
此时可以用code . 来打开vscode来看看默认界面的构成
再用yarn add survey-vue添加survey组件
再在代码中引入组件

再定义一个新的survey 并在components中来引用这个组件。

这时survey组件就已经在view当中了。
编写created函数来进行页面的初始化

此时survey组件已经被成功的初始化可以显示出data内的内容，点击提交即可完成问卷的提交

这时添加一个onComplete函数实现提交时提交数据的回调，在data中添加一个result来接收提交的表单数据，注意这里提交的应该是result.data

在src-views中创建好对应的页面，我们需要一个登录页面以完成登录注册等操作，还有survey页面来构建我们的表单。在vue Router的index.js中，我们可以创建不同的页面，并且修改他们的引用方式

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')},{path: '/survey',name: 'Survey',component: () => import(/* webpackChunkName: "survey" */ '../views/Survey.vue')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

这时默认的首页即是home页，此时里面是没有东西的。后面我们将会加入登录的页面

配置邮箱登录

使用cloudbase后台来完成利用邮箱完成注册登录的能力

要调用云开发的资源，要使用云开发vue插件，在云开发的手册中可以找到对应的命令

成功安装之后可以进行调用了，首先进行初始化

import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
import router from './router'
import store from './store'import Cloudbase from "@cloudbase/vue-provider"Vue.use(Cloudbase, {env: "你的云开发环境id"
})Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

然后我们回到bootstrap官网可以找到很多很方便的组件模板，如buttons等即插即用，特别方便，简直是新手入门福音。这里可以直接拿这个forms来构成我们的登录界面

替换底下的button变成button group来放置登录和注册按钮。然后绑定对应的数据，添加login和signup函数

export default {name: "login",data: function () {return {email: "",password: "",};},methods: {login() {const app = this.$cloudbase;app.auth().signInWithEmailAndPassword(this.email, this.password).then(() => {console.log("登陆成功");this.$router.push({path: "/survey",});}).catch((error) => {console.log(error);alert("输入登录的用户名或密码有误，请确认后重新输入");});},signup() {const app = this.$cloudbase;app.auth().signUpWithEmailAndPassword(this.email, this.password).then((res) => {console.log("注册", res);}).catch((error) => {console.log(error);alert("输入的用户名或密码有误，请确认后重新输入");});},},
};

之后利用云开发控制台的登录授权，打开邮箱登录，做好相应的配置之后（参考界面的配置文档，比较麻烦就不一一赘述），收到配置文件和确认之后就可以使用这部分的功能了。利用这两个函数来进行登录和注册，然后利用回调函数来反馈登录和注册情况，在登录部分，登陆成功的话就可以使用router来分发路由，进入survey的问卷界面了。
signInWithEmailAndPassword
signUpWithEmailAndPassword

利用云开发的CMS来配置问卷数据

在云开发控制台扩展应用中配置CMS内容管理系统，配置好相应的开发者和管理者用户之后，即可打开CMS系统。在内容摸醒中，我们可以创建我们的问卷表单摸醒，然后点击右侧模型类型来添加字段，设置需要的数据类型，这个过程实际上是创建一个数据库。这里我只添加了问卷中我需要的几种内容类型

注意这个只是表单的结构，实际上后面的问卷题目内容是在这里来填写的
所以我们会面临把数据库中的题目读取渲染到survey组件中的一个过程。
首先我们需要获取用户的授权，即登录授权，field参数可以帮助我们在返回结果中过滤一些内容，然后利用data属性来进行页面各个部分进行赋值了，这里【…resul.data】是一个解构的用法，自动的将获取的数据结果分发到data的对应属性中。

这时我们的页面已经可以显示我们的问题了。这就利用了CMS获取数据表单的问题的数据。

云数据库的存储

填写完表格之后，在onComplete的函数中可以将表单内的数据存入数据库了，这时候就可以去云数据库中创建新的集合，命名为answer。这里我们也可以看到之前在CMS管理中中创建的surveydb在web中获取数据库的实例之后调用collection（“数据库名”）就可以获取数据了，然后将result.data add进数据中

这样提交之后数据就会进入云数据库中了。可以提交一个试一下。

使用云函数进行填写内容的校验

调用app实例，用实例来调用callFunction方法来调用云函数，我们先删除原来的插入方法，重写一下
获取数据库实例并调用云函数，uploadAnswer，传入的data为表单结果result.data

this.$cloudbase.callFunction({name:"uploadAnswer",data:result.data}).then(item =>{console.log("函数提交完成",item)alert("提交的信息已收到")}).catch(error =>{console.log("函数提交错误",error);})this.result = result.data;

我们需要在根目录下创建cloud文件夹，在已有的目录中右键创建一个cloudfunctionrc文件，修改里面的functionRoot为cloud文件夹

然后在cloud文件夹内右键新建云函数，可以选择hello world模板函数进行创建，之后名字设置成uploadAnswer，在本地打开一个终端进入到函数的目录进行环境初始化，右键将其部署到云端即可

部署之后就可以在cloudbase toolkit中看到我们的云函数了，那么每次修改完本地的函数重新更新或者部署到云端之后云函数才会被修改
这时我们点击web界面提交就会调用uploadAnswer函数并且返回一个helloworld证明调用成功。我们这时候就可以在本地进行函数的编辑了，不要忘记要引入sdk

这里就可以进行输入数据的判断了，先判断邮箱的正确与否，由于只是一个复现，这里只判断了qq邮箱，符合要求就返回0，并且向数据库添加数据，这里await保证执行完插入之后才会完成回调。

const cloudbase = require('@cloudbase/node-sdk')const app = cloudbase.init({env:'你的环境id'
})// 1. 获取数据库引用
var db = app.database()exports.main = async (event,context) => {if(event.email.indexOf("@qq.com")==-1){return{code:1,err:"邮箱有误"}}else{return {code:0,data:(await db.collection("answer").add(event))}}}

这时候整个表单就可以添加合适的数据进入数据库了。

文件上传

我们利用surveyjs对文件的支持将类型改为file就可以上传文件，云存储的功能可以说是非常的强大了，这里用的是上传文件的部分。
首先在web里设定type=file就可以上传文件了，我们在CMS的用户表单里加入一个新的条目，类型设为file即可，这时候surveyjs读取数据库中的题目时会发现这个题目是输入file的，会提供一个文件选择按钮可以说是非常舒服了

我们需要用一个函数把这个选择的文件上传到云数据库中，我们发现上传的文件类型是base64【我一直也没解决这个问题，跟着他视频扣的代码都没用，还是base64】我们用一个转换函数，实际上是先将文件直接传到云储存中，然后在引用出来文件名fileID存入answer的数据库中。

这个问题一直没解决，但是不影响后面的学习我就先往后做了。

用云开发CMS来查看问卷的数据

我们表单目前的几个条目存储的数据就个属性

我们只要在CMS中新增一个表单，集合名就是answer，然后创建一一对应的属性字段即可

然后刷新页面，在下面的用户回复中就可以看到我们刚刚上传的数据了。

系统开发总结

我们使用Vue开发前端界面，用Cloudbase完成了后端的开发
使用云开发的函数能力进行了数据安全的校验，包括云开发的数据库和云存储来存储用户数据

最终效果

Home页可以进行
注册：输入邮箱和密码之后即可进行注册，会收到一封激活邮件，点击激活之后就可以登陆了
登录：输入已经注册过的账号密码即可登录

Survey页填写表单上传文件提交之后即可在云数据库的answer和CMS的用户回复中找到上传结果

如果要添加或者修改问题的内容则在CMS中修改问卷表单页的条目，实则就是在修改云数据库中的surveydb

新手上路 Vue腾讯云开发实战项目问卷调查相关推荐

vue+element ui+腾讯云开发打造会员管理系统之实战教程（三）系统登录
目录登录逻辑邮箱登录配置登录逻辑用户注册功能注册页面效果激活邮件代码配置程序预览源码登录逻辑 elment脚手架本身已经实现了登录逻辑,但是结合项目本身还需要进行改造,因为腾讯云开 ...
小程序·云开发实战 - 校园约拍小程序
创意来源于生活,之所以开发这个校园约拍小程序,是因为在摄影选修课上常听老师抱怨外出写生老找不到模特,许多大学生都想拥有一套专属自己记忆的摄影作品,记录下不会磨灭的美好回忆,可如何找到让自己满意的摄影师 ...
【系】微信小程序云开发实战坚果商城-开篇
开篇:无服务开发是未来? 目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小 ...
微信小程序云开发实战：网上商城（二）
微信小程序云开发实战:网上商城(二) 主页面入口页面云函数与云数据库代码实现云端实现小程序端实现选择UI组件库 WeUI Vant 整合UI组件库以扩展包的方式引入weui 接下来主页 ...
【系】微信小程序云开发实战坚果商城-云开发开篇
第 3-2 课:云开发开篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信 ...
小程序·云开发实战：SCRM社交化客户管理小程序
点击观看大咖分享随着微信小程序不断发展壮大,传统的 CRM 厂商也在不断向微信上迁移,毕竟微信的背后是巨大的用户和流量,还有极其方便的移动支付渠道.用微信小程序来做CRM,和以前的做法存在一些比较明 ...
【系】微信小程序云开发实战坚果商城-扩展篇
第 5-1 课:扩展篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小程 ...
微信小程序云开发实战：网上商城（一）
微信小程序云开发实战:网上商城(一) 关于本系列工具与平台微信开发者工具小程序账号云开发辅助开发工具开发平台创建项目云函数接下来关于本系列偶然的机会需要给人做一个团购类的微信小程 ...
微信小程序云开发实战
文章目录前言一.小程序二.云开发概念优势二.实战云开发首页效果分类页购物车详情页搜索页订单页地址页三.云开发运营分析云数据库云存储云函数四.代码前言这篇文章主 ...

新手上路 Vue腾讯云开发实战项目问卷调查