超详细版本使用uni-app、云数据库写一个登录注册

8、编写一个登录注册需要用到云数据库以及环境的搭建，前后端不想之前的分离一样这是写在一起的，所以最好编写命名时保持一致，这样就会减少报错，当然需要学会检查，代码不是写好就能运行的是需要反复检查确保没有报错才行，最后小编（小北不想写代码）祝愿大家能够保持一种积极向上的态度去写代码！！！9、这样一个简单且好用的小程序登录注册就写好了，你们学会了吗？t=N7T8HBuilderX-高效极客技巧 (dcl

小北不想写代码

1295人浏览 · 2024-06-17 21:19:58

小北不想写代码 · 2024-06-17 21:19:58 发布

一、操作环境的配置

1、在官网上下载一个“HBuilderX”（HBuilderX-高效极客技巧 (dcloud.io)https://www.dcloud.io/hbuilderx.html）选择对应的版本下载即可，下载完成之后

二、创建云数据库

2、我们还需要一个云数据库，当然这一步就省略了，小编这里已经注册好了一个账户，所以没有操作步骤了

3、创建我们的项目，以我酒店点菜系统为例：

文件——新建——项目

进去成功之后是这样的：

我这里uniCloud是关联了云数据库，新开的项目是“未关联的状态”你们可以关联自已的云数据库

uniCloud右键打开点击关联云服务空间或项目

选择关联服务空间，找到对应的云数据库创建的表再进行关联即可

我么找到pages这里新建一个页面，酒店的登录“Login-hotel”,当然也可以在新建一个页面用来定义我的注册页面的“Enrool-hotel”

在uniCloud打开web控制台

新建一个自已的表

三、编写登录注册前后端的页面以及代码

3、现在开始我们的登录页面设置了：

<template>
   
   <view class="login">
       <view class="title">
           <view>
               <span>Welcome to the hotel's ordering system!</span>
           </view>
           <view>
               <span>欢迎登录酒店点菜管理系统</span>
           </view>
       </view>
       <view class="form">
           <input class="uni-input" v-model="username" type="text" placeholder="请输入账号" />
           <input class="uni-input" v-model="password" password type="text" placeholder="请输入密码" />
       </view>
       <view class="btn">
           <button @tap="login">立即登录</button>
           <view class="tip" >
               <text type="primary" @click="addnew">没有账号，请先注册</text>
           </view>
       </view>
   </view>
</template>

       .title {
           font-weight: bolder;
           font-size: 40rpx;
           text-align: center;
       }

.form {
margin-top: 100rpx;

           input {
               border-bottom: 1px solid #d6d6d6;
               margin-bottom: 40rpx;
           }
       }

.btn {
margin-top: 100rpx;

           button {
               background-color: #11d77e;
               color: white;
           }

           .tip {
               text-align: right;
               color: gray;
               margin-top: 20rpx;

           }
       }
   }
</style>

四、页面展示

我的页面是这样的

4、在后端设置我们代码用来传参，右键新建云函数/云对象，最好和pages页面新建取得名字一样

五、代码展示

后端代码展示:

'use strict';
exports.main = async (event, context) => {
   //event为客户端上传的参数酒店后台点菜系统的后端代码
   console.log('event : ', event)
   //1、连接数据库
   var db = uniCloud.database();
   //2.接收前端传过来的用户名和密码与数据库里面的用户名和密码对比查询数据表 user 用户名密码
       var username = event.username;
       var password = event.password
       var result = await db.collection('login').where({
           username: username
       }).get()
       console.log(result)
       if (result.affectedDocs == 0) {
           //不存在
           return {
               code: 500,
               msg: "用户不存在"
           }
       } else {
           if (password == result.data[0].password) {
               return {
                   code: 200,
                   msg: "登录成功",
                   user: result.data[0]
               }
           } else {
               return {
                   code: 500,
                   msg: "密码错误"
               }
           }
       }
   };
5、想必大家都和我一样了吧可以登录是吧，我们再来完善一下，设置启动页面，这样的话我们登录成功就会跳转到首页

6、我们进行注册页面编写：

虽然和登录页面一致但是后端执行的方法不一样

注册页面的代码：

<template>
   <view class="new">
       <view class="title">
           <view>
           <span>Hollow!</span>
           </view>
           <view>
               <span>欢迎登录酒店点菜系统</span>
           </view>
       </view>
       <view class="form">
           <view class="form">
               <input class="uni-input" v-model="name" type="text" placeholder="请输入姓名" />
               
               <input class="uni-input" v-model="password" password type="text" placeholder="请输入密码" />
           </view>
       </view>
       <view class="btn">
           <button @tap="addnew">立即注册</button>
           <view class="tip">
               <text type="primary" @click="addlogin">已有账号，前往登录</text>
           </view>
       </view>
   </view>
</template>

       .title {
           font-weight: bolder;
           font-size: 40rpx;
       }

.form {
margin-top: 100rpx;

           input {
               border-bottom: 1px solid #d6d6d6;
               margin-bottom: 40rpx;
           }
       }

.btn {
margin-top: 100rpx;

           button {
               background-color: #11d77e;
               color: white;
           }

           .tip {
               text-align: right;
               color: gray;
               margin-top: 20rpx;

           }
       }
   }
</style>

注册页面后端代码：

'use strict';
exports.main = async (event, context) => {
   //event为客户端上传的参数
   console.log('event : ', event)
   var db = uniCloud.database();
   //2.接收前端传过来的用户名和密码与数据库里面的用户名和密码对比查询数据表 login 用户名密码

   var id = await db.collection('login').add({
       username: event.username,
       password: event.password,
       name: event.name,
       stuNo: event.stuNo,
       stuClass: event.stuClass
   })

   if (id) {
       return {
           code: 200,
           msg: "成功"
       }
   }else {
       return {
           code: 500,
           msg: "失败"
       }
   }
   console.log(result)
   //返回数据给客户端
   return event
};