uniCloud 云开发Dome
实现账号密码登录,注册, 信息图片上传与查看
项目地址:https://gitee.com/jielov/uni-cloud_development
先创建云服务空间 与云函数 可参考 https://www.cnblogs.com/lovejielive/p/14523737.html
以登录为例
先创建一个 h5_login 云函数 然后上传
先以 collection.where({参数}).get 查询 云数据库是否有这个账号密码
'use strict'; const db = uniCloud.database() exports.main = async (event, context) => { const collection = db.collection('h5_user') // 账号密码登录 let user = await collection.where({ username: event.username, password: event.password, }).get() if (user.affectedDocs < 1) { return { code: 0, msg: '用户名或密码错误' } } else { return { code: 200, msg: '登录成功' } } //返回数据给客户端 // return user };
页面样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <view class=""> <view class="tit"> <view class="tit_tile"> 登录 </view> <view class="tit_name"> 请您输入账号密码进行登录 </view> </view> <view class="log dashed-top dashed-bottom"> <view class="cu-form-group"> <view class="title">账 号:</view> <input placeholder="请输入姓名" v-model="name" type="text"></input> </view> <view class="cu-form-group"> <view class="title">密 码:</view> <input placeholder="请输入密码" v-model="password" type="text"></input> </view> </view> <view class="location"> <view class="padding flex flex-direction"> <button class="cu-btn bg-green margin-tb-sm lg" @click="login">登录</button> </view> <view class="text-center text-xl" @click="register"> 去注册 </view> </view> </view> </template> <script> export default { data() { return { //姓名 name: 'admin', // 密码 password: '123456', } }, comments: { }, onLoad() { // 检验云函数是否正确 以下代码在 login.vue中 // this.$operate.uniCloud('h5_login', { // name: 'uncertainty' // }) }, methods: { //登录 async login() { let data = { username: this.name, password: this.password } let res = await this.$operate.uniCloud('h5_login', data); console.log(res); if (res.result.code == 200) { this.$operate.redirect('/pages/index/index') } else { this.$operate.toast({ title: res.result.msg }) } }, register(){ this.$operate.redirect('/pages/h5_login/h5_redirect') } }, } </script> <style lang="scss"> page { background-color: #FFFFFF; } .tit { height: 200rpx; padding-top: 50rpx; // background-color: #F0AD4E; // line-height: 200rpx; text-align: center; .tit_tile { font-size: 45rpx; color: #333333; } .tit_name { font-size: 35rpx; color: #c3bcbc; margin-top: 25rpx; } } .log { margin-top: 50rpx; padding-left: 30rpx; padding-right: 30rpx; } .location { width: 100%; position: fixed; bottom: 100rpx; } .location_bttom { position: fixed; bottom: 10rpx; // background-color: #007AFF; width: 100%; height: 100rpx; display: flex; align-items: center; justify-content: center; .name { font-size: 30rpx; color: #5481a0; } } </style>
这边对云函数请求做了一个简单的封装
export default { // 云函数请求 uniCloud: async (name, data) => { uni.showLoading({ title: '加载中...', mask: true }) try { let res = await uniCloud.callFunction({ name, // 云函数名字 data // 传输数据 }) return res } catch (e) { return e } finally { uni.hideLoading() } } }
在页面中调用
//add_list 为云函数名字 //data 为 要传的参数 let res = await this.$operate.uniCloud('add_list', data) console.log(res);
在 main.js 中调用
import operate from "common/operate.js" //全局js Vue.prototype.$operate = operate
整个项目的运行可去git上面拉下来运行,uniCloud的简单的请求,使用基本上差不多,唯独数据库表格的创建目前小的也没有搞懂,虽然官方有表格提供,但是前端的有点看不懂,技术不到位呀!还有待学习。
登录表格数据
添加数据表格
本文来自博客园,作者:虚乄,转载请注明原文链接:https://www.cnblogs.com/lovejielive/p/14525486.html