permintaan log masuk mudah alih vue

Vue.js, sebagai rangka kerja JavaScript sumber terbuka, dialu-alukan oleh semakin ramai pembangun. Apabila kami membangunkan bahagian hadapan, terutamanya apabila membangunkan pada telefon mudah alih, kami mungkin perlu berinteraksi dengan data bahagian belakang, seperti permintaan log masuk telefon mudah alih. Artikel ini akan memperkenalkan cara menghantar permintaan log masuk telefon mudah alih dalam projek Vue.

1. Buat projek Vue

Mula-mula anda perlu mencipta projek Vue, jalankan arahan berikut dalam terminal atau baris arahan:

vue create my-project

Arahan ini akan mencipta projek Vue baharu dan memasang kebergantungan yang berkaitan.

2. Buat komponen log masuk dalam projek Vue dan tambah elemen borang

Buat folder komponen baharu dalam folder src projek Vue dan cipta Cipta baharu log masuk fail komponen Login.vue, dan kemudian tambahkan elemen borang pada templat komponen untuk mengumpul nombor telefon mudah alih dan kata laluan pengguna. Kodnya adalah seperti berikut:

<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. Hantar permintaan ke bahagian belakang dalam komponen Vue

Dalam bahagian skrip komponen Vue, gunakan perpustakaan Sumber Vue untuk hantar permintaan log masuk ke pelayan bahagian belakang. Pustaka Sumber Vue ialah perpustakaan Http yang dibangunkan secara rasmi oleh Vue.js untuk memudahkan interaksi data antara bahagian hadapan dan bahagian belakang. Berikut ialah contoh kod menggunakan perpustakaan Sumber Vue:

<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>

Dalam kod di atas, fungsi create() dipanggil apabila komponen dicipta. Kaedah Vue.use() digunakan untuk memuatkan pemalam Sumber Vue. Fungsi submit() dipanggil apabila butang log masuk diklik, menggunakan kaedah $http.post() Vue untuk menghantar permintaan POST ke pelayan, dan menghantar nombor telefon mudah alih dan kata laluan dalam format JSON. Menggunakan fungsi anak panah ES6 untuk memproses hasil tindak balas boleh mengendalikan kejayaan atau kegagalan log masuk dengan mudah.

4. Buat titik akhir pelayan bahagian belakang dan kendalikan permintaan log masuk

Di bahagian belakang, anda perlu mencipta titik akhir dengan laluan yang sepadan untuk menunggu permintaan log masuk daripada bahagian hadapan. Contoh kod pelayan Express yang ringkas adalah seperti berikut:

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/');
});

Dalam kod di atas, rangka kerja Express digunakan untuk mencipta pelayan HTTP dan penghurai badan digunakan untuk menghuraikan data dalam badan permintaan POST. Gunakan kaedah app.post() Express untuk mengendalikan permintaan log masuk dari bahagian hadapan, menghuraikan data permintaan dan menulis logik yang sepadan dalam kod untuk mengesahkan sama ada pengguna dan kata laluan sepadan. Dalam kes ini, kami hanya menghantar respons yang berjaya ke bahagian hadapan.

5. Jalankan projek Vue dan uji sama ada permintaan log masuk berfungsi dengan betul

Akhir sekali, kita perlu menjalankan perintah npm run serve dalam terminal untuk memulakan projek Vue , dan kemudian dalam penyemak imbas Buka http://localhost:8080/ dan uji sama ada permintaan log masuk berfungsi dengan betul. Jika semuanya baik-baik saja, aplikasi Vue akan menunjukkan kepada kami borang log masuk, dan apabila kami mengisi nombor telefon mudah alih dan kata laluan yang betul, permintaan log masuk akan dihantar ke pelayan bahagian belakang dan respons yang berjaya akan dipaparkan.

Ringkasan

Menghantar permintaan log masuk telefon mudah alih dalam projek Vue.js boleh dikatakan sebagai fungsi yang kerap digunakan. Dalam artikel ini, kami mempelajari asas cara membuat permintaan HTTP menggunakan perpustakaan Sumber Vue sebagai bahagian hadapan dan mencipta komponen borang log masuk mudah dan titik akhir pelayan bahagian belakang. Sudah tentu, ini hanyalah contoh mudah, dan kami boleh membuat pelaksanaan yang lebih lengkap berdasarkan keperluan khusus dan logik perniagaan.

Atas ialah kandungan terperinci permintaan log masuk mudah alih vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!