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

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

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

一、Node+MongoDB后臺服務(wù)

  1. <font size=4>第一步，我們先簡單搭建一個后臺服務(wù)，創(chuàng)建一個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 后臺服務(wù)的入口文件，用于啟動數(shù)據(jù)庫和本地服務(wù)器
  1. 下來放文件代碼，看注釋很重要
  • connect.js

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

//引入mongoose
const mongoose = require("mongoose");
//連接數(shù)據(jù)庫，自動創(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)于手機的集合規(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手機",
    "智能硬件",
    "商城",
    "服務(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ī)則來添加手機的相關(guān)數(shù)據(jù)
//******不過我這里先添加兩組對象，實際有八個對象
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);
//運行連接數(shù)據(jù)庫文件
require("./model/connect");
//啟用端口
app.listen("8090", function() {
  console.log("服務(wù)器啟動..");
});
  1. 啟動后臺服務(wù)，去index.js在的文件夾輸入node .\index.js
    效果圖：

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


    效果圖：

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


    效果圖：

二、vue-cli的前臺

  1. 前臺就不細(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è)置請求的基地址，和上面后臺服務(wù)監(jiān)聽的地址一致
axios.defaults.baseURL = 'http://localhost:8090'


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

最后一步啟動后臺以及前端。
最后欣賞最終效果圖:


最終效果:

喜歡的朋友點個贊，收藏一下叭?

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容