研究使用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中的数据，无需进行任何安装操作，代码如下：

<!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

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

sqllite数据可视化工具：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://github.com/kripken/sql.js
https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Using_Github_pages

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

猜你喜欢