Vue.js에서 데이터베이스를 작동하는 방법

현대 프런트엔드 기술의 발전으로 점점 더 많은 개발자들이 프런트엔드와 백엔드를 원활하게 결합하는 방법에 집중하고 있습니다. Vue.js는 대화형 단일 페이지 웹 애플리케이션을 개발하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue.js에서는 다양한 방법을 사용하여 서버와 통신할 수 있으며 그 중 가장 일반적인 방법은 AJAX 및 Axios입니다. 그러나 대부분의 경우 데이터베이스와 함께 Vue.js를 사용해야 합니다. 이번 글에서는 Vue.js에서 데이터베이스를 운영하는 방법을 소개하겠습니다.

1. 문서 읽기

Vue.js를 사용할 때 가장 먼저 해야 할 일은 공식 Vue.js 문서를 읽었는지 확인하는 것입니다. 문서에서 Vue.js 작성자는 Vue.js를 사용하여 서버와 통신하는 방법, Vuex를 사용하여 상태를 관리하는 방법, 외부 라이브러리와 통합하는 방법을 자세히 설명했습니다. Vue.js의 공식 문서에서 백엔드 언어와 호환되는 모듈과 라이브러리를 찾을 수 있습니다. 이는 프런트엔드 작업을 시작하는 데 중요한 단계입니다.

2. 적절한 백엔드 언어 및 프레임워크 선택

적절한 백엔드 언어 및 프레임워크를 선택할 때 다음 요소를 고려하세요.

• 데이터베이스 지원: 사용하려는 데이터베이스를 지원하는 언어 및 프레임워크를 선택하세요.
• 성능 및 확장성: 시스템의 성능 및 확장성 요구 사항을 충족할 수 있는 언어와 프레임워크를 선택하세요.
• 커뮤니티 지원: 강력하고 적극적인 커뮤니티 지원이 있는 언어와 프레임워크를 선택하세요.

여기에서는 Node.js를 예로 들어 Express.js 프레임워크와 MongoDB 데이터베이스를 사용하여 Vue.js에서 데이터베이스를 구현하는 방법을 설명하겠습니다.

3. Node.js 및 MongoDB 설치

먼저 Node.js와 MongoDB를 설치해야 합니다. 공식 웹사이트에서 다운로드하고 지침에 따라 설치를 완료할 수 있습니다.

4. Express.js 프로젝트 생성

Node.js 및 MongoDB를 설치한 후 다음 명령을 실행하여 명령줄에서 Express.js 프로젝트를 생성합니다.

$ mkdir my-project
$ cd my-project
$ npm init
$ npm install express --save

이 간단한 Node.js 애플리케이션은 Express js를 생성합니다. 섬기는 사람. 이제 이 서버에 라우팅과 미들웨어를 설정하겠습니다.

5. 라우팅 및 미들웨어 설정

Express.js 애플리케이션에서는 라우팅 및 미들웨어가 매우 중요합니다. 경로는 웹 요청의 요청 경로와 HTTP 메서드에서 처리하는 이벤트의 조합입니다. 미들웨어는 요청 처리 전후에 실행되는 기능입니다. Vue.js 애플리케이션에서는 Axios를 사용하여 Express.js 서버에 요청을 보냅니다.

여기에서는 클라이언트가 서버에 요청을 보낼 때 처리된 JSON 데이터를 반환하는 간단한 경로를 설정합니다. :

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.get('/api/data', (req, res) => {
  const data = {
    name: 'Jack',
    age: 30
  }
  res.json(data)
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

6. Create MongoDB 데이터베이스

이 단계에서는 MongoDB 데이터베이스를 사용하여 데이터를 저장하겠습니다. MongoDB는 오픈 소스, 문서 기반 데이터베이스입니다. 전통적인 관계형 데이터베이스와 달리 MongoDB는 테이블을 사용하지 않고 컬렉션과 문서를 사용합니다. Express.js 프로젝트 루트 디렉터리에서 data라는 컬렉션을 생성합니다. data 的集合：

mongo
use mydatabase
db.createCollection('data')

7. 配置 MongoDB 数据库模型

我们使用 Mongoose.js 包来在 Express.js 项目中启用 MongoDB 数据库模型。 Mongoose.js 包提供了在服务器上使用 MongoDB 时更精细的控制。 为使用 MongoDB，在项目中安装 Mongoose.js:

$ npm install mongoose --save

创建一个 data.js 文件，在其中创建 Mongoose.js 数据库模型。 在这个文件中，我们使用 mongoose.Schema() 函数创建数据模型。 在这个例子中，我们将模型设置为包含两个字段：名称和年龄。

const mongoose = require('mongoose');

let dataSchema = mongoose.Schema({
    name: String,
    age: Number
});

module.exports = mongoose.model('Data', dataSchema);

8. 连接应用和数据库

连接数据库通常是非常麻烦的，但 Mongoose.js 使连接变得非常简单。下面是连接数据库所需的代码：

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/mydatabase', {
    useNewUrlParser: true
});

