Mock.js 和Node.js详细讲解

​​​​原文地址:http://www.manongjc.com/article/10503.html

《一统江湖的大前端》系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新。如果你对前端的理解还是写写页面绑绑事件,那你真的是有点OUT了,前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ,什么火就搞什么,活脱脱一个蹭热点小能手。如果你也觉得前端的日常开发有些枯燥,不妨一起来看看前端的另一番模样。

为什么你总是下不了班

大部分工程化的项目为方便维护,大多都会采用前后端分离的开发方式,而前端和后端的工作基本也是同时下发的,这时前端开发人员就会很尴尬,后端在干活的时候,领导几乎一定会让你先做个静态页面看看,这时候你和后端之间可能只是约定了接口(当然也可能连接口都没约定,那我只能祝你幸福了),并没有数据的传输,没法直接拿到填充网页的数据,如果一次将前端代码写到位,那么打开网页时轻则页面提示没有获取到数据,重则直接报错退出脚本。

而真正的问题在于静态页面做起来是非常快的,以至于你的领导会认为当你把静态页面中加入javascript的逻辑部分的代码后也应该非常快,而实际上逻辑部分的代码量和联调的工作量几乎是写一个静态页面的5-10倍
基本上前端的一个需求的开发至少需要经历静态页面——>业务逻辑+静态数据——>业务逻辑+http请求及数据处理这几种不同形态才能交工,那么真实的时间轴变成了这样:

角色阶段1阶段2阶段3阶段4阶段5阶段6
后端写后台代码写后台代码回家睡觉回家睡觉或忙其他事修改前端提交的bug重复4-5直到能上线
前端写静态页面漫无目的改样式写前端逻辑边开发前端边测试接口漫无目的改样式重复4-5直到能上线

无论从哪个方面看,前端都是一个打杂的活,无论从哪个角度看,前端也都是一个小弟脸,下不了班好像也是应该的。

Node.js

Node火起来的时候,前端就流行这样一句话:不会Node.js的前端,是不完整的,简单地说,Node.js将javascript能力扩展至服务端的关键一步,js也是从此开始了自己无孔不入的风骚操作,网上关于如何使用Node.js搭起一个本地服务器数不胜数,本篇中使用express框架来快速搭建Mock服务器。

Mock.js

Mock.js(github仓库地址)是一个生成Mock数据(也就是虚拟数据)js库,语法简单明了却非常好用,支持前端和服务端两种环境引用,感兴趣的读者可以点击上面链接进行学习,官方Wiki提供了全套文档,最多1小时就可以上手。

工作方式优势劣势
客户端操作方便,纯前端本地即可实现1.不易进行接口管理 2.协作人员无法获得Mock数据
服务端1.前端代码几乎不需改动 2.其他人员可访问获得Mock数据需要搭建Mock服务器,相较前者稍复杂

简单浏览一下其使用方式:

 

前端的任务到底是什么

前端开发的本质,是数据的采集和数据的呈现,即把用户提交的数据准确安全地发送给服务器,把服务器传递的数据按照设计图展示在界面上,无论是否界面是否经过CSS的美化,是否经过交互设计的易用性优化,最本质的东西是一样的。
换句话说,你需要做到的是后端给的数据正确时,确保将其按设计稿展示出来,后端给的数据不正确时,给出提示并尽可能不要让脚本报错退出。

使用Nodejs和Mockjs搞事情

建议的做法是:使用node.js框架express快速搭建服务器,与后端人员约定好接口后,使用Mock.js在服务端生成各类型虚拟数据,前端开发人员直接对接Mock服务器

你应该做的,是一次性将前端代码写到位并能够快速定位联调异常,然后回家睡觉,而不是漫无目的劳作和等待跟其他人互相扯皮。

1.安装node.js

 

附件中包含: nodeV8.9.4版本windows安装包

2.安装其他依赖包

  • yarn(替代npm的包管理工具): npm install yarn(可选)
  • express (express框架): npm install express -g
  • express-generator (express项目生成插件): npm install express-generator -g
  • mockjs(模拟数据生成库): npm install mockjs

若安装速度较慢,可切换npm源为cnpm或使用Yarn进行包管理

3.生成新的express项目并编写服务端

本篇力求简单粗暴,只讲使用不讲express目录结构,感兴趣的同学可自行研究

♬ 3.1 在指定路径下打开命令行,输入express mockserver,即可生成名为mockserver的项目

♬ 3.2 打开app.js文件,在 var app = express() 之后加入如下代码,屏蔽跨域:

 

♬ 3.3 仿照users.js文件的格式及其在app.js文件中的路由挂载方式(任何一个熟练地代码搬运工肯定看得懂),引入mockjs,生成需要的随机数据,当接收到前端发送的请求时,返回生成的数据:

 

浏览器访问可在控制台打出返回数据:

♬ 3.4 在mockserver项目目录下打开命令行工具,输入npm start,待服务启动后,打开前端页面即可看到服务器返回的模拟数据。

♬ 3.5 开启其他人员的访问能力,其实就是在本地搭建一个服务器。

实现方式1——通过express工程来实现node服务器

将前端代码拷贝至express项目目录中public文件夹(本例中为/mockserver/public),打开命令行工具输入ipconfig查询本机IP,将127.0.0.1替换为本机IP,然后在浏览器直接访问即可打开网页。

实现方式2——传统Apache服务器

为方便管理,直接使用开源XAMPP集成环境,安装完成后一键开启apache服务器,并将前端代码拷贝至安装目录中htdoc文件夹中的子文件夹中,然后以方式1中类似的方式在浏览器中访问即可,由于服务端代码取消了跨域限制,故即使端口号不同,apache服务器中的网站仍然可以访问node服务器中的接口并拿到数据。

♬ 3.6 最后,项目是大家一起做的,不是你撇清责任就完事了的,为你所做的一切提供一个可参考访问的excel文档并把它发给与你合作开发的后端是有礼貌的做法.

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249229.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

架构图

负载均衡 分布式 转载于:https://www.cnblogs.com/jiqing9006/p/10672280.html

网络操作系统P12页答案

1.什么是网络操作系统?网络操作系统具有哪些基本功能?网络操作系统:专门为网络用户提供操作接口的系统软件,除了管理计算机的软件和硬件资源具备单机操作系统,并且为网络用户提供各种网络服务。当然网络操作系统不仅要…

如何将存储在MongoDB数据库中的数据导出到Excel中?

将MongoDB数据库中的数据导出到Excel中,只需以下几个步骤: (1)首先,打开MongoDB安装目录下的bin文件夹,(C:\Program Files (x86)\MongoDB\Server\3.2\bin);此处视个人安装…

vue 项目初始化时,npm run dev报错解决方法

错误如下: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! travel1.0.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the travel1.0.0 dev script. npm ERR…

JDK源码分析

https://www.jianshu.com/p/f1f1f14e7fbe

VSCode 初次写vue项目并一键生成.vue模版

1.安装vscode 官网地址:https://code.visualstudio.com/2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装,安装完成之后点击重新加载微信图片_20180723174649.png 3.新建代码片段 文件-->…

文本聊天室(TCP-中)

开始我们今天的代码实现,我们接着上一回,上回实现了服务器的代码这次实现客户端的UI(界面)层, 我们界面层采用javafx来进行绘制,首先有个登录服务器的界面然后切换到聊天界面运行结果如下.源代码如下: 1 package jffx.blogs.net;2 3 import javafx.appli…

Oracle 查询库中所有表名、字段名、字段名说明,查询表的数据条数、表名、中文表名...

查询所有表名:select t.table_name from user_tables t;查询所有字段名:select t.column_name from user_col_comments t;查询指定表的所有字段名:select t.column_name from user_col_comments t where t.table_name BIZ_DICT_XB;查询指定表…

lucene原理

https://www.jianshu.com/p/0cfe042412a2

电商网站前端架构 学习笔记(全是干货)

1:前端架构的基本知识 1: 前端工程师必须会的一些技能 前端工程师基本技能图.PNG 2: 前端架构基本知识 什么是前端架构? 每个人对每个架构有不同的认识和一些想法。没有一个架构是完美的,只有一个架构是不是适合你的。哪个个架构符合你的需求的时候&#xff0c…

爱好-摩托车:铃木

ylbtech-爱好-摩托车:铃木1.返回顶部 2.返回顶部3.返回顶部4.返回顶部5.返回顶部 1、http://www.suzuki-china.com/motor/2、6.返回顶部作者:ylbtech出处:http://ylbtech.cnblogs.com/本文版权归作者和博客园共有,欢迎转载&#x…

Unable to preventDefault inside passive event listener

转自:https://segmentfault.com/a/1190000008512184 测试: body {margin: 0;height: 2000px;background: linear-gradient(to bottom, red, green); }// 在 chrome56 中,照样滚动,而且控制台会有提示,blablabla window…

thymeleaf 中文文档

https://raledong.gitbooks.io/using-thymeleaf/content/

vue面试题,知识点汇总(有答案)

一. Vue核心小知识点 1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于…

EF中Take和Skip的区别

以例子来说明: 数据库中Orders表如下: 代码部分: 运行结果: 可以看出:Take()方法的作用是从查询结果中提取前n个结果;而Skip()方法则是跳过前n个结果,返回剩余的结果。转载于:https://www.cnblo…

最短路径次短路径算法

容易理解:https://blog.csdn.net/m0_37345402/article/details/76695930 https://blog.csdn.net/qq_36386435/article/details/77403223 https://blog.csdn.net/u011815404/article/details/80441443转载于:https://www.cnblogs.com/genggeng/p/9810316.html

springmvc 中文文档

https://www.w3cschool.cn/spring_mvc_documentation_linesh_translation/spring_mvc_documentation_linesh_translation-9ivd27r4.html

详解Vuex常见问题、深入理解Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的…

Gym 101982 (2018-2019 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) )

传送门&#xff1a; Problem A 温暖的签到题 #include<bits/stdc.h> using namespace std; const int maxn1007; char s1[maxn],s2[maxn]; int main(){ios::sync_with_stdio(false);cin.tie(0);int n,k,sum00,sum10;cin>>k>>s1>>s2;nstrlen(s1);for (i…

day02 while循环 运算符 格式化输出 编码

今日主要内容 while循环:判断条件是否成立。 如果成立执行循环体。然后再次判断条件&#xff0c;。。。。。直到条件不成立的时候跳出循环 语法&#xff1a; while 条件:   循环体 else:   当条件不成立的时候执行这里 和break没关系 break 终止当前循环 continue 停止当前…