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✨！

傳送門:我的博客