記一次nodejs+mongodb資料庫專案學習經歷

不發光的石頭發表於2018-07-11
NodeJSMongoDB資料庫

前記

在學習vue的路上從開始看api到寫了幾個小專案後，對vue有了一定的瞭解，但是一直沒做過web全棧類的專案。這次跟著慕課的視訊做了web全棧類專案，特此一記，來鞏固下知識！

github地址：github.com/Conankids/m…

專案地址：shop.jiaomingchao.com

技術

前端

使用vue-cli搭建前端基本框架+vue-router完成前端路由+vuex管理狀態

後端

基於nodejs使用express腳手架生成express專案框架+mongoose運算元據庫

資料庫

mongodb資料庫

專案搭建

  1. 安裝vue-cli
  2. 初始化vue專案目錄
sudo vue init webpack 專案名稱    （由於我是mac電腦，需要sudo許可權；專案名必須是小寫，大寫字母會報錯）
複製程式碼
  1. 寫vue專案
  2. 在未建立後端程式碼的時候可以使用webpack自帶的外掛進行mock資料，在build/webpack.dev.conf.js裡面做如下修改，在介面請求到/goods的時候就會請求到我們事先寫好的json資料了
//mock資料
const goodsData = require('./../mock/GoodsList.json')
devServer: {
   ...
     before:function (app) {
      //模擬mock資料
         app.get('/goods',function (req,res) {
             res.json(goodsData)
         })
     }
  },
複製程式碼
  1. 安裝express腳手架
sudo npm i -g express-generator   
複製程式碼
  1. 初始化express專案目錄
進入到專案目錄下  express server  
複製程式碼
  1. 安裝mongodb資料庫

技術點詳解

前端

  1. 使用vue-router實現前端路由功能
  2. 使用vue-infinite-scroll外掛實現上拉載入功能
  3. 使用axios來實現前後端通訊
  4. 使用vue-lazyLoad外掛實現圖片的懶載入
  5. 使用尤大的currency.js實現全域性過濾器功能
  6. 使用vuex管理購物車數量

（所用前端技術比較常見，不是本次記述重點）

後端

  1. 安裝mongoose外掛

mongoose基礎入門

npm i mongoose -S
複製程式碼

2.建立models檔案目錄用來存放資料庫欄位模型（users、goods）

const mongoose = require('mongoose') //引入mongoose

const schema = mongoose.Schema  

//new一個schema物件，引數為欄位及其型別
const userSchema = new schema({
    "userId": String,
    "userName": String,
    "userPwd": String,
    "orderList": Array,
    "cartList": [{
        "productId": String,
        "productName": String,
        "salePrice": String,
        "productImage": String,
        "checked": String,
        "productNum": String
    }],
    "addressList": [{
        "addressId": String,
        "userName": String,
        "streetName": String,
        "postCode": Number,
        "tel": Number,
        "isDefault": Boolean
    }]
})

//模型建立之後暴露出來，mongoose.model('模型名稱',模型物件，資料庫集合名(預設會新增s可以不填，否則需要制定資料庫建立出來的模型名))
module.exports = mongoose.model('user', userSchema)
複製程式碼

3.建立路由檔案

在routes資料夾下建立users.js和goods.js分別對應/users和/goods路由。同時需要在app.js中進行引用。

var indexRouter = require('./routes/index');//index路由
var usersRouter = require('./routes/users');//users路由
var goodsRouter = require('./routes/goods');//goods路由

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/goods', goodsRouter);
複製程式碼

4.連線資料庫

//引入依賴
const express = require('express')
const mongoose = require('mongoose')
const goods = require('../models/goods')
const users = require('../models/users')

const router = express.Router()
//連線資料庫
//connect()最簡單的使用方式，就是隻要傳入url引數即可，如下所示。連線到本地localhost的db1伺服器
//mongoose.connect('mongodb://localhost/db1');
//如果還需要傳遞使用者名稱、密碼，則可以使用如下方式
//mongoose.connect('mongodb://username:password@host:port/database?options...');

mongoose.connect('mongodb://140.143.234.88:27017/db_demo')

//監聽連線狀態(已連線)
mongoose.connection.on('connected', () => {
    console.log('MongoDb connected successful!')
})
//失敗
mongoose.connection.on('err', () => {
    console.log('MongoDb connected fail!')
})
//斷開連線
mongoose.connection.on('disconnected', () => {
    console.log('MongoDb disconnected!')
})
複製程式碼

5.編寫獲取產品列表介面（mongoose查詢用法）

router.get('/list', (req, res, next) => {
    const page = parseInt(req.param('page')) //獲取頁碼引數
    const pageSize = parseInt(req.param('pageSize')) //獲取一頁有多少條資料引數
    const sort = req.param('sort') //獲取排序引數
    const priceLevel = req.param('priceLevel') //獲取價格區間
    const skip = (page - 1) * pageSize //計算跳過多少條
    let params = {} //查詢引數
    let startPrice = '', endPrice = ''

    if (priceLevel != 'all') {
        switch (priceLevel) {
            case '0':
                startPrice = 0
                endPrice = 100
                break
            case '1':
                startPrice = 100
                endPrice = 500
                break
            case '2':
                startPrice = 500
                endPrice = 1000
                break
            case '3':
                startPrice = 1000
                endPrice = 5000
                break
        }
        params = {
            salePrice: {
                $gt: startPrice,
                $lt: endPrice
            }
        }
    }

    const goodsModel = goods.find(params).skip(skip).limit(pageSize) //查詢後跳過多少條限制一頁多少條，返回計算後的模型
    goodsModel.sort({'salePrice': sort}) //對模型進行排序
    goodsModel.exec((err, doc) => {
        if (err) {
            res.json({
                status: -1,
                msg: err.message
            })
        } else {
            res.json({
                status: 0,
                msg: '',
                result: {
                    count: doc.length,
                    list: doc
                }
            })
        }
    })
})
複製程式碼

