【Part1】用JS寫一個Blog（node + vue + mongoDB）

jhhfft 發(fā)布于2019-08-22 11:15 / 2241人閱讀

摘要：總的來說就是開發(fā)博客系統(tǒng)，探索前端走向全棧之路。我會記錄下來整個過程在我的專欄，有興趣的可以關(guān)注一下，一起學(xué)習(xí)，歡迎討論。話不多說，先進行前后端項目的初始化。安裝完成后，輸入命令切換到項目文件夾后輸入命令訪問一下項目初始化完成。

學(xué)習(xí)JS也有一段時間了，準(zhǔn)備試著寫一個博客項目，前后端分離開發(fā)，后端用node只提供數(shù)據(jù)接口，前端用vue-cli腳手架搭建，路由也由前端控制，數(shù)據(jù)異步交互用vue的一個插件vue-resourse來做，數(shù)據(jù)庫用mongodb?？偟膩碚f就是 node + vue + mongodb 開發(fā)博客系統(tǒng)，探索前端走向全棧之路。

我會記錄下來整個過程在我的專欄，有興趣的可以關(guān)注一下，一起學(xué)習(xí)，歡迎討論。

話不多說，先進行前后端項目的初始化。

前端項目初始化

新建項目的文件夾，并切換到新建的文件夾
安裝vue腳手架vue-cli 命令行輸入 npm install vue-cli -g
安裝完成后，輸入 vue init webpack blog // vue初始化，blog是項目的名稱，可自行更改，初始化的數(shù)據(jù)可根據(jù)自己的的需要選擇默認(rèn)或是自己命名，需要說明的是，vue-router選項需要選擇yes，因為要前后端分離，路由由前端控制。

安裝完成后，輸入命令 cd blog 切換到項目文件夾后,輸入命令 npm run dev 訪問一下 http://localhost:8080,項目初始化完成。（最新版本的vue-cli不用手動安裝依賴，他會自動安裝，所以沒有了 npm install )

下面解釋一下項目的目錄

build和config文件都是關(guān)于webpack的相關(guān)配置，暫且先不管它
項目中安裝的依賴都存放在node_modules目錄中
src目錄就是我們在開發(fā)過程中寫代碼的地方
assets存放一些js css 圖片等資源，可根據(jù)需要選擇要與不要
components中放的就是.vue的文件，每一個文件都是一個組件
router中index.js就是我們寫路由的地方
app.vue就是最終的單頁面呈現(xiàn)的組件
main.js就是整個項目的入口文件

后端項目初始化

這里我用的node的express框架，先安裝expres生成器，用來快速生成express應(yīng)用骨架
命令行輸入 npm install express-generator -g
安裝成功后，命令行輸入 express blog-server // 這里blog-server是后端項目的名稱，根據(jù)自己需要改變
安裝完成后，進入后端項目 cd blog-server
然后執(zhí)行 npm install 安裝項目依賴
安裝完成后，啟動項目 npm start
打開瀏覽器訪問 localhost:3000 可看到啟動成功