記一次nodejs+mongodb數據庫項目學習經歷

時間 2019-11-21

標籤一次 nodejs+mongodb nodejs mongodb 數據庫項目學習經歷欄目 MongoDB 简体版

原文原文鏈接

前記

在學習vue的路上從開始看api到寫了幾個小項目後，對vue有了必定的瞭解，可是一直沒作過web全棧類的項目。此次跟着慕課的視頻作了web全棧類項目，特此一記，來鞏固下知識！html

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

項目地址：shop.jiaomingchao.comvue

技術

前端

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

後端

基於nodejs使用express腳手架生成express項目框架+mongoose操做數據庫webpack

數據庫

mongodb數據庫ios

項目搭建

安裝vue-cli
初始化vue項目目錄

sudo vue init webpack 項目名稱    （因爲我是mac電腦，須要sudo權限；項目名必須是小寫，大寫字母會報錯）
複製代碼

寫vue項目
在未創建後端代碼的時候可使用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)
         })
     }
  },
複製代碼

安裝express腳手架

sudo npm i -g express-generator   
複製代碼

進入到項目目錄下  express server  
複製代碼

安裝mongodb數據庫

技術點詳解

前端

使用vue-router實現前端路由功能
使用vue-infinite-scroll插件實現上拉加載功能
使用axios來實現先後端通信
使用vue-lazyLoad插件實現圖片的懶加載
使用尤大的currency.js實現全局過濾器功能
使用vuex管理購物車數量

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

後端

安裝mongoose插件

mongoose基礎入門github

npm i mongoose -S
複製代碼

2.建立models文件目錄用來存放數據庫字段模型（users、goods）web

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.建立路由文件vue-router

在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數據庫

安裝mongodb數據庫安裝教程
安裝完成後啓動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=>小於等於)
複製代碼