怎么在Vue中利用json-server模拟后端数据-创新互联
这篇文章将为大家详细讲解有关怎么在Vue中利用json-server模拟后端数据,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
专注于为中小企业提供做网站、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业雨花免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。首先必须有node环境(都用到json-server一定会有node环境吧)然后全局安装json-server
npm install json-server -g
安装完成后检查是否全局安装成功
G:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project>json-server -h index.js [options]
在项目根目录创建一个db.json的目录,然后写入信息
{ "api": [ { "text": "数据统计", "link": "#", "hot": true }, { "text": "数据检测", "link": "#", "hot": true }, { "text": "流量分析", "link": "#", "hot": true }, { "text": "广告发布", "link": "#", "hot": false } ] }
在package.json里面的scripts里面加一行命令
"json": "json-server db.json --port 3003"
在项目目录执行命令
npm run json
在bash里面会看到这样的界面
> vue@1.0.0 json g:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project > json-server db.json --port 3003 \{^_^}/ hi! Loading db.json Done Resources http://localhost:3003/api Home http://localhost:3003 Type s + enter at any time to create a snapshot of the database
恭喜启动成功!
这时候进入网页进行访问
这时候就可以进行访问了
http://localhost:3003/api
可以看到之前写的json串
到此json-server启动完毕
调用的代码是这样的
this.$http.get('http://localhost:3003/api') .then((data) => { console.log(data.body) }, () => { console.log('这里是用了vue-source,后端没有接口') })
关于怎么在Vue中利用json-server模拟后端数据就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文标题:怎么在Vue中利用json-server模拟后端数据-创新互联
网页网址:http://myzitong.com/article/spggd.html