研究使用Github Pages搭建具有数据库的个人网站

た入场券 2022-05-15 21:07 426阅读 0赞

这段时间想使用github搭建一个个人网站，但是木有钱买服务器（*+﹏+*），听说github有一个Github Pages的功能，很好用，经过我的测试它支持html+css+js。而且网上也有很多已经开发好的框架可以直接使用，例如：Hexo。Hexo非常火，网上有很多人都在用，而且使用非常方便，经过几个简单步骤就可以把网站搭建起来。但是有一个问题，它的所有数据都是静态的，它所展示的页面都是提前渲染好的，而且**无法连接数据库**。像我这种后端程序员，怎么能忍受呢，完全不能忍啊有木有！突然我灵光一闪（好吧，我也就瞎想想），想到以下问题：  
1、pages中，我不可能去安装一个数据库啊，也就不能使用mysql、mongodb等等了；  
2、通过查询资料发现，可以通过ajax的方式读取项目中某路径下的文件，并且我把它放到Pages中也是可以读取的，当时读取的是一个json文件。  
3、那么同上，我也就可以使用js去读取sqllite的数据文件了，最后经过我查询资料发现，sql.js可以直接操作sqllite中的数据，无需进行任何安装操作，代码如下：

<!DOCTYPE html>
    <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 ][https_github.com_kripken_sql.js]

jquery文件下载：[http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js][http_ajax.aspnetcdn.com_ajax_jQuery_jquery-3.3.1.min.js]

sqllite数据可视化工具：[http://www.xue51.com/soft/5371.html][http_www.xue51.com_soft_5371.html]

如果要生成一个带有数据sqllite文件，可以使用以下代码，(运行后，点击下载)

<!DOCTYPE html>
    <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 database var 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 file var 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_blog.csdn.net_sunnyloves_article_details_48002839]  
[https://github.com/kripken/sql.js][https_github.com_kripken_sql.js]  
[https://developer.mozilla.org/zh-CN/docs/Learn/Common\_questions/Using\_Github\_pages][https_developer.mozilla.org_zh-CN_docs_Learn_Common_questions_Using_Github_pages]

[https_github.com_kripken_sql.js]: https://github.com/kripken/sql.js
[http_ajax.aspnetcdn.com_ajax_jQuery_jquery-3.3.1.min.js]: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js
[http_www.xue51.com_soft_5371.html]: http://www.xue51.com/soft/5371.html
[https_blog.csdn.net_sunnyloves_article_details_48002839]: https://blog.csdn.net/sunnyloves/article/details/48002839
[https_developer.mozilla.org_zh-CN_docs_Learn_Common_questions_Using_Github_pages]: https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Using_Github_pages