研究使用Github Pages搭建具有数据库的个人网站
这段时间想使用github搭建一个个人网站，但是木有钱买服务器（+﹏+），听说github有一个Github Pages的功能，很好用，经过我的测试它支持html+css+js。而且网上也有很多已经开发好的框架可以直接使用，例如：Hexo。Hexo非常火，网上有很多人都在用，而且使用非常方便，经过几个简单步骤就可以把网站搭建起来。但是有一个问题，它的所有数据都是静态的，它所展示的页面都是提前渲染好的，而且无法连接数据库。像我这种后端程序员，怎么能忍受呢，完全不能忍啊有木有！突然我灵光一闪（好吧，我也就瞎想想），想到以下问题：
1、pages中，我不可能去安装一个数据库啊，也就不能使用mysql、mongodb等等了；
2、通过查询资料发现，可以通过ajax的方式读取项目中某路径下的文件，并且我把它放到Pages中也是可以读取的，当时读取的是一个json文件。
3、那么同上，我也就可以使用js去读取sqllite的数据文件了，最后经过我查询资料发现，sql.js可以直接操作sqllite中的数据，无需进行任何安装操作，代码如下：
<html><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="js/sql.js">script><script type="text/javascript" src="js/jquery-3.3.1.min.js">script>head><body>body><script>//创建sqllite实例，获取数据$(function() {$.ajax({type: "GET",url: "db/test.db",success: function(data) {console.info("文件读取成功了：" + data);
// var fr = new FileReader();var uInt8Array = new Uint8Array(data);var db = new SQL.Database(uInt8Array);console.log("------db"+db);var contents = db.exec("SELECT * from test");console.log("------content"+content);}});});script>html>注意：需要引入jquery和sql.js，并且需要在工程目录下创建 ./db/test.db ，这里的test.db是我提前准备好的sqllite数据文件。
sql.js文件下载：https://github.com/kripken/sql.js
jquery文件下载：http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js
sqllite数据可视化工具：http://www.xue51.com/soft/5371.html
如果要生成一个带有数据sqllite文件，可以使用以下代码，(运行后，点击下载)
<html><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="js/sql.js">script>head><body><button name="test" type="button" value="val" onclick="save()">下载button>body><script>function save() {//Create the databasevar db = new SQL.Database();db.run("CREATE TABLE test (列1 int, 列2 char);");db.run("INSERT INTO test VALUES (0,'hello');");db.run("INSERT INTO test VALUES (1,'world');");db.run("INSERT INTO test VALUES (55,'34534545');");db.run("INSERT INTO test VALUES (166,'woteggrgrld');");//save to local filevar data = db.export();var arraybuff = data.buffer;var blob = new Blob([arraybuff]);var url = window.URL.createObjectURL(blob);var a = document.createElement("a");a.href = url;a.download = 'test.db';a.click();window.URL.revokeObjectURL(url);}script>
html>4、但是有一个问题，我查询资料发现，只能读不能写啊，咋办，但是我大胆的想了一下，github是一个代码仓库，我们能否在保存数据库的时候去模拟git的提交操作的呢？这样就可以去修改仓库中的数据文件了。但是做起来可能很麻烦，慢慢研究…
5、再后来我又看了一篇文章，里面使用了h5内嵌的sqllite和indexdb，但是后来发现它并没有把数据保存到服务器端，只是把数据保存在客户端的浏览器中，不适用。
6、我也希望能和大家一起研究，做一个能够在github Pages功能支持下的前后端都有项目，这样我们以后的人就可以直接用了，比如进行简单的登陆、评论、点赞等（简单的数据交互）
7、我并不想去造轮子，但是目前经过我查询资料还没有发现任何框架能做到这一步，我觉得还是蛮有意义的。后期主要解决的问题是：如何把数据存储到github仓库中
参考资料：
https://blog.csdn.net/sunnyloves/article/details/48002839
https://github.com/kripken/sql.js
https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Using_Github_pages
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！