vue-cli+expressでmongodbのデータを取得する方法の紹介-Vue.js-php.cn

vue-cli+expressでmongodbのデータを取得する方法の紹介

青灯夜游

リリース： 2020-11-06 17:41:13

転載

1721 人が閲覧しました

次の Vue.js チュートリアル列では、vue-cli と Express を組み合わせて mongodb のデータを取得する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

vue-cli+expressでmongodbのデータを取得する方法の紹介

最近ノードについて読んでいて、暇なときにムービーパラダイスのデータをクロールして mongodb に書き込む小さなクローラーを作りました。コードアドレス: https: //github.com/fangming666/dianyingtiantang/blob/master/nodeServer/index.js

そして、取得された mongodb データは次のとおりです:

データ内のデータを取得するだけで済みます。では、どうやってそれを取得するのでしょうか? 私のアイデアは、vue-cli でノードの Express を使用し、データベースにクエリを実行することです。調べた結果、この方法は可能です。

まず、mongodb と Express をインストールする必要があります:

cnpm install mongodb express --save-dev

ログイン後にコピー

次に、webpack.dev.confis.js で設定する必要があります。ファイルパスは次のとおりです:

さて、始めましょう私たちのコードの旅:

//配置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);

ログイン後にコピー

1. Express の設定:

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

ログイン後にコピー

2. mongodb でデータのクエリ:

  before(app){
      app.get("/api/giveData", (req, res) => {
        res.json({
          errno: 0,
          data: movie().data
        })
      });
    }

ログイン後にコピー

構文がわからない人は、ここに進んでください。新人チュートリアルのノードの mongodb 構文を見てください。詳細には触れずに、Baidu 自身で調べてください。

3. devServer を見つけて次を追加します:

rrreee

これは何ですかは devServer で書かれています、これは devServer で書かれています、これは devServer で書かれています、重要なことは 3 回言う必要があります。

4. cnpm run dev を再実行し、ブラウザに http://localhost:8080/api/giveData/ と入力します。これを使用すると、データにアクセスするにはインターフェイスアドレスを「http://localhost:8080/api/giveData/」として記述するだけです

#関連する推奨事項: