記一次 vue + mongodb + nodejs 小專案開發
首先梳理專案流程：
1.前後端分離，前端使用vue編寫靜態介面，後端使用node提供介面，
2. 前端開發時通過Vue-Cli中提供的proxyTable進行代理，由此可跨域呼叫Node編寫的API
那就開始吧！
一.專案搭建
1.安裝vue-cli npm i -g vue-cli
2.使用手腳架建立專案文件 vue init webpack XXX(專案名字)
3.cd XXX 安裝依賴 npm install 執行 npm run dev
此時你就可以看見執行後的圖示和內容了 哈哈。。。
二.搭建node
1.新建server資料夾，裡面3個檔案 ，（1）index.js入口檔案（2）db.js 資料庫檔案（3）api.js 介面檔案
好，準備工作完成了，我們要搞大事情了，
2.安裝express npm install express --save
填寫程式碼：
index.js
// 引入編寫好的api
const api = require('./api')
// 引入檔案模組
const fs = require('fs')
// 引入處理路徑的模組
const path = require('path')
// 引入處理post資料的模組
const bodyParser = require('body-parser')
// 引入Express
const express = require('express')
const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
extended: false
}))
app.use(api)
// 訪問靜態資原始檔 這裡是訪問所有dist目錄下的靜態資原始檔
app.use(express.static(path.resolve(__dirname, '../index.html')))
// 因為是單頁應用 所有請求都走/dist/index.html
app.get('*', function (req, res) {
const html = fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf-8')
res.send(html)
})
// 監聽8080埠
app.listen(8080)
console.log('success listen…………')
db.js
// Schema、Model、Entity或者Documents的關係請牢記，Schema生成Model，Model創造Entity，Model和Entity都可對資料庫操作造成影響，但Model比Entity更具操作性。
const mongoose = require('mongoose')
// 連線資料庫 如果不自己建立 預設test資料庫會自動生成
mongoose.connect('mongodb://localhost/test')
// 為這次連線繫結事件
const db = mongoose.connection
db.once('error', () => console.log('Mongo connection error'))
db.once('open', () => console.log('Mongo connection successed'))
// 定義模式loginSchema
const loginSchema = mongoose.Schema({
a: String,
b: String,
c: String,
d: String
})
// 定義模型Model
const Models = {
Login: mongoose.model('Login', loginSchema)
}
module.exports = Models
api.js
'use scrit'
const models = require('./db')
const express = require('express')
const router = express.Router()
// 建立(create) 讀取(get) 更新(update) 刪除(delete)
// 建立賬號介面
router.post('/api/login/createAccount', (req, res) => {
// 這裡的req.body能夠使用就在index.js中引入了const bodyParser = require('body-parser')
console.log(req)
let newAccount = new models.Login({
a: req.body.a,
b: req.body.b,
c: req.body.c,
d: req.body.d
})
// 儲存資料newAccount資料進mongoDB
newAccount.save((err, data) => {
if (err) {
res.send(err)
} else {
res.send('createAccount successed')
}
})
})
// 獲取已有賬號介面
router.get('/api/login/getAccount', (req, res) => {
// 通過模型去查詢資料庫
models.Login.find((err, data) => {
if (err) {
res.send(err)
} else {
res.send(data)
}
})
})
module.exports = router
然後在config資料夾中的index.js新增
proxyTable: {
'/api': {
target: 'http://localhost:8080/api/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
這時都成功了，
最後，祝大家一切順利