Node.js 및 Vue.js를 사용하여 전체 스택 프로젝트를 빌드하는 방법

Node.js와 Vue.js는 현재 매우 인기 있는 두 가지 기술입니다. Node.js는 JavaScript에서 실행되는 서버측 개발 플랫폼인 반면 Vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 이 두 기술의 결합은 웹 애플리케이션의 개발 효율성과 사용자 경험을 크게 향상시킬 수 있습니다. 이 기사에서는 실제 프로젝트를 사용하여 Node.js 및 Vue.js를 사용하여 전체 스택 웹 애플리케이션을 구축하는 방법을 보여줍니다.

1. 프로젝트 소개

사용자는 로그인을 통해 기사를 게시하고 댓글을 달 수 있으며 등록을 통해 다른 사용자가 게시한 기사를 볼 수 있는 간단한 기사 게시 및 관리 시스템을 개발할 것입니다. 이 기능을 달성하기 위해 우리는 Node.js를 백엔드 개발 언어 및 기술 프레임워크로, Vue.js를 프론트엔드 개발 프레임워크로, MongoDB를 데이터베이스로 사용할 것입니다.

2. 환경 설정

개발을 시작하기 전에 먼저 로컬 환경에 Node.js, Vue.js, MongoDB의 개발 환경을 설정해야 합니다.

1. Node.js 설치: 공식 홈페이지에서 Node.js 설치 패키지를 다운로드하여 설치할 수 있습니다.

2. Vue.js 설치: npm 명령줄 도구를 사용하여 Vue.js를 설치할 수 있습니다. 명령줄에 다음 명령을 입력하세요:

npm install -g vue-cli

3. MongoDB 설치: 공식 웹사이트에서 MongoDB 설치 패키지를 다운로드하여 설치할 수 있습니다.

3. 프로젝트 구조

프로젝트를 프론트엔드와 백엔드 두 부분으로 나누므로 이 두 부분의 코드를 저장하기 위해 "node-vue"라는 파일을 만들 수 있습니다. -app" 폴더에 전체 프로젝트를 저장합니다.

1. 백엔드 부분 만들기

"node-vue-app" 폴더 아래에 "server"라는 폴더를 만들고, 그 폴더 아래에 "app.js"라는 파일을 만듭니다. 이 파일은 백엔드 서비스 역할을 합니다. 항목 파일. 동시에 라우팅 코드를 저장하기 위해 "server" 폴더 아래에 "routes"라는 폴더를 생성하고, 라우팅 코드를 저장하기 위해 "server" 폴더 아래에 "models"라는 폴더를 생성해야 합니다. .

2. 프론트엔드 부분을 생성합니다

"node-vue-app" 폴더 아래에 "client"라는 폴더를 생성하고 여기서 프론트엔드 개발을 진행합니다. Vue.js 프로젝트는 Vue.js에서 제공하는 명령줄 도구를 사용하여 생성할 수 있습니다.

vue init webpack client

이 명령은 "client" 폴더 아래에 "src"라는 폴더를 생성합니다. 여기에는 모든 프런트엔드 코드가 포함됩니다.

4. 백엔드 개발

이 경우 Express를 백엔드 프레임워크로 사용하여 RESTful API 개발을 완료하겠습니다. "app.js" 파일에서 관련 모듈과 라이브러리를 도입하고 Express 애플리케이션을 초기화해야 합니다.

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/node-vue-app', { useNewUrlParser: true });
mongoose.connection.once('open', () => {
    console.log('connected to database');
});

app.listen(3000, () => console.log('server is running on port 3000'));

1. 데이터 모델 정의

"models" 폴더 아래에 데이터 모델을 정의하고 "article.js"라는 파일:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const articleSchema = new Schema({
    title: String,
    author: String,
    content: String,
    created_at: Date,
    updated_at: Date
});

module.exports = mongoose.model('Article', articleSchema);

이 파일에서는 "Article"이라는 데이터 모델을 정의하고 해당 데이터 구조를 정의합니다.

2. 경로 정의

"routes" 폴더 아래에 "articles.js"라는 파일을 만듭니다. 이 파일에서 기사 관련 라우팅 처리 논리를 정의합니다.

const express = require('express');
const router = express.Router();
const Article = require('../models/article');

// 获取文章列表
router.get('/', (req, res) => {
    Article.find((err, articles) => {
        if (err) {
            console.log(err);
        } else {
            res.json({ articles });
        }
    });
});

// 获取单篇文章
router.get('/:id', (req, res) => {
    Article.findById(req.params.id, (err, article) => {
        if (err) {
            console.log(err);
        } else {
            res.json({ article });
        }
    });
});

// 新增文章
router.post('/', (req, res) => {
    const article = new Article(req.body);
    article.save()
        .then(() => res.json({ success: true }))
        .catch(err => console.log(err));
});

// 更新文章
router.put('/:id', (req, res) => {
    Article.findByIdAndUpdate(req.params.id, req.body, { new: true }, (err, article) => {
        if (err) {
            console.log(err);
        } else {
            res.json({ article });
        }
    });
});

// 删除文章
router.delete('/:id', (req, res) => {
    Article.findByIdAndRemove(req.params.id, (err, article) => {
        if (err) {
            console.log(err);
        } else {
            res.json({ article });
        }
    });
});

