uniapp全栈之初探unicloud
简介
站在一个前端程序猿的角度上:无可厚非解决了前端程序猿只能编写前端代码的局限,可以使前端程序猿用熟悉的js,轻松搞定后台业务。
站在boss角度,可以省去开发成本,人员成本,服务器,运维等成本,省下了大大的毛爷爷
初探流程如下 新建项目并启用申请免费服务空间关联服务空间创建简单的数据表新建云对象编写代码逻辑将新建的云对象上传部署到服务空间发行程序测试程序 具体流程
//获取云数据库对象
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>
…
或者去云服务空间中前端网页托管中查看是否成功
…
tags:
前端开发