使用vue-cli结合express获取mongodb里面的数据

最近一直在看node有关的内容,空闲时间作了一个小小的爬虫,用于爬取电影天堂的数据而后写到mongodb里面,代码地址:https://github.com/fangming666/dianyingtiantang/blob/master/nodeServer/index.jshtml

而后获取的mongodb数据以下:vue

咱们只须要获得data里面的数据就能够了。那么,咱们怎么去获得呢,个人想法是,在vue-cli里面使用node的express,而后再执行查询数据库的操做便可,通过个人探索,这条路是能够的;node

首先,咱们须要安装mongodb和express:webpack

cnpm install mongodb express --save-dev

 而后我须要在webpack.dev.confis.js里面进行设置,文件路径以下:git

好嘞,开始咱们的代码征程:github

1、配置express:web

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

2、查询mongodb里面的数据:mongodb

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

  这里不懂语法的能够去看一下菜鸟教程的node这一块mongodb 的语法,不赘述,自行百度便可;vue-cli

3、找到devServer,在里面添加:数据库

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

 这是写在devServer里面的,这是写在devServer里面的,这是写在devServer里面的,重要的事情说三遍。

4、从新执行cnpm run dev,在浏览器中输入:http://localhost:8080/api/giveData/便可:

咱们使用的时候只需吧接口地址写成“http://localhost:8080/api/giveData/”就能够去访问数据了

相关文章
相关标签/搜索