node后台，MongoDB作為數據庫，vue前端獲取數據並渲染

 

前提：vue腳手架創建項目，node后台，MongoDB數據庫，並且跨域還有配置好

背景：前端Home.vue組件從后台獲取圖片並以輪播圖效果展示

 

后台：

models文件夾：存放各種數據庫文件，由於存在好多種數據表結構，連接數據庫時會產生問題，因此單獨創建一個文件夾，創建db.js文件，該文件專門連接數據庫。routes文件夾：路由處理文件

                                                                                                                 

 

/** db.js
 * 完成 MongoDB 的連接，向外暴露一個連接成功的對象
 * @type {Mongoose}
 */

module.exports = app =>{
    const mongoose = require('mongoose');
    mongoose.connect('mongodb://localhost: 27017/paper',{
        useNewUrlParser: true,
        autoIndex: true
    });
};

注意，db.js文件要在app.js中掛載一下，這樣不用在每個數據庫文件中引入

 // 引入數據庫連接文件 2 require('./util/db')(app); 

/**
 * lunbotu.js
 *   輪播圖數據庫，存放輪播圖
 * @type {createApplication}
 */

const mongoose = require('mongoose');

const lunbotuSchema = new mongoose.Schema({
    id:{
        type:Number,
        required:true
    },
    img_url:{
        type:String,
        required: true
    }
});

module.exports = mongoose.model('Lunbotu',lunbotuSchema);

/**
 * Lunbotu.js
 *   處理輪播圖路由文件
 * @type {createApplication}
 */

const express = require('express');

const user = require('../models/lunbotu');

const Lunbotu = express.Router();

Lunbotu.get('/getlunbotu',async(req,res) =>{
  const model = await user.find(req.body);
  res.send(model)
});

module.exports = Lunbotu;

當然，路由文件要在app.js中引入掛載一下

數據庫文件，先保存在json文件中，后插入數據庫：

{
  "lunbotus": [
    {"id": 1,"img_url": "https://imgcps.jd.com/ling/32516359271/5ZOB54mM6ZKc5oOg/MuS7tjnmipg/p-5bd8253082acdd181d02f9e3/d9f21951.jpg"},
    {"id": 2,"img_url": "https://img13.360buyimg.com/pop/s590x470_jfs/t1/102707/14/10983/62930/5e225312E0f1eba30/bc6455afaf998638.jpg.webp"},
    {"id": 3,"img_url": "https://img30.360buyimg.com/pop/s590x470_jfs/t1/85339/25/10650/75930/5e200467E0b197a12/b8ace6cd19292e26.jpg.webp"},
    {"id": 4,"img_url": "https://img13.360buyimg.com/da/s590x470_jfs/t1/52408/25/3424/84234/5d123c03Ebc277535/416e2048cdc0e87f.jpg.webp"},
    {"id": 5,"img_url": "https://img14.360buyimg.com/pop/s590x470_jfs/t1/97733/27/10037/93770/5e159e3eEdc7a4241/7e038b38040faa38.jpg.webp"},
    {"id": 6,"img_url": "https://img12.360buyimg.com/pop/s590x470_jfs/t1/110249/27/4836/99962/5e268761E6c600e7d/d400bdc49862944a.jpg.webp"}
    ]
}

數據插入數據庫：

 

 

前端：

<script>
    export default {
        name: "Home",
      data(){
          return{
            lunbotuList:[] // 獲取存放輪播圖
          }
      },
      created(){
          this.getlunbo() // 調用方法
      },
      methods:{
          async getlunbo(){
            const res = await this.$axios.get('/getlunbotu',this.model);
            // console.log(res);

            if(res.status === 200 ){ //當狀態碼為200時表示請求成功
              this.lunbotuList = res.data  // 將數據保存在數組中
             }
          }
      }
    }
</script>

上述代碼中：console.log(res) 結果如下圖所示：

                                                         

 

<template>
  <div>
<!--    輪播圖區域 -->
<!--    auto 毫秒值 -->
    <mt-swipe :auto="3000">
      <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
        <img :src="item.img_url">
      </mt-swipe-item>
    </mt-swipe>
</div>
</template>