分布式版本控制系统--Git的简单使用

发表于 2022-03-16 更新于 2023-04-14 分类于杂项

什么是Git

根据官方网站上的介绍: Git是免费开源的分布式版本控制系统.

什么是版本控制

首先来看这个场景:

张三和李四还有王五要共同完成一份报表, 他们决定分工合作, 一人填写一部分, 然后用QQ发送给对方.

三天以后, 文件夹里躺着十几个同名文件, 王五忍不下去了, 决定改变这个现状, 他决定给文件加上命名规范, 于是文件夹里的文件变成了这个样子:

文件名	解析
财务报表_王五_Part1_20211026.xlsx	王五在2021年10月26日对第一部分进行了修改
财务报表_张三_Part10_20210926.xlsx	张三在2021年9月26日对第十部分进行了修改
财务报表_李四_Part3_20211016.xlsx	李四在2021年10月16日对第三部分进行了修改

一大堆同名文件总算是可以区分了, 这就是一种简陋的手动的版本控制, 可是这样还是不太方便, 我们需要自动化的版本控制.

Git的诞生

Git最初是Linus为了管理Linux的源码而编写的, 最初的代码管理是手动进行的, 后来BitKeeper决定为Linux社区开放免费授权, 但是Linux社区的大佬们岂能受这商业公司的约束, 他们开始对其进行逆向工作. 合作自然是告吹了, Linus决定自行开发自动化版本控制系统, 以十天的时间编写出Git第一个版本.

开始使用Git

本着按需学习的原则, 此处直接介绍如何与Github配合使用.

阅读全文 »

用JavaScript打印指定div

发表于 2021-10-14 分类于杂项

首先上代码:

点我查看完整代码

function PrintDiv(ID) {
    var needPrint = document.getElementById(ID);
    var win = window.open("");
    win.document.write('<html><head><link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />'
        + '<link href="css/app.css" rel="stylesheet" />'
        + '<link href="PWA.styles.css" rel="stylesheet" /></head><body>'
        + needPrint.outerHTML + '</body>'
        + "</html>");
    win.document.close();
    //Chrome
    if (navigator.userAgent.indexOf("Chrome") != -1) {
        win.onload = function () {
            win.document.execCommand('print');
            win.close();
        }
    }
    //Firefox
    else {
        win.print();
        win.close();
    }
}

打印div的几种写法

法一: 替换当前页面

function PrintDiv(ID){
    var needPrint = document.getElementById(ID).innerHTML;
    var old = document.body.innerHTML;
    document.body.innerHTML=needPrint;
    window.print();
    document.body.innerHTML=old;
}

此法能很好的保留样式, 但是在Blazor中存在一个问题: 调用以后页面中所有的按钮都会失效.

问题的产生应该与Blazor框架的底层机制有关, 在此不深究.

法二: 在新页面中打印

此法需要注意一点: 如果需要保留样式, 需要将CSS引用一并写入新页面, 需要等待页面加载完成后才能开始打印, 否则打印结果不带样式.

等待页面加载完成在 Firefox 和 Chrome 中的写法不一样, 具体请看代码.

用C#写前端-Blazor框架简介

发表于 2021-10-13 更新于 2021-10-14 分类于杂项

什么是Blazor

MSDN¹中的定义十分贴切, 此处照搬过来:

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：
使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。
共享使用 .NET 编写的服务器端和客户端应用逻辑。
将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。
与新式托管平台（如 Docker）集成。

不严谨地说, Blazor就是用C#部分代替JavaScript来写前端.

阅读全文 »

题解【P1953】易语言

发表于 2021-07-25 分类于题解

题面

https://www.luogu.com.cn/problem/P1953

基本思路

很显然就是一个字符串处理的模拟题, 说到字符串, ~~就想到美国人的算法, 就想到今年下半年,~~ 正则表达式 是一个常用工具, 而 C++ 11 中引入了对正则表达式的支持(在 <regex> 中), 我们可以用正则表达式进行匹配与替换.