module.exports = router;

이 파일에서는 모든 라우팅 처리를 정의합니다. 기사 목록 가져오기, 단일 기사 가져오기, 기사 추가, 기사 업데이트 및 기사 삭제를 포함하여 기사와 관련된 논리입니다.

5. 프론트엔드 개발

이 경우에는 Vue.js 컴포넌트를 사용하여 프론트엔드 개발을 완료하겠습니다. Vue.js 구성 요소를 저장하기 위해 "client/src" 폴더 아래에 "comComponents"라는 폴더를 만듭니다. 이 폴더 아래에 기사 목록 표시, 추가, 편집 및 삭제를 구현하는 "Articles"라는 구성 요소를 만듭니다.

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Created At</th>
                    <th>Updated At</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ article._id }}</td>
                    <td>{{ article.title }}</td>
                    <td>{{ article.author }}</td>
                    <td>{{ article.created_at }}</td>
                    <td>{{ article.updated_at }}</td>
                    <td>
                        <button>Edit</button>
                        <button>Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <form>
                <input>
                <input>
                <textarea></textarea>
                <button>{{ isNew ? 'Create' : 'Update' }}</button>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                articles: [],
                article: {
                    title: &#39;&#39;,
                    author: &#39;&#39;,
                    content: &#39;&#39;
                },
                isNew: true
            }
        },
        created() {
            this.getArticles();
        },
        methods: {
            getArticles() {
                fetch(&#39;/api/articles&#39;)
                    .then(res => res.json())
                    .then(data => this.articles = data.articles)
                    .catch(err => console.log(err));
            },
            createArticle() {
                fetch(&#39;/api/articles&#39;, {
                    method: &#39;POST&#39;,
                    headers: {
                        &#39;Content-Type&#39;: &#39;application/json&#39;
                    },
                    body: JSON.stringify(this.article)
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            this.article = { title: &#39;&#39;, author: &#39;&#39;, content: &#39;&#39; };
                            this.getArticles();
                        }
                    })
                    .catch(err => console.log(err));
            },
            updateArticle(id) {
                fetch(`/api/articles/${id}`, {
                    method: &#39;PUT&#39;,
                    headers: {
                        &#39;Content-Type&#39;: &#39;application/json&#39;
                    },
                    body: JSON.stringify(this.article)
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.article) {
                            this.article = { title: &#39;&#39;, author: &#39;&#39;, content: &#39;&#39; };
                            this.isNew = true;
                            this.getArticles();
                        }
                    })
                    .catch(err => console.log(err));
            },
            deleteArticle(id) {
                fetch(`/api/articles/${id}`, {
                    method: &#39;DELETE&#39;
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.article) {
                            this.getArticles();
                        }
                    })
                    .catch(err => console.log(err));
            },
            submit() {
                if (this.isNew) {
                    this.createArticle();
                } else {
                    this.updateArticle(this.article._id);
                }
            },
            edit(id) {
                const article = this.articles.find(a => a._id === id);
                this.article = { ...article };
                this.isNew = false;
            },
            del(id) {
                const article = this.articles.find(a => a._id === id);
                if (window.confirm(`Are you sure to delete article: ${article.title}?`)) {
                    this.deleteArticle(id);
                }
            }
        }
    }
</script>

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    form {
        display: flex;
        flex-direction: column;
    }
    textarea {
        height: 100px;
    }
    button {
        margin-top: 10px;
        padding: 8px 16px;
        background-color: #1E6FAF;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    button:hover {
        background-color: #15446F;
    }
</style>

이 컴포넌트에서는 "Articles"라는 Vue.js 컴포넌트를 정의하고 기사 목록의 표시, 추가, 편집 및 삭제 기능을 구현했습니다. 이 컴포넌트는 백엔드 API를 호출하여 기사를 통해 기사를 가져오고, 생성하고, 업데이트하고 삭제합니다. 가져오기() 함수.

6. 애플리케이션 시작

백엔드 및 프런트엔드 개발이 완료되면 애플리케이션을 시작하여 코드가 제대로 작동하는지 확인해야 합니다. 명령줄에 프로젝트 루트 디렉터리를 입력하고 "server" 및 "client" 폴더에서 각각 다음 명령을 실행합니다.

npm install
npm start

이 명령은 각각 백엔드 및 프런트엔드 서비스를 시작하고 프런트엔드 서비스를 엽니다. 브라우저에서 응용 프로그램. 기사 게시 및 관리 시스템에 액세스하려면 브라우저에 "http://localhost:8080"을 입력하세요.

7. 요약

Node.js와 Vue.js의 조합은 풀스택 웹 애플리케이션을 빠르게 구축하고 효율적인 개발과 좋은 사용자 경험을 달성하는 데 도움이 됩니다. 이 글에서는 Node.js와 Vue.js를 사용하여 실제 프로젝트를 통해 풀스택 웹 애플리케이션을 구축하는 방법을 보여줍니다. 이 글이 개발자가 Node.js와 Vue.js의 애플리케이션을 더 잘 이해하는 데 도움이 될 것이라고 믿습니다.

위 내용은 Node.js 및 Vue.js를 사용하여 전체 스택 프로젝트를 빌드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!