uni-app结合PHP实现单用户登陆demo及解析

接下来我会为你详细讲解“uni-app结合PHP实现单用户登陆demo及解析”的完整攻略。

一、准备工作

在开始编写代码之前，你需要了解以下内容：

uni-app框架的使用
PHP语言基础
MySQL数据库的使用

另外，还需要安装以下软件：

HBuilderX（uni-app的开发工具）
MySQL数据库
Apache或Nginx服务器

二、数据库设计

在开始编写代码之前，需要先设计访问数据的表结构。以下是示例代码：

CREATE TABLE `user` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(20) DEFAULT NULL,
  `password` varchar(32) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

三、后台PHP代码编写

在后台代码中，我们需要连接MySQL数据库，并提供API接口，使得uni-app可以调用数据。以下是示例代码：

<?php

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

// 获取传入的参数
$name = $_POST["username"];
$password = $_POST["password"];

// 查询表
$sql = "SELECT id FROM user WHERE name='" . $name . "' AND password='" . md5($password) . "'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo $row["id"];
} else {
    echo "0";
}

$conn->close();

?>

以上代码中，我们首先连接数据库，然后获取传入的参数，查询user表，查询成功则返回该用户的id，否则返回0。

四、前端uni-app代码编写

在前端代码中，主要包括用户登录界面、接口调用以及登录状态的保存。以下是示例代码：

<template>
  <view class="container">
    <view class="title">用户登录</view>
    <view class="form">
      <input type="text" v-model="username" placeholder="用户名"/>
      <input type="password" v-model="password" placeholder="密码"/>
      <button type="primary" @click="login">登录</button>
    </view>
  </view>
</template>

<script>
import request from '@/common/request.js'

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      request({
        url: '/login.php',
        method: 'POST',
        data: {
          username: this.username,
          password: this.password
        }
      }).then(res => {
        if (res.data !== '0') {
          // 登录成功，保存用户信息
          uni.setStorageSync('userId', res.data)
          uni.showLoading({
            title: '登录成功',
          })
          setTimeout(() => {
            uni.hideLoading()
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 1000)
        } else {
          uni.showToast({
            title: '用户名或密码错误',
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

以上代码中，我们需要引用request.js文件，该文件封装了uni.request函数，用于调用后台API接口。在登录成功后，我们需要使用uni.setStorageSync函数保存用户信息，并跳转到指定页面。