运用HBuilder 写个人中心登录与注册

一、个人中心页面的创立

1. 创建 Unicloud 项目:

如果你还没有 Unicloud 账号，请先注册一个。
 使用 Unicloud Web 控制台或者开发者工具创建一个新的项目。
选择合适的模板，例如 `uni-app` 默认模板。

2. 创建个人中心页面组件:

 在 `pages` 目录下创建一个名为 `userCenter` 的文件夹，并在其中创建 `userCenter.vue` 文件。
 在 `userCenter.vue` 文件中编写页面的模板、样式和逻辑代码。

3. 编写页面模板:

<template>
  <view class="user-center">
    <!-- 用户信息展示 -->
    <view class="user-info">
      <image class="avatar" :src="userInfo.avatarUrl"></image>
      <text class="nickname">{{ userInfo.nickName }}</text>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view class="item" @click="goToOrders">
        <text class="icon">&#xe601;</text>
        <text class="text">我的订单</text>
      </view>
      <view class="item" @click="goToSettings">
        <text class="icon">&#xe600;</text>
        <text class="text">个人设置</text>
      </view>
    </view>
  </view>
</template>
 

4. 编写页面样式:

.user-center {
  padding: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.nickname {
  font-size: 18px;
  margin-left: 10px;
}

.function-list {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.icon {
  font-size: 24px;
  margin-right: 10px;
}
 

5. 编写页面逻辑：

<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  onShow() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      // 调用 Unicloud API 获取用户信息
      uni.getUserInfo({
        success: (res) => {
          this.userInfo = res.userInfo;
        },
      });
    },
    goToOrders() {
      uni.navigateTo({
        url: '/pages/orders/orders',
      });
    },
    goToSettings() {
      uni.navigateTo({
        url: '/pages/settings/settings',
      });
    },
  },
};
</script>
 

二、注册登录页面

1. 创建Uni-app项目
首先，使用HBuilder X或其他工具创建一个新的Uni-app项目。

2. 编写登录注册页面
在项目的`pages`目录下创建一个名为`login.vue`的组件，并在`login.vue`中编写登录注册页面的模板代码：

<template>
    <view>
        <view class="login-container">
            <view class="login-form">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" v-model="username" />
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" v-model="password" />
                <button type="button" @click="login">登录</button>
                <button type="button" @click="register">注册</button>
            </view>
        </view>
    </view>
</template>

<style>
    .login-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }

    .login-form {
        background-color: #fff;
        padding: 30px;
        border-radius: 5px;
    }
</style>
 

3. 编写登录注册逻辑

export default {
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        login() {
            // 在这里实现登录逻辑，例如向后端发送请求验证用户名和密码
            uni.showToast({
                title: '登录成功，欢迎 ' + this.username + '!',
                duration: 2000
            });
        },
        register() {
            // 在这里实现注册逻辑，例如向后端发送请求注册新用户
            uni.showToast({
                title: '注册成功，欢迎 ' + this.username + '!',
                duration: 2000
            });
        }
    }
}
 

三、运用unicloud写云端数据

1. 创建数据库表
首先，你需要在 uniCloud 的数据库中创建一个用户表（user），这个表可以存储用户的基本信息，如用户名、密码、注册时间等。

2. 引入 uniCloud 模块
在你的登录注册页面中，你需要引入 uniCloud 模块，以便于操作数据库。

3. 编写注册逻辑
在注册逻辑中，你需要首先判断用户是否已经存在。如果用户不存在，则将用户的注册信息写入数据库。

async register(userInfo) {
  // 查询用户是否存在
  const res = await uniCloud.httpclient.post('***', {
    userInfo,
  });
  
  // 如果用户不存在，则写入数据库
  if (!res.data.exists) {
    const db = uniCloud.database();
    await db.collection('user').add({
      username: userInfo.username,
      password: userInfo.password,
      created_at: new Date(),
    });
    return '注册成功';
  } else {
    return '该用户名已被注册';
  }
}
 

4. 编写登录逻辑
在登录逻辑中，你需要判断用户输入的用户名和密码是否与数据库中的信息匹配。

async login(userInfo) {
  const db = uniCloud.database();
  const res = await db.collection('user').where({
    username: userInfo.username,
    password: userInfo.password,
  }).get();
  
  // 如果找到用户，则登录成功
  if (res.data.length > 0) {
    return '登录成功';
  } else {
    return '用户名或密码错误';
  }
}
 

5. 调用注册和登录函数
在需要注册和登录的地方，调用相应的函数。

async registerButtonClicked() {
  const res = await register(this.userInfo);
  uni.showToast({
    title: res,
  });
}

async loginButtonClicked() {
  const res = await login(this.userInfo);
  uni.showToast({
    title: res,
  });
}