1. 程式人生 > >記一次 vue + mongodb + nodejs 小專案開發

記一次 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': ''

}

}

},

這時都成功了,

最後,祝大家一切順利