ホームページ >ウェブフロントエンド >Vue.js >vue-cli+expressでmongodbのデータを取得する方法の紹介
次の Vue.js チュートリアル 列では、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 を見つけて次を追加します:
これは何ですかは devServer で書かれています、これは devServer で書かれています、これは devServer で書かれています、重要なことは 3 回言う必要があります。
4. cnpm run dev を再実行し、ブラウザに http://localhost:8080/api/giveData/ と入力します。これを使用すると、データにアクセスするにはインターフェイス アドレスを「http://localhost:8080/api/giveData/」として記述するだけです
#関連する推奨事項:
#2020 年のフロントエンド vue インタビューの質問の概要 (回答付き)
プログラミング コース
vue チュートリアルの推奨事項: 2020 年最新の 5 つの vue.js ビデオ チュートリアルのセレクション
以上がvue-cli+expressでmongodbのデータを取得する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。