在将搭建服务器与mock数据之前,我们先大致讲一下关于网站的开发流程。
由上图可以看出,一个项目下来后,主要涉及到前端部分与后端部分。但是项目的进行,需要前后端同步工作,所以在项目开始前,前后端需要约定好几个事项:
1、项目需要几个接口
2、接口的url格式
3、后端传回的数据格式
在一个正常的网站下,接口是后端开发的,但是约定好参数和返回的数据后,尽管接口还没有成型,前端开发也不会受限于后端了。前端可以通过搭建本地接口或线上接口模拟数据(模拟数据格式与后端协商好的格式一致),然后向接口(按约定参数)发请求。
mock数据后,就相当于我向假地址发请求,假地址将假数据发给我,这个假数据就可以用了。那开发过程中,就可以使用假地址、假数据完善整个页面功能。
等到后端的功能开发完毕后,再将假数据的地址替换成真数据的地址。如果替换后没有问题就上线,有问题则继续修改。
ヾ(Ő∀Ő๑)ノ我是分界线ヾ(Ő∀Ő๑)ノ是分界线ヾ(Ő∀Ő๑)ノ分界线
现在,终于说到我们今天的主题了,即搭建一个服务器去模拟数据。
下面介绍几种搭建服务器mock数据的方法:
1、http-server
Http-server是基于nodejs的http服务器。
Http-server最大好处就是:可以使任意一个目录成为服务器的目录,完全抛开后台的沉重工程,直接运行想要的js代码。
- http-server搭建静态服务器的使用方式:
(1)为了运行http-server,首先要安装nodejs。
(2)使用npm(Node.js的包管理工具)安装http-server,但npm已经在Node.js安装的时候顺带装好了。
(3)在任意目录运行http-server。
启动一个以该目录为根的服务器
(4)ctrl+c退出服务器
2、githubpages
Github Pages是Github免费提供给开发者的一款托管个人网站的产品,一般用于线上预览项目。
如何使用github搭建静态服务器并mock数据,可以看我之前写过的文章,这里不过多说明。
附上链接:使用github搭建静态服务器并mock数据
3、使用线上平台mock数据
使用 http://easy-mock.com/模拟接口mock数据
关于easymock的详细使用方法
4、手写一个服务器
使用nodejs手写一个静态服务器,我们下篇文章重点讲解。
解决node.js - Http-Server Command Not Found After Install in NPM
https://www.cnblogs.com/now-future/articles/8334972.html
https://blog.csdn.net/qq_37928350/article/details/81166873