uniapp全栈之初探unicloud

uniapp全栈之初探unicloud

简介

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

初探流程如下

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

具体流程

• 新建uniapp项目并启用unicloud
  

• 申请免费服务空间
  进入之后根据提示申请即可

• 关联服务空间
  申请完服务空间之后进入hbuilder,进入刚创建的项目，找到uniCloud文件，右键，选择关联云服务空间/项目
  
  选择关联刚刚申请的云服务空间，如果没有，请尝试刷新或者新建(申请免费服务空间)
  

• 创建简单的数据表
  进入云服务空间，选择云数据库，点击新建数据表的加号图标
  

• 新建云对象
  进入项目的uniCloud文件下的cloudFunction文件，选择 新建云函数/云对象
  
  依次输入云函数名称、选择云函数/云对象类型（区别后续再解释）、最后点击创建
  

• 编写代码逻辑
  unicloud业务逻辑代码

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

• 将新建的云函数上传部署到服务空间
  右键创建的云函数，选择上传部署
  
  当出现以下证明上传成功
  
  或者去云服务空间的云函数/云对象列表查看是否上传成功
  

• 发行程序
  点击发行，选择要发行的项目模式(由于是测试，所以我选择的PC和H5)
  
  

loading…

或者去云服务空间中前端网页托管中查看是否成功

success…

• 测试程序
  注意看，部署完成之后控制台会有一个临时的访问地址，直接打开该临时访问地址即可运行测试
  

end😀 点赞收藏哈