uniapp-注册登陆

接下来我们就开始利用我们之前写好的登录接口，开始开发我们的注册和登录部分

1、注册以及登录接口🍓

import config from '@/utils/config.js'
import request from '@/utils/request.js'

let baseURL=config.baseURL;
// 注册方法
export function register(data) {
  return request({
    url: baseURL+'/register',
    headers: {
      isToken: false
    },
    method: 'post',
    data: data
  })
}
// 登录方法
export function login(data) {
  return request({
    url: `${baseURL}/login`,
    method: 'POST',
    data: data,
    headers: {
      isToken: false, // 不需要携带 Token
    },
  });
}

2、注册页面开发

搭建我们的注册页面📂

☞ 搭建我们的注册页面 /pages/component/register/index.vue

先来简单写个注册页面：

注册页面我们包含以下几个部分：

• 用户名输入框

• 密码输入框

• 确认密码输入框

• 提交注册按钮

//页面路径
/pages/component/register/index.vue

//页面内容
<template>
<view class="container">
  <input v-model="username" type="text" placeholder="用户名" />
  <input v-model="password" type="password" placeholder="密码" />
  <input v-model="confirmPassword" type="password" placeholder="确认密码" />
  <button @click="login">注册</button>
  <text class="error-message">{{ errorMessage }}</text>
</view>
</template>
<script setup>
import { ref, computed  } from 'vue';
const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const errorMessage = ref('');
const logout = () => {};
const login = () => {
  console.log('注册');
};
</script>

<style scoped>
.container {
  padding: 40rpx;
  box-sizing: border-box;
}

input {
  width: 100%;
  padding: 0 20rpx;
  margin-bottom: 40rpx;
  border: 2rpx solid #ccc;
  border-radius: 8rpx;
  box-sizing: border-box;
  line-height: 80rpx;
  height: 80rpx;
}

button {
  width: 100%;
  padding: 0 20rpx;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
.error-message {
  color: red;
  margin-top: 10px;
}
</style>

3、注册提交

接下来就尝试使用我们之前简单封装好的uni.request接口来进行登录

虽然Uniapp内置了uni.request网络请求API，但是开发者也可以使用Vue的Axios。两者都具有各自的优劣势，开发者可以根据实际情况选择使用哪一个。

<button class="mgtp20" @click="handleRegister">注册</button>

import {register } from "@/api/login";
const handleRegister = async () => {
  let subData={
    username:username.value,
    password:password.value,
    confirmPassword:confirmPassword.value,
  };
  if (subData.username === '' || subData.password === '') {
    console.log('用户名和密码不能为空');
    return;
  } else {
    console.log(subData, 'subData');
    try {
      const res = await register(subData);
      console.log('🚀 → res', res);
      if (res.code == 200) {
        uni.showModal({
          title: '提示',
          content:res.message,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              topage('/pages/component/login/login')
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
        console.log('跳转到主页');
      } else {
        uni.showModal({
          title: '提示',
          content:res.message,
          success: function (res) {
            if (res.confirm) {
              topage('/pages/component/login/login')
            } else if (res.cancel) {}
          }
        });
      }
    } catch (error) {
    } finally {}
  }
  return;
};  

我们的页面预览如下：

4、登录页面

搭建登录页面📂

☞ 搭建登录页面 /pages/component/login/login.vue

• 用户名输入框

• 密码输入框

• 提交按钮

//页面路径
/pages/component/login/login.vue

<view class="container">
  <input v-model="username" type="text" placeholder="请输入用户名" />
  <input v-model="password" type="password" placeholder="请输入密码" />
  <button @click="handleLogin">登录</button>
  <view class="mgtp20" @click="topage('/pages/component/register/register')">去注册</view>
  <text class="error-message mgtp20">{{ errorMessage }}</text>
</view>

<style scoped>
.container {
  padding: 40rpx;
  box-sizing: border-box;
}

input {
  width: 100%;
  padding: 0 20rpx;
  margin-bottom: 40rpx;
  border: 2rpx solid #ccc;
  border-radius: 8rpx;
  box-sizing: border-box;
  line-height: 80rpx;
  height: 80rpx;
}

button {
  width: 100%;
  padding: 0 20rpx;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  margin-top: 10px;
}
</style>

5、登录请求

提交表单的登录

<button @click="handleLogin">登录</button>

<script setup>
import { ref, computed  } from 'vue';
import loginDialog from '@/components/loginDialog.vue'
import {login} from '@/api/login.js'

const username = ref('admin');
const password = ref('admin123');
const errorMessage = ref('');

const usernameInput = ref('');
const topage = (row) => {
	uni.switchTab({
		url: row,
	});
};
const switchpage = (row) => {
	uni.switchTab({
		url: row,
	});
};


const handleLogin = async() => {
	console.log('登录');
	
	let subData={
		username:username.value,
		password:password.value,
	};
	if (subData.username === '' || subData.password === '') {
		console.log('用户名和密码不能为空');
		return;
	} else {
		console.log(subData, 'subData');
		try {
			const res = await login(subData);
			console.log('🚀 → res', res);
			if (res.code == 200) {
				uni.showModal({
					title: '提示',
					content:res.message,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							switchpage('/pages/tabBar/home/index')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else {
				uni.showModal({
					title: '提示',
					content:res.message,
					success: function (res) {
						if (res.confirm) {
							// switchpage('/pages/tabBar/home/index')
						} else if (res.cancel) {}
					}
				});
			}
		} catch (error) {} finally {}
	}
	return;
};
</script>

页面预览如下：