demande de connexion vue mobile

Vue.js, en tant que framework JavaScript open source, est accueilli par de plus en plus de développeurs. Lorsque nous développons le front-end, en particulier lorsque nous développons sur le téléphone mobile, nous devrons peut-être interagir avec les données du back-end, telles que les demandes de connexion au téléphone mobile. Cet article explique comment envoyer une demande de connexion par téléphone mobile dans un projet Vue.

1. Créer un projet Vue

Vous devez d'abord créer un projet Vue, exécuter la commande suivante dans le terminal ou la ligne de commande :

vue create my-project

Cette commande créera un nouveau projet Vue et installera les dépendances pertinentes.

2. Créez le composant de connexion dans le projet Vue et ajoutez l'élément de formulaire

Créez un nouveau dossier de composants dans le dossier src du projet Vue et créez un nouveau fichier de composant de connexion Login.vue dedans, puis dans le composant Ajoutez des éléments de formulaire au modèle pour collecter le numéro de téléphone mobile et le mot de passe de l'utilisateur. Le code est le suivant :

<template>
  <form>
    <label>手机号码：</label>
    <input type="tel" v-model="mobile"/>
    <label>密码：</label>
    <input type="password" v-model="password"/>
    <button type="submit" @click="submit">登录</button>
  </form>
</template>

3. Envoyer une requête au backend dans le composant Vue

Dans la partie script du composant Vue, utilisez la bibliothèque Vue Resource pour envoyer une demande de connexion au serveur backend. La bibliothèque Vue Resource est une bibliothèque Http officiellement développée par Vue.js pour faciliter l'interaction des données entre le front-end et le back-end. Voici un exemple de code utilisant la bibliothèque Vue Resource :

<script>
import VueResource from 'vue-resource';

export default {
  name: 'Login',

  data () {
    return {
      mobile: '',
      password: ''
    }
  },

  methods: {
    submit () {
      this.$http.post('/login', { mobile: this.mobile, password: this.password })
      .then(response => {
        // 处理登录成功的响应
      })
      .catch(error => {
        // 处理登录失败的响应
      });
    }
  },

  created () {
    // 在组件创建的时候加载Vue Resource插件
    Vue.use(VueResource);
  }
}
</script>

Dans le code ci-dessus, la fonction créée() est appelée lors de la création du composant. La méthode Vue.use() est utilisée pour charger le plug-in Vue Resource. La fonction submit() est appelée lorsque vous cliquez sur le bouton de connexion, en utilisant la méthode $http.post() de Vue pour envoyer une requête POST au serveur et envoyer le numéro de téléphone mobile et le mot de passe au format JSON. L'utilisation de la fonction flèche d'ES6 pour traiter le résultat de la réponse peut facilement gérer le succès ou l'échec de la connexion.

4. Créez le point de terminaison du serveur backend et gérez la demande de connexion

Sur le backend, vous devez créer le point de terminaison avec le chemin correspondant pour attendre la demande de connexion du frontend. Un exemple simple de code de serveur Express est le suivant :

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

app.post('/login', (req, res) => {
  const mobile = req.body.mobile;
  const password = req.body.password;

  // 在此处处理登录请求
  // ...
  
  // 发送登录结果
  res.send({ status: 'OK' });
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

Dans le code ci-dessus, le framework Express est utilisé pour créer un serveur HTTP et body-parser est utilisé pour analyser les données dans le corps de la requête POST. Utilisez la méthode app.post() d'Express pour gérer la demande de connexion depuis le front-end, analyser les données de la demande et écrire la logique correspondante dans le code pour vérifier si l'utilisateur et le mot de passe correspondent. Dans ce cas, nous envoyons simplement une réponse positive au frontend.

5. Exécutez le projet Vue et testez si la demande de connexion fonctionne correctement

Enfin, nous devons exécuter la commande npm run serve dans le terminal pour démarrer le projet Vue, puis ouvrir http://localhost:8080/ dans le navigateur et testez que la demande de connexion fonctionne correctement. Si tout va bien, l'application Vue nous montrera un formulaire de connexion, et lorsque nous remplirons le numéro de téléphone mobile et le mot de passe corrects, une demande de connexion sera envoyée au serveur backend et une réponse réussie sera affichée.

Résumé

L'envoi d'une demande de connexion par téléphone mobile dans le projet Vue.js peut être considéré comme une fonction fréquemment utilisée. Dans cet article, nous avons appris les bases de la création de requêtes HTTP en utilisant la bibliothèque de ressources Vue comme interface et créé un composant de formulaire de connexion simple et un point de terminaison de serveur backend. Bien sûr, il ne s’agit que d’un exemple simple, et nous pouvons réaliser une implémentation plus complète en fonction de besoins spécifiques et de logique métier.

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!