Node.js+MongoDB模拟后台数据并通过api在Vue中获取数据(以vivo官网顶部栏为例)

话不多说，上操作…………编程萌新，欢迎大家在评论区提建议！

一、Node+MongoDB后台服务

第一步，我们先简单搭建一个后台服务，创建一个sever文件夹，里面创建model文件夹、api.js、index.js，model文件夹下有connect.js和homeInfo.js

效果图：

本人创建文件介绍:

文件(名字随便)	介绍
connect.js	用于连接MongoDB数据库
homeInfo.js	用于创建数据集合以及其规则，也可在此向数据库添加数据
api.js	用于定制查询数据的api接口
index.js	后台服务的入口文件，用于启动数据库和本地服务器

下来放文件代码，看注释很重要

connect.js

注意：需要先下载依赖 npm install mongoose

//引入mongoose
const mongoose = require("mongoose");
//连接数据库，自动创建名为vivodemo的数据库
mongoose
.connect("mongodb://localhost:27017/vivodemo", {
  useUnifiedTopology: true,
  useNewUrlParser: true,
})
 .then(() => console.log("数据库连接成功"))
.catch(() => console.log("数据库连接失败"));
//链式调用，返回查看结果

homeInfo.js

const mongoose = require("mongoose");
//创建种类的集合规则
const speciesSchema = new mongoose.Schema({
  name: [String],
});
//创建关于手机的集合规则
const phoneSchema = new mongoose.Schema({
  desc: [
    {
      img: [{ imgclass: String, imgUrl: String }],
      tit: String,
      con: String,
    },
  ],
});
//创建集合对象
const vivoIndex = {
  Specie: mongoose.model("Specie", speciesSchema),
  Phone: mongoose.model("Phone", phoneSchema),
};
//这里也能添加数据，不过我放到了api.js里，效果是一样的

//将集合对象开放出去
module.exports = vivoIndex;

api.js
注意：需要先下载依赖 npm install express

