uni-app H5项目的用户登录界面DEMO
在uni-app中创建一个用户登录的DEMO，通常我们会结合前端页面和后端API来实现。但在这里，我将给出一个简化的前端示例，演示如何实现基本的用户名、密码验证、登录状态保持和注销登录的功能。由于后端API部分通常涉及到服务器和数据库操作，这里我们假设有一个模拟的后端接口，并且仅在前端处理登录状态的存储和展示。首先，你需要创建几个页面：[*]pages/login/login.vue - 登录页面
[*]pages/home/home.vue - 主页面（用户登录后的页面）
[*]pages/logout/logout.vue - 注销页面（实际上可能不需要单独页面，可以在主页面上提供注销按钮）
1. pages/login/login.vue
<template>
<view>
<input type="text" v-model="username" placeholder="请输入用户名" />
<input type="password" v-model="password" placeholder="请输入密码" />
<button @click="login">登录</button>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
// 这里只是模拟验证，实际开发中应调用后端API
if (this.username === 'admin' && this.password === '123456') {
uni.setStorageSync('user', { username: this.username, isLoggedIn: true });
uni.navigateTo({ url: '/pages/home/home' });
} else {
uni.showToast({ title: '用户名或密码错误', icon: 'none' });
}
}
}
};
</script>
2. pages/home/home.vue
<template>
<view>
<text>欢迎，{{ userInfo.username }}!</text>
<button @click="logout">注销</button>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: uni.getStorageSync('user') || {}
};
},
onLoad() {
// 检查是否已登录
if (!this.userInfo.isLoggedIn) {
uni.navigateTo({ url: '/pages/login/login' });
}
},
methods: {
logout() {
uni.removeStorageSync('user');
uni.navigateTo({ url: '/pages/login/login' });
}
}
};
</script>
注意：
[*]在实际项目中，你应该使用HTTPS和安全的API来传输用户名和密码。
[*]用户名和密码的验证应该在后端进行，前端只负责发送请求和展示结果。
[*]登录状态的保持通常使用token或session来实现，这里为了简化示例，我们使用了uni.setStorageSync和uni.getStorageSync来在本地存储和读取登录状态。但在实际项目中，你应该使用更安全的方式来存储和验证登录状态。
[*]注销登录时，除了清除本地存储的登录状态外，还应该向后端发送注销请求以确保服务器端的会话也被销毁。
页:
[1]