uniCloud作业 开发留言板 uniCloud实战项目开发_uniapp留言板

uniCloud云开发留言板【uniCloud作业】

实现了用户登录、用户注册、留言、删除留言、实现了增删改等

下面三个tabbar栏可切换

注册页面代码

<template>
	<view class="content">
		<view class="input-group">
			<view class="input-row border">
				<text class="title">账号：</text>
				<m-input type="text" focus clearable v-model="username" placeholder="请输入账号"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">密码：</text>
				<m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
			</view>
			<view class="input-row">
				<text class="title">确认密码：</text>
				<m-input type="password" displayable v-model="confirmPassword" placeholder="请确认密码"></m-input>
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="register">注册并登录</button>
		</view>
	</view>
</template>
 
<script>
	import mInput from '../../components/m-input.vue';
 
	export default {
		components: {
			mInput
		},
		data() {
			return {
				username: '',
				password: '',
				confirmPassword: ''
			}
		},
		methods: {
			register() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.username.length < 3) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 3 个字符'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}
				if (this.password !== this.confirmPassword) {
					uni.showToast({
						icon: 'none',
						title: '两次密码输入不一致'
					});
					return;
				}
 
				const data = {
					username: this.username,
					password: this.password
				}
				uniCloud.callFunction({
					name: 'user-center',
					data: {
						action: 'register',
						params: data
					},
					success(e) {
						console.log("注册", e);
						if (e.result.code === 0) {
							uni.showToast({
								title: '注册成功'
							});
							uni.setStorageSync('uni_id_token', e.result.token)
							uni.setStorageSync('username', e.result.username)
							uni.reLaunch({
								url: '../index/index',
							});
						} else {
							uni.showModal({
								content: JSON.stringify(e.result),
								showCancel: false
							})
						}
					},
					fail(e) {
						uni.showModal({
							content: JSON.stringify(e),
							showCancel: false
						})
					}
				})
			}
		}
	}
</script>
 
<style>
.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	background-color: #efeff4;
	padding: 10px;
}
</style>

留言页面代码

<template>
	<view class="content">
		<view class="input_box">
			<textarea  placeholder="请输入要留言的内容" v-model="list.content" class="textarea border" />
			<!-- <input type="text" placeholder="请输入用户名:" v-model="list.name" class="input border" /> -->
			<button class="submit" type="primary" @click="Add">提交</button>
		</view>
	</view>
</template>
 
<script>
	import { mapState, mapMutations } from 'vuex'
	import { univerifyLogin } from '@/common/univerify.js'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		data () {
			return {
				list: {
					time: "",
					name:"",
					content:""
				}
			}
		},
		onLoad() {
			let uniIdToken = uni.getStorageSync('uni_id_token')
			if (uniIdToken) {
				let uniName = uni.getStorageSync('username')
				this.list.name = uniName
				this.login(uniName)
				uniCloud.callFunction({
					name: 'user-center',
					data: {
						action: 'checkToken',
					},
					success: (e) => {
						console.log('checkToken success', e);
						if (e.result.code > 0) {
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/index'
								});
							} else {
								uni.navigateTo({
									url: '../login/index'
								});
							}
						}
					},
					fail(e) {
						uni.showModal({
							content: JSON.stringify(e),
							showCancel: false
						})
					}
				})
			} else {
				this.guideToLogin()
			}
		},
		methods: {
			...mapMutations(['login']),
			guideToLogin() {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					confirmColor: "#37C2BC",
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							univerifyLogin().catch((err) => {
								if (err === false) return;
								if (this.forcedLogin) {
									uni.reLaunch({
										url: '../login/index'
									});
								} else {
									uni.navigateTo({
										url: '../login/index'
									});
								}
							})
						}
					}
				});
			},
			Add() {
				if (!this.list.content) {
					uni.showToast({
						icon: 'error',
						title: "请输入内容"
					})
					return
				}
				if (!uni.getStorageSync('username')) {
					this.guideToLogin()
					return
				}
				uni.showLoading({
					title: "提交中"
				})
				this.list.time = +new Date()
				let data = this.list;
				uniCloud.callFunction({
					name:'add',
					data:data
				}).then((res)=>{
					uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: '提交成功',
						confirmColor: "#37C2BC",
						showCancel: false,
						success: res => {
							uni.reLaunch({
								url: '../index/index'
							});
						},
					})
				})
			}
		}
	}
</script>
 
<style lang="scss">
	.border {
		border-style: solid;
		border-width: 1px;
		border-color: #eeeeee;
	}
	.input {
		padding: 6rpx 8rpx;
		height: 42px;
		margin: 10rpx;
		font-size: 30rpx;
		border-radius: 6px;
	}
	.submit {
		width: 600upx;
		margin-top: 20px;
		margin-bottom: 20px;
		background-color: #37C2BC;
	}
	.list {
		width: 750rpx;
	}
	.input_box {
		width: 750rpx;
		background-color: #ffffff;
		margin-bottom: 6px;
	}
	.textarea {
		padding: 10rpx;
		margin: 10rpx;
		width: initial;
		height: 800rpx;
		font-size: 30rpx;
		border-radius: 6px;
	}
	.item {
		@extend .border;
		border-radius: 16px;
		border-color: #eeeeee;
		padding: 4px 8px;
		margin: 5px;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		align-items: center;
	}
	.word {
		padding: 20rpx;
		flex: 1;
		justify-content: space-around;
	}
	.user_name {
		margin-bottom: 10rpx;
		font-size: 26upx;
		color: #007aff;
	}
	.content {
		font-size: 32upx;
		color: #666666;
	}
</style>

部署教程

使用hbuildx打开项目

登录自己的开发者账号并绑定云服务

同步云函数及云数据库

然后运行到浏览器

项目截图

登录-注册功能

首页-留言-我的