网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

vue-cli+express如何获取mongodb数据-创新互联

这篇文章将为大家详细讲解有关vue-cli+express如何获取mongodb数据,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联服务项目包括印台网站建设、印台网站制作、印台网页制作以及印台网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,印台网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到印台省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

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

然后获取的mongodb数据如下:

vue-cli+express如何获取mongodb数据

我们只需要得到data里面的数据就可以了。那么,我们怎么去得到呢,我的想法是,在vue-cli里面使用node的express,然后再执行查询数据库的操作即可,经过我的探索,这条路是可以的;

首先,我们需要安装mongodb和express:

cnpm install mongodb express --save-dev

然后我需要在webpack.dev.confis.js里面进行设置,文件路径如下:

vue-cli+express如何获取mongodb数据

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

一、配置express:

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

二、查询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 的语法,不赘述,自行百度即可;

三、找到devServer,在里面添加:

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

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

四、重新执行cnpm run dev,在浏览器中输入:http://localhost:8080/api/giveData/即可:

vue-cli+express如何获取mongodb数据

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

关于“vue-cli+express如何获取mongodb数据”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站名称:vue-cli+express如何获取mongodb数据-创新互联
标题链接:http://bjjierui.cn/article/dcsesj.html

其他资讯