Heim > Web-Frontend > View.js > Hauptteil

Einführung in die Methode zum Abrufen von Mongodb-Daten mit vue-cli+express

青灯夜游
Freigeben: 2020-11-06 17:41:13
nach vorne
1871 Leute haben es durchsucht

In der folgenden Spalte „Vue.js-Tutorial“ erfahren Sie, wie Sie vue-cli in Kombination mit Express verwenden, um Daten in Mongodb abzurufen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Einführung in die Methode zum Abrufen von Mongodb-Daten mit vue-cli+expressVor kurzem habe ich in meiner Freizeit einen kleinen Crawler erstellt, um die Daten von Movie Paradise zu crawlen und in die Mongodb-Codeadresse zu schreiben. fangming666 /dianyingtiantang/blob/master/nodeServer/index.js

Dann lauten die erhaltenen Mongodb-Daten wie folgt:

Wir müssen nur die Daten in Daten abrufen. Wie bekommen wir es? Meine Idee ist, Node's Express in Vue-Cli zu verwenden und dann die Datenbankabfrage durchzuführen.

Zunächst müssen wir mongodb installieren und express:

cnpm install mongodb express --save-dev
Nach dem Login kopieren

Dann muss ich es in webpack.dev.confis.js einrichten. Der Dateipfad lautet wie folgt:

Okay, beginnen wir unsere Code-Reise:

1. Express konfigurieren:

//配置express服务器
let express = require("express");
let apiServer = express();
let bodyParser = require("body-parser");
apiServer.use(bodyParser.urlencoded({extended: true}));
apiServer.use(bodyParser.json());
let apiRouter = express.Router(); //配置路由
apiServer.use("/api", apiRouter);
Nach dem Login kopieren

Zweitens fragen Sie die Daten in Mongodb ab:

let MongoClient = require('mongodb').MongoClient;
let DB_CONN_STR = 'mongodb://localhost:27017/test';
let dataS = {};
let movie = () => {
  let selectData = function (db, callback) {
    //连接数据库
    let dbS = db.db("test");
    //连接到表
    let collection = dbS.collection('dytt');
    collection.find({}).toArray(function (err, result) {
      if (err) {
        console.log('Error:' + err);
        return;
      }
      callback(result);
    });
  };
  MongoClient.connect(DB_CONN_STR, function (err, db) {
    console.log("连接成功!");
    selectData(db, function (result) {
      db.close();
      console.log(result[0]);
      dataS = result[0];
    });
  });
  return dataS;
};
Nach dem Login kopieren

Wenn Sie die Grammatik hier nicht verstehen, können Sie sich die Mongodb-Syntax von Node im Tutorial für Anfänger ansehen, ohne auf Details einzugehen.

Drei,

  before(app){
      app.get("/api/giveData", (req, res) => {
        res.json({
          errno: 0,
          data: movie().data
        })
      });
    }
Nach dem Login kopieren
找到devServer,在里面添加:Das ist, was in devServer geschrieben ist, das ist in devServer geschrieben, das ist in devServer geschrieben, wichtige Dinge sollten dreimal gesagt werden.

4. Führen Sie cnpm run dev erneut aus und geben Sie im Browser http://localhost:8080/api/giveData/ ein:

Wenn wir es verwenden, müssen wir nur die Schnittstellenadresse als „http“ schreiben :/ /localhost:8080/api/giveData/" Sie können auf die Daten zugreifen Eine Auswahl an vue.js-Video-Tutorials

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmierkurse
! !

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Abrufen von Mongodb-Daten mit vue-cli+express. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage