MongoDB 是一個流行的文檔型數(shù)據(jù)庫，Vue.js 是一個現(xiàn)代的 JavaScript 框架，兩者結(jié)合起來可以方便地實現(xiàn)評論系統(tǒng)。在本文中，我們將學(xué)習(xí)如何使用 MongoDB 和 Vue.js 構(gòu)建一個簡單的評論組件。

首先，我們需要創(chuàng)建一個數(shù)據(jù)庫來存儲評論信息。使用 MongoDB，我們可以創(chuàng)建一個名為“comments”的集合并將評論對象存儲為文檔。

let MongoClient = require('mongodb').MongoClient;
let url = 'mongodb://localhost:27017/myDB';
MongoClient.connect(url, function (err, db) {
if (err) throw err;
db.createCollection("comments", function (err, res) {
if (err) throw err;
console.log("Collection created!");
db.close();
});
});

接下來，我們將編寫 Vue.js 組件來顯示和提交評論。在組件中，我們使用 Vue.js 的 data 屬性來存儲評論數(shù)據(jù)和用戶輸入。我們也使用 axios 包來進行 HTTP 請求，以從服務(wù)器獲取評論數(shù)據(jù)或?qū)⑿略u論提交到服務(wù)器。

Vue.component('comment-form', {
data: function () {
return {
author: '',
text: '',
comments: [],
}
},
mounted: function () {
let self = this;
axios.get('/comments').then(function (response) {
self.comments = response.data;
}).catch(function (error) {
console.log(error);
});
},
methods: {
submitComment: function () {
let comment = {
author: this.author,
text: this.text
};
axios.post('/comments', comment).then(response =>{
this.comments.push(comment);
this.author = '';
this.text = '';
}).catch(function (error) {
console.log(error);
});
}
},
template: `
{{ comment.text }} - {{ comment.author }}
Submit
`
});

最后，我們在頁面中使用這個組件。我們可以簡單地使用 HTML 將組件插入到頁面中。

<div id="app">
<comment-form></comment-form>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios"></script>
<script src="app.js"></script>

以上代碼將組件放置在一個 id 為“app”的元素中，并加載了 Vue.js、axios 和我們先前編寫的組件和數(shù)據(jù)庫相關(guān)的 JavaScript 代碼。

至此，我們已經(jīng)成功地使用 MongoDB 和 Vue.js 創(chuàng)建了一個評論組件。你可以通過運行服務(wù)器并打開瀏覽器來訪問該組件，即可體驗這個簡單的評論系統(tǒng)。