Как используя Node.js и Vue.js создать SPA?

295

14 июля 2017, 06:22

Есть сайт, на нём меню. Пользователь нажимает на кнопку в меню (к примеру, "Блог") и без перезагрузки страницы получает список постов из БД, но при этом сайт нормально индексируется SEO.

Как решить эту задачу, используя Node.js и Vue.js?

P.S.: в этом видео показано как решить задачу, но мне необходимо брать данные из БД.

Answer 1

Запрос по /getPosts вернет тебе массив объектов(если в базе будет что-то). Думаю разберешься.

на фронтенде:

import axios from 'axios'
     export default {
            data: () => {
                return {
                    posts: [],
                }
            },
            created: function () {
                this.getPosts();
            },
            methods: {
                 getPosts: axios.get('/getPosts').then(res=> this.posts = res.data);
            }
    }

На бекенде express&mongoDB: server.js

const express = require ('express');
const bodyParser = require ('body-parser');
const path = require ('path');
const mongodb = require ('mongodb');
const MongoClient = mongodb.MongoClient;
const app = express();
app.use(bodyParser());
app.set('views', path.join(__dirname, '../view'));
app.set('view engine', 'html');
app.engine('html', require('hbs').__express);
app.use(express.static(path.join(__dirname, '../public')));
app.get('/getPosts', (req, res) => {
    MongoClient.connect('mongodb://127.0.0.17:27017/MyDB', (err, db) => {
            if(!err) {
                const collection = db.collection('posts');
                collection.find().toArray((e, doc) => {
                    if(doc) {
                        res.status(200)
                            .send(doc);
                    }
                });
            }
        });
});
app.listen(3000, () => {
    console.log('Server start on port 3000');
});