Cara membina projek tindanan penuh dengan Node.js dan Vue.js

Node.js dan Vue.js ialah dua teknologi yang sangat popular pada masa ini Node.js ialah platform pembangunan sisi pelayan yang dijalankan pada JavaScript, manakala Vue.js ialah rangka kerja progresif untuk membina antara muka pengguna. Gabungan kedua-dua teknologi ini boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna aplikasi web. Dalam artikel ini, kami akan menggunakan projek praktikal untuk menunjukkan cara menggunakan Node.js dan Vue.js untuk membina aplikasi web tindanan penuh.

1. Pengenalan Projek

Kami akan membangunkan sistem penerbitan dan pengurusan artikel yang mudah Pengguna boleh mendaftar dan log masuk untuk menerbitkan artikel, mengulas dan melihat artikel yang diterbitkan oleh pengguna lain. Untuk mencapai fungsi ini, kami akan menggunakan Node.js sebagai bahasa pembangunan bahagian belakang dan rangka kerja teknologi, Vue.js sebagai rangka kerja pembangunan bahagian hadapan, dan MongoDB sebagai pangkalan data.

2. Persediaan persekitaran

Sebelum memulakan pembangunan, anda perlu menyediakan persekitaran pembangunan Node.js, Vue.js dan MongoDB dalam persekitaran setempat.

1. Pasang Node.js: Anda boleh memuat turun pakej pemasangan Node.js daripada tapak web rasmi untuk pemasangan.

2. Pasang Vue.js: Anda boleh menggunakan alat baris arahan npm untuk memasang Vue.js. Masukkan arahan berikut pada baris arahan:

npm install -g vue-cli

3. Pasang MongoDB: Anda boleh memuat turun pakej pemasangan MongoDB dari tapak web rasmi dan memasangnya.

3. Struktur projek

Kami membahagikan projek kepada dua bahagian: bahagian hadapan dan bahagian belakang, jadi kami perlu mencipta dua folder untuk menyimpan kod kedua-dua bahagian ini Buat folder bernama "node-vue-app" dalam direktori akar untuk menyimpan keseluruhan projek.

1. Buat bahagian belakang

Buat folder bernama "pelayan" di bawah folder "node-vue-app", dan buat folder bernama fail "app.js", yang akan berfungsi sebagai fail kemasukan perkhidmatan bahagian belakang kami. Pada masa yang sama, kita perlu mencipta folder bernama "laluan" di bawah folder "pelayan" untuk menyimpan kod penghalaan dan mencipta folder bernama "model" di bawah folder "pelayan" untuk menyimpan kod model Data .

2. Cipta bahagian hadapan

Buat folder bernama "klien" di bawah folder "node-vue-app", di mana kami akan melaksanakan pembangunan bahagian hadapan. Anda boleh mencipta projek Vue.js menggunakan alat baris arahan yang disediakan oleh Vue.js:

vue init webpack client

Arahan ini akan mencipta folder bernama "src" di bawah folder "klien" Akan mengandungi semua bahagian hadapan kami -kod tamat.

4. Pembangunan bahagian belakang

Dalam kes ini, kami akan menggunakan Express sebagai rangka kerja bahagian belakang untuk melengkapkan pembangunan API RESTful. Dalam fail "app.js", kami perlu memperkenalkan modul dan perpustakaan yang berkaitan dan memulakan aplikasi 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 Tentukan model data

Kami perlu menentukan data model dalam fail "models" Tentukan model data kami di bawah folder dan buat fail bernama "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);

Dalam fail ini, kami mentakrifkan model data bernama "Article" dan mentakrifkan struktur data yang sepadan.

2. Tentukan laluan

Buat fail bernama "articles.js" di bawah folder "routes" Kami akan mentakrifkan logik pemprosesan penghalaan yang berkaitan dengan artikel dalam fail ini:

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;

