streamlit构造Web应用
StreamLit 构造 Web 应用
功能
Streamlit 帮助机器学习工程师快速开发用户交互工具，几乎可取代 Flask
在机器学习项目中的地位。
个人感受
确实非常方便，安装 python 库的 streamlit 后，可快速入门
和学习前端相比，学习成本非常低
界面比较美观，适合用于 demo 和内部展示
通过简单的代码，就可以展示丰富的功能；但对于复杂的 UI 还没试
不需要可见的 b/s 通讯，几乎所有交互都通过操作 streamlit
句柄完成
使用很方便，功能是否强大还没试
运行需要基于 streamlit 框架
安装
1$ pip install streamlit
运行示例
1$ streamlit hello --server.port 8080
我指定了端口，否则其默认运行端口是 8501
在其左侧可以选择几种主要的 demo
Pasted image
20220212132427.png
运行程序
将其中 dataframe 的 demo 写入一个文件 test.py，然后运行
1$ streamlit run test.py --server. ...
图数据库Neo4j
图数据库
传统数据库难以处理复杂多跳的关系运算。需要一种支持海量、复杂、且结构灵活的关系运算数据库，图数据库应运而生。
1 相关概念
1.1 简介
图数据库由顶点和边组成；
主要用于对图数据的增删改查；
目前常用的图数据库有 Neo4j，JanuxGraph 等
1.2 使用场景
常用于社交、电商、金融、零售、物联网等行业
用于关系查询
用于遍历复杂关系
用于实现复杂的规则：如子图比较、推荐等
对于结构化数据，常可使用关系型数据库；对于关系比较多，数据不太规律的情况，则用图数据库
1.3 分类
属性图数据库
构成：顶点、边、顶点属性、边属性
RDF 图数据库（不支持属性，比较古老，已经不怎么用了）
针对文本语义场景产生
三元组：subject->predicate->object
1.4 原生图数据库
原生图数据库：使用图模型进行数据存储，可以针对图数据做优化，从而带来更好的性能，例如
Neo4j。
非原生图数据库：底层存储使用非图模型，在存储之上封装图的语义，适合与其它数据应用配合使用，例如
Titan、JanusGraph 底层 采用 KV 存储非图模 ...
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
函数，由函数内部通过数据构造请求，以及处理请求的结果，再进一步渲染控件，而非整个刷新 ...