Nodejs/Jquery/Bootstrap搭建hyperledger fabric前端
Nodejs/Jquery/Bootstrap搭建hyperledger fabric前端
Contents
最近想给毕设加入一个前端界面来调用后台的一些功能,这样展示性更好。我使用BootStrap,Jquery写了一个很简陋的前端界面。服务器端使用Node.js express框架开了接口。之前以为是挺简单的一个东西,因为这些代码网上应该有很多可以参考。然而这个过程中,踩了不少的坑,花了3天时间,才把基本流程调通...记录一下我踩过的坑。
整体思路
-
我的需求是:
调用后台的Nodejs接口,进行增删查改操作,并向前端返回操作结果。由于我对于前后端的了解非常的肤浅,所以就选择了自己听说过的几个框架来写:- 后端用Nodejs Express开接口
- 前端用Bootstrap,Jquery实现基本逻辑
-
代码实现:
那么根据我的需求,参考了一系列教程/博客,我抄来写的代码如下
- Nodejs端
var express = require('express');
var path = require('path')
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({extended : false}));//这是一个中间件,用于解析请求内容
var SaveData = require("./SaveData.js");
var OffChainDB = require("./OffChainDB.js");
app.use(express.static(path.join(__dirname, '../privacy_frontend')));//设置静态文件中间件,在../privacy_frontend下包含我的前端html文件
app.post('/savedata',function(request,response){
console.log(request.body);//打印request的json内容
var result = SaveData.SaveData();//调用接口,作用是向数据库插入数据,返回一个Promise对象,并携带着数据库返回的消息
result.then(r => {
console.log('success', r)
str = JSON.stringify(r)
response.json(str)
}).catch(e => {
console.log('error', e)
})
})
var server = app.listen(3000,function(){//监听3000端口,这样浏览器直接访问IP:3000就可以访问到上面开的接口了
var host = server.address().address;
var port = server.address().port;
console.log("app listening at port 3000");
})
process.on('unhandledRejection',function(err){//绑定对于unhandleRejection的回调函数,报错
console.error(err.stack);
});
process.on('uncaughtException',console.error);//跟上一句类似
- 前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>保存数据</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.4.0.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal">
<div class="form-group">
<label for="inputChaincode" class="col-sm-2 control-label">链码</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputChaincode" placeholder="链码">
</div>
</div>
<div class="form-group">
<label for="inputMethod" class="col-sm-2 control-label">链码方法</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputMethod" placeholder="链码方法">
</div>
</div>
<div class="form-group">
<label for="inputDataType" class="col-sm-2 control-label">数据类型</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputDataType" placeholder="插入数据类型">
</div>
</div>
<div class="form-group">
<label for="inputData" class="col-sm-2 control-label">数据</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputData" placeholder="数据">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<!-- <button type="submit" class="btn btn-default" id="btn_submit">保存数据</button> -->
<a type="submit" class="btn btn-default" id="btn_submit">保存数据</a>
<script>
var json = {};//对象类型的变量
$("#btn_submit").click(function () {
json['chaincode'] = $("#inputChaincode").val();//从表单的每一个输入框获取信息,拼接成一个json对象
json['method'] = $("#inputMethod").val();
json['datatype'] = $("#inputDataType").val();
json['data'] = $("#inputData").val();
alert(JSON.stringify(json));
$.post("http://192.168.253.130:3000/savedata",//向服务器发送post请求
json,//要发送的数据(request body)
function (data,status) {//成功收到消息的回调函数
alert("数据:\n"+data+"\n状态: "+status);//一系列弹窗提示
console.log(data);
console.log(status);
alert("callback is invoked!");
alert(data);
})
});
</script>
</div>
</div>
</form>
</body>
</html>
- 界面部分使用了bootstrap自带的表单样式,代码基本来源于官网文档。然而这就是坑的开始。
- js脚本部分,也很简单。就是为
提交
按钮增加一个点击事件回调函数。回调函数内容就是向Nodejs后台发起post请求,等待回应。
跨域访问问题
-
之前听说过跨域访问这个名词,然而不知道具体是什么意思。这一次算是有了切身经验,理解了这个概念的含义。
-
我的nodejs后端运行在我的虚拟机linux上,而前端最开始放在我的本地windows里(为了方便调试)。然后发现发出的post请求怎么也收不到。
-
最后发现因为这是跨域请求。跨域请求的概念是:
- 请求者和被请求者的 协议,ip,端口 中的任意一个不相同,就是跨域访问,js默认是不允许跨域访问的(出于安全考虑)。
- 这一点在Jquery文档里也有写
文档内容 -
解决方法
- 将前端界面也放到linux虚拟机上,跟后端使用同一IP:端口,就解决了跨域访问的问题
- 这告诉我们,使用轮子之前一定要好好看文档啊。
Jquery.post()回调函数不执行问题
- 以上的第一个问题其实很快就发现了,然而第二个问题才是大坑。找了很久才发现问题所在。
- 在上面的
<script>
脚本里边,调用了$.post()
函数,看起来挺简单的,参考了一下菜鸟教程,然后就写好了。- 运行的现象
- 后端能收到请求,也能发送响应。但是前端收到数据的回调函数怎么也不执行,浏览器F12调试也根本看不到发出的post请求。
- 用postman进行请求,没有任何问题。
- 然后就开始了漫长的找bug过程,由于没有任何报错信息,只能盲目的通过注释代码,修改代码来尝试。
- 开始认为是后端的问题,因为尝试发现:如果不调用SaveData.SaveData()这个函数,而是直接给一个resolved的Promise,就没有问题。于是我各种修改SaveData()函数,将它由Promise写法改成了普通回调的写法。结果好像并没有什么用。
- 然后怀疑是response.send()参数数据类型的问题。尝试发现:如果这个数据比较短,前端就能执行回调,否则就不行。是否能执行回调貌似变成了一个概率事件...要看运气的...这时候我已经绝望了,这是什么玄学问题,还从没遇到那么诡异的bug。
- 绝望之后,再怀疑前端,把
$post
改成链式调用的方式,写了$.post().done().fail()
函数来代替作为参数的回调函数。居然就成功了。稳定的能够执行回调函数。但是依然不知道为什么。 - 直到看到StackOverflow上面的一个回答,问题与我类似;他说是因为他的前端会自动刷新,所以刷新过后,上一次执行script代码时创建的jqXHR对象就没有了,自然浏览器也看不到这个请求的消息,也不会执行回调函数。
- 仔细观察我的前端运行,貌似的确每次点击
提交
按钮就会刷新一下页面,但是我并没有写这个逻辑啊...问题出在哪呢?只有可能是bootstrap,搜了一下发现点击按钮就刷新页面这个逻辑是bootstrap自带的,自带的....发现bootstrap才是罪魁祸首,欲哭无泪啊...从始至终就没有注意到这一点。 - 解决方法:
- 参考了这一篇博文
- 修改了
<button>
标签为<a>
标签,问题解决。跟nodejs后端,跟jquery.post()没有任何关系emmmmm.... - 以上经验告诉我们:用轮子的时候看文档也不一定管用啊...bootstrap文档里没有告诉我点击button会自动刷新的啊...
总结
- 回顾整个过程,还是能学到一些经验
- VSCode用作Nodejs的调试工具非常好用,能用调试器就不要用打印日志这种办法了,效率极低。
- 当你对一些语法类的东西不确定的时候,一个简单的方法是:跳出复杂的场景,自己重新写一个test.js来测试各种情况。比如我对promise的状态改变,执行流程搞不清楚,那么就写一个test的代码来各种尝试,这样很快就能弄清楚一些模糊的地方。
- Postman如果测试没问题,那么后端的接口就一定是没问题的。我并没有意识到这一点,将注意力放在了后端上。其实是南辕北辙了。一开始就定位问题在前端,可能就没有那么费劲了。
- 用轮子之前,尽量还是把一些注意事项,文档通读一遍,直接上来就怼代码可能事倍功半。