zoukankan      html  css  js  c++  java
  • Github Page+Bmob实现简单动态功能

    Github Page基于jekyll能够实现简单的静态网站,但是没有提供后端服务。目前国内外也有很多提供后台服务,特别是云服务。譬如国外有AWS,记得好像是注册免费使用一年;再如Heroku,支持Nodejs平台,有免费免费的服务。国内的也不少,譬如百度云服务,按流量计费;新浪云服务,需要云豆,阿里云和腾讯云没用过;再如今天要介绍的Bmob。

    Bmob本是一个移动应用云服务的后端平台,但不仅限于移动应用,你同样可以用它来做web应用的后端服务。

    总的来说,后端需要关注两个方面:数据和处理逻辑。

    对于数据,Bmob有自身的云存储,并提供对象关系映射来进行数据封装。

    对于处理逻辑,则直接在Bmob控制台中撸处理逻辑的代码,简单粗暴有效。

    实现功能:网站访问量(PV)的动态显示。

    涉及如下知识:

    1、前后端数据交互

    2、jsonp跨域访问

    效果见此:https://qcer.github.io/blog/

    一、前端

    前端局部代码:

    用css实现一个双色圆环,vuejs实现简单的单向数据绑定,很简单是吧。

    因为需要请求Bmob后端服务器的数据,必然存在跨域的问题。如果用get或者post的方式(无论是原生的get、post还是jquery封装的get、post方法),均不能成功跨域,但是jquery通过ajax封装了另外的方式,也即是jsonp的方式。

    其中url为https://cloud.bmob.cn/fc3679511e55f464/getVisitCount,其中fc3679511e55f464为bmob应用的Secret Key,getVisitCount为云端逻辑的方法。比如我的应用实例中有如下三个方法:

    jsonp只能用GET方式,即使你将type设置为POST也无效。

    dataType为jsonp,一旦你将dataType设置成jsonp,意味着这种方式将不同于普通的ajax的方式。

    既然是通过GET方式,请求参数必然在url中,callback就指定了参数名,而jsonpCallback指定参数值。

    可以通过跟踪请求报文的header来进一步验证:

    可以看到,由于没有这顶jsonpCallback值,jquery会用jQuery其后拼接随即字符串组成参数值。同时从响应报文的header中,发现bmob是用express搭建。

    二、后端

    1、后端数据表

    关于ORM封装的详细官网文档请移步:

    http://docs.bmob.cn/data/Android/b_developdoc/doc/index.html#数据类型

    2、后端处理逻辑

    简单来讲就是查询数据,更新数据,然后发送数据:通过modules.oData获得数据库对象,调用db.findOne()查找数据。需要注意的是,通过oData数据库对象查找出来的data都是string类型,因此需要JSON.parse(data)解析成js对象类型。随后更新数据,调用response.send()发送数据,如果是对象,应该将对象字符串转化,即调用JSON.stringify(sendObj),如果为简单的string类选择可以直接拼接。

    关于后端逻辑的官网文档请移步:

    http://docs.bmob.cn/cloudcode/WEB/b_developdoc/doc/index.html#云端逻辑模块解释

    通过跟踪报文,我们也可观察到response报文如下:

    其实就是一段调用函数的js代码。

    但是这个奇怪的函数jQuery31108369332181040243_1489933475565()并没有在客户端声明和定义,反而是success绑定的回调函数却获得了响应报文中的对象参数{"pageView":76},何故?因为jquery会默认创建按个奇怪的函数,取得其参数,并将参数传给success绑定的回调函数。

    客户端取得数据之后,通过vuejs简单的单项数据绑定,将数据绑定到view层,这样就在Github Page上实现了动态显示网站访问量的功能

    其实在Github Page实现动态功能的远不止这样一种方案,譬如直接将后台应用部署到Heroku上,然后跨域为静态网站提供服务,或者将后端服务部署到百度云上,一样是可行的。

  • 相关阅读:
    半条命2引擎:Source 关于Multiplayer Networking
    关于毕设3DGPSR程序bug修改
    My 2D SketchBased 3D Shape Retrieval
    Manifold Harmonics Transform BY ARPACK++
    c语言错误代码
    C语言system函数用法
    win7下开启梦幻桌面
    Win7与xp双系统的安装
    C 语言中的控制结构
    Win7下安装xp虚拟机
  • 原文地址:https://www.cnblogs.com/qcblog/p/6582402.html
Copyright © 2011-2022 走看看