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>