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

客官°小女子只卖身不卖艺 2023-06-29 06:57 14阅读 0赞

1.创建Express项目框架

express --view=ejs express-demo  // 需要模板时
    /*
    	express --no-view express  // 不需要模板时
    */

![20200111102204648.png][]  
2.进入到项目目录中

cd express-demo

3.把你的前端代码放在`public`目录里

4.安装依赖包

yarn  // 或者 npm install

5.修改`package.json`里的`scripts`字段

"scripts": { 
        "start": "nodemon ./bin/www"  // 可以自定义命，这里node改为nodemon,它将会监视源文件中任何的更改并自动重启服务器
      }

6.运行脚本

yarn start  // 或者 npm start
    /*
    	start是一个特殊指令，用npm start 或者 yarn start 来运行
    	普通的指令用 npm run [自定义命令的名字] 或者 yarn run 来运行
    */

![20200111105355436.png][]  
这样就表示项目已经运行起来了

7.浏览器访问项目

localhost:3000  // 默认为3000端口

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70][]  
8.初识MVC设计模式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20200111111236358.png]

Model层 --- 数据的增删改查，与数据库打交道（模型层）
    View层 --- 数据的可视化，页面显示（视图层）
    controller层  --- 处理业务逻辑，最重要的一层，起到承上启下的作用（控制器）
    
    如果视图更新了，就进入到Controller层，处理一些业务逻辑、for循环等，如果需要操作数据，就调用Model层的操作数据库方法，
    在Model层里操作完数据后将结果返回给Controller层，Controller层拿到Model层返回的结果后进行一些加工和处理，再把结果返回给View层

9.项目目录  
![在这里插入图片描述][20200111113340392.png]  
10.项目运行后，前端需要通过接口向后端发送请求来取数据

11.接口文档  
request:

url: /api/shop/list
    method: get
    query:null

response:

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>含义</th> 
   <th>示例值</th> 
   <th>类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>code</td> 
   <td>请求成功与否编码，200代表成功，400代表失败</td> 
   <td>200</td> 
   <td>number</td> 
  </tr> 
  <tr> 
   <td>body</td> 
   <td>响应主体信息</td> 
   <td></td> 
   <td>object</td> 
  </tr> 
  <tr> 
   <td>- list</td> 
   <td>商品列表</td> 
   <td></td> 
   <td>array</td> 
  </tr> 
  <tr> 
   <td>– _id</td> 
   <td>商品id</td> 
   <td>fherth53e</td> 
   <td>string</td> 
  </tr> 
  <tr> 
   <td>– name</td> 
   <td>商品名称</td> 
   <td>键盘</td> 
   <td>string</td> 
  </tr> 
  <tr> 
   <td>– price</td> 
   <td>商品价格</td> 
   <td>2000</td> 
   <td>number</td> 
  </tr> 
  <tr> 
   <td>– num</td> 
   <td>商品数量</td> 
   <td>1</td> 
   <td>number</td> 
  </tr> 
 </tbody> 
</table>

12.后端配置接口 `routes / api.js`

const express=requires('express')
    const router=express.Router()
    module.exports=router

1.  `app.js`

var apiRouter = require('./routes/api');
    app.use('/api', apiRouter);  
    //这是一个路由，前端请求以api开头的就进入到apiRouter这个路由里
    // use是中间件

14.接收前端的 `shop/list`请求，并给前端发送响应`routes / api.js`

router.get('/shop/list',()=>{ 
        resp.send("list")
    })

15.新建文件夹`controller`，在`controller`里新建一个`shop.js`文件，这个文件夹是用来处理业务逻辑的

16.在`shop.js`里接收来自`api.js`的请求，返回响应  
controller/shop.js

//获取所有的商品列表
    const getAllShop=(req,resp)=>{ 
    }
    //把他暴露出去
    module.exports = { 
        getAllShop
    }

api.js

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

17.新建文件夹`model`，在`model`里新建一个`shop.js`文件，这个文件夹里的东西是用来处理数据的，连接数据库，对数据的增删改查  
shop.js

// 查询所有商品
    const findShop = () => { 
        // 这里写从数据库查询数据的代码，增删改也一样
    }
    
    module.exports = { 
      findShop
    }

18.controller层里引入并调用（17）里的findShop方法

const {  findShop} = require('../model/shop')
    
    //获取所有的商品列表
    const getAllShop=(req,resp)=>{ 
    	findShop()
    }
    //把他暴露出去
    module.exports = { 
        getAllShop
    }

19.前端发送请求以及后端响应的过程

1.浏览器向前端发一个请求 $.get('/api/shop/list')
    2.服务器中app.js里分配路由，然后进入到api.js，这里需要getAllShop方法查询数据，getAllShop来自controller
    3.进入到controller/shop，只负责处理业务逻辑，需要findShop来查询数据
    4.进入model/shop，拿到list，返回给contrller/shop一个处理结果
    5.进入controller/shop，拿到list这个结果，然后根据这个list构造出一个json文件
    6.然后把json文件返回给前端浏览器
    7.浏览器接收list，前端根据json数据渲染页面

20.[连接MongoDB数据库][MongoDB]

[20200111102204648.png]: https://img-blog.csdnimg.cn/20200111102204648.png
[20200111105355436.png]: https://img-blog.csdnimg.cn/20200111105355436.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200111105618929.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200111111057171.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[20200111111236358.png]: https://img-blog.csdnimg.cn/20200111111236358.png
[20200111113340392.png]: https://img-blog.csdnimg.cn/20200111113340392.png
[MongoDB]: https://blog.csdn.net/mxf123_/article/details/103935383