详解vue-cli项目中用json-sever搭建mock服务器


Posted in Javascript onNovember 02, 2017

vue-cli下配置json-server

使用json-server实现后台数据接口

先建一个json文件:db.json 放在build/下

详解vue-cli项目中用json-sever搭建mock服务器

在build/dev-server.js中配置 (注意变量命名)

github说明:

详解vue-cli项目中用json-sever搭建mock服务器

详解vue-cli项目中用json-sever搭建mock服务器

启动项目 地址栏输入 localhost:8081

详解vue-cli项目中用json-sever搭建mock服务器

服务已启动成功 8081后加相应后缀即可访问数据

localhost:8081/posts

l详解vue-cli项目中用json-sever搭建mock服务器

localhost:8081/comments

详解vue-cli项目中用json-sever搭建mock服务器

最后做一下浏览器代理 设置config/index.jsr如下

详解vue-cli项目中用json-sever搭建mock服务器

最后验证一下

详解vue-cli项目中用json-sever搭建mock服务器

完结撒花=-=

全局安装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"

详解vue-cli项目中用json-sever搭建mock服务器

我这里只写了一个,其实一个两个都可以,写两个直接可以两条命令一起执行

如果执行npm run mockdev 时一直处于监听db.json的状态,建议使用两条命令分开在两个命令行中执行,可避免

详解vue-cli项目中用json-sever搭建mock服务器

在config/index.js中设置代理:

主要是为了将请求映射到http://localhost:3000

详解vue-cli项目中用json-sever搭建mock服务器 

注意:如果此时你的服务已经开了(已经npm run dev 了),需重新启动服务

在设置代理之前,可以先进行测试,看是否可以启动mock服务器

运行npm run mock 之后访问http://localhost:3000 ,页面中存在json对象并可访问即可、

详解vue-cli项目中用json-sever搭建mock服务器

页面中可采用axios进行数据的请求

,例:

详解vue-cli项目中用json-sever搭建mock服务器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 #Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 #Javascript
JavaScript登录验证基础教程
Nov 01 #Javascript
vue打包后显示空白正确处理方法
Nov 01 #Javascript
js实现登录与注册界面
Nov 01 #Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 #Javascript
五步轻松实现zTree的使用
Nov 01 #Javascript
You might like
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
教你安装python Django(图文)
2013/11/04 Python
Python随机读取文件实现实例
2017/05/25 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
Python3生成手写体数字方法
2018/01/30 Python
python实现趣味图片字符化
2019/04/30 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
linux面试题参考答案(10)
2013/11/04 面试题
几个MySql的面试题
2013/04/22 面试题
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
教师竞聘上岗演讲稿
2014/09/03 职场文书
大一新生检讨书
2014/10/29 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android