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-projectcd my-rpoject && npm installcnpm 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(鏈接地址)進行操作，會更加方便。

---

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

通過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?！

傳送門:個人博客

總結

以上是生活随笔為你收集整理的express+mongodb+vue实现增删改查-全栈之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。