配合node+MongoDB后臺(tái)+vue-cli用API接口獲取數(shù)據(jù)庫數(shù)據(jù)

Node.js+MongoDB模擬后臺(tái)數(shù)據(jù)并通過api在Vue中獲取數(shù)據(jù)(以vivo官網(wǎng)頂部欄為例)

話不多說，上操作…………編程萌新，歡迎大家在評論區(qū)提建議！????

一九默、Node+MongoDB后臺(tái)服務(wù)

  1. <font size=4>第一步，我們先簡單搭建一個(gè)后臺(tái)服務(wù)宾毒，創(chuàng)建一個(gè)sever文件夾驼修，里面創(chuàng)建model文件夾、api.js、index.js乙各，model文件夾下有connect.js和homeInfo.js</font>
    效果圖：

    本人創(chuàng)建文件介紹:
文件(名字隨便) 介紹
connect.js 用于連接MongoDB數(shù)據(jù)庫
homeInfo.js 用于創(chuàng)建數(shù)據(jù)集合以及其規(guī)則墨礁，也可在此向數(shù)據(jù)庫添加數(shù)據(jù)
api.js 用于定制查詢數(shù)據(jù)的api接口
index.js 后臺(tái)服務(wù)的入口文件，用于啟動(dòng)數(shù)據(jù)庫和本地服務(wù)器
  1. 下來放文件代碼耳峦，看注釋很重要
  • connect.js

注意：需要先下載依賴 npm install mongoose

//引入mongoose
const mongoose = require("mongoose");
//連接數(shù)據(jù)庫恩静，自動(dòng)創(chuàng)建名為vivodemo的數(shù)據(jù)庫
mongoose
.connect("mongodb://localhost:27017/vivodemo", {
  useUnifiedTopology: true,
  useNewUrlParser: true,
})
 .then(() => console.log("數(shù)據(jù)庫連接成功"))
.catch(() => console.log("數(shù)據(jù)庫連接失敗"));
//鏈?zhǔn)秸{(diào)用，返回查看結(jié)果
  • homeInfo.js
const mongoose = require("mongoose");
//創(chuàng)建種類的集合規(guī)則
const speciesSchema = new mongoose.Schema({
  name: [String],
});
//創(chuàng)建關(guān)于手機(jī)的集合規(guī)則
const phoneSchema = new mongoose.Schema({
  desc: [
    {
      img: [{ imgclass: String, imgUrl: String }],
      tit: String,
      con: String,
    },
  ],
});
//創(chuàng)建集合對象
const vivoIndex = {
  Specie: mongoose.model("Specie", speciesSchema),
  Phone: mongoose.model("Phone", phoneSchema),
};
//這里也能添加數(shù)據(jù)蹲坷，不過我放到了api.js里驶乾，效果是一樣的

//將集合對象開放出去
module.exports = vivoIndex;
  • api.js

  • 注意：需要先下載依賴 npm install express

var express = require("express");
//創(chuàng)建路由
var router = express.Router();
//引入查詢數(shù)據(jù)庫的文件
var vivoIndex = require("./model/homeInfo");
//這里根據(jù)homeInfo.js創(chuàng)建的規(guī)則來添加種類的相關(guān)數(shù)據(jù)
vivoIndex.Specie.create({
  name: [
    "NEX系列",
    "X系列",
    "S系列",
    "Y系列",
    "Z系列",
    "U系列",
    "IQOO手機(jī)",
    "智能硬件",
    "商城",
    "服務(wù)",
  ],
})
.then((doc) => console.log(doc))
.catch((err) => console.log(err));
//種類的api接口
router.get("/specie", function(request, reponse) {
  //數(shù)據(jù)庫查詢find()
  vivoIndex.Specie.find((err, data) => {
    if (err) {
      reponse.send(err);
    } else {
    //如果查詢成功發(fā)送數(shù)據(jù)庫的數(shù)據(jù)
      reponse.send(data);
    }
  });
});
//這里根據(jù)homeInfo.js創(chuàng)建的規(guī)則來添加手機(jī)的相關(guān)數(shù)據(jù)
//******不過我這里先添加兩組對象，實(shí)際有八個(gè)對象
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) {
  //數(shù)據(jù)庫查詢
  vivoIndex.Phone.find((err, data) => {
    if (err) {
      reponse.send(err);
    } else {
    //查詢成功發(fā)送數(shù)據(jù)庫數(shù)據(jù)
      reponse.send(data);
    }
  });
});

//導(dǎo)出路由
module.exports = router;
  • index.js(入口文件)
//引入框架
var express = require("express");
//建立服務(wù)
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);
//運(yùn)行連接數(shù)據(jù)庫文件
require("./model/connect");
//啟用端口
app.listen("8090", function() {
  console.log("服務(wù)器啟動(dòng)..");
});
  1. 啟動(dòng)后臺(tái)服務(wù)县匠，去index.js在的文件夾輸入node .\index.js
    效果圖：

  2. 最后查看數(shù)據(jù)庫里有沒有數(shù)據(jù),有的話證明后臺(tái)服務(wù)已經(jīng)有了
    種類的數(shù)據(jù)已經(jīng)有了


    效果圖：

    關(guān)于手機(jī)的數(shù)據(jù)


    效果圖：

