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上,然后跨域为静态网站提供服务,或者将后端服务部署到百度云上,一样是可行的。
Github Page+Bmob实现简单动态功能的更多相关文章
- Github Page搜索工具更新 - 探索功能
探索功能提供了一种快速访问有意思的Github Page的途径,每周探索功能会更新有趣的搜索词条,你可以点击感兴趣的词条来获取该词条对应的Github Page. 首批Github Page探索词条包 ...
- github page+jekyll搭博客初体验
div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 10px; padding ...
- github page使用
github page介绍: https://help.github.com/categories/20/articles 使用GitHub Pages建立博客 与GitHub建立好链接之后,就可以方 ...
- 零基Github Page个人博客建立教程无限的自由流动
本文介绍了什么是Github Page.以及如何使用Github Page搭建一个免费的.无限流量的个人博客并绑定独立域名. 一.前言 1.1 为什么要用Github Page搭建博客 借用阮一峰老大 ...
- redis 系列3 数据结构之简单动态字符串 SDS
一. SDS概述 Redis 没有直接使用C语言传统的字符串表示,而是自己构建了一种名为简单动态字符串(simple dynamic string, SDS)的抽象类型,并将SDS用作Redis的默 ...
- github page 和 hexo 搭建在线博客
目录: 安装node.js与git 常用git命令 安装hexo 配置hexo hexo发布到github 1.安装node.js和git工具 https://nodejs.org/en/ 直接下载安 ...
- python3实现简单爬虫功能
本文参考虫师python2实现简单爬虫功能,并增加自己的感悟. #coding=utf-8 import re import urllib.request def getHtml(url): page ...
- Victor 串口 VCL 控件 - 简单实用, 功能强大的 C++ Builder 串口控件!
源:Victor 串口 VCL 控件 - 简单实用, 功能强大的 C++ Builder 串口控件! 2014年02月06日发布控件的重要更新版本: Victor 串口控件 1.5.0.2 版本 (包 ...
- github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)
详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如 ...
随机推荐
- Project 4:Longest Ordered Subsequence
Problem description A numeric sequence of ai is ordered if a1 < a2 < - < aN. Let the subseq ...
- C# 引用类型之特例string
在C#编程的时候经常会使用字符串(string)类型,它也是引用类型,但是处处都不作为引用的用法来使用,实属特例,下来我一一罗列出来,供自己记忆方便: 1)字符串的直接赋值:本身字符串就是引用类型,应 ...
- JavaScript 的使用基础总结③
JavaScript 中的对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... JavaScript 允许自定义对象. (一)数组 数组对象的作用是:使用单独的变量名来存储 ...
- 【Beta】 第一次Daily Scrum Meeting
一.本次会议为第一次meeting会议 二.时间:20::0AM-20:50AM 地点:宿舍楼下 三.会议站立式照片 四.今日任务安排 成员 昨日任务 今日任务 林晓芳 对已完成的功能进行进一步测 ...
- 201521123078《java程序设计》第四次总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 继承是面向对象最显著的一个特性.继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性 ...
- 201521123063 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 网络通讯的两种方式 TCP方式:类似于打电话,能够建立专门的虚拟连接,数据传输可靠 UDP方式:类似与发短 ...
- 201521123064 《Java程序设计》第12周学习总结
本次作业参考文件 正则表达式参考资料 1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. ① 标准输入输出流(字节流):标准输入流 System.in,标准输出流 ...
- 201521123003《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- Java:实现对象的比较 comparable接口和comparator接口
在实际应用中,我们往往有需要比较两个自定义对象大小的地方.而这些自定义对象的比较,就不像简单的整型数据那么简单,它们往往包含有许多的属性,我们一般都是根据这些属性对自定义对象进行比较的.所以Java中 ...
- 【】小技巧】CSS文字两端对齐
需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...