How to combine vue scaffolding with thinkphp

Vue is a data-driven JavaScript framework, and ThinkPHP is an open source PHP framework. They are both very popular in their respective fields. How to use Vue and ThinkPHP together is a very important issue, because it allows us to develop web applications more efficiently and conveniently. This article will introduce how to use Vue and ThinkPHP for development.

1. Create a Vue project

To use Vue, we first need to create a Vue project. We can do this using Vue CLI (Command Line Interface). The Vue CLI can be installed using the following command:

npm install -g vue-cli

Then, a new Vue project can be created using the following command:

vue init webpack my-project

Here, 'my-project' is the project name. We can then navigate to the project directory and install all required dependencies:

cd my-project
npm install

2. Install ThinkPHP

Now, we have created a new Vue project. Next, we need to install and configure ThinkPHP. Here, we assume that you already have PHP and MySQL server installed. The latest version of the framework code can be downloaded from ThinkPHP’s official website and placed in the project’s server directory. Next, you need to configure the database connection and create a database table to store the data. You can use the following code to create a simple table:

CREATE TABLE `users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL DEFAULT '',
  `email` varchar(255) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

This will create a table called 'users' which has three fields 'id', 'name' and 'email'.

3. Connect Vue with ThinkPHP

Now, we are ready to connect Vue with ThinkPHP. In the root directory of the Vue project, we need to create a new folder called 'config'. In this folder, we need to create a new file called 'index.js'. This is a Vue configuration file used to set options for communication with the server. This file can be created using the following code:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

This will set up the Vue development server to proxy all requests from '/api' and send them to the server on 'localhost:8080'. You can change these values ​​as needed.

Next, we need to modify the entry file of the Vue project (usually 'index.js'). We can use the following code to set up Vue's connection to the server:

import axios from 'axios'

axios.defaults.baseURL = '/api'

Vue.prototype.$http = axios

This will tell Vue to use the axios library to send all HTTP requests. Here we also set the base URL so that requests will be proxied to the correct server.

Now, we need to create a simple component to get data from the server. We can use the following code to create this component:

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.email }})</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      users: []
    }
  },

  created () {
    this.$http.get('/users')
      .then(response => {
        this.users = response.data
      })
  }
}
</script>

This will create a Vue component called 'UserList' which will get a list of users from the server and display their names and email addresses.

Finally, on the server side, we need to create a Handler to handle requests made by Vue. This handler can be created using the following code:

<?php

namespace app\index\controller;

use think\Controller;
use think\Db;

class Api extends Controller
{
    public function getUsers()
    {
        $users = Db::name(&#39;users&#39;)->select();
        return json($users);
    }
}

This will create a controller called 'Api' which will handle requests on the '/api/users' route and return a list of users.

4. Run the application

Now, we are ready to run the application. In the root directory of your Vue project, you can start the development server with the following command:

npm run dev

This will start Vue's development server and connect Vue to the ThinkPHP server. Our sample component can be accessed using the following URL:

http://localhost:8080/users

This will get a list of users from the server and display them on the page.

Summary

This article introduces how to use Vue and ThinkPHP for development. We learned about the process of creating a Vue project, installing and configuring ThinkPHP, and connecting Vue with ThinkPHP. We also created a simple Vue component to get data from the server and covered how to create a server-side handler. If you want to start developing with Vue and ThinkPHP, then this article will definitely help you.

The above is the detailed content of How to combine vue scaffolding with thinkphp. For more information, please follow other related articles on the PHP Chinese website!