原生字符串

这是 C++11 中引入的语法糖, 格式为 R"(A_String)" , A_String 的字面值会被原封不动的保存, 这样我们的正则表达式中就不用每次都用 \\ 来转义了.

regex的使用

出门右拐 CppReference:

https://zh.cppreference.com/w/cpp/header/regex

网络上也有很多介绍, 在此就不赘述了.

注意:

smatch 的 str() 函数, 参数为 0 时返回的是匹配的整个串.

阅读全文 »

如何实现C++代码在线运行

发表于 2021-06-08 分类于杂项

核心部分-Coliru

Coliru是一个支持自定义命令行的在线编译器.

值得一提的是官方FAQ中给的示例代码还是http请求, 使用前应该替换成https.

语法高亮-ace.js

参考资料: 利用ace.js编写一个JavaScript编辑器(带智能补全)

需要指出的是文章存在一些问题

var text = document.getElementById('editor').innerText; 
/*存在只能获取可见部分的问题, 实际上ace.js提供了直接获取代码的方法, 无需处理行号
例: var code = editor.getSession().getValue();
*/
var ctext = "<script>"+text.replace(/\d\n/g, "")+'<\/script>'; 
//正则只能匹配一位数字, 应该改成/\d{1,}\n/g

传送门

在线运行C++代码

发表于 2021-06-08 更新于 2023-04-14 分类于杂项

由于换了渲染器, 不支持内嵌HTML了, 以下是源码:

点我查看完整代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coliru_Run_Code_Online</title>
</head>
<style type="text/css" media="screen">
    .main {
        float: left;
        width: 100%;
    }
    #editor {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding: 1em;
        padding-bottom: 30%;
    }
    .box {
        font-family: "Consolas", Helvetica, sans-serif;
        margin-left: auto;
        margin-right: auto;
        padding: 1em;
        background-color: #272822;
        color: aliceblue;
    }
</style>

<body>
    <div class="main">
        <div style="display: block;">
            <div class="version" style="float: left; display: inline-block;">
                <select id="version">
                    <option value="c++98">C++</option>
                    <option value="c++11" selected = "selected">C++11</option>
                    <option value="c++14">C++14</option>
                    <option value="c++17">C++17</option>
                    <option value="c++20">C++20</option>
                </select>
            </div>
            <div style="float: left; display: inline-block;">
                <button type="button" onclick="getOutput()">Run It!</button>
            </div>
            <div style="float: right; display: inline-block;">
                <span>Powered by <a href="https://coliru.stacked-crooked.com/">Coliru</a> online compiler</span>
            </div>
        </div>
        <br />
        <div id="editor"></div>
        <h3>Input: </h3>
        <div id="inputBox" contenteditable="true" class="box"></div>
        <h3>Output: </h3>
        <div id="outputBox" contenteditable="true" class="box"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js"></script>
    <script type="text/javascript">
        ace.require("ace/ext/language_tools");
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");//monokai模式是自动显示补全提示
        editor.getSession().setMode("ace/mode/c_cpp");//语言
        editor.setFontSize(16);
        editor.session.setTabSize(4);
        function stdVersion() {
            var version = document.getElementById("version").value;
            return version;
        }
        function getOutput() {
            var code = editor.getSession().getValue();
            var output = document.getElementById("outputBox");
            var inputData = document.getElementById("inputBox").innerText;
            var http = new XMLHttpRequest();
            http.open("POST", "https://coliru.stacked-crooked.com/compile", false);
            http.send(JSON.stringify({ "cmd": "g++ -std=" + stdVersion() + " -O2 -Wall main.cpp && ./a.out << EOF\n" + inputData + "\nEOF", "src": code}));
            output.innerText = http.response;
            //document.getElementById("TestBox").innerText = text;
            /*alert(code);
            alert(inputData);
            alert(output.innerText);*/
        }
    </script>
</body>
</html>