研究使用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 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

你可能感兴趣的:(WEB)