6.編寫加入購物車介面（mongosse增加資料用法）

router.post('/addCart', (req, res, next) => {
    const userId = req.cookies.userId
    const productId = req.body.productId
    let userProductId = ''

    //查詢user表
    users.findOne({userId: userId}, (err1, userDoc) => {
        if (err1) {
            res.json({
                status: -1,
                msg: err.message
            })
        } else {
            if (userDoc) {
                //遍歷user表的購物車列表是否已有此商品
                userDoc.cartList.forEach(item => {
                    if (item.productId == productId) {
                        userProductId = productId
                        item.productNum++
                    }
                })
                if (userProductId) {
                    //已新增的商品只增加數量
                    userDoc.save((err2, doc2) => {
                        if (err2) {
                            res.json({
                                status: -1,
                                msg: err2.message
                            })
                        } else {
                            res.json({
                                status: 0,
                                msg: '操作成功',
                                result: ''
                            })
                        }
                    })
                } else {
                    //未新增的查詢goods表資訊
                    goods.findOne({productId: productId}, (err3, goodsDoc) => {
                        if (err3) {
                            res.json({
                                status: -1,
                                msg: err3.message
                            })
                        } else {
                            if (goodsDoc) {
                                //查出來的資訊賦值給user表的cartList
                                goodsDoc.productNum = 1
                                goodsDoc.checked = 1
                                userDoc.cartList.push(goodsDoc)
                                userDoc.save((err4, doc4) => {
                                    if (err4) {
                                        res.json({
                                            status: -1,
                                            msg: err2.message
                                        })
                                    } else {
                                        res.json({
                                            status: 0,
                                            msg: '操作成功',
                                            result: ''
                                        })
                                    }
                                })
                            }
                        }
                    })
                }
            }
        }
    })
})
複製程式碼

7.刪除購物車商品介面（mongoose刪除用法）

router.post('/cartDel', (req, res, next) => {
    const userId = req.cookies.userId
    const productId = req.body.productId
    user.update({
            userId: userId
        },
        {
            //使用$pull
            $pull: {
                cartList: {
                    productId: productId
                }
            }
        }, (err, doc) => {
            if (err) {
                res.json({
                    status: -1,
                    msg: err.message
                })
            } else {
                if (doc) {
                    res.json({
                        status: 0,
                        msg: '刪除成功',
                        result: ''
                    })
                }
            }
        })
})
複製程式碼

8.修改購物車商品資料(mongoose修改資料用法)

router.post('/cartEdit', (req, res, next) => {
    const userId = req.cookies.userId,
        productId = req.body.productId,
        productNum = req.body.productNum,
        checked = req.body.checked
    user.update({
        userId: userId,
        'cartList.productId': productId
    }, {
        'cartList.$.productNum': productNum,
        'cartList.$.checked': checked
    }, (err, doc) => {
        if (err) {
            res.json({
                status: -1,
                msg: err.message
            })
        } else {
            if (doc) {
                res.json({
                    status: 0,
                    msg: '操作成功',
                    result: ''
                })
            }
        }
    })
})

//還可以使用findOne()+save()的方式來修改資料
複製程式碼

mongodb資料庫

  1. 安裝mongodb資料庫 安裝教程
  2. 安裝完成後啟動mongodb(安裝在騰訊雲伺服器了)
mongod -f /root/mongodb/etc/mongodb.conf  使用配置檔案啟動
複製程式碼

此處有坑：如果需要mongodb常駐程式需要設定fork=true,否則在斷開伺服器連線後，資料庫會關閉 3. 另起終端視窗，可以進行mongodb操作

mongo      進入mongodb操作模式
show dbs    檢視資料庫
use demo    選擇資料庫（沒有的話建立）
db.dropDatabase()     刪除資料庫
show collections        檢視集合
db.demo.drop()          刪除集合
插入文件
db.createCollection('demo')     建立集合
db.demo.insert({id:123,name:'conan'})       建立並插入集合
更新文件
db.demo.update({id:'123',{$set:{name:'kids'}}})
db.demo.update({id:'123',{$set:{'class.name':'jd'}}})   更新子集欄位
刪除文件
db.demo.remove({id:123})
查詢文件
db.demo.find()      檢視集合
db.demo.find().pretty()     檢視集合(格式化形式顯示)
db.demo.findOne()       檢視第一條集合的資料
db.demo.find({id:123})  按條件查詢(findOne()同樣用法)
db.demo.findOne({age:{$gt:20})  大於20($lt=>小於,$eq=>等於,$gte=>大於等於,$lte=>小於等於)
複製程式碼

相關文章