page de connexion à Uniapp

Avec le développement d'applications mobiles, de nombreux développeurs choisissent d'utiliser uniapp pour le développement d'applications. Une caractéristique majeure d'uniapp est qu'il prend en charge plusieurs plates-formes, ce qui améliore non seulement l'efficacité du développement, mais facilite également l'exploitation et la maintenance des applications. et commodité. Dans les applications Uniapp, la page de raccourci de connexion est une fonction courante. Discutons des étapes spécifiques à suivre pour implémenter la page de raccourci de connexion Uniapp.

1. Créez d'abord une page de connexion, vous pouvez utiliser le modèle fourni par uniapp, ou vous pouvez écrire votre propre code pour l'implémenter.
2. Dans la page de connexion, vous devez introduire le composant de connexion officiellement fourni par uniapp. Le code est le suivant :

<template>
  <view>
    <form>
      <input type="text" v-model="account" placeholder="请输入账号"/>
      <input type="password" v-model="password" placeholder="请输入密码"/>
      <button type="submit" @click="login">登录</button>
    </form>
  </view>
</template>

<script>
  import { login } from '@/api/user'

  export default {
    data() {
      return {
        account: '',
        password: ''
      }
    },
    methods: {
      async login() {
        // 调用登录接口，接口返回登录状态
        const res = await login({ account: this.account, password: this.password })

        // 如果登录成功，就跳转到主页
        if (res.code === 200) {
          uni.switchTab({ url: '/pages/index' })
        } else {
          uni.showToast({
            title: '登录失败',
            icon: 'none'
          })
        }
      }
    }
  }
</script>

Dans le code ci-dessus, nous a écrit un formulaire de connexion de base, et l'interface de connexion est appelée lorsque le formulaire est soumis. Si la connexion réussit, elle passera à la page d'accueil ; si la connexion échoue, une fenêtre contextuelle vous indiquera que la connexion a échoué.

3. Dans l'interface de connexion, nous devons vérifier le mot de passe du compte et vérifier si le numéro de compte et le mot de passe saisis par l'utilisateur sont corrects, renvoyer un code d'état de connexion réussie et. transporter les informations utilisateur. Sinon, le code d'état et le message d'erreur d'échec de connexion sont renvoyés.

import request from '@/utils/request'

// 登录接口
export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

Dans le code ci-dessus, nous utilisons la requête de bibliothèque de requêtes réseau officiellement recommandée par uniapp pour envoyer la requête. En même temps, nous devons transmettre les données conformément aux exigences de. l'interface back-end.

4. Sur la page d'accueil, nous devons juger du statut de connexion de l'utilisateur. Si l'utilisateur est connecté, les informations de l'utilisateur seront affichées. Si l'utilisateur n'est pas connecté, passez à. la page de connexion pour vous connecter. .

<template>
  <view>
    <text v-if="isLogin">欢迎你，{{ userInfo.name }}</text>
    <view v-else>
      <text>请先登录</text>
      <button @click="gotoLogin">去登录</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLogin: false,
        userInfo: {}
      }
    },
    onLoad() {
      // 判断用户是否已登录
      this.checkLogin()
    },
    methods: {
      checkLogin() {
        // 检查本地存储中是否存在登录信息
        const loginInfo = uni.getStorageSync('loginInfo')
        if (loginInfo && loginInfo.isLogin) {
          this.isLogin = true
          this.userInfo = loginInfo.userInfo
        }
      },
      gotoLogin() {
        // 跳转到登录页面
        uni.navigateTo({ url: '/pages/login' })
      }
    }
  }
</script>

Dans le code ci-dessus, nous vérifions si les informations de connexion existent dans le stockage local via la méthode checkLogin. Si elles existent, définissons isLogin sur true et définissons userInfo sur le stockage local. Informations utilisateur ; sinon, définissez isLogin sur false, indiquant que l'utilisateur n'est pas connecté. Si l'utilisateur n'est pas connecté, il peut utiliser la méthode gotoLogin pour accéder à la page de connexion pour les opérations de connexion.

5. Après une connexion réussie, nous devons enregistrer le statut de connexion et les informations utilisateur sur le stockage local afin que nous puissions nous connecter automatiquement la prochaine fois que nous ouvrirons l'application.

async login() {
  // 调用登录接口，接口返回登录状态
  const res = await login({ account: this.account, password: this.password })

  // 如果登录成功，就跳转到主页
  if (res.code === 200) {
    // 保存登录状态和用户信息到本地存储中
    uni.setStorageSync('loginInfo', { isLogin: true, userInfo: res.data.userInfo })
    uni.switchTab({ url: '/pages/index' })
  } else {
    uni.showToast({
      title: '登录失败',
      icon: 'none'
    })
  }
}

Dans le code ci-dessus, nous utilisons l'API de stockage local fournie par uniapp pour enregistrer et lire l'état, en prenant e'setStorageSync' et 'getStorageSync' comme exemples. De cette façon, nous pouvons réaliser la fonction de page de saut de connexion Uniapp et fournir un meilleur support pour le développement d'applications et l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!