Vue.js에서 데이터베이스를 작동하는 방법-프런트엔드 Q&A-php.cn

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

PHPz

풀어 주다： 2023-04-26 16:40:24

원래의

2202명이 탐색했습니다.

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

문서 읽기

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

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

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

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

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

Node.js 및 MongoDB 설치

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

Express.js 프로젝트 생성

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

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

로그인 후 복사

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

라우팅 및 미들웨어 설정

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}`)
})

로그인 후 복사

Create MongoDB 데이터베이스

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

mongo
use mydatabase
db.createCollection('data')

로그인 후 복사

配置 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);

로그인 후 복사

连接应用和数据库

连接数据库通常是非常麻烦的，但 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);
    });
});

로그인 후 복사

将 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

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

mongoose.Schema()

mounted()

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