express+mongodb+vue實現增刪改查-全棧之路

vue element mongodb express

---

效果圖

---

前言

最近一直想學下node,畢竟會node的前端更有市場。但是光看不練，感覺還是少了點什麼，就去github上看別人寫的專案，收穫頗豐，於是準備自己照葫蘆畫瓢寫一個。

作為程式設計師，一定要保持不斷學習的狀態，這樣我們才可以在職場中有一席之位。

我相信現在出去面試，被問到的問題一定不限於html、css、javascript、jQuery了，層出不窮的框架（vue、angular、react),伺服器語言（java、node），資料庫、ES6新特性等都會被提及。

如果你不清楚如何使用vue-cli快速快速建立一個專案骨架，可以去看我的這篇文章-手把手教你用vue-cli、webpack、vue-router、vue-resource構建單頁應用

如果此時你還停留在原地，止步不前的話。那麼我敢斷言，你快被out了。

在深讀這篇文章之前，我想告訴你，讀完後，你可以有哪些收穫！

學習vue,你會知道除了jQuery這種結構驅動(操作dom元素)外，還有更加便捷的資料驅動，媽媽再也不用擔心我忘記jQuery中那些可怕的選擇器了。 學習node,你會知道除了java、c、python這些陌生的後臺語言外，js既然也可以寫後臺,你可以定義自己的介面，不在依賴於那些後臺糙漢子。 學習mongodb，你會知道資料如何儲存在資料庫中，已經如何進行增刪改插。

說了這麼多，我想你已經知道了。對！沒錯，這將是你通向全棧的必經之路。想想都興奮。那麼接下來，讓我們進入正文吧。

建議:可以去我的github專案地址上將我的程式碼clone一份到本地，跟著我的思路捋一遍，相信看完，你一定會對自己更加有信心。程式碼中會有詳細註釋，可以解除你的很多疑惑。如果讀完這篇文章，你有所收穫的話，不要忘記動動你那可愛的小手，給個star哦。

---

正文

文章中有許多細節地方，不會說的太細，如果遇到檻的話，可以自行百度，遇到難以理解的地方，我會加以強調。

開發環境

本地需要安裝mongodb、nodejs、vue-cli(腳手架)

第一步：初始化專案

通過vue-cli腳手架，我們可以快速搭建一個專案骨架。

vue init webpack my-project

cd my-rpoject && npm install

cnpm run dev
複製程式碼

如果在終端，你看到了下圖所示，表示專案已經成功啟動。接著在瀏覽器位址列中輸入localhost://8080,如果你看到了vue的歡迎介面，表示你已經完成了第一步。

第二步：把本地的mongodb啟動起來

前提：下載mongodb,並且已經配置好了環境變數。

如果覺得配置環境變數啥麻煩的話，可以用homebrew進行一鍵安裝。

當上述都ok的情況下，你只要進入到mongodb的安裝目錄（比如我的mongodb安裝在/usr/local/bin/目錄下）執行mongo命令，如果你看到下圖所示，表示你已經完成了第二步。

第三步：把後臺介面寫好

提示：所謂的後臺介面，就是通過express建立路由，如果不明白的話可以去看下express介紹express官網。

前提：通過npm安裝express、mongoose、body-parser模組

express模組用來建立路由 mongoose模組用來建立資料庫，連線資料庫 body-parser模組用來對post請求的請求體進行解析

//通過命令列進入專案，執行以下命令安裝這三個模組
cnpm install express body-parser mongoose --save
複製程式碼

在專案根目錄建立個app.js檔案，用來啟動express服務

//app.js檔案

//1.引入express模組
const express = require('express')
//2.建立app物件
const app = express()
//定義簡單路由
app.use('/',(req,res) => {
  res.send('Yo!')
})
//定義服務啟動埠
app.listen(3000,() => {
    console.log('app listening on port 3000.')
})
複製程式碼

上述步驟走完後，在命令列執行node app.js。通過瀏覽器訪問localhost:3000,頁面出現res.send（）的內容即表示成功。

第四步：建立資料模型

提示：所謂的資料模型，可以理解為你將來建立的表中，要存什麼樣的資料片段，資料型別是什麼。

在專案根目錄建立一個models資料夾，用來儲存資料模型，每個模型都是由一個Schema生產，具體的我們不用太在意，如果有興趣可自行百度。