mongoose.connection.on('connected', () => console.log('MongoDB connected.'));
mongoose.connection.on('error', err => console.error('Mongoose default connection error: ', err));
mongoose.connection.on('disconnected', () => console.log('MongoDB disconnected.'));

process.on('SIGINT', () => {
    mongoose.connection.close(() => {
        console.log('MongoDB connection disconnected through app termination.');
        process.exit(0);
    });
});

9. 将 Express.js 和 MongoDB 集成到 Vue.js 应用中

现在，我们已经完成了后端的工作。 下一步是将其与Vue.js 前端进行集成。 在 Vue.js 应用中，我们将使用 Axios 来向服务器发送请求。 Axios 是一个基于 Promise 的 HTTP 客户端，它很容易集成到Vue.js 应用中。

在 Vue.js 应用中，我们可以使用以下代码来获取服务器端提供的数据：

<template>
  <div>
    <p>{{ data.name }}</p>
    <p>{{ data.age }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: {}
    };
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:3000/api/data').then(
        (response) => {
          this.data = response.data;
        },
        (error) => {
          console.error(error);
        }
      );
    },
  },
  mounted() {
    this.fetchData();
  }
};
</script>

在此示例中，我们使用 Vue.js 的组件将数据呈现在页面中。在 mounted()rrreee

MongoDB 데이터베이스 모델 구성

Mongoose.js 패키지를 사용합니다. Express.js 프로젝트에서 MongoDB 데이터베이스 모델을 활성화합니다. Mongoose.js 패키지는 서버에서 MongoDB를 사용할 때 더 정밀한 제어를 제공합니다. MongoDB를 사용하려면 프로젝트에 Mongoose.js를 설치하세요.

rrreee🎜 data.js 파일을 만들고 그 안에 Mongoose.js 데이터베이스 모델을 만듭니다. 이 파일에서는 mongoose.Schema() 함수를 사용하여 데이터 모델을 생성합니다. 이 예에서는 이름과 나이라는 두 개의 필드를 포함하도록 모델을 설정했습니다. 🎜rrreee
🎜애플리케이션과 데이터베이스 연결🎜🎜🎜데이터베이스에 연결하는 것은 일반적으로 매우 번거롭지만 Mongoose.js를 사용하면 매우 쉽습니다. 데이터베이스에 연결하는 데 필요한 코드는 다음과 같습니다. 🎜rrreee
🎜Express.js 및 MongoDB를 Vue.js 애플리케이션에 통합🎜🎜🎜이제 백엔드 작업이 완료되었습니다. 다음 단계는 이를 Vue.js 프런트엔드와 통합하는 것입니다. Vue.js 애플리케이션에서는 Axios를 사용하여 서버에 요청합니다. Axios는 Vue.js 애플리케이션에 쉽게 통합되는 Promise 기반 HTTP 클라이언트입니다. 🎜🎜Vue.js 애플리케이션에서는 다음 코드를 사용하여 서버 측에서 제공하는 데이터를 가져올 수 있습니다. 🎜rrreee🎜이 예에서는 Vue.js의 구성 요소를 사용하여 페이지의 데이터를 렌더링합니다. mounted() 메소드에서는 우리가 설정한 Express.js 서버에 요청을 보내고 Axios를 사용하여 컴포넌트의 데이터 객체에 응답 데이터를 저장합니다. 그런 다음 템플릿을 사용하여 데이터를 JSON 형식으로 렌더링합니다. 🎜🎜요약🎜🎜이 글에서는 Express.js와 MongoDB를 사용하여 Vue.js에서 데이터베이스를 생성하는 방법을 소개했습니다. Express.js 서버를 만들고 Axios를 사용하여 서버와 클라이언트 간에 데이터를 전달했습니다. Vue.js 애플리케이션에서는 Axios를 사용하여 요청을 보내고 MongoDB를 사용하여 데이터를 저장합니다. 위의 단계는 다양한 기술과 프레임워크에 쉽게 적용할 수 있으므로 모든 기능과 기술에 대해 다루는 기술을 사용할 수 있습니다. 🎜

위 내용은 Vue.js에서 데이터베이스를 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!