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>

View Code

這邊對雲函數請求作了一個簡單的封裝

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的簡單的請求，使用基本上差很少，惟獨數據庫表格的建立目前小的也沒有搞懂，雖然官方有表格提供，可是前端的有點看不懂，技術不到位呀！還有待學習。

 登陸表格數據

 

添加數據表格