var express = require("express");
//创建路由
var router = express.Router();
//引入查询数据库的文件
var vivoIndex = require("./model/homeInfo");
//这里根据homeInfo.js创建的规则来添加种类的相关数据
vivoIndex.Specie.create({
  name: [
    "NEX系列",
    "X系列",
    "S系列",
    "Y系列",
    "Z系列",
    "U系列",
    "IQOO手机",
    "智能硬件",
    "商城",
    "服务",
  ],
})
.then((doc) => console.log(doc))
.catch((err) => console.log(err));
//种类的api接口
router.get("/specie", function(request, reponse) {
  //数据库查询find()
  vivoIndex.Specie.find((err, data) => {
    if (err) {
      reponse.send(err);
    } else {
    //如果查询成功发送数据库的数据
      reponse.send(data);
    }
  });
});
//这里根据homeInfo.js创建的规则来添加手机的相关数据
//******不过我这里先添加两组对象，实际有八个对象
vivoIndex.Phone.create(
  {
    desc: [
      {
        img: [
          {
            imgclass: "pro_img4-4",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200309/cf75ca3c1f32edae16ad1cc8c6f1cdb3.png",
          },
          {
            imgclass: "pro_img4-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200310/2c8dead61bac575c7bcc2589554d5980.png",
          },
          {
            imgclass: "pro_img4-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200309/66ba1ed31ef2894e61d0348cfa0ee4a6.png",
          },
          {
            imgclass: "pro_img4-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200309/eae574e3ea241a2e2a7a28bc4da4f333.png",
          },
        ],
        tit: "3NEX S",
        con: "新款",
      },
      {
        img: [
          {
            imgclass: "pro_img3-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190916/6a4923aa7aaa5ea86e7b8b85a4a7c459.png",
          },
          {
            imgclass: "pro_img3-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190916/80346a86a96a3fd75e69e1102a4360ac.png",
          },
          {
            imgclass: "pro_img3-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190916/be6bfe12e68c9970c921195c1ed2f564.png",
          },
        ],
        tit: "NEX 3&NEX 3 5G",
        con: "",
      },
      {
        img: [
          {
            imgclass: "pro_img3-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/a58a4ec2f519099c14d0fcd73f1d8aec.png",
          },
          {
            imgclass: "pro_img3-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/1838c95336b30043fa2981faa32937a1.png",
          },
          {
            imgclass: "pro_img3-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/8cc9d05106aff4a3e8748730c96687d6.png",
          },
        ],
        tit: "NEX双屏版",
        con: "",
      },
      {
        img: [
          {
            imgclass: "pro_img4-4",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/826f33355eb36456c1cf48ef952b2603.png",
          },
          {
            imgclass: "pro_img4-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/99ed1d51eb06cca2e8c37faa87007e14.png",
          },
          {
            imgclass: "pro_img4-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/8a43ea78785ce40d57549cd4e55ee472.png",
          },
          {
            imgclass: "pro_img4-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/578e59296927cdaa2d0496e3ae4649ba.png",
          },
        ],
        tit: "NEX旗舰版",
        con: "",
      },
      {
        img: [
          {
            imgclass: "pro_img3-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/d89018a178a5c9c511aece362ff85e8e.png",
          },
          {
            imgclass: "pro_img3-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/17c824d969c1c5cc53c003247ffa70a5.png",
          },
          {
            imgclass: "pro_img3-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20190315/a58140a62b1189f49ea4f3a0abedb664.png",
          },
        ],
        tit: "NEX&NEX屏幕指纹版",
        con: "",
      },
    ],
  },
  {
    desc: [
      {
        img: [
          {
            imgclass: "pro_img3-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200704/9e58f7ed9ff190b5aa7ab1c260465aa4.png",
          },
          {
            imgclass: "pro_img3-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200704/ef4d010c36a4ef40989aa0c01e862463.png",
          },
          {
            imgclass: "pro_img3-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200704/5567c65bfa0e814c61c1b02498366882.png",
          },
        ],
        tit: "X50 Pro+",
        con: "新款",
      },
      {
        img: [
          {
            imgclass: "pro_img3-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200601/0ee86b896e2597201dbd04c6de3cf2dc.png",
          },
          {
            imgclass: "pro_img3-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200601/c9633947410ba081f04570c8b0c877ba.png",
          },
          {
            imgclass: "pro_img3-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200601/19f610d8b34d7563ddedf9068dd855a6.png",
          },
        ],
        tit: "X50 Pro",
        con: "新款",
      },
      {
        img: [
          {
            imgclass: "pro_img5-5",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200316/49d4b2ceb28bb84bffcb318ab20b6ab1.png",
          },
          {
            imgclass: "pro_img5-4",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20191216/6560449af9125aa00b3661bf2e739e71.png",
          },
          {
            imgclass: "pro_img5-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20191216/790161d318cca6829935b55fa2b63cc8.png",
          },
          {
            imgclass: "pro_img5-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20191216/73c20764cac33957881360f4e58a496b.png",
          },
          {
            imgclass: "pro_img5-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20191216/babde62dada18b25290d5bb2310f8b04.png",
          },
        ],
        tit: "X50",
        con: "",
      },
      {
        img: [
          {
            imgclass: "pro_img5-5",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/8d2b166140578773896cf177285ef0b9.png",
          },
          {
            imgclass: "pro_img5-4",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/cb2f9fdbbd087c83b233e8477b8b6007.png",
          },
          {
            imgclass: "pro_img5-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/cad63fadca1dbbe064141de9f2b8855d.png",
          },
          {
            imgclass: "pro_img5-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200413/3309745741bef037e38c93c0e29e19fd.png",
          },
          {
            imgclass: "pro_img5-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200413/580f251fe87d7cb19010bb449e28cb0c.png",
          },
        ],
        tit: "X30 Pro",
        con: "",
      },
      {
        img: [
          {
            imgclass: "pro_img5-5",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/8d2b166140578773896cf177285ef0b9.png",
          },
          {
            imgclass: "pro_img5-4",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/cb2f9fdbbd087c83b233e8477b8b6007.png",
          },
          {
            imgclass: "pro_img5-3",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200331/cad63fadca1dbbe064141de9f2b8855d.png",
          },
          {
            imgclass: "pro_img5-2",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200413/3309745741bef037e38c93c0e29e19fd.png",
          },
          {
            imgclass: "pro_img5-1",
            imgUrl:
              "https://wwwstatic.vivo.com.cn/vivoportal/files/image/navi/20200413/580f251fe87d7cb19010bb449e28cb0c.png",
          },
        ],
        tit: "X30",
        con: "",
      },
    ],
  }
 ).then((doc) => console.log(doc))
  .catch((err) => console.log(err));
 //种类的api接口
router.get("/phone", function(request, reponse) {
  //数据库查询
  vivoIndex.Phone.find((err, data) => {
    if (err) {
      reponse.send(err);
    } else {
    //查询成功发送数据库数据
      reponse.send(data);
    }
  });
});

//导出路由
module.exports = router;

index.js(入口文件)

//引入框架
var express = require("express");
//建立服务
var app = express();
//引入路由文件
var router = require("./api");
//拦截所有请求，解决跨域问题，由于前端的地址是localhost:3000，有跨域问题
app.use((req, res, next) => {
  //1.允许哪些客户端访问我
  //*代表允许所有的客户端访问我
  res.header("Access-Control-Allow-Origin", "*");
  // 2.允许客户端使用哪些请求方式访问我
  res.header("Access-Control-Allow-Methods", "get,post");
  next();
});
//挂载路由
app.use(router);
//运行连接数据库文件
require("./model/connect");
//启用端口
app.listen("8090", function() {
  console.log("服务器启动..");
});

启动后台服务，去index.js在的文件夹输入node .\index.js

效果图：
最后查看数据库里有没有数据,有的话证明后台服务已经有了
种类的数据已经有了

效果图：

关于手机的数据

效果图：

二、vue-cli的前台

前台就不细说了，直接说获取数据

我们在vue-cli生成的main.js里设置axios请求的基地址,记得下载npm install axios

import Vue from 'vue'
import App from './App.vue'
import router from './route/index'
import '../src/assets/style/reset.css'
import '../src/assets/icon/iconfont.css'


//引入axios模块
import axios from 'axios'
//设置请求的基地址，和上面后台服务监听的地址一致
axios.defaults.baseURL = 'http://localhost:8090'


Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在vue文件里获取后台数据

//在vue文件中先引入axios
import axios from "axios";
export default {
  data() {
    return {
    //定义种类的数组
      specieInfo: [],
      //定义手机的数组
      hidePhone: [],
    };
  },
  //周期函数初始
  created() {
    this.getSpecie();
    this.getPhone();
  },
  
  methods: {
    getSpecie() {
    //通过后台定义好的api获取数据，并给到相应的数组
      axios
        .get("/specie")
        .then((res) => (this.specieInfo = res.data[0].name))
        .catch((err) => console.log(err));
    },
    getPhone() {
       //通过后台定义好的api获取数据，并给到相应的数组
      axios
        .get("/phone")
        .then((res) => {
          this.hidePhone = res.data;
        })
        .catch((err) => console.log(err));
    },
  }
};

下面是vue遍历种类的数据

下面是vue遍历手机的数据

  
          
            
              
                
                  
                    
                  
                
                {{hidePhonesdesc.tit}}
                {{hidePhonesdesc.con}}

最后一步启动后台以及前端。
最后欣赏最终效果图:

最终效果:

喜欢的朋友点个赞，收藏一下叭♥

更多推荐：wantLG的《普歌-码上鸿鹄团队：vue实现当年或每年哀悼日网站全站变灰》

作者：wantLG
本文源自：wantLG的《普歌-码上鸿鹄团队：配合node+MongoDB后台+vue-cli用API接口获取数据库数据》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。

配合node+MongoDB后台+vue-cli用API接口获取数据库数据

Node.js+MongoDB模拟后台数据并通过api在Vue中获取数据(以vivo官网顶部栏为例)

一、Node+MongoDB后台服务

二、vue-cli的前台

喜欢的朋友点个赞，收藏一下叭♥

你可能感兴趣的:(配合node+MongoDB后台+vue-cli用API接口获取数据库数据)