本文摘自PHP中文网,作者青灯夜游,侵删。
下面Vue.js教程栏目给大家介绍一下使用vue-cli结合express获取mongodb里数据的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。最近一直在看node有关的内容,空闲时间做了一个小小的爬虫,用于爬取电影天堂的数据然后写到mongodb里面,代码地址:https://github.com/fangming666/dianyingtiantang/blob/master/nodeServer/index.js
然后获取的mongodb数据如下:
我们只需要得到data里面的数据就可以了。那么,我们怎么去得到呢,我的想法是,在vue-cli里面使用node的express,然后再执行查询数据库的操作即可,经过我的探索,这条路是可以的;
首先,我们需要安装mongodb和express:
1 |
|
然后我需要在webpack.dev.confis.js里面进行设置,文件路径如下:
好嘞,开始我们的代码征程:
一、配置express:
1 2 3 4 5 6 7 8 |
|
二、查询mongodb里面的数据:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
这里不懂语法的可以去看一下菜鸟教程的node这一块mongodb 的语法,不赘述,自行百度即可;
三、找到devServer,在里面添加:
1 2 3 4 5 6 7 8 |
|
这是写在devServer里面的,这是写在devServer里面的,这是写在devServer里面的,重要的事情说三遍。
四、重新执行cnpm run dev,在浏览器中输入:http://localhost:8080/api/giveData/即可:
我们使用的时候只需吧接口地址写成“http://localhost:8080/api/giveData/”就可以去访问数据了
相关推荐:
2020年前端vue面试题大汇总(附答案)
vue教程推荐:2020最新的5个vue.js视频教程精选
更多编程相关知识,请访问:编程课程!!
以上就是vue-cli+express获取mongodb数据的方法介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《vue-cli》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者