vue+express+mongoose項目構建

時間  2019-11-09
標籤 vue+express+mongoose vue express mongoose 項目 構建 欄目 MongoDB 简体版
原文   原文鏈接

注(2018-2-12):僅作記錄使用,又不捨得刪除,推薦使用koa2,koa2相關資料不少的~html

1. 運行環境構建（基於macOS Sierra 10.12.4）

  • 全局安裝node（v6.9.4)vue

    安裝過程略

  • 配置cnpm（npm的淘寶鏡象）node

    sudo npm install -g cnpm --registry=https://registry.npm.taobao.org`

  • 全局安裝vue官方腳手架工具vue-cli（vue官網文檔）webpack

    cnpm install --global vue-cli

2. 建立項目

  • 基於 webpack 模板建立web

    vue init webpack tifi-music

    建立配置按需，我除了安裝router以外其餘都選了noajax

  • 運行與打包測試mongodb

    cd tifi-misic
//安裝依賴包
cnpm i
//運行
npm run dev
//打包
npm run build

3. 配置express

  • 在項目根目錄下建立server.js文件，內容以下vue-cli

    //用於獲取路徑
const path = require('path')
//用於讀寫文件流
const fs = require('fs')
const express = require('express')
//無需cnpm安裝,由於是express的中間件bodyParser
//用於解析客戶端請求的body中的內容,內部使用JSON編碼處理,url編碼處理以及對於文件的上傳處理.
//bodyParse能夠接受客戶端ajax提交的json數據,以及url的處理,不使用這個中間件將致使沒法接收客戶端的json數據
const bodyParser = require('body-parser')
//須要cnpm安裝,cookieParser中間件用於獲取web瀏覽器發送的cookie中的內容.
//在使用了cookieParser中間件後,表明客戶端請求的htto.IncomingMessage對象就具備了一個cookies屬性
//該屬性之爲一個對象的數組,其中存放了全部web瀏覽器發送的cookie,每個cookie爲cookies屬性值數組中的一個對象.
const cookieParser = require('cookie-parser')
//serve-favicon中間件用於請求網站的icon用法以下
//express().use(favicon(__dirname + '/public/images/favicon.ico'))
const favicon = require('serve-favicon')
//morgan中間件是日誌中間件，用於node的日誌輸出
//進階用法見http://www.cnblogs.com/chyingp/p/node-learning-guide-express-morgan.html
const logger = require('morgan')
//獲取後端路由.我設置在根目錄下的server文件,讀取下面的index.js
const routes = require('./server/router')
//用於管理配置的插件.統一管理後端服務端口和數據庫鏈接地址等,默認配置在config目錄下的default.js中
const config = require('config-lite')
//compression 中間件用於壓縮和處理靜態內容
//例子:app.use(express.static(path.join(__dirname, 'public')))
const compression = require('compression')
//實例化express對象,用於鏈接中間件
const app = express()


app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(compression({ threshold: 0 }))
app.use('/api', routes)


app.use(express.static(path.resolve(__dirname, './dist')))
// 由於是單頁應用 全部請求都走/dist/index.html
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})
app.listen(config.port, function () {
    console.log(`Server running in port ${config.port}`)
})

  • 解決npm run dev時即開發模式下跨域問題
    打開根目錄下的config目錄下的index文件，配置proxyTable以下：數據庫

    proxyTable: {
    '/api': {
        //這裏的target填服務端的端口的接口地址
        target: 'http://localhost:3000/api/',
        changeOrigin: true,
        pathRewrite: {
            '/api': ''
        }
    }
}

  • 建立router
    server.js文件中寫了const routes = require('./server/router')
    這裏require的路徑就是咱們須要建立router的路徑
    在根目錄下建立server文件夾,並在其目錄下建立router.js文件，內容以下：express

    //express的路由中間件,引入等待從controller中添加路由