Dalam fail ini, kami mentakrifkan semua logik pemprosesan penghalaan yang berkaitan dengan artikel, termasuk mendapatkan senarai artikel, mendapatkan satu artikel, menambah artikel baharu, mengemas kini artikel dan memadamkan artikel.

5. Pembangunan bahagian hadapan

Dalam kes ini, kami akan menggunakan komponen Vue.js untuk melengkapkan pembangunan bahagian hadapan. Cipta folder bernama "komponen" di bawah folder "klien/src" untuk menyimpan komponen Vue.js Kami akan mencipta komponen bernama "Artikel" di bawah folder ini, yang akan melaksanakan paparan senarai, penambahan, pengeditan dan pemadaman:

<template>
    <div class="articles">
        <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 v-for="article in articles" :key="article._id">
                    <td>{{ article._id }}</td>
                    <td>{{ article.title }}</td>
                    <td>{{ article.author }}</td>
                    <td>{{ article.created_at }}</td>
                    <td>{{ article.updated_at }}</td>
                    <td>
                        <button @click="edit(article._id)">Edit</button>
                        <button @click="del(article._id)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="form">
            <form @submit.prevent="submit">
                <input type="text" v-model="article.title" placeholder="Title">
                <input type="text" v-model="article.author" placeholder="Author">
                <textarea v-model="article.content" placeholder="Content"></textarea>
                <button type="submit">{{ isNew ? 'Create' : 'Update' }}</button>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                articles: [],
                article: {
                    title: '',
                    author: '',
                    content: ''
                },
                isNew: true
            }
        },
        created() {
            this.getArticles();
        },
        methods: {
            getArticles() {
                fetch('/api/articles')
                    .then(res => res.json())
                    .then(data => this.articles = data.articles)
                    .catch(err => console.log(err));
            },
            createArticle() {
                fetch('/api/articles', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.article)
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            this.article = { title: '', author: '', content: '' };
                            this.getArticles();
                        }
                    })
                    .catch(err => console.log(err));
            },
            updateArticle(id) {
                fetch(`/api/articles/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.article)
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.article) {
                            this.article = { title: '', author: '', content: '' };
                            this.isNew = true;
                            this.getArticles();
                        }
                    })
                    .catch(err => console.log(err));
            },
            deleteArticle(id) {
                fetch(`/api/articles/${id}`, {
                    method: 'DELETE'
                })
                    .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 scoped>
    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>

Dalam komponen ini, kami mentakrifkan komponen Vue.js bernama "Artikel" dan melaksanakan fungsi paparan, penambahan senarai artikel , penyuntingan dan pemadaman Komponen ini memanggil API bahagian belakang untuk mendapatkan, mencipta , kemas kini dan padam artikel melalui fungsi fetch().

6. Mulakan aplikasi

Selepas melengkapkan pembangunan bahagian belakang dan bahagian hadapan, kami perlu memulakan aplikasi untuk mengesahkan sama ada kod kami berfungsi dengan betul. Masukkan direktori akar projek dalam baris arahan dan laksanakan arahan berikut dalam folder "pelayan" dan "klien" masing-masing:

npm install
npm start

Arahan ini akan memulakan perkhidmatan bahagian belakang dan bahagian hadapan masing-masing, dan paparkannya dalam penyemak imbas Buka aplikasi bahagian hadapan dalam . Masukkan "http://localhost:8080" dalam pelayar anda untuk mengakses sistem penerbitan dan pengurusan artikel kami.

7. Ringkasan

Gabungan Node.js dan Vue.js boleh membantu kami membina aplikasi web tindanan penuh dan mencapai pembangunan yang cekap serta pengalaman pengguna yang baik. Dalam artikel ini, kami menunjukkan cara menggunakan Node.js dan Vue.js untuk membina aplikasi web tindanan penuh melalui projek praktikal. Saya percaya artikel ini boleh membantu pembangun lebih memahami aplikasi Node.js dan Vue.js.

Atas ialah kandungan terperinci Cara membina projek tindanan penuh dengan Node.js dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!