相亲小程序用户注册与登录系统模块搭建

发布于：2025-08-04 ⋅ 阅读:(25) ⋅ 点赞:(0)

一、逻辑分析

  1. 用户注册
    • 用户需要输入必要信息，如手机号码、密码、昵称等。手机号码作为唯一标识，需要进行格式验证和唯一性验证，确保没有重复注册。密码要满足一定强度要求，例如长度、包含字母和数字等。昵称也需要有一定的长度限制且不能包含非法字符。
    • 注册成功后，将用户信息存储到数据库中，同时可以生成一些初始数据，如用户资料的默认设置等。
  2. 用户登录
    • 用户输入手机号码和密码。系统首先验证手机号码格式是否正确，然后在数据库中查找是否存在该手机号码对应的用户记录。
    • 如果找到记录，将输入的密码与数据库中存储的密码进行比对。若密码正确，则登录成功，生成用户登录令牌（Token）用于后续的身份验证；若密码错误，则提示用户重新输入。

二、程序框架结构化输出

  1. 技术选型
    • 后端：可以选择 Python 的 Django 框架或者 Java 的 Spring Boot 框架。这里以 Python 的 Django 框架为例。Django 提供了丰富的插件和工具，方便快速开发 Web 应用。例如，内置的用户认证系统可以简化用户注册和登录功能的实现。
    • 前端：使用微信开发者工具进行小程序开发。微信小程序提供了自己的一套组件和 API，方便构建用户界面和实现交互功能。
    • 数据库：选择 MySQL 数据库，它是一款开源的关系型数据库，适合存储用户信息等结构化数据。
  2. 目录结构
    • 后端（Django 项目）
      • project_name/
        • settings.py：项目的配置文件，包括数据库连接配置、应用注册等。
        • urls.py：项目的 URL 配置文件，定义了各个视图函数对应的 URL 路径。
        • users/：用户相关功能的应用目录
          • models.py：定义用户模型，包含用户信息字段。
          • views.py：处理用户注册、登录等业务逻辑的视图函数。
          • urls.py：用户应用的 URL 配置文件，将特定的 URL 路径映射到对应的视图函数。
    • 前端（微信小程序项目）
      • pages/
        • register/
          • register.wxml：注册页面的布局文件。
          • register.wxss：注册页面的样式文件。
          • register.js：注册页面的逻辑处理文件，包括获取用户输入、调用后端接口等。
        • login/
          • login.wxml：登录页面的布局文件。
          • login.wxss：登录页面的样式文件。
          • login.js：登录页面的逻辑处理文件，包括获取用户输入、调用后端接口等。
      • app.js：小程序的入口文件，进行全局的初始化设置等。
      • app.json：小程序的全局配置文件，包括页面路径、窗口样式等。
      • app.wxss：小程序的全局样式文件。
  3. 数据库设计
    • 用户表（users）
      • id：用户 ID，自增长整数类型，作为主键。
      • phone_number：手机号码，字符串类型，唯一且不能为空。
      • password：密码，字符串类型，存储经过加密后的密码。
      • nickname：昵称，字符串类型，有一定长度限制。
      • create_time：创建时间，日期时间类型，默认值为当前时间。

三、详细解决方案

  1. 后端实现（Django）
    • 安装 Django：在命令行中执行pip install django。
    • 创建 Django 项目：执行django - admin startproject project_name。
    • 创建用户应用：进入项目目录，执行python manage.py startapp users。
    • 定义用户模型（users/models.py）

python

from django.db import models
from django.contrib.auth.models import AbstractUser

class CustomUser(AbstractUser):
    phone_number = models.CharField(max_length=11, unique=True)
    nickname = models.CharField(max_length=50)

    def __str__(self):
        return self.phone_number

  • 配置数据库连接（project_name/settings.py）

python

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'your_database_name',
        'USER': 'your_username',
        'PASSWORD': 'your_password',
        'HOST': '127.0.0.1',
        'PORT': '3306',
    }
}

  • 注册用户应用（project_name/settings.py）

python

INSTALLED_APPS = [
    # 其他应用
    'users.apps.UsersConfig',
]

  • 配置用户认证模型（project_name/settings.py）

python

AUTH_USER_MODEL = 'users.CustomUser'

  • 创建用户注册视图（users/views.py）

python

from django.shortcuts import render, redirect
from django.contrib.auth import get_user_model
from django.contrib.auth.hashers import make_password
from django.http import JsonResponse

User = get_user_model()

def register(request):
    if request.method == 'POST':
        phone_number = request.POST.get('phone_number')
        password = request.POST.get('password')
        nickname = request.POST.get('nickname')

        if User.objects.filter(phone_number=phone_number).exists():
            return JsonResponse({'message': '手机号码已存在'}, status = 400)

        user = User(
            phone_number = phone_number,
            nickname = nickname,
            password = make_password(password)
        )
        user.save()
        return JsonResponse({'message': '注册成功'}, status = 201)

    return render(request,'register.html')

  • 创建用户登录视图（users/views.py）

python

from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login
from django.http import JsonResponse