在models資料夾中建立一個hero.js檔案,內容如下

//hero.js檔案

//引入mongoose模組
const mongoose = require('mongoose')

//定義資料模型，可以看到，我們下面建立了一個表，表中的資料有name、age、sex等欄位，並且這些欄位的資料型別也定義了，最後將model匯出即可
const heroSchema = mongoose.Schema({
  name :String,
  age : String,
  sex : String,
  address : String,
  dowhat : String,
  imgArr:[],
  favourite:String,
  explain:String
}, { collection: 'myhero'})
//這裡mongoose.Schema最好要寫上第二個引數，明確指定到資料庫中的哪個表取資料，我這裡寫了myhreo，目的就是為了以後運算元據要去myhreo表中。
這裡不寫第二個引數的話，後面你會遇到坑。

//匯出model模組
const Hero = module.exports = mongoose.model('hero',heroSchema);
複製程式碼

第五步：建立CURD(增刪改查)路由介面

在專案根目錄建立一個router資料夾，資料夾中建立一個hero.js檔案,內容如下,分別為增刪改查、新增圖片等路由

//引入express模組
const express = require("express");
//定義路由級中介軟體
const router = express.Router();
//引入資料模型模組
const Hero = require("../models/hero");

// 查詢所有英雄資訊路由
router.get("/hero", (req, res) => {
  Hero.find({})
    .sort({ update_at: -1 })
    .then(heros => {
      res.json(heros);
    })
    .catch(err => {
      console.log(2);
      res.json(err);
    });
});

// 通過ObjectId查詢單個英雄資訊路由
router.get("/hero/:id", (req, res) => {
  Hero.findById(req.params.id)
    .then(hero => {
      res.json(hero);
    })
    .catch(err => {
      res.json(err);
    });
});

// 新增一個英雄資訊路由
router.post("/hero", (req, res) => {
  //使用Hero model上的create方法儲存資料
  Hero.create(req.body, (err, hero) => {
    if (err) {
      res.json(err);
    } else {
      res.json(hero);
    }
  });
});

//更新一條英雄資訊資料路由
router.put("/hero/:id", (req, res) => {
  Hero.findOneAndUpdate(
    { _id: req.params.id },
    {
      $set: {
        name: req.body.name,
        age: req.body.age,
        sex: req.body.sex,
        address: req.body.address,
        dowhat: req.body.dowhat,
        favourite: req.body.favourite,
        explain: req.body.explain
      }
    },
    {
      new: true
    }
  )
    .then(hero => res.json(hero))
    .catch(err => res.json(err));
});

// 新增圖片路由
router.put("/addpic/:id", (req, res) => {
  Hero.findOneAndUpdate(
    { _id: req.params.id },
    {
      $push: {
        imgArr: req.body.url
      }
    },
    {
      new: true
    }
  )
    .then(hero => res.json(hero))
    .catch(err => res.json(err));
});

//刪除一條英雄資訊路由
router.delete("/hero/:id", (req, res) => {
  Hero.findOneAndRemove({
    _id: req.params.id
  })
    .then(hero => res.send(`${hero.title}刪除成功`))
    .catch(err => res.json(err));
});

module.exports = router;

複製程式碼

最後將路由應用到app.js(也就是在app.js檔案中引入上述路由定義)

//app.js檔案

......
//引入剛才定義的hero路由
const hero = require('./router/hero')
......
app.use('/api',hero)
......
複製程式碼

這時你可以通過Postman（模擬http請求資料軟體）進行查詢測試，如果可以查詢到資料，代表後臺介面已經成功寫好了

注意：在查詢之前，你要簡單學習下mongodb如何向資料庫中對應的表裡面任意新增一條資料，否則，你查詢出來的資料為空！！！

比如我上面建立了一個myhero表，那我在執行上面查詢之前，我會往表中新增一條模擬資料