const router = require('express').Router()
//引入node的文件路徑模塊path和文件處理模塊fs
const path = require('path')
const fs = require('fs')
//讀取controller文件下的全部控制器，爲了實現動態讀取控制器，有空再研究更好的寫法
const controllers = fs.readdirSync(path.resolve(__dirname, './controller'))
//遍歷獲取到的文件，動態添加express的路由信息：url、type、response即請求路徑、請求方式、響應處理函數
controllers.forEach((file) => {
    //獲取到具體到控制器
  let controller = require('./controller/' + file)
    //遍歷控制器攜帶的信息
  for (let o in controller) {
        //獲取請求路徑，未取到則取默認路徑 爲'/'+文件名(不包括後綴)
    let url = controller[o].url ? controller[o].url : ('/' + o)
        //獲取請求方式，未取到則取默認方式 爲'get'
    let type = controller[o].type ? controller[o].type : 'get'
        //響應處理函數，未取到則使用默認的處理
    let response = controller[o].response ? controller[o].response : (req, res) => {
      res.json({
        success: false,
        info: '沒有處理響應的無效路由'
      })
    }
        //設置路由信息
    router[type](url, response)
  }
})
//使用動態設置好的路由
router.use(router)
//輸出路由
module.exports = router

  • 建立controller
    router.js文件中寫了獲取同級目錄controller下的全部文件
    因此咱們只須要在server文件夾下的controller中建立一個user的控制器
    即建立user.js文件，內容以下：

    const userName = [{
    name: '測試用戶名0'
  },
  {
    name: '測試用戶名1'
  }
]
//'輸出待添加的路由信息對象
//每一個對象中可設置三個屬性:url、type、response（不設置的話均作了默認處理）
module.exports = {
  users: {
    response: (req, res) => {
      res.json(userName)
    }
  },
  reg: {
    type: 'post',
    response: (req, res) => {
      res.json('reg')
    }
  }
}

  • 運行express

    • 前面文件建立完成以後，要運行express首先安裝依賴包

      cnpm i cookie-parser morgan serve-favicon morgan config-lite –save-dev

    • 另外修改文件時須要頻繁的重啓服務器，全局安裝nodemon能夠實現自動重啓

      cnpm install -g nodemon

    • 而後配置package.json中的scripts添加start命令

      "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "start": "nodemon server.js"
}
    • 執行npm run build打包項目用於生產環境
    • 最後命令行裏輸入node start就能夠運行了，命令行輸出Server running in port 3000表示express成功啓動了，瀏覽器訪問http://localhost:3000/api/users看到輸出的測試數據就是成功配置好express了

配置mongoose

  • 安裝mongodb並啓動（過程省略）

  • 安裝mongoose

    cnpm install mongoose --save-dev

  • 鏈接mongodb

    • 編寫入口：在server文件下新建一個文件夾名爲db，並在其下新建一個文件db.js，內容以下：

      //引入node的文件路徑模塊path和文件處理模塊fs
const path = require('path')
const fs = require('fs')
const mongoose = require('mongoose')


// mongodb 鏈接?
mongoose.connect('mongodb://localhost/tifi-music')
// 此處防止 node.js - Mongoose: mpromise 錯誤
mongoose.Promise = global.Promise;
let db = mongoose.connection;
db.on('error', console.error.bind(console, 'Connect error'))
db.once('open', function() {
    console.log('Mongodb started successfully')
})
//聲明待添加的model對象
let model = {}
//讀取方式和router同樣
const schemas = fs.readdirSync(path.resolve(__dirname, './model'))
schemas.forEach((file) => {
    //設置數據庫表名爲讀取到的文件名(去除後綴名)
    let name = file.substring(0,file.lastIndexOf("."))
    //獲取到的對象就是數據庫字段
    let schema = require('./model/' + file)
    //使用mongoose.Schema和mongoose.model完成對數據庫表和字段的建立
    model[name] = mongoose.model(name, mongoose.Schema(schema))
})
//輸出model對象
module.exports = model

    • 編寫model：也在db文件夾下新建一個文件夾名爲model，並在其下新建user.js，內容以下：

      module.exports = {
  //設計數據庫字段,先簡單的設置一些經常使用的字段
  name: String,
  phone: String,
  email: String,
  password: String,
  createTime: Date
}

    • 修改controller：修改controller文件下單user.js爲：

      //'引入mongoose的model
const model = require('../db/db')
//加密用戶的密碼
const sha1 = require('sha1')
//mogodb會自動的爲咱們添加_id字段,類型爲objectid,咱們要把它轉換成建立該用戶的時間
const objectIdToTimestamp = require('objectid-to-timestamp')


module.exports = {
  //獲取全部用戶
  users: {
    response: (req, res) => {
      model.User.find({}, (err, doc) => {
        if (err) console.log(err)
        res.send(doc)
      })
    }
  },
  //用戶註冊
  reg: {
    type: 'post',
    response: (req, res) => {
      console.log(req.body);
      let userRegister = new model.User({
        email: req.body.email,
        password: sha1(req.body.password),
      })
      // 將 objectid轉換爲用戶建立時間,使用是的UTC國際標準時間
      userRegister.createTime = objectIdToTimestamp(userRegister._id)

      //查詢郵箱是否已存在於數據庫
      model.User.findOne({
        email: (userRegister.email)
          .toLowerCase()
      }, (err, doc) => {
        if (err) console.log(err)
        if (doc) {
          res.json({
            success: false,
            info: '該郵箱已被註冊'
          })
        } else {
          userRegister.save(err => {
            if (err) console.log(err)
            console.log(new Date(), 'register success')
            res.json({
              success: true,
              data: {
                email: userRegister.email
              }
            })
          })
        }
      })
    }
  }
}

  • 運行mongoose與測試查詢與插入

    • 肯定鏈接mongod成功，若是以前配置好nodemon的話，控制檯會有Mongodb started successfully
    • 測試插入數據，打開postman進行post請求，成功以後以下圖:
![圖片描述][3]
- 測試查詢數據,打開[postman][2]進行get請求，成功以後以下圖:
![圖片描述][5]
- 若是前面都成功了，說明已經成功的鏈接了mongoose，說明所有的基礎建設已經搞好了，能夠進行下一步的開發了！
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程