vue 스캐폴딩과 thinkphp를 결합하는 방법

Vue는 데이터 기반 JavaScript 프레임워크이고 ThinkPHP는 오픈 소스 PHP 프레임워크입니다. 둘 다 해당 분야에서 매우 인기가 있습니다. Vue와 ThinkPHP를 어떻게 함께 사용하느냐는 매우 중요한 문제입니다. 이를 통해 웹 애플리케이션을 보다 효율적이고 편리하게 개발할 수 있기 때문입니다. 이 글에서는 Vue와 ThinkPHP를 개발에 활용하는 방법을 소개합니다.

1. Vue 프로젝트 만들기

Vue를 사용하려면 먼저 Vue 프로젝트를 만들어야 합니다. Vue CLI(명령줄 인터페이스)를 사용하여 이를 수행할 수 있습니다. Vue CLI는 다음 명령을 사용하여 설치할 수 있습니다.

npm install -g vue-cli

그런 다음 다음 명령을 사용하여 새 Vue 프로젝트를 생성할 수 있습니다.

vue init webpack my-project

여기서 'my-project'는 프로젝트 이름입니다. 그런 다음 프로젝트 디렉터리로 이동하여 필요한 모든 종속성을 설치할 수 있습니다.

cd my-project
npm install

2. ThinkPHP 설치

이제 새 Vue 프로젝트가 생성되었습니다. 다음으로 ThinkPHP를 설치하고 구성해야 합니다. 여기서는 이미 PHP와 MySQL 서버가 설치되어 있다고 가정합니다. 프레임워크 코드의 최신 버전은 ThinkPHP 공식 웹사이트에서 다운로드하여 프로젝트의 서버 디렉토리에 배치할 수 있습니다. 다음으로, 데이터베이스 연결을 구성하고 데이터를 저장할 데이터베이스 테이블을 생성해야 합니다. 다음 코드를 사용하여 간단한 테이블을 생성할 수 있습니다:

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;

이렇게 하면 'id', 'name' 및 'email'이라는 세 개의 필드가 있는 'users'라는 테이블이 생성됩니다.

3. Vue를 ThinkPHP와 연결

이제 Vue를 ThinkPHP와 연결할 준비가 되었습니다. Vue 프로젝트의 루트 디렉터리에 'config'라는 새 폴더를 만들어야 합니다. 이 폴더에 'index.js'라는 새 파일을 만들어야 합니다. 서버와의 통신 옵션을 설정하는 데 사용되는 Vue 구성 파일입니다. 이 파일은 다음 코드를 사용하여 생성할 수 있습니다:

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

그러면 Vue 개발 서버가 '/api'의 모든 요청을 프록시하고 'localhost:8080'의 서버로 보내도록 설정됩니다. 필요에 따라 이 값을 변경할 수 있습니다.

다음으로 Vue 프로젝트의 엔트리 파일(보통 'index.js')을 수정해야 합니다. 다음 코드를 사용하여 Vue의 서버 연결을 설정할 수 있습니다:

import axios from 'axios'

axios.defaults.baseURL = '/api'

Vue.prototype.$http = axios

이는 Vue가 axios 라이브러리를 사용하여 모든 HTTP 요청을 보내도록 지시합니다. 여기서는 요청이 올바른 서버로 프록시되도록 기본 URL도 설정합니다.

이제 서버에서 데이터를 가져오기 위한 간단한 구성 요소를 만들어야 합니다. 다음 코드를 사용하여 이 구성 요소를 만들 수 있습니다.

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

이렇게 하면 서버에서 사용자 목록을 가져오고 해당 사용자의 이름과 이메일 주소를 표시하는 'UserList'라는 Vue 구성 요소가 생성됩니다.

마지막으로 서버 측에서는 Vue의 요청을 처리하기 위한 핸들러를 생성해야 합니다. 이 핸들러는 다음 코드를 사용하여 생성할 수 있습니다:

<?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);
    }
}

이렇게 하면 '/api/users' 경로에 대한 요청을 처리하고 사용자 목록을 반환하는 'Api'라는 컨트롤러가 생성됩니다.

4. 애플리케이션 실행

이제 애플리케이션을 실행할 준비가 되었습니다. Vue 프로젝트의 루트 디렉터리에서 다음 명령을 사용하여 개발 서버를 시작할 수 있습니다:

npm run dev

그러면 Vue 개발 서버가 시작되고 Vue가 ThinkPHP 서버에 연결됩니다. 다음 URL을 사용하여 샘플 구성 요소에 액세스할 수 있습니다.

http://localhost:8080/users

이렇게 하면 서버에서 사용자 목록을 가져와 페이지에 표시합니다.

요약

이 글에서는 Vue와 ThinkPHP를 개발에 활용하는 방법을 소개합니다. Vue 프로젝트 생성, ThinkPHP 설치 및 구성, Vue와 ThinkPHP 연결 과정을 배웠습니다. 또한 서버에서 데이터를 가져오는 간단한 Vue 구성 요소를 만들고 서버 측 핸들러를 만드는 방법도 다루었습니다. Vue와 ThinkPHP로 개발을 시작하고 싶다면 이 글이 확실히 도움이 될 것입니다.

위 내용은 vue 스캐폴딩과 thinkphp를 결합하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!