VSCode+Docker构建Python开发环境
VSCode+Docker 构建 Python
开发环境
1 优缺点
1.1 优点
写代码和调试更方便
带语法提示且反应快
支持直接在命令行敲命令运行
一个工具同时开发调试 Python+JS+HTML....
方便在各代码文件间跳转
生态丰富
查找替换方便：可以指定文本或文件夹
可对比文件差异
……
1.2 缺点
配置有点麻烦
需要一些学习成本
2 方法
2.1 前提
假设 vscode 已正常安装，并且已有支持 Python 的 docker 环境
2.2 在 Docker 内安装 ssh 服务
2.2.1 进入 docker
123456789101112$ apt-get install openssh-server$ passwd 输入密码，后面登录时输入$ vim /etc/ssh/sshd_config加入以下三行：PubkeyAuthentication yes #启用公钥私钥配对认证方式 PermitRootLogin yes #允许root用户使用ssh登录 PasswordAuthentication yes$ /etc/init.d/ssh restar ...
3_Obsidian_用Git同步笔记
#笔记/Obsidian
问题
Obsidian 需要家里和单位电脑同步，以及定时备份，之前试过使用百度网盘和
Github 备份数据。百度网盘提供了一些 API 上传和下载数据，搭配 Linux 的
crontab 定时任务，能实现基本备份功能，但速度太慢。Github
效果不错，但是常常连不通。
这次选择了 Obsidian 的三方插件 +Gitee
结合的方式，设置半小时备份一次，比较完美地解决了备份问题。
原理
Obsidian 中的插件只是简单地执行 git pull/commit/pull
等命令，需要先在本机配置好 git 环境，然后与 Obsidian 的定时任务配合实现
push 和 pull 功能。
Gitee 是国内的 Git 服务器，用法和 Github
基本相同，速度比较快，私有数据也免费。
方法
配置 git 环境
注册 gitee，并创建自己的私有仓库
https://gitee.com/
生成公钥：
1$ ssh-keygen -t rsa -C "xxx@xxx.com"
按提示输入地址为 $HOME/.ssh/id_rsa_g ...
01_环境
#编程语言/前端 #编程语言/前端
搭建环境
我在 Ubuntu 下用 VSCODE 搭建前端开发环境，用 Windows 也差不多。
1 VSCode
VSCode 是微软推出的可运行于 Mac OS X、Windows 和 Linux
多平台上的源码编辑器，前端开发一般都用它。
1.1 安装
下载：https://code.visualstudio.com
下载 deb 包，然后用命令安装
1sudo dpkg -i code_1.63.2-1639562499_amd64.deb
1.2 运行
在启动器里输入 code，然后选择 Visual Studio Code
根据提示下载安装中文环境
安装两个插件（通过左侧扩展按钮调出）
Code Runner
HTML CSS Support
打开文件夹（点左侧的资源管理器按钮）
创建一个 html 文件，加入简单代码
12345<html> <body> <script>alert('Hello World')</script> </body> ...
02_HTML5
#编程语言/前端 #编程语言/前端
HTML
1 元素
1.1 原理
作为一个操作单位，如被 JS 操作，或者其中的数据都使用同种 CSS
风格……
1.2 自定义元素
定义块元素
1<div> ... </div>
注意：div 中可包含多个元素，即将多个元素分成一组。
定义行内元素
1<span> ... </span>
注意：只能把 span 放在其它元素的内部。
1.3 元素属性：id 和 class
id 和 class 是元素的属性，不只是自定义元素，所有元素都可以设置 id 和
class，以设置操作和风格。
id
id 是元素的字名，应该是独一无二的，
class
class
是元素它所属类别，多个元素可属于同一类别，它们可以拥有同样的显示风格，同样的操作……
一个元素还可以属于多个类别形如：
1<div id="ISBN0321127307" class="listing book">
1.4 通过 id 访问控件
(好像是 JQuery 用法)
1$("#i ...
03_JS
JavaScript
#编程语言/前端 #编程语言/前端
1 原理
运行在客户端浏览器，不需要服务端资源
2 用途
网页中比较复杂的交互，比如提示用户输入错误，点展开列表、输入文字时自动联想……
3 基本语法
3.1 说明
大小写敏感
空格无意义（与 Python 不同）
建议以分号结尾
注释
行注释：
1// 我是行注释
块注释:
123/*我是注释*/
3.2 变量
不需要显示地声明类型，但需要用 var 定义变量。
12345var foo = null;var foo = true;var foo = 5;var foo = "five";var foo = [5, "five", "5"];
3.3 操作
布尔操作
== 等于
!= 不等于
=== 类型相同
!== 类型不同
, >=, <, <= 大于、大于等于、小于、小于等于
数值操作
++ 加 1
-- 减 1
+= 当前值加
逻辑运算
&& 逻辑与
|| 逻辑或
! 逻辑非
3.4 条件
12 ...
04_JQuery和Ajax
JQuery 和 Ajax
#编程语言/前端
1 原理
Ajax（阿甲克斯）提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
jQuery 是一个框架（可以当成一个库），封装了一些常用方法，使得 JS 与
Ajax 更方便使用。
2 JQuery
JQuery 是一个非常常用的 JS 库，可以直接使用网上的
js，也可以下载到自己的服务端。
2.1.1 直接下载
下载地址：https://jquery.com/download/
点开不压缩版本，即可看到其具体实现，将 js
文件保存到本地，然后在网页中引入即可
1<script src="pathtoyourjs/jquery-3.2.1.min.js"></script>
2.1.2
下载源码（可切换到历史版本）
或者从 git 下载
1$ git clone https://github.com/jquery/jquery.git
2.2 AJAX
AJAX 是 JQuery 工具集中的一个工具，用于远程请求，以实现局部刷新。
3 示例
3.1 ...
05_CSS
#编程语言/前端
1 简介
1.1.1 什么是 CSS
用途：设置显示风格
英文：Cascading Style Sheets (CSS)
语法：它有自身的语法
1.1.2 优点
准确：更准确地控制显示
省事：一个设置多处使用
适配：在不修改 HTML 的情况下适配不同显示设备
同样内容，不同风格，看起来有多么不同：
Pasted image
20220111171119.png
1.2 基本概念
继承：子控件继承父控制属性
冲突：当设置发生冲突时，优先使用权重更大的设置
一般用中括号定义形如：
1p { line-height: 1.2em; } [0] [0] [1]
1.2.1 基本语法
CSS 每一条由两部分组成：
第一部分是 selector
定义需要被设置的元素。
此处可设置多个元素，用逗号分隔
selector 可支持三种类型：
选择符（如 p），
元素的类名（以点开头）
元素的 id（以井号开头）
用星号定义其它所有情况
第二部分是 declaration
定义设置的具体规则
使用大括号定义
每一部分由键值对成，各 ...
07_React
1 相关术语
React: 用于构建用户界面的 JavaScript 库
node: 通过 JavaScript 语言开发 web 服务端
npm：相当于 python 的 pip 工具，pip 用于安装 python
相关的各种工具，npm 用于 Node.JS 相关的各种工具
jsx：JSX 是一种 JavaScript 的语法扩展，用于 react
中，既不是字符串也不是 HTML，有点像模板，形如：
1<div>{arr}</div>
2 react 与只有 JS 的区别
单纯的 JS 是直接操作和构造 html。
react 是数据驱动界面，它通过虚拟的 html 生成标签。
react 的基础逻辑是数据由上向下单向流动。
虚拟的 html 有点类似于模板，html 中其中可嵌入变量和程序段。
举个例子，之前提交表单时将表单中每个元素取值转给 server，也就是从
html 中取值；使用 react 后，当按下按钮时，一般调用某个 react
函数，由函数内部通过数据构造请求，以及处理请求的结果，再进一步渲染控件，而非整个刷新 ...
06_bootstrap
1 需求
代码简单
界面不丑
学习成本低
2 简介
Bootstrap_ 是 Twitter 推出的前端开发的开源工具包。
具体控件长什么样，全靠设 class。
bootstrap 都是基于 jquery 的。
bootstrap 主要需要引用 css 和 js 两个文件。
3 具体用法
3.1 Blog 博客
3.2 Chart 画图
https://chartjs.bootcss.com/docs/
3.3 Table 表
https://getbootstrap.com/docs/5.1/content/tables/
3.4 SlideBar 侧栏
3.5 Model 弹框
关键字 Modal
模态框（Modal）是覆盖在父窗体上的子窗体。
引例程为 bootstrap5，请注意与 js 版本匹配
具体方法：https://www.runoob.com/bootstrap5/bootstrap5-modal.htmll
需要在调出它的控件中设置形如
123<button type="button" class="btn btn-prim ...
2_Obsidian_常用插件
2_Obsidian_ 常用插件
1 强烈推荐
1.1 最近打开的文件：Recent
Files
安装后在左侧面板上部出现时钟图标，可以查看最近打开的文件
1.2 Git 插件：Obsidian Git
可以定时 commit，push，pull 同步到 git，在国内可使用 gitee
作为服务端，速度很快。
详见：3_Obsidian_用Git同步笔记
1.3 规范化格式：Linter
tag wrangler 目前位居下载量排行榜第 26 位。
Linter
插件用于规范化笔记模式，支持规范化当前文档，当前目录下的文档，以及所有文档，并且可以设置哪些文档不需要修改（比如某些模板）。需要注意的是：修改之前要先在设置界面勾选规范哪些操作（细节非常丰富），然后通过
Ctrl+P 菜单调用 Linter 功能，或者用 Ctrl+Alt+L
快捷键规范化当前页面。常见的操作包含：加间隔行，去空行，去掉无用的空格等等。
1.4 自动生成序列号：Number
Headings
在 Setting->Number Headings
中设置默认的开始层级等信息，注意不要选择 Automati ...