uniapp如何编写含有后端的登录注册页面

uni-app是一个跨平台的前端框架，它可以让我们开发一次代码，然后在多个平台上进行部署。在这里，我们通过uni-app来实现含有后端的登录注册页面。

步骤一：创建uni-app应用

我们需要在本地创建一个uni-app应用，可以通过HBuilder X来创建。我们在控制台中进入到项目目录，然后执行以下命令：

$ hbuilderx init

按照提示输入应用名称、项目目录、模板类型等信息来创建一个uni-app应用。

步骤二：添加uniCloud服务

我们需要在应用中添加uniCloud服务，让应用与后端进行交互。操作如下：

1. 进入到HBuilder X的插件市场；
2. 搜索uniCloud并安装此插件；

3. 在项目目录下执行以下命令进行初始化：

   $ hbuilderx plugin add DCloud-UniCloud-CLI

4. 然后执行以下命令进行云函数的初始化：

   $ hbuilderx unicloud init

步骤三：创建登录、注册页面

在uni-app应用中创建登录、注册页面，可以通过如下代码进行实现：

<template>
  <div class="container">
    <input type="text" v-model="username" placeholder="请输入用户名">
    <input type="password" v-model="password" placeholder="请输入密码">
    <button @click="login">登录</button>
    <button @click="register">注册</button>
  </div>
</template>

<script>
  import { UniCloud } from '@/utils/uniCloud.js';

  export default {
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      async login() {
        const res = await UniCloud('login', {
          username: this.username,
          password: this.password
        });
        // 处理登录成功的逻辑
      },
      async register() {
        const res = await UniCloud('register', {
          username: this.username,
          password: this.password
        });
        // 处理注册成功的逻辑
      }
    }
  }
</script>

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

  input {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    width: 280px;
  }

  button {
    margin-top: 10px;
    padding: 10px;
    width: 280px;
  }
</style>

步骤四：添加云函数

我们需要添加云函数来处理登录、注册的逻辑，可以通过如下代码进行实现：

'use strict';
const db = uniCloud.database();
const bcrypt = require('bcryptjs');
const saltRound = 10;

exports.main = async (event, context) => {
  const { type, username, password } = event;

  let res;
  let userInfo;
  let salt;
  let hashedPassword;
  let userCollection = db.collection('user');

  if (type === 'login') {
    // Login
    userInfo = await userCollection.where({username}).get();
    if (!userInfo.data.length) {
      return { message: '该用户不存在' }
    }
    userInfo = userInfo.data[0];
    let isPasswordMatch = await bcrypt.compare(password, userInfo.password);
    if (!isPasswordMatch) {
      return { message: '用户名或密码错误' }
    }
    res = { message: '登录成功' }
  } else if (type === 'register') {
    // Register
    userInfo = await userCollection.where({username}).get();
    if (userInfo.data.length) {
      return { message: '该用户名已被占用' }
    } else {
      salt = bcrypt.genSaltSync(saltRound);
      hashedPassword = bcrypt.hashSync(password, salt);
      userCollection.add({
        username,
        password: hashedPassword
      });
      res = { message: '注册成功' }
    }
  }

  return res;
};

步骤五：编写uniCloud工具函数

为了方便在客户端调用云函数，我们可以抽象出一个UniCloud工具函数，具体如下：

export function UniCloud(funcName, data) {
  return uniCloud.callFunction({
    name: funcName,
    data: data
  });
}

示例演示

这里提供一个简单的登录注册示例，代码如下：

<template>
  <div class="container">
    <input type="text" v-model="username" placeholder="请输入用户名">
    <input type="password" v-model="password" placeholder="请输入密码">
    <button @click="login">登录</button>
    <button @click="register">注册</button>
    <p v-show="message">{{ message }}</p>
  </div>
</template>

<script>
  import { UniCloud } from '@/utils/uniCloud.js';

  export default {
    data() {
      return {
        username: '',
        password: '',
        message: ''
      }
    },
    methods: {
      async login() {
        const res = await UniCloud('login', {
          username: this.username,
          password: this.password
        });
        this.message = res.result.message;
      },
      async register() {
        const res = await UniCloud('register', {
          username: this.username,
          password: this.password
        });
        this.message = res.result.message;
      }
    }
  }
</script>

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

  input {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    width: 280px;
  }

  button {
    margin-top: 10px;
    padding: 10px;
    width: 280px;
  }

  p {
    color: red;
    margin-top: 10px;
  }
</style>

这里我们需要通过如下命令将代码部署到云上：

$ hbuilderx unicloud publish

以上就是含有后端的登录注册页面的完整攻略。对于uni-app应用开发者来说，上述内容应该是有参考价值的。