Nodejs+Express+MongoDB项目的搭建--02

不念不忘少年蓝@ 2023-06-29 07:25 3阅读 0赞

### 连接MongoDB服务器–Model层 ###

1.首先要[安装MongoDB和启动服务器][MongoDB]

1.安装mongoose包

yarn add mongoose

2.新建一个公共包文件夹`utils`，以及配置数据库的文件`db.js`

/*-----------------连接数据库---------------*/
    const mongoose = require('mongoose')
    
    // 连接mongoose数据库
    mongoose.connect('mongodb://localhost/1912', {  useNewUrlParser: true })
    
    const db = mongoose.connection
    
    db.on('error', console.error.bind(console, 'connection error:'))
    db.once('open', function () { 
        console.log("we're connect!")
    })
    
    module.exports = mongoose  // 需要谁就暴露谁

3.Model层`model / shop.js`关联数据库的`collection`

const mongoose = require('../utils/db')
    // 定义结构
    const shopSchema = new mongoose.Schema({   //schema放在全局
      name: String,
      price: Number,
      num: Number
    })
    
    // 关联数据库里的shops这个collection
    let Shop = mongoose.model('shops', shopSchema)

4.通过`find()`方法，查询数据库的数据 — `model / shop.js`

// 查询所有商品
    const findShop = () => { 
      // 从数据库里拿到list
      return new Promise((resolve, reject) => {   
      // 我们想要在contrioller里拿到这个 find 的结果，但这是一个异步的方法，所以这里要传一个回调函数或者使用Promise 
        Shop.find((err, docs) => { 
          if (err) reject(err)
          else resolve(docs)  // docs 和 err 是 find 这个异步方法的结果
        })
      })
    }

5.controller层接收model层处理的结果（controller / shop.js），并向前端返回响应

//获取所有的商品列表
    const getAllShop = (req, resp) => { 
        findShop().then(list => {   // then 里处理成功
            resp.json({ 
                code: 200,
                body: { 
                    list
                }
            }).catch(err => {    // catch 里处理失败
                resp.json({ 
                    code: 400,
                    body: { 
                        err
                    }
                })
            })
        })
    }

6.MongoDB数据库的schema会自动帮我们创建一个collection，但如果collection里没有数据，就不显示这个collection，可以自己创建一个collection

##### 前端代码 #####

![20200111163308376.png][]

###### index.html ######

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>xd商品管理系统</title>
      <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" href="./css/index.css">
      <script src="./libs/jquery-3.4.1.min.js"></script>
      <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
      <script src="./libs/utils.js"></script>
    </head>
    <body>
      <nav class="navbar navbar-inverse">
        <div class="container">
          
          <div class="navbar-header">
            <a class="navbar-brand" href="#">XD商品管理系统</a>
          </div>
      
          
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">首页</a></li>
              <li><a href="#">其他页面</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">登录</a></li>
              <li><a href="#">注册</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right hidden">
              <li><a href="">欢迎您，<b>dary</b></a></li>
              <li><a href="#">注销</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="container">
        <button class="btn btn-primary btn-add" data-toggle="modal" data-target="#addModal">添加商品</button>
        <table class="table table-striped table-bordered table-hover table-condensed table-shop">
          <thead>
            <tr>
              <th>编号</th>
              <th>商品名称</th>
              <th>商品价格</th>
              <th>商品数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="list-tbody">
          </tbody>
        </table>
      </div>
      
      <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title" id="myModalLabel">添加商品</h4>
            </div>
            <div class="modal-body form-horizontal">
              <div class="form-group">
                <label for="inputName" class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputName" placeholder="请输入商品名称">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPrice" class="col-sm-2 control-label">商品价格</label>
                <div class="col-sm-10">
                  <input type="number" class="form-control" id="inputPrice" placeholder="请输入商品价格">
                </div>
              </div>
              <div class="form-group">
                <label for="inputNum" class="col-sm-2 control-label">商品数量</label>
                <div class="col-sm-10">
                  <input type="number" class="form-control" id="inputNum" placeholder="请输入商品数量">
                </div>
              </div>
              <p id="add-info" class="text-center"></p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary" id="btn-add">添加</button>
            </div>
          </div>
        </div>
      </div>
      <script src="./js/select.js"></script>
      <script src="./js/add.js"></script>
      <script src="./js/eidt.js"></script>
    </body>
    </html>

