vue mobile login request

Vue.js, as an open source JavaScript framework, is welcomed by more and more developers. When we develop the front-end, especially when developing on the mobile phone, we may need to interact with the back-end data, such as mobile phone login requests. This article will introduce how to send a mobile phone login request in a Vue project.

1. Create Vue project

First you need to create a Vue project, run the following command in the terminal or command line:

vue create my-project

This command will create a new Vue project and install related dependencies.

2. Create a login component in the Vue project and add a form element

Create a new components folder in the src folder of the Vue project and create a Create a new login component file Login.vue, and then add a form element to the component's template to collect the user's mobile phone number and password. The code is as follows:

<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. Send a request to the backend in the Vue component

In the script part of the Vue component, use the Vue Resource library to send a login request to the backend server. The Vue Resource library is an Http library officially developed by Vue.js to facilitate data interaction between the front end and the back end. The following is a sample code using the Vue Resource library:

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

In the above code, the created() function is called when the component is created. The Vue.use() method is used to load the Vue Resource plug-in. The submit() function is called when the login button is clicked, using Vue's $http.post() method to send a POST request to the server, and send the mobile phone number and password in JSON format. Using ES6's arrow function to process the response result can easily handle login success or failure.

4. Create the backend server endpoint and handle the login request

On the backend, you need to create an endpoint with the corresponding path to wait for the login request from the frontend. A simple Express server code example is as follows:

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

In the above code, the Express framework is used to create an HTTP server, and body-parser is used to parse the data in the POST request body. Use Express's app.post() method to handle the login request from the front end, parse the request data, and write corresponding logic in the code to verify whether the user and password match. In this case, we simply send a successful response to the frontend.

5. Run the Vue project and test whether the login request is working properly

Finally, we need to run the npm run serve command in the terminal to start the Vue project, and then in the browser Open http://localhost:8080/ and test whether the login request is working properly. If everything is fine, the Vue application will show us a login form, and when we fill in the correct mobile phone number and password, a login request will be sent to the backend server and a successful response will be displayed.

Summary

Sending a mobile phone login request in the Vue.js project can be said to be a frequently used function. In this article, we learned the basics of how to make HTTP requests using the Vue Resource library as a frontend and created a simple login form component and a backend server endpoint. Of course, this is just a simple example, and we can make a more complete implementation based on specific needs and business logic.

The above is the detailed content of vue mobile login request. For more information, please follow other related articles on the PHP Chinese website!