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介紹（這里放個鏈接）。
前提：通過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(鏈接地址)進行操作，會更加方便。
好了，到這里我們整個功能的復雜部分已經實現。我們回顧下做了哪些準備工作
- 通過
vue-cli初始化項目 - 啟動本地mongodb服務
- 將后臺接口路由寫好
app.js文件 - 創建我們存放數據的數據模型
heroSchema.js文件 - 寫好增刪改查路由接口
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?！
傳送門:個人博客
