uni-app H5项目的用户登录界面DEMO

admin

在uni-app中创建一个用户登录的DEMO，通常我们会结合前端页面和后端API来实现。但在这里，我将给出一个简化的前端示例，演示如何实现基本的用户名、密码验证、登录状态保持和注销登录的功能。由于后端API部分通常涉及到服务器和数据库操作，这里我们假设有一个模拟的后端接口，并且仅在前端处理登录状态的存储和展示。

首先，你需要创建几个页面：

• pages/login/login.vue - 登录页面
• pages/home/home.vue - 主页面（用户登录后的页面）
• pages/logout/logout.vue - 注销页面（实际上可能不需要单独页面，可以在主页面上提供注销按钮）
  

1. pages/login/login.vue

1. <template>
   
2.   <view>
   
3.     <input type="text" v-model="username" placeholder="请输入用户名" />
   
4.     <input type="password" v-model="password" placeholder="请输入密码" />
   
5.     <button @click="login">登录</button>
   
6.   </view>
   
7. </template>
   
8. 
   
9. <script>
   
10. export default {
    
11.   data() {
    
12.     return {
    
13.       username: '',
    
14.       password: ''
    
15.     };
    
16.   },
    
17.   methods: {
    
18.     login() {
    
19.       // 这里只是模拟验证，实际开发中应调用后端API
    
20.       if (this.username === 'admin' && this.password === '123456') {
    
21.         uni.setStorageSync('user', { username: this.username, isLoggedIn: true });
    
22.         uni.navigateTo({ url: '/pages/home/home' });
    
23.       } else {
    
24.         uni.showToast({ title: '用户名或密码错误', icon: 'none' });
    
25.       }
    
26.     }
    
27.   }
    
28. };
    
29. </script>

复制代码

2. pages/home/home.vue

1. <template>
   
2.   <view>
   
3.     <text>欢迎，{{ userInfo.username }}!</text>
   
4.     <button @click="logout">注销</button>
   
5.   </view>
   
6. </template>
   
7. 
   
8. <script>
   
9. export default {
   
10.   data() {
    
11.     return {
    
12.       userInfo: uni.getStorageSync('user') || {}
    
13.     };
    
14.   },
    
15.   onLoad() {
    
16.     // 检查是否已登录
    
17.     if (!this.userInfo.isLoggedIn) {
    
18.       uni.navigateTo({ url: '/pages/login/login' });
    
19.     }
    
20.   },
    
21.   methods: {
    
22.     logout() {
    
23.       uni.removeStorageSync('user');
    
24.       uni.navigateTo({ url: '/pages/login/login' });
    
25.     }
    
26.   }
    
27. };
    
28. </script>

复制代码

注意：

• 在实际项目中，你应该使用HTTPS和安全的API来传输用户名和密码。
• 用户名和密码的验证应该在后端进行，前端只负责发送请求和展示结果。
• 登录状态的保持通常使用token或session来实现，这里为了简化示例，我们使用了uni.setStorageSync和uni.getStorageSync来在本地存储和读取登录状态。但在实际项目中，你应该使用更安全的方式来存储和验证登录状态。
• 注销登录时，除了清除本地存储的登录状态外，还应该向后端发送注销请求以确保服务器端的会话也被销毁。