前端开发的过程中,我们免不了和后端进行联调,这时候就会出现以下的尴尬场景:

  1. 接口没写好,没法做接下来的功能
  2. 功能写好了,接口没写好,没法测这个功能
  3. 联调了,出了BUG,不知道锅在谁身上,只得陪后端耗时间

要解决这个问题,可以使用功能强大的mockjs,它能拦截AJAX请求并返回规定好的假数据。但是这需要学习mockjs的语法,且由于我之前不知道这个强大的东西的存在,只好自己摸索出了一种让前端开发不再依赖于后端的方法:

需要的工具:jQuery, tomcat(http-server也可以,但要注意http-server请求本地数据时不能用post方法,只能get), webstorm(可选)

这个方法的关键在于,jQuery的ajax函数可以请求本地的json数据,于是我们可以这么做。

var whatMode = 'dev' // 指明使用开发模式还是生产模式的变量,可选值'dev'/'prod'

// obj对象有以下属性fake, url, succ, fail,在下方调用makeAction函数时会说明各个参数。实际的ajax请求还包括许多附加参数,比如type, data,由于和此方法的核心无关,请大家视自己的实际情况进行改造。
var makeAction = function(obj) {
if (whatMode === 'dev') {
$.ajax({
url: obj.fake,
dataType: 'json',
success: function (data) {
obj.succ(data)
},
error: function() {
obj.fail()
}
})
} else if (whatMode === 'prod') {
$.ajax({
url: obj.url,
dataType: 'json',
success: function (data) {
obj.succ(data)
},
error: function() {
obj.fail()
}
})
}
} var option = {
fake: 'data.json', // 自己编的假数据的本地文件的路径地址
url: 'api', //接口
succ: function (result) { // success回调函数
console.log(result)
},
fail: function () { // error回调函数
console.log('请求失败')
}
} makeAction(option)

这样,当whatMode变量为'dev'时,就会自动去请求编好并存放在本地的假数据,为'prod'时,就会去请求接口的数据。这个whatMode变量,可以放在public.js中。如果是iframe嵌套的页面结构,也可以放在最上层的页面中,只要取top.whatMode就可以取到最上层窗口的变量值了,借助这种方法,就实现了不依赖后端写页面,只要在控制台的"network"中看自己的请求头中发送的参数是否正确,并验证自己返回的自己所编写的假数据符合不符合预期功能就好了。

以上,就是这个方法的主要部分,剩下要介绍的是如何部署本地的静态服务器,和以上方法无关了,网上也有大量的教程,时间太晚了,白天还要上班,我先睡了,明天上班再把利用tomcat部署本地静态服务器的方法补上了!


(说明:不使用tomcat,使用node.js的http-server也是不错的选择)

接下来补上用tomcat部署本地静态服务器的方法。

  1. 先在tomcat官网上下载tomcat
  2. 解压到一个本地文件夹。把项目部署到tomcat中,部署的方法可参考这篇文章
  3. 点击bin目录下的startup.bat就启动项目了。接下来访问http://localhost:8080/item(item为项目名称)就可以了
  4. 补充一点利用webstorm的方法,当我们在开发过程中更改了代码以后,可以使用webstorm更新部署的代码,比手动覆盖要方便。具体的使用方法在这里

简单利用jQuery加tomcat,让前端开发不再依赖于后端的接口的更多相关文章

  1. 简单利用jQuery,让前端开发不再依赖于后端的接口

    前端开发的过程中,我们免不了和后端进行联调,这时候就会出现以下的尴尬场景: 接口没写好,没法做接下来的功能 功能写好了,接口没写好,没法测这个功能 联调了,出了BUG,不知道锅在谁身上,只得陪后端耗时 ...

  2. Angular01 利用grunt搭建自动web前端开发环境、利用angular-cli搭建web前端项目

    搭建angular开发环境 一.下载并安装node 官网地址:点击前往 二.利用npm安装cnpm 安装好node后就可以使用npm命令啦 查看版本:npm -v 安装cnpm:npm install ...

  3. 简单了解学习PHP(针对前端开发)

    1.服务器(服务器系统) 通常是指较强的计算能力能够同时服务多人的计算机 常见的服务器操作系统: 1.各个版本的Linux操作系统 2.乌班图.centos 3.mac  os(苹果) 4.windo ...

  4. 利用connect建立前端开发服务器

    利用connect建立前端开发服务器 对于前后端完全分离的系统,开发时候我们需要给前端配置服务器,当然我们可以选择Nginx之类的服务器进行配置,但我们也能使用NodeJS构建高自由度的前端开发服务器 ...

  5. Web前端开发最佳实践(1):前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  6. web前端开发学习路径图

    第一阶段 WEB前端工程师课程 HTML语句,HTML页面结构.css语法.style属性.link和style标签.id属性.等HTML语句中的相关属性: 通过Dreamweaver制作出跨越平台限 ...

  7. 前端开发数据mock神器 -- xl_mock

    1.为什么要实现数据 mock 要理解为什么要实现数据 mock,我们可以提供几个场景来解释, 1.现在的开发很多都是前后端分离的模式,前后端的工作是不同的,当我们前端界面已经完成,但是后端的接口迟迟 ...

  8. web前端开发需要具备的技能

    web前端开发需要具备以下7种技能: 1.页面标记(HTML) HTML页面固定,标签不多,相对来说学起来比较容易.编写HTML代码需遵循HTML代码规范(http://www.cnblogs.com ...

  9. 前端开发利器 Sublime Text 3 使用技巧和总结笔记

    这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次. 目前官方版正式版 ...

随机推荐

  1. HTML中常用meta整理

    < meta > 元素 定义 meta标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其 ...

  2. HTML标签CSS默认值研究

    最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现htm ...

  3. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  4. S2 第二本书 深入.NET平台和C#编程 总结 by天命

    第一章 深入.NET框架 .NET框架 包含 CLR公共语言运行时 FCL框架类库 CLR(Common Language Runtime)公共语言运行时 CLS(Common Language Sp ...

  5. cms替换主页的步骤

    cms替换主页的步骤 .先做好静态页面: .在D:\wamp\www\phpcms\install_package\phpcms\templates文件夹下建新的文件夹tianqiwangluo(项目 ...

  6. singleton(单件)-对象创建型模式

    1.意图 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 2.动机 对一些类来说,只有一个实例是很重要的.让类自身负责保存它唯一的实例,这个类可以保证没有其他实例可以被创建(通过截取创建新对象 ...

  7. 同一web系统,不同端口的跨域问题

    部署web系统的时候,发现了跨域问题,子系统是用Iframe嵌入到系统里面的,导致父窗口获取子系统的webService和图片时发现跨域问题,如下图所示:问题1:父窗口获取子系统的对象跨域 原因:用这 ...

  8. gtest vs2015配置

    1. 下载gtest https://github.com/google/googletest 2. 解压文件 使用vs2015 打开googletest-master\googletest\msvc ...

  9. table的css样式

    经常会遇到table中各种线条重复的问题,画面会显得很难看,下面是解决问题的方法: <!Doctype html><html> <head> <meta ch ...

  10. mysql死锁问题解决步骤

    锁表产生的原因 锁表的具体情况 解决锁表问题 1.查询是否锁表 show OPEN TABLES where In_use > 0; 2.查询进程 show processlist; 查询到相对 ...