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

YPHP 發布于2019-08-22 11:19 / 2769人閱讀

摘要：用寫一個上一節前后端項目分別初始化完成，這一小節我就從后端項目開始寫。每一個都映射到一個的集合，并定義了該集合中的文檔的形式。

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

上一節前后端項目分別初始化完成，這一小節我就從后端項目開始寫。實現mongoDB數據庫的連接。

整理后端目錄

下面是通過express-generate生成的項目的目錄

bin/www是項目的啟動文件，啟動項目除了上次說的npm start，還可以再命令后執行 node bin/www，其實這兩個命令是一樣的，只不過在package.json文件中兩者建立了鏈接，如下圖

node_modules不用多說，項目的依賴都安裝于此
public是放置一些公共資源的文件夾，我以后也不會用到它，所以把他給刪掉了
router下的.js文件就是我們寫API的地方了，為了更直觀，我把router名字改為api，把里面的文件名字分別改為post.js和admin.js.(我把api分成兩個文件，一個是與文章相關的，另一個是與管理員相關的)
views是頁面的模板，因為我們后端只提供數據接口，所以用不到頁面文件，我把他給刪掉了
app.js是整個項目的入口文件，相當于后端項目的大腦，它里面的文件是按順序執行
package.json是關于我們這個項目用到的依賴。
需要說明的是，需要在根目錄下創建一個models的文件夾用來初始化mongodb數據庫等一些操作的。
下面就是整理好的后端目錄

安裝mongoDB數據庫

安裝方法在這里不多說，網上資源一大堆，可以去官網看官方文檔，我是利用Docker安裝的,方便本地調試。
安裝完成后不要忘記啟動mongodb

安裝mongoose

mongoose是mongodb的一個對象模型工具，有了它，可以很方便的操作mongodb數據庫，還不是很了解mongoose的小伙伴自行google，資料有很多。
命令行輸入 npm install mongoose --save

安裝完成后，首先要定義模型
在models文件夾下新建一個post.js 定義文章的模型，填入內容

let mongoose = require("mongoose")  //引入mogoose

 //在 Mongoose 中，所有東西都從一個 Schema 開始。每一個 schema 都映射到一個 MongoDb 的集合，并定義了該集合中的文檔的形式。
let postSchema = new mongoose.Schema({  
  title: String,   //規定文章的標題是字符串類型
  content: String  //規定文章的內容是字符串類型
})               
let postModel = mongoose.model("posts", postSchema)  //定義模型

module.exports = postModel   //通過commonJS模塊語法導出

在models文件夾下新建一個admin.js 定義管理員模型，填入內容

let mongoose = require("mongoose")

let adminSchema = new mongoose.Schema({
  name: String,   //用戶名
  pass: String    //密碼
})

let adminModel = mongoose.model("admin", adminSchema)

module.exports = adminModel

繼續在models文件夾下新建一個init.js 用于連接mongoDB數據庫，填入內容

let mongoose = require("mongoose")

mongoose.connect("mongodb://localhost:27017/blog")  // 數據庫的端口號根據需求進行調整，一般直接安裝mongodb并啟動后，端口號默認是27017，如果通過docker安裝，端口號會是其他的。blog是我們博客的數據庫的名字，如果沒有名字為blog的數據庫，會自動添加。

///打印連接狀態的日志，可自行選擇寫與不寫
mongoose.connection.on("connected", (req, res) => {
  console.log("MongoDB connected success")
})
mongoose.connection.on("err", (req, res) => {
  console.log("MongoDB connected fail")
})
mongoose.connection.on("disconnected", (req, res) => {
  console.log("MongoDB connected disconnected")
})

下面就重啟我們后端項目，如果上次開啟的進程還沒關掉，命令行control + c關閉進程，輸入npm start重啟項目。

fk，報錯。。

不能找到index這個文件，原來是我們剛剛改了index.js和user.js文件的名字，因為這兩個文件在app.js中被引用，所以找到app.js,
把

和

修改為

修改完成后，執行npm start
項目是啟動成功了，但是結果沒有出現打印的日志

說明我們的數據庫沒有連接，找了很久，原來是因為我們的init.js文件沒有在app.js中引用，那肯定是沒有執行init.js文件，因為前面說了整個項目的主入口文件是app.js,所以我們在app.js中引用它

現在重啟項目，看看是不是有了連接成功的日志

數據庫已連接成功，那么下一步寫接口！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92191.html

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

摘要：用寫一個上一節前后端項目分別初始化完成，這一小節我就從后端項目開始寫。每一個都映射到一個的集合，并定義了該集合中的文檔的形式。【Part1】用JS寫一個Blog （node + vue + mongoDB）上一節前后端項目分別初始化完成，這一小節我就從后端項目開始寫。實現mongoDB數據庫的連接。整理后端目錄下面是通過express-generate生成的項目的目錄 show...

charles_paul 2019-06-26 17:30 評論0 收藏0
【Part3】用JS寫一個Blog （node + vue + mongoDB）

摘要：用寫一個用寫一個上一節我們把數據庫連接成功了，這節我準備寫關于文章的數據接口增刪改查上次說到接口都在文件夾里面寫，打開文件，首先引入文章的模型新增文章新增文章方法保存數據到數據庫如果出現錯誤，直接把錯誤進的錯誤中樞處理儲存成功后，返回給客戶【Part1】用JS寫一個Blog （node + vue + mongoDB）【Part2】用JS寫一個Blog （node + vue + m...

wuyumin 2019-06-26 17:31 評論0 收藏0
【Part3】用JS寫一個Blog （node + vue + mongoDB）

摘要：用寫一個用寫一個上一節我們把數據庫連接成功了，這節我準備寫關于文章的數據接口增刪改查上次說到接口都在文件夾里面寫，打開文件，首先引入文章的模型新增文章新增文章方法保存數據到數據庫如果出現錯誤，直接把錯誤進的錯誤中樞處理儲存成功后，返回給客戶【Part1】用JS寫一個Blog （node + vue + mongoDB）【Part2】用JS寫一個Blog （node + vue + m...

CoorChice 2019-08-21 18:32 評論0 收藏0
【Part1】用JS寫一個Blog（node + vue + mongoDB）

摘要：總的來說就是開發博客系統，探索前端走向全棧之路。我會記錄下來整個過程在我的專欄，有興趣的可以關注一下，一起學習，歡迎討論。話不多說，先進行前后端項目的初始化。安裝完成后，輸入命令切換到項目文件夾后輸入命令訪問一下項目初始化完成。學習JS也有一段時間了，準備試著寫一個博客項目，前后端分離開發，后端用node只提供數據接口，前端用vue-cli腳手架搭建，路由也由前端控制，數據異步交互用...

jhhfft 2019-08-22 11:15 評論0 收藏0
【Part1】用JS寫一個Blog（node + vue + mongoDB）

摘要：總的來說就是開發博客系統，探索前端走向全棧之路。我會記錄下來整個過程在我的專欄，有興趣的可以關注一下，一起學習，歡迎討論。話不多說，先進行前后端項目的初始化。安裝完成后，輸入命令切換到項目文件夾后輸入命令訪問一下項目初始化完成。學習JS也有一段時間了，準備試著寫一個博客項目，前后端分離開發，后端用node只提供數據接口，前端用vue-cli腳手架搭建，路由也由前端控制，數據異步交互用...

ctriptech 2019-06-26 17:30 評論0 收藏0