schtonn
/
public


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!DOCTYPE html>

<head>
    <!-- <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
    <script type="text/javascript" src="../js/jquery.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css" crossorigin="anonymous">
    <script type="text/javascript" src="../js/bootstrap.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <title>日志</title>
    <style>
        * {
            transition-duration: 300ms;
        }

        .btn {
            text-shadow: rgb(85, 85, 85) 3px 2px 4px;
            display: inline-block;
        }

        .btn-xs.gee {
            background-color: rgb(70, 59, 150);
            color: white;
        }

        .btn-info.gee {
            color: #fff;
            background-color: #027396;
            border-color: #46b8da;
        }

        code.gee {
            background-color: rgb(70, 59, 150);
        }

        .noshadow {
            text-shadow: none;
        }

        .gee ::selection {
            color: white;
            text-decoration: underline wavy #FF3028;
            text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
            background-color: black;
        }

        .gee {
            color: white;
            background-color: black;
        }

        .btn-dang {
            transition-duration: 1000ms;
        }

        .btn-dang.gee {
            outline: 10px transparent
        }

        .btn-dang:is(:hover, :hover:focus) {
            outline: 15px solid rgba(58, 58, 58, 0.8)
        }

        .btn-dang.gee:hover {
            outline: 4000px solid rgba(0, 0, 0, 0.1)
        }

        .btn-dang:is(:hover:active:focus, :active) {
            scale: 80%;
            transform: translate(-7px, -7px);
            outline: 150px double rgba(162, 6, 6, 0.5)
        }
    </style>
    <script>
        $().ready(function () {
            $('.btn-danger').on('click', function (e) {
                $('body,.btn,.btn-xs,code').toggleClass('gee')
                console.log(e)
            })
        })
    </script>
</head>

<body>
    <a class="btn btn-info" href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
    <div class="page-header">
        <h1>网站日志</h1>
    </div>
    
    <h3>
        2022.12.14
        <small><a href="/score">score</a>、<a href="/blog">blog</a></small>
    </h3>
    <p>今天的发现特别离谱。</p>
    <p>心意答查询成绩的接口只经过了一层双向加密，没有丝毫验证身份的手段，并且返回的数据也多于显示的数据，结果就是只要知道考试编号、科目编号和数字校园号就能直接查到这个人，以及他的班级详尽的成绩。</p>
    <p>更有甚者，在线学习平台直接放出了全年级所有人的姓名和数字校园号的对照表，以至于只要知道姓名就能查出成绩来。</p>
    <p>以及，它返回信息的模式属于能返则返，也就是说我不知道科目编号，可以直接放两百个进接口里，它还自动筛选出存在的科目编号；不知道考试编号也能一个一个试出来：就算考试和校园号完全对不上，它也会返回考试名称。对我们这些<i>阴险的窃取者</i>来说，这简直是太方便了。</p>
    <p><b>只需要知道一个姓名，你历次考试的成绩就全都查出来，这就是信息泄露的危害...</b></p>
    <p>查成绩的接口，这样的安全性不能说离谱，只能说是离谱至极。</p>
    <p>除此之外，今天还把博客通过暴力粘贴的方式搬运过来了。</p>
    <hr>

    <h3>
        2022.12.13
        <small><a href="/chem">chem</a>/add</small>
    </h3>
    <p>实现了添加化学式的操作，往里加了几个式子，但是对删除操作的处理非常纠结，因为 MySQL 的自增主键是不受删除影响的，删除一个元素后仍然占用着这个编号。</p>
    <p>倒也有解决办法，就是强制覆盖自增的位置，但这样很难应对在序列中间删除的情况，所以删除功能基本是不会上线了，只能由我在后台自己维护。</p>
    <hr>

    <h3>
        2022.12.12
        <small><a href="/chem">chem</a>/query</small>
    </h3>
    <p>实现了对数据库中化学方程式的查询，虽然目前数据库里只放了两个式子，但等我实现添加功能后会往里加的。</p>
    <p>大量运用了正则表达式（没有你我活不了啊！）。</p>
    <p>认识到了 SQL 注入的危害，并用简陋的手段做了防护。</p>
    <hr>

    <h3>
        2022.12.11
        <small>release</small>
    </h3>
    <p>折腾了半天，总算把网站放到公网上了。</p>
    <p>为了方便，我大致梳理一下，原先只是在 <a href="http://schtonn.github.io/">schtonn.github.io</a> 和 <a href="http://schtonn.gitee.io/">schtonn.gitee.io</a> 上写博客，随后把实现的几个小功能拉起来拼凑了个页面。</p>
    <p>后来gitee停止服务了，我又想学习学习后端开发，所以目前网站在 <a href="http://43.143.233.184/">http://43.143.233.184/</a>，应该会保持更新，不过暂时还没有购置域名的打算。</p>
    <hr>

    <h3>
        2022.12.4
        <small>dark</small>
    </h3>
    <p>在首页加上了黑暗模式，以及非常愚蠢的秘密消息（其实更多是对 Bootstrap 响应式布局的测试）。</p>
    <p>进一步完善按钮样式。</p>
    <hr>

    <h3>
        2022.12.3
        <small><a href="/chem">chem</a></small>
    </h3>
    <p>把化学式配平、相对质量计算的网页实现出来了，接下来还要加上 MySQL 的上传。</p>
    <p>为所有按钮加上了好玩的悬浮样式。这可真不容易，为了去掉浏览器自带的丑陋黑色边框，我进行了不懈的斗争，最后发现是除了 <code>:focus</code> 和 <code>:active</code> 选择器，还得写上
        <code>:focus:active</code> 。
    </p>
    <button class="btn btn-info">看看</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="btn btn-info"
        style="outline: 10px double rgba(95, 177, 221, 0.5);">悬浮</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="btn btn-info" style="outline: 5px dashed rgba(95, 177, 221, 0.5);">聚焦</button>
    <hr>

    <h3>
        2022.12.2
        <small>MySQL</small>
    </h3>
    <p>近日研究了 Bootstrap 框架很多不错的设计，如按钮组团等，进行了应用。</p>
    <p>今天开始尝试在本地搭建 MySQL 数据库。希望是日后能建起一个存放中学化学式的数据库。</p>
    <hr>

    <h3>
        2022.11.30
        <small>WebSocket</small>
    </h3>
    <p>有了小崔给的主机，开辟了很多新领域。</p>
    <p>不用暴力地琢磨纯静态页面了，可以开始自己开发网页后端。刚起步，先用 Node.js+Express 做后端。写了个配平化学式的接口（<a class="btn-xs btn-default noshadow"
            href="/chemist?H2+O2=H2O">/chemist?H2+O2=H2O</a>）。</p>
    <p>用 WebSocket 可以实现服务器与客户端的即时通讯，原先搭载在 LeanCloud 上的五子棋计算部分可以迁移到本地了。</p>

    <hr>
    <p>开始记录。</p>
    <hr>
    <p><button class="btn btn-danger btn-dang"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button>
    </p>
</body>

</html>