在做这个解答时,我想说点别的东西。
前后端分离。
到底什么是前后端分离呢?网上有人说,前端是与浏览器打交道的,而后端是与服务器打交道的,这么说是没错。通常我们都会认为前端只要掌握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()配置
3、配置db.json
4、查看db.json,这个步骤不必要配置dev-server.js,只要安装jsonServer即可
通过http://localhost:3000访问
5、下面配置index.js文件,使用代理访问到数据mocks(之前就是没配置这个,卡在那里好久)
6、测试
两个端口访问的内容是一样的,即代理成功
在代码里发起一个get请求
这一关总算过去了