def login_view(request):
    if request.method == 'POST':
        phone_number = request.POST.get('phone_number')
        password = request.POST.get('password')

        user = authenticate(request, phone_number = phone_number, password = password)
        if user is not None:
            login(request, user)
            # 生成Token
            from rest_framework_simplejwt.tokens import RefreshToken
            refresh = RefreshToken.for_user(user)
            token = str(refresh.access_token)
            return JsonResponse({'message': '登录成功', 'token': token}, status = 200)
        else:
            return JsonResponse({'message': '手机号码或密码错误'}, status = 400)

    return render(request, 'login.html')

  • 配置 URL（users/urls.py）

python

from django.urls import path
from. import views

urlpatterns = [
    path('register/', views.register, name='register'),
    path('login/', views.login_view, name='login'),
]

  • 将用户应用的 URL 包含到项目 URL 中（project_name/urls.py）

python

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('users/', include('users.urls')),
]

  1. 前端实现（微信小程序）
    • 注册页面（pages/register/register.js）

javascript

Page({
    data: {
        phone_number: '',
        password: '',
        nickname: ''
    },
    onInputPhoneNumber: function(e) {
        this.setData({
            phone_number: e.detail.value
        })
    },
    onInputPassword: function(e) {
        this.setData({
            password: e.detail.value
        })
    },
    onInputNickname: function(e) {
        this.setData({
            nickname: e.detail.value
        })
    },
    onSubmit: function() {
        const phone_number = this.data.phone_number;
        const password = this.data.password;
        const nickname = this.data.nickname;

        wx.request({
            url: 'http://127.0.0.1:8000/users/register/',
            method: 'POST',
            data: {
                phone_number: phone_number,
                password: password,
                nickname: nickname
            },
            success: function(res) {
                if (res.statusCode === 201) {
                    wx.showToast({
                        title: '注册成功',
                        icon:'success'
                    })
                } else {
                    wx.showToast({
                        title: res.data.message,
                        icon: 'none'
                    })
                }
            }
        })
    }
})

  • 注册页面布局（pages/register/register.wxml）

xml

<view class="container">
    <view class="input-group">
        <label>手机号码</label>
        <input type="number" bindinput="onInputPhoneNumber" placeholder="请输入手机号码"/>
    </view>
    <view class="input-group">
        <label>密码</label>
        <input type="password" bindinput="onInputPassword" placeholder="请输入密码"/>
    </view>
    <view class="input-group">
        <label>昵称</label>
        <input type="text" bindinput="onInputNickname" placeholder="请输入昵称"/>
    </view>
    <button bindtap="onSubmit">注册</button>
</view>

  • 注册页面样式（pages/register/register.wxss）

css

.container {
    padding: 20px;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

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

button {
    width: 100%;
    padding: 10px;
    background-color: #1aad19;
    color: white;
    border: none;
    border-radius: 5px;
}

  • 登录页面（pages/login/login.js）

javascript

Page({
    data: {
        phone_number: '',
        password: ''
    },
    onInputPhoneNumber: function(e) {
        this.setData({
            phone_number: e.detail.value
        })
    },
    onInputPassword: function(e) {
        this.setData({
            password: e.detail.value
        })
    },
    onSubmit: function() {
        const phone_number = this.data.phone_number;
        const password = this.data.password;

        wx.request({
            url: 'http://127.0.0.1:8000/users/login/',
            method: 'POST',
            data: {
                phone_number: phone_number,
                password: password
            },
            success: function(res) {
                if (res.statusCode === 200) {
                    wx.showToast({
                        title: '登录成功',
                        icon:'success'
                    })
                    wx.setStorageSync('token', res.data.token)
                } else {
                    wx.showToast({
                        title: res.data.message,
                        icon: 'none'
                    })
                }
            }
        })
    }
})

  • 登录页面布局（pages/login/login.wxml）

xml

<view class="container">
    <view class="input-group">
        <label>手机号码</label>
        <input type="number" bindinput="onInputPhoneNumber" placeholder="请输入手机号码"/>
    </view>
    <view class="input-group">
        <label>密码</label>
        <input type="password" bindinput="onInputPassword" placeholder="请输入密码"/>
    </view>
    <button bindtap="onSubmit">登录</button>
</view>

  • 登录页面样式（pages/login/login.wxss）

css

.container {
    padding: 20px;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

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

button {
    width: 100%;
    padding: 10px;
    background-color: #1aad19;
    color: white;
    border: none;
    border-radius: 5px;
}

四、总结

通过上述步骤，我们成功搭建了相亲小程序的用户注册与登录系统模块。后端使用 Django 框架实现了用户信息的存储和业务逻辑处理，前端利用微信小程序提供了友好的用户界面和交互功能。在实际应用中，还需要考虑一些额外的因素，如数据的安全性、接口的性能优化、用户体验的进一步提升等。例如，可以对密码进行更复杂的加密处理，使用 HTTPS 协议来传输数据以保证安全性；对接口进行性能测试和优化，提高系统的响应速度；在前端界面上添加更多的提示信息和动画效果，提升用户体验。同时，要确保数据库的备份和维护，以防止数据丢失。通过不断地完善和优化，这个系统模块可以更好地满足相亲小程序的实际需求。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布