详解vue-cli项目中用json-sever搭建mock服务器
vue-cli下配置json-server
使用json-server实现后台数据接口
先建一个json文件：db.json 放在build/下
在build/dev-server.js中配置 （注意变量命名）
github说明：
启动项目 地址栏输入 localhost:8081
服务已启动成功 8081后加相应后缀即可访问数据
localhost:8081/posts
l
localhost:8081/comments
最后做一下浏览器代理 设置config/index.jsr如下
最后验证一下
完结撒花=-=
全局安装json-server
npm install json-server -g
在项目目录下创建mock文件夹,并在文件夹下创建db.json文件
{
"slides": [{
"src": "/static/img/right1.png",
"title": "xxx1",
"href": "#"
}, {
"src": "/static/img/right2.png",
"title": "xxx2",
"href": "#"
}, {
"src": "/static/img/right3.png",
"title": "xxx2",
"href": "#"
}, {
"src": "/static/img/right4.png",
"title": "xxx2",
"href": "#"
}],
"list": [{
"id": 1,
"url": "#",
"title": "文艺"
}, {
"id": 2,
"url": "#",
"title": "经管"
}, {
"id": 3,
"url": "#",
"title": "社科"
}]
}
文件格式如下:
找到package.json文件夹,写入两个命令:
"mock": "json-server --watch mock/db.json", "mockdev": "npm run mock & npm run dev"
我这里只写了一个,其实一个两个都可以,写两个直接可以两条命令一起执行
如果执行npm run mockdev 时一直处于监听db.json的状态,建议使用两条命令分开在两个命令行中执行,可避免
在config/index.js中设置代理:
主要是为了将请求映射到http://localhost:3000
注意:如果此时你的服务已经开了(已经npm run dev 了),需重新启动服务
在设置代理之前,可以先进行测试,看是否可以启动mock服务器
运行npm run mock 之后访问http://localhost:3000 ,页面中存在json对象并可访问即可、
页面中可采用axios进行数据的请求
,例:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了详解如何在vue中使用sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
关于Element-UI Table 表格指定列添加点击事件
这篇文章主要介绍了关于Element-UI Table 表格指定列添加点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了nuxt 自定义 auth 中间件实现令牌的持久化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue2结合echarts实现一个地图的效果,本文通过实例代码给大家介绍的非常详细,对大家何用vue和echarts实现一个地图有一定的帮助,感兴趣的朋友一起看看吧2024-03-03
Vue实现Hover功能(mouseover与mouseenter的区别及说明)
这篇文章主要介绍了Vue实现Hover功能(mouseover与mouseenter的区别及说明)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家介绍了vue阻止重复请求实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
在众多测试框架中,Jest 因其易用性、强大功能以及与 Vue.js 的良好兼容性,成为了许多开发者的首选,本文将详细介绍如何在 Vue.js 项目中使用 Jest 进行单元测试,需要的可以参考下2024-11-11
这篇文章主要为大家详细介绍了vue实现文件上传和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
Vue.js中的插槽（slot）是一种机制，允许你在组件的模板中预留一些位置，以便父组件可以将任意内容插入到这些位置，这使得组件更加灵活和可复用，本文主要介绍了vue中slot插槽的参数汇总及使用方案,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue项目打包后请求地址错误/打包后跨域操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论