快速搭建UniApp小程序博客，体验云函数的强大！

2023-10-26 00:07:34

前言

上一篇文章中，我们已经引入了第三方样式，并实现了主题和语言的切换。而本次，我们将正式开始页面的搭建，以及云函数的创建。前端代码将通过uniCloud.callFunction()方法调用云函数，云函数中可执行js运算、读写数据库等操作，方便且高效。

页面搭建

首先，我们需要创建一个登录页面。在这个页面上，用户可以输入他们的用户名和密码，然后单击“登录”按钮。

<template>
  <view class="login-page">
    <form @submit="login">
      <input type="text" v-model="username" placeholder="请输入用户名" />
      <input type="password" v-model="password" placeholder="请输入密码" />
      <button type="submit">登录</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 调用云函数进行登录
      uniCloud.callFunction({
        name: 'login',
        data: {
          username: this.username,
          password: this.password
        }
      }).then(res => {
        // 登录成功，跳转到首页
        uni.navigateTo({
          url: '/pages/index/index'
        });
      }).catch(err => {
        // 登录失败，提示错误信息
        uni.showToast({
          title: '登录失败',
          icon: 'none'
        });
      });
    }
  }
};
</script>

<style>
.login-page {
  padding: 20px;
  box-sizing: border-box;
}

.login-page input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-page button {
  width: 100%;
  padding: 10px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>

接下来，我们需要创建一个注册页面。在这个页面上，用户可以输入他们的用户名、密码和电子邮件地址，然后单击“注册”按钮。

<template>
  <view class="register-page">
    <form @submit="register">
      <input type="text" v-model="username" placeholder="请输入用户名" />
      <input type="password" v-model="password" placeholder="请输入密码" />
      <input type="email" v-model="email" placeholder="请输入邮箱地址" />
      <button type="submit">注册</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      email: ''
    };
  },
  methods: {
    register() {
      // 调用云函数进行注册
      uniCloud.callFunction({
        name: 'register',
        data: {
          username: this.username,
          password: this.password,
          email: this.email
        }
      }).then(res => {
        // 注册成功，提示成功信息
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        });

        // 跳转到登录页面
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }).catch(err => {
        // 注册失败，提示错误信息
        uni.showToast({
          title: '注册失败',
          icon: 'none'
        });
      });
    }
  }
};
</script>

<style>
.register-page {
  padding: 20px;
  box-sizing: border-box;
}

.register-page input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.register-page button {
  width: 100%;
  padding: 10px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>

云函数创建

在云函数中，我们首先需要定义一个登录函数，这个函数接受用户名和密码作为参数，然后查询数据库中是否存在该用户。如果存在，则返回登录成功的结果；如果不存在，则返回登录失败的结果。

// 云函数入口函数
exports.main = async (event, context) => {
  // 获取用户名和密码
  const username = event.username;
  const password = event.password;

  // 查询数据库中是否存在该用户
  const db = uniCloud.database();
  const user = await db.collection('users').where({
    username: username,
    password: password
  }).get();

  // 如果存在，则返回登录成功的结果
  if (user.data.length > 0) {
    return {
      code: 0,
      msg: '登录成功'
    };
  } else {
    // 如果不存在，则返回登录失败的结果
    return {
      code: 1,
      msg: '登录失败'
    };
  }
};

接下来，我们需要定义一个注册函数，这个函数接受用户名、密码和电子邮件地址作为参数，然后将这些信息保存到数据库中。

// 云函数入口函数
exports.main = async (event, context) => {
  // 获取用户名、密码和电子邮件地址
  const username = event.username;
  const password = event.password;
  const email = event.email;

  // 将这些信息保存到数据库中
  const db = uniCloud.database();
  const result = await db.collection('users').add({
    username: username,
    password: password,
    email: email
  });

  // 如果保存成功，则返回注册成功的结果
  if (result.id) {
    return {
      code: 0,
      msg: '注册成功'
    };
  } else {
    // 如果保存失败，则返回注册失败的结果
    return {
      code: 1,
      msg: '注册失败'
    };
  }
};