How to realize interaction between thinkphp and vue

With the continuous development of Web technology, the front-end and back-end separation model has become a trend in Web application development. In this model, the front end is responsible for presentation and interaction, while the back end is responsible for data processing and business logic. Therefore, the interaction between the front and back ends is particularly critical. This article will introduce how to implement interaction in ThinkPHP and Vue.

1. Prerequisites

Before we start discussing how to implement interaction in ThinkPHP and Vue, we need to ensure that the following prerequisites are met:

1. Already installed PHP running environment and database

2. ThinkPHP framework has been installed

3.Vue.js has been installed

If you have not completed these preparations, please Complete them first before continuing with this article.

2. API provided by ThinkPHP

In ThinkPHP, we can provide API through the controller to interact with Vue. An API can be a GET request or a POST request. Generally speaking, GET requests are used to obtain data, while POST requests are used to modify data. Let's look at an example.

1. Create a controller

First, we need to create a controller to provide the API. Assuming that we have created a controller named "Index" in ThinkPHP, we can add a method named "getArticles" to it to provide an API for getting a list of articles.

public function getArticles()
{
    $articles = Db::name('article')->select();
    return json($articles);
}

The above code uses the Db class to obtain the article list in the database, converts it to JSON format through the json function, and finally returns it to the browser as a response.

2. Access the API in Vue

Next, we need to call this API in Vue and get the returned article list. As we all know, Vue can use the axios library to send HTTP requests. Let's look at an example.

axios.get('/index/getArticles')
.then(function(response) {
    console.log(response.data);
})
.catch(function(error) {
    console.log(error);
});

The above code uses the axios.get method to access the API we created above, and prints the article list to the console when the response is successful. Note that we only need to specify the path to the API since we are using relative paths. If your server is configured with a virtual host, you need to configure the path as an absolute path.

3. Components provided by Vue

In addition to using the API, Vue also provides many components to make interacting with the backend more convenient. For example, Vue provides a component called Axios, which makes it easier for us to use the axios library.

1. Install Axios

To use Axios, we need to install it into our Vue project first. Run the following command in the console:

npm install axios --save

2. Use Axios

After the installation is complete, we can use it in the Vue component. Let's create a component called "ArticleList" in Vue to display a list of articles.

<template>
  <div>
    <ul>
      <li v-for="article in articles">{{ article.title }}</li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        articles: []
      }
    },
    created() {
      axios.get('/index/getArticles')
      .then((response) => {
        this.articles = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
    }
  }
</script>

The above code uses the axios.get method to get the article list from the API and save it in the component's properties. The component automatically executes the create function when it is created so that it displays the list of articles as soon as they are fetched.

4. Summary

Now, we have learned how to implement interaction in ThinkPHP and Vue. Whether you use APIs or components, communication between the front and back ends can be easily achieved. I hope this article is helpful to you, and I wish you more success in web application development!

The above is the detailed content of How to realize interaction between thinkphp and vue. For more information, please follow other related articles on the PHP Chinese website!