如何用jsonserver模拟接口获取mock数据

在做这个解答时,我想说点别的东西。

前后端分离。

到底什么是前后端分离呢?网上有人说,前端是与浏览器打交道的,而后端是与服务器打交道的,这么说是没错。通常我们都会认为前端只要掌握html、css、js(前后端通吃),而如今随着(pad/mobile/pad)的兴起,前端后开发人员的职责分得越来越明显,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本。前端负责展现、交互,后端负责、数据接口

传统的前端开发协作模式有两种

一种是前端先写一个静态页面,写好后,让后端去套模板。静态页面可以本地开发,也无需考虑业务逻辑只需要实现View即可。不足是还需要后端套模板,这些前端代码后端需要浏览一遍,以免出错。

另一种协作模式是,前端直接去写模板,这样做的问题在于,前端编写过程中很依赖与后端环境,如果当后端没写完的情况下,前端几乎没法干活。

典型的例子是淘宝团队中途岛(Midway Framework)和SPA

关于SPA,我简单的理解为单页面应用,就是在程序内不发生任何跳转至任何页面,通过ajax或者是路由来实现在一个页面跳转,典型的框架是vue、angularJS、reactive。SPA式的前端分离,是从物理层区分,认为客户端就是前端、服务端就是后端。当然也有些人前端后分离从开发职责上前端负责负责View和Controller层,而后端负责Model层

关于数据mock,前端开发时,经常需要后台提供数据才能看到效果,所以在vue中通过jsonServer在模拟一个api,提供假的数据方便于前端测试  jsonserver地址

我在跟着视频动手做vue项目时,着实遇到一个关于jsonServer的大坑。

1、安装jsonServer   cnpm install jsonserver --save

2、在vue项目的build文件下的dev-server.js里面var app = express()配置

github上面关于jsonServer的代码

3、配置db.json

和build放在同一一级目录下

4、查看db.json,这个步骤不必要配置dev-server.js,只要安装jsonServer即可

通过http://localhost:3000访问

5、下面配置index.js文件,使用代理访问到数据mocks(之前就是没配置这个,卡在那里好久)

6、测试

8080端口访问到的内容


8081访问到内容

两个端口访问的内容是一样的,即代理成功

在代码里发起一个get请求

成功访问

json-server模拟接口获取mock数据

前后端分离的思考与实践(一)

浅谈WEB前后端分离

前端:将网站打造成单页面应用SPA(一)

这一关总算过去了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,784评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,745评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,702评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,229评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,245评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,376评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,798评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,471评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,655评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,485评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,535评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,235评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,793评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,863评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,096评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,654评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,233评论 2 341

推荐阅读更多精彩内容

  • 上班第三天,我才看清老板的真面目 文/小蝴蝶 “我把工作辞掉了,上了三天班就没有去了!” ...
    小蝴蝶丫阅读 3,216评论 6 3
  • 普京的保镖有多厉害? 特约主笔:铁血君 一国总统看似风光无限,但也是危险重重,时刻要小心恐怖分子的刺杀,就连一向以...
    夕阳在山阅读 288评论 0 1
  • 大学毕业后的你过得怎么样? 毕业多久了? 现在的生活状态是怎么样的 毕业后有没有让你感觉特别艰难的时刻 你希望两年...
    倚梦喂马阅读 170评论 0 0
  • “先生,‘怪哉’这虫,是怎么一回事?……”我上了生书,将要退下来的时候,赶忙问。 “不知道!”他似乎很...
    深吉月阅读 255评论 0 2