uniapp全栈之初探unicloud

本文主要是介绍uniapp全栈之初探unicloud，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简介

站在一个前端程序猿的角度上：unicloud无可厚非解决了前端程序猿只能编写前端代码的局限，可以使前端程序猿用熟悉的js，轻松搞定后台业务。
站在boss角度，可以省去开发成本，人员成本，服务器，运维等成本，省下了大大的毛爷爷

初探流程如下

新建uniapp项目并启用unicloud
申请免费服务空间
关联服务空间
创建简单的数据表
新建云对象
编写代码逻辑
将新建的云对象上传部署到服务空间
发行程序
测试程序

具体流程

新建uniapp项目并启用unicloud
申请免费服务空间
进入之后根据提示申请即可
关联服务空间
申请完服务空间之后进入hbuilder,进入刚创建的项目，找到uniCloud文件，右键，选择关联云服务空间/项目

选择关联刚刚申请的云服务空间，如果没有，请尝试刷新或者新建(申请免费服务空间)
创建简单的数据表
进入云服务空间，选择云数据库，点击新建数据表的加号图标
新建云对象
进入项目的uniCloud文件下的cloudFunction文件，选择新建云函数/云对象

依次输入云函数名称、选择云函数/云对象类型（区别后续再解释）、最后点击创建
编写代码逻辑
unicloud业务逻辑代码

//获取云数据库对象
const db = uniCloud.database();module.exports = {_before: function () { // 通用预处理器},sum(a,b) {return a + b},//data 前端传过来的参数//获取列表async getList(data) {const { num } = datalet res = await db.collection("user").limit(num).get()//将查到的数据返回给前端return {code: 200,data: res.data,params: data}},//更新名称async updateName(data) {const {name, newName} = datalet res = await db.collection("user").where({name:name}).update({name:newName})return {code: 200,data: res.data,params: data,}}
}

前端代码

<template><view class="content"><image class="logo" src="/static/logo.png" @click="handleAddUser"></image><view class="text-area"><text class="title" @click="handleChangeTitle">{{title}}</text></view><button @click="handleUpdate">更新</button><button @click="handleDateList">获取列表</button></view>
</template><script>export default {data() {return {title: 'Hello1',}},onLoad() {},methods: {async handleChangeTitle() {//uniCloud.importObject('firstCloudObj') 获取云函数对象//其中 firstCloudObj是你命名的云函数名称const firstCloudObj = uniCloud.importObject('firstCloudObj')this.title = await firstCloudObj.sum(1, 4)},// 云对象async handleDateList() {const firstCloudObj = uniCloud.importObject('firstCloudObj')// console.log(firstCloudObj)let res = await firstCloudObj.getList({num: 1})console.log(res)},// 云对象更新async handleUpdateName(item) {const firstCloudObj = uniCloud.importObject('firstCloudObj')let res = await firstCloudObj.updateName({name: item, newName:'云函数更新的名称'})console.log(res)},}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>