二风科、vue-cli的前臺(tái)

  1. 前臺(tái)就不細(xì)說了，直接說獲取數(shù)據(jù)
  • 我們在vue-cli生成的main.js里設(shè)置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'
//設(shè)置請求的基地址聚唐，和上面后臺(tái)服務(wù)監(jiān)聽的地址一致
axios.defaults.baseURL = 'http://localhost:8090'


Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
  1. 在vue文件里獲取后臺(tái)數(shù)據(jù)
//在vue文件中先引入axios
import axios from "axios";
export default {
  data() {
    return {
    //定義種類的數(shù)組
      specieInfo: [],
      //定義手機(jī)的數(shù)組
      hidePhone: [],
    };
  },
  //周期函數(shù)初始
  created() {
    this.getSpecie();
    this.getPhone();
  },
  
  methods: {
    getSpecie() {
    //通過后臺(tái)定義好的api獲取數(shù)據(jù)丐重，并給到相應(yīng)的數(shù)組
      axios
        .get("/specie")
        .then((res) => (this.specieInfo = res.data[0].name))
        .catch((err) => console.log(err));
    },
    getPhone() {
       //通過后臺(tái)定義好的api獲取數(shù)據(jù)，并給到相應(yīng)的數(shù)組
      axios
        .get("/phone")
        .then((res) => {
          this.hidePhone = res.data;
        })
        .catch((err) => console.log(err));
    },
  }
};

下面是vue遍歷種類的數(shù)據(jù)

  <!-- 導(dǎo)航 -->
        <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遍歷手機(jī)的數(shù)據(jù)

  <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>

最后一步啟動(dòng)后臺(tái)以及前端杆查。
最后欣賞最終效果圖:


最終效果:

喜歡的朋友點(diǎn)個(gè)贊，收藏一下叭?

<font size=4>更多推薦：wantLG的《普歌-碼上鴻鵠團(tuán)隊(duì)：vue實(shí)現(xiàn)當(dāng)年或每年哀悼日網(wǎng)站全站變灰》</font>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市抡柿，隨后出現(xiàn)的幾起案子舔琅，更是在濱河造成了極大的恐慌，老刑警劉巖洲劣，帶你破解...
    沈念sama閱讀 217,277評論 6贊 503
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件备蚓，死亡現(xiàn)場離奇詭異，居然都是意外死亡囱稽，警方通過查閱死者的電腦和手機(jī)郊尝，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3贊 393
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來战惊，“玉大人流昏，你說我怎么就攤上這事。” “怎么了况凉？”我有些...
    開封第一講書人閱讀 163,624評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵谚鄙，是天一觀的道長。 經(jīng)常有香客問我刁绒，道長闷营，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,356評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任膛锭，我火速辦了婚禮粮坞，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘初狰。我一直安慰自己莫杈，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布奢入。 她就那樣靜靜地躺著筝闹，像睡著了一般。 火紅的嫁衣襯著肌膚如雪腥光。 梳的紋絲不亂的頭發(fā)上关顷，一...
    開封第一講書人閱讀 51,292評論 1贊 301
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音武福，去河邊找鬼议双。 笑死，一個(gè)胖子當(dāng)著我的面吹牛捉片，可吹牛的內(nèi)容都是我干的平痰。 我是一名探鬼主播，決...
    沈念sama閱讀 40,135評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼伍纫，長吁一口氣：“原來是場噩夢啊……” “哼宗雇！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起莹规，我...
    開封第一講書人閱讀 38,992評論 0贊 275
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤赔蒲，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后良漱，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體舞虱，經(jīng)...
    沈念sama閱讀 45,429評論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年债热，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了砾嫉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡窒篱，死狀恐怖焕刮，靈堂內(nèi)的尸體忽然破棺而出舶沿，到底是詐尸還是另有隱情，我是刑警寧澤配并，帶...
    沈念sama閱讀 35,492評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布括荡，位于F島的核電站，受9級特大地震影響溉旋，放射性物質(zhì)發(fā)生泄漏畸冲。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一观腊、第九天 我趴在偏房一處隱蔽的房頂上張望邑闲。 院中可真熱鬧，春花似錦梧油、人聲如沸苫耸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0贊 22
  • 一樁弒父案儡陨，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽褪子。三九已至，卻和暖如春骗村，著一層夾襖步出監(jiān)牢的瞬間嫌褪，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工胚股， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留笼痛，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,891評論 2贊 370
  • 代替公主和親
    正文 我出身青樓琅拌，卻偏偏與公主長得像晃痴，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子财忽，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評論 2贊 354