//db.myhero.insert意思就是向資料庫中表名為myhero的表中新增一條資料
db.myhero.insert({
    "imgArr" : [ 
        "http://ossweb-img.qq.com/images/lol/web201310/skin/big157000.jpg", 
        "http://ossweb-img.qq.com/images/lol/web201310/skin/big157001.jpg", 
        "http://ossweb-img.qq.com/images/lol/web201310/skin/big157002.jpg",    
    ],
    "name" : "亞索",
    "age" : "22",
    "sex" : "man",
    "address" : "德瑪西亞",
    "dowhat" : "中單、刺客",
    "favourite" : "死亡如風常伴吾身",
    "explain" : "亞索是一個百折不屈的艾歐尼亞人，也是一名身手敏捷的劍客，能夠運用風的力量對抗敵人。年少輕狂的他曾為了榮譽而一再地損失珍貴的東西，他的職位、他的導師、最後是他的親兄弟。他因無法擺脫的嫌疑而身敗名裂，如今已是被人通緝的罪犯。亞索在家園的土地上流浪，尋找對過去的救贖。蒼茫間，只有疾風指引著他的利劍。",
    })
複製程式碼

這裡進行資料庫操作，可以在終端中進行，也可以下載視覺化工具Robo 3T(連結地址)進行操作，會更加方便。

---

好了，到這裡我們整個功能的複雜部分已經實現。我們回顧下做了哪些準備工作

1. 通過vue-cli初始化專案
2. 啟動本地mongodb服務
3. 將後臺介面路由寫好app.js檔案
4. 建立我們存放資料的資料模型heroSchema.js檔案
5. 寫好增刪改查路由介面hero.js檔案

---

一鼓作氣，接下來就是我們擅長的前端部分了。現在的你可以稍微鬆口氣了。是不是覺得很刺激，很過癮～

第六步：選擇前端開發必要模組

提示：這裡可以自由發揮，我下載的模組中有element、vue-resource。建議你跟我使用同樣的模組，避免後期不必要麻煩，等你回過頭來對整個專案瞭然於心的時候，就可以隨心所欲的選擇你要用的技術了,

//element-ui是餓了麼為我們前端開發者提供的元件化框架，拿來就可以用。好用到沒朋友。vue-resource是用來處理請求的，不過vue2.0後好像出現了個axios，不在維護vue-resource,不過我之前一直用vue-resource的，很方便，現在也可以用。
cnpm install element-ui vue-resource --save
複製程式碼

第七步：建立首頁和詳情頁元件

在src/components路徑下，建立兩個頁面，分別為List.vue(首頁)、Detail.vue(詳情頁)。

然後在src目錄下，建立一個router資料夾，資料夾中建立一個index.js前端路由檔案

前端路由檔案index.js檔案內容如下

//路由頁面

import Vue from 'vue'

//引入路由模組，看下終端，如果終端提示vue-router模組沒有安裝，安裝即可
import Router from 'vue-router'

//分別引入List、Detail兩個元件
import List from '@/components/List'
import Detail from '@/components/Detail'


Vue.use(Router)

//定義路由,這兩個路由會被對映到App.vue的<router-view></router-view>視口中
export default new Router({
  routes: [
    {
      path: '/',
      name: 'List',
      component: List
    },
    {
      path : '/league/:name',
      name : 'Detail',
      component : Detail
    },
  ]
})

複製程式碼

第八步：處理跨域情況

因為我們的express服務是在localhost:3000埠啟動的，而我們的vue-cli建立的專案是在預設埠8080啟動的，所以肯定會涉及到跨域的情況

好在vue-cli為我們提供瞭解決跨域的配置入口

找到根目錄中config目錄下面的index.js檔案，裡面有個配置項proxyTable,改寫這個配置項如下即可

這時，當我們在前端用vue-resource訪問 /api 的時候,就會被代理到 http://localhost:3000/api，從而獲得需要的資料。說白了，也就是個轉換工作。

第九步：搭建頁面

到這裡，所有準備工作已經完成，我們安心寫前端程式碼即可。佈局的話,就不多說了。互動方面主要就是在vue中的methods選項中定義一系列的方法，並且將方法通過**@click="xxx"**方法繫結到對應的地方，具體方法定義看我寫的程式碼即可。

完結

專案寫好後，就是打包了，並且將打包的dist資料夾作為express靜態檔案服務的目錄。

cnpm run build
複製程式碼

app.use(express.static('dist'))
複製程式碼

最後看下整個專案的目錄結構

歡迎小夥伴們提出自己的見解，並且指出文中的錯誤?

If this article has give you some help . why don't give me a star✨！

傳送門:個人部落格