###### index.css ######

.table-shop input { 
      display: none;
      width: 80px;
    }
    .table-shop .btn-ok, .table-shop .btn-cancel { 
      display:none;
    }
    
    .edit input, .edit .btn-ok, .edit .btn-cancel { 
      display: inline-block;
    }
    
    .edit span, .edit .btn-edit, .edit .btn-del { 
      display: none;
    }
    
    .btn-add { 
      margin-bottom: 30px;
    }

###### select.js ######

const tbody = document.querySelector('#list-tbody')
    getData()
    function getData () { 
      utils.fetch('./api/shop/list').then(resp => { 
        if (resp.code === 200) { 
          const {  list } = resp.body
      
          let html = list.reduce((str, shop, index) => { 
            str += `<tr data-id="${ shop._id}"> <td>${ index+1}</td> <td><span>${ shop.name}</span><input class="shop-name" type="text"></td> <td><span>${ shop.price}</span><input class="shop-price" type="text"></td> <td><span>${ shop.num}</span><input class="shop-num" type="text"></td> <td> <button class="btn btn-xs btn-edit btn-info">编辑</button> <button class="btn btn-xs btn-del btn-danger">删除</button> <button class="btn btn-xs btn-ok btn-success">确定</button> <button class="btn btn-xs btn-cancel btn-warning">取消</button> </td> </tr>`
            return str
          }, '')
      
          tbody.innerHTML = html
        } else { 
          alert('网络失败，请重试')
        }
      })
    }

##### Express代码 #####

###### app.js ######

var express = require('express');
    var path = require('path');
    var cookieParser = require('cookie-parser');
    var logger = require('morgan');
    
    var apiRouter = require('./routes/api');
    
    var app = express();
    
    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({  extended: false }));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));
    
    app.use('/api', apiRouter);
    
    module.exports = app;

###### api.js ######

// const express = require("express")
    // const router = express.Router()
    const router = require('express').Router();
    
    // 获取getAllShop的对象
    const {  getAllShop} = require('../controller/shop')
    router.get('/shop/list', getAllShop);
    
    module.exports = router;

###### controller/shop.js ######

const {  findShop } = require('../model/shop')
    
    //获取所有的商品列表
    const getAllShop = (req, resp) => { 
        findShop().then(list => {   // then 里处理成功
            resp.json({ 
                code: 200,
                body: { 
                    list
                }
            }).catch(err => {    // catch 里处理失败
                resp.json({ 
                    code: 400,
                    body: { 
                        err
                    }
                })
            })
        })
    }
    
    
    //把他暴露出去
    module.exports = { 
        getAllShop
    }

model/shop.js

const mongoose = require('../utils/db')
    
    // 定义结构
    const shopSchema = new mongoose.Schema({ 
      name: String,
      price: Number,
      num: Number
    })
    
    // 关联数据库里的shops
    let Shop = mongoose.model('shops', shopSchema)
    
    
    // 查询所有商品
    const findShop = () => { 
      // 从数据库里拿到list
      return new Promise((resolve, reject) => { 
        Shop.find((err, docs) => { 
          if (err) reject(err)
          else resolve(docs)
        })
      })
    }
    
    module.exports = { 
      findShop
    }

[MongoDB]: https://blog.csdn.net/mxf123_/article/details/103936353
[20200111163308376.png]: https://img-blog.csdnimg.cn/20200111163308376.png