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();

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

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

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

loading…

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

success…

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

end😀 点赞收藏哈