详解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 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
javascript this用法小结
Dec 19 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
react+antd 递归实现树状目录操作
Nov 02 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静态文件生成类实例分析
2015/01/03 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
php 数组元素快速去重
2017/05/05 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
javascript如何写热点图
2015/12/08 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Python类的继承super相关原理解析
2020/10/22 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
学生周末长期请假条
2014/02/15 职场文书
家长高考寄语
2015/02/27 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js