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

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

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

一、Node+MongoDB后台服务

  1. <font size=4>第一步，我们先简单搭建一个后台服务，创建一个sever文件夹，里面创建model文件夹、api.js、index.js，model文件夹下有connect.js和homeInfo.js</font>
    效果图：

    本人创建文件介绍:
文件(名字随便) 介绍
connect.js 用于连接MongoDB数据库
homeInfo.js 用于创建数据集合以及其规则，也可在此向数据库添加数据
api.js 用于定制查询数据的api接口
index.js 后台服务的入口文件，用于启动数据库和本地服务器
  1. 下来放文件代码，看注释很重要
  • 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("服务器启动..");
});
  1. 启动后台服务，去index.js在的文件夹输入node .\index.js
    效果图：

  2. 最后查看数据库里有没有数据,有的话证明后台服务已经有了
    种类的数据已经有了


    效果图：

    关于手机的数据


    效果图：

二、vue-cli的前台

  1. 前台就不细说了，直接说获取数据
  • 我们在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')
  1. 在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遍历种类的数据

  <!-- 导航 -->
        <div class="nav">
          <ul>
            <li class="nav_series" v-for="(specie,index) in specieInfo" :key="index">
              <a href="javascript:;">{{specie}}</a>
            </li>
          </ul>
        </div>

下面是vue遍历手机的数据

  <div class="head_series_wrap">
          <ul class="menu_list" v-for="(hidePhones,index) in hidePhone" :key="index">
            <li v-for="(hidePhonesdesc,index2) in hidePhones.desc" :key="index2">
              <a href="#">
                <div class="menu_pro_img">
                  <div
                    :class="hidePhonesdescimg.imgclass"
                    v-for="(hidePhonesdescimg,index3) in hidePhonesdesc.img"
                    :key="index3"
                  >
                    <img :src="hidePhonesdescimg.imgUrl" alt />
                  </div>
                </div>
                <p class="menu_pro_name">{{hidePhonesdesc.tit}}</p>
                <p class="menu_pro_icon">{{hidePhonesdesc.con}}</p>
              </a>
            </li>
          </ul>
  </div>

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


最终效果:

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

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,098评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,213评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,960评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,519评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,512评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,533评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,914评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,804评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,350评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,933评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2赞 342