一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手
《一统江湖的大前端》系列是自己的前端学习笔记,旨在介绍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服务器,相较前者稍复杂 |
简单浏览一下其使用方式:
# 安装
npm install mockjs
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素,每个元素均包含id,name,description属性
'list|1-10': [{
'id|+1': 1,// 属性 id 是一个自增数,起始值为 1,每次增 1
'name': '@cname',//占位符语法,生成一个中文名称
'description|3-5':'@csentence',//占位符语法,生成3-5个中文句子
'area':'@province',//省份占位符,将随机生成省份名称
}]
})
// 输出结果
console.log(JSON.stringify(data))
前端的任务到底是什么
前端开发的本质,是数据的采集和数据的呈现,即把用户提交的数据准确安全地发送给服务器,把服务器传递的数据按照设计图展示在界面上,无论是否界面是否经过CSS的美化,是否经过交互设计的易用性优化,最本质的东西是一样的。
换句话说,你需要做到的是后端给的数据正确时,确保将其按设计稿展示出来,后端给的数据不正确时,给出提示并尽可能不要让脚本报错退出。
使用Nodejs和Mockjs搞事情
建议的做法是:使用node.js框架express快速搭建服务器,与后端人员约定好接口后,使用Mock.js在服务端生成各类型虚拟数据,前端开发人员直接对接Mock服务器
你应该做的,是一次性将前端代码写到位并能够快速定位联调异常,然后回家睡觉,而不是漫无目的劳作和等待跟其他人互相扯皮。
1.安装node.js
+ 安装后打开cmd命令行,输入`node -v`, 若正确显示版本号则安装成功。
附件中包含: 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() 之后加入如下代码,屏蔽跨域:
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
next();
});
♬ 3.3 仿照users.js
文件的格式及其在app.js
文件中的路由挂载方式(任何一个熟练地代码搬运工肯定看得懂),引入mockjs
,生成需要的随机数据,当接收到前端发送的请求时,返回生成的数据:
//服务端响应代码片段/routes/operationboard.js:
//业务逻辑为查询系统告警信息列表
//node服务器启动后,请求地址为:127.0.0.1:3000/operationboard/systemwarn
//3000端口为express默认启动端口
var express = require('express');
var router = express.Router();
var Mock = require('mockjs');
var Random = Mock.Random;
router.get('/systemwarn', function (req, res, next) {
var data =Mock.mock({
'list|20':[{
'id|+1':1,
'serial_number|1-100':1,
'warn_number|1-100':1,
'warn_name|1':['流水线编排服务异常','磁盘占用超过阈值'],
'warn_level|1':['紧急','重要'],
'warn_detail':'环境IP:10.114.123.12,服务名称:XX',
'create_time':Random.datetime(),
'finish_time':Random.datetime(),
'contact|4':'abc'
}]
});
res.send({
meta : {
message: 'success'
},
status:true,
data: data.list
})
})
module.exports = router;
浏览器访问可在控制台打出返回数据:
♬ 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文档
并把它发给与你合作开发的后端是有礼貌的做法。
一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手的更多相关文章
- 一统江湖的大前端(4)shell.js——穿上马甲我照样认识你
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 一统江湖的大前端(6)commander.js + inquirer.js——懒,才是第一生产力
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 一统江湖的大前端(10)——inversify.js控制反转
<大史住在大前端>前端技术博文集可在下列地址访问: [github总基地][博客园][华为云社区][掘金] 字节跳动幸福里大前端团队邀请各路高手前来玩耍,团队和谐有爱,技术硬核,字节范儿正 ...
- 一统江湖的大前端(8)- velocity.js 运动的姿势(上)
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- 一统江湖的大前端(1)——PPT制作库impress.js
<一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...
- 【一统江湖的大前端(8)】matter.js 经典物理
目录 [一统江湖的大前端(8)]matter.js 经典物理 一.经典力学回顾 二. 仿真的实现原理 2.1 基本动力学模拟 2.2 碰撞模拟 三. 物理引擎matter.js 3.1 <愤怒的 ...
- 一统江湖的大前端(3) DOClever——你的postman有点low
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 一统江湖的大前端(5)editorconfig + eslint——你的代码里藏着你的优雅
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 一统江湖的大前端(7)React.js-从开发者到工程师
目录 一. 前端打怪升级指南 1.1 我应该从哪个框架开始学? 1.2 一次转职 1.3 二次转职 1.4 转职-其他 二. 为什么你应该学习React 2.1 技术栈的延伸 2.2 组件化开发 2. ...
随机推荐
- 各个模块的刷新js
// 更新页面中的subgrid function refreshSubGrid(subgridName) { Xrm.Page.ui.controls.get(subgridName).refres ...
- imagecreatefrombmp、imagebmp php处理bmp文件
/*格式组成典型的BMP图像文件由四部分组成: 1:位图头文件数据结构,它包含BMP图像文件的类型.显示内容等信息: 2:位图信息数据结构,它包含有BMP图像的宽.高.压缩方法,以及定义颜色等信息: ...
- 微信小程序中的AJAX——POST,GET区别
注意:发送服务器时的DATA 最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String .转换规则如下: 对于 GET 方法的数据,会将数 ...
- javascript---split 和 join 的区别
//相同点 : split 和 join 都是对字符或字符串进行操作的 //split(切割字符串) : 把字符串根据切割符切割,返回数组 //第一个参数 分隔符 //第二个参数 返回数组中元素的个数 ...
- Fragment中TabLayout加FragmentViewPager
让tablayout中的Tab平铺:在tablayout布局中写: app:tabMaxWidth="0dp"app:tabGravity="fill"app: ...
- HTTPS 原理浅析及其在 Android 中的使用
作者:曹丰斌 本文首先分析HTTP协议在安全性上的不足,进而阐述HTTPS实现安全通信的关键技术点和原理.然后通过抓包分析HTTPS协议的握手以及通信过程.最后总结一下自己在开发过程中遇到的HTT ...
- monkey 命令详解
monkey命令详解 1. $ adb shell monkey <event-count> <event-count>是随机发送事件数 例 ...
- FFmpeg 结构体学习(八):FFMPEG中重要结构体之间的关系
FFMPEG中结构体很多.最关键的结构体可以分成以下几类: 解协议(http,rtsp,rtmp,mms) AVIOContext,URLProtocol,URLContext主要存储视音频使用的协议 ...
- JDK 8 之 Stream sorted() 示例
原文链接:http://www.concretepage.com/java/jdk-8/java-8-stream-sorted-example 国外对Java8一系列总结的不错, 翻译过来给大家共享 ...
- [Swift]LeetCode247.对称数 II $ Strobogrammatic Number II
A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...