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
};

页面样式

<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的简单的请求，使用基本上差不多，唯独数据库表格的创建目前小的也没有搞懂，虽然官方有表格提供，但是前端的有点看不懂，技术不到位呀！还有待学习。

 登录表格数据

 

添加数据表格