目录

作者: admin

解决:Mac 突然变的很卡,打开程序也等很久,重启无效

由于这两天没注意,我的“梯子”到期了。经过一番资料查阅以及验证,关闭电脑的网络,就可以恢复正常,很快就能打开应用。猜测应该是大部分程序启动都会联网通信,比如检查程序是否更新版本?具体原因没做深入了解。

解决方法

以下方式选择一种即可:

  1. 更换电脑网络
  2. 重启路由器拨号
  3. 检查 Mac 上的相关代理软件是否正常

Electron-Vue 从创建到发布

本文为 Electron-Vue 创建项目到发布的关键流程,其中一些命令如果报错,应该是缺少一些环境导致的错误,针对错误进行相应的环境安装即可。

一、必备基础环境安装

检查基础环境:

# 下面这行的命令会打印出Node.js的版本信息
node -v

# 下面这行的命令会打印出npm的版本信息
npm -v

基础环境官方文档

二、创建一个 Electron-Vue 项目

执行以下命令创建第一个 Electron-Vue 项目,vue-cli 如果已经安装过了的话,就不必再次安装了。(建议到自己创建的目录后执行,它会为你创建项目文件夹)

# 全局安装vue-cli
npm install -g vue-cli
# 使用vue-cli创建electron-vue手脚架项目
vue init simulatedgreg/electron-vue my-project

耐心的等待一段时间(可能需要梯子),就可以直接运行应用了。

# 安装依赖
$ cd my-project
$ npm install
# 运行程序
npm run dev

运行成功,如果中途有出现报错,对相应的错误进行搜索引擎检索解决。一般都是缺失环境导致。

附:Electron-Vue 文档

解决 Electron-Vue 报错:Webpack ReferenceError: process is not defined

网上找了几种方式,让修改 webpack.renderer.config.jswebpack..config.js 都不太好使,应该是由于不同的版本造成的。这里给出一种我目前(2020-10-19)配置的最新环境,可以解决的方案:

解决方案地址:https://github.com/SimulatedGREG/electron-vue/issues/871#issuecomment-564302194

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vest</title>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      </script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <!-- Set `__static` path to static files in production -->
    <%  if (!require('process').browser) { %>
      <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
      </script>
    <% } %>

    <!-- webpack builds are automatically injected -->
  </body>
</html>

以上代码,覆盖到 index.ejs 文件即可。

运行效果

在 Typora 中使用 Markdown 绘制图表

在 Typora 中,当导出为 HTML,PDF,epub,docx 时,这些渲染图也将包括在内。但导出其他格式可能就无法渲染了,因此拥有导出其他格式文本的需求时,依然应该采用图片插入的形式作为保存。

顺序图

此功能实现基于 js-sequence ,它将以下代码块转换为呈现的图:

```sequence
爱丽丝->波波: 询问“在不在,在不在?”
Note right of 波波: 经过思考\n输入一些文本
波波-->爱丽丝: 您好,在的
```

顺序图

更多语法信息,请参见语法说明

流程图

此功能实现基于 flowchart.js ,它将一下代码转换为呈现的图:

```flow
st=>start: 开始
op=>operation: 一些想法
cond=>condition: 做出 Yes/No 选择?
e=>end: 结束

st->op->cond
cond(yes)->e
cond(no)->op
```

流程图

Mermaid 类图

Typora 还与 mermaid 集成,该软件支持序列图,流程图,甘特图,类和状态图以及饼图。

顺序图

有关更多信息,请参见说明。示例:

```mermaid
sequenceDiagram
    阿丽->>波波: 你好,波波!最近咋样?
    alt 生病了
    波波->>阿丽: 不怎么样 :(
    else 很好
    波波->>阿丽: 我感觉很好
    end
    opt 额外的对话
    波波->>阿丽: 谢谢关心
    end
```
Mermaid 顺序图

流程图

有关更多信息,请参见说明。示例:

```mermaid
graph LR
A[A 流程] -->B(B 流程)
    B --> C{进入选项}
    C -->|第一选项| D[不错的选择]
    C -->|第二选项| E[更佳的选择]
```
Mermaid 流程图

甘特图

有关更多信息,请参见说明。示例:

```mermaid
        gantt
        dateFormat  YYYY-MM-DD
        title 甘特图示例标题

        section 第一行
        完成任务               :done,    des1, 2020-01-06,2020-01-08
        激活任务               :active,  des2, 2020-01-09, 3d
        即将要做               :         des3, after des2, 5d
        即将完成               :         des4, after des3, 5d

        section 第二行
        完成关键线路任务                       :crit, done, 2020-01-06,24h
        实现 parser 和 jison                 :crit, done, after des1, 2d
        为分析器创建测试                       :crit, active, 3d
        关键线路未来任务                       :crit, 5d
        为渲染器创建测试                       :2d
        添加 mermaid 到项目                   :1d

        section 第三行
        描述甘特图语法                        :active, a1, after des1, 3d
        将甘特图添加到演示页                   :after a1  , 20h
        将另一个图表添加到演示页面              :doc1, after a1  , 48h

        section 第四行
        描述甘特图语法                        :after doc1, 3d
        将甘特图添加到演示页                   : 20h
        将另一个图表添加到演示页面              : 48h
```
Mermaid 甘特图

Class 图

有关更多信息,请参见说明。示例:

```mermaid
classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }
```
Mermaid Class 图

状态图

有关更多信息,请参见说明。示例:

```mermaid
stateDiagram
    [*] --> 静止
    静止 --> [*]

    静止 --> 移动
    移动 --> 静止
    移动 --> 碰撞
    碰撞 --> [*]
```
Mermaid 状态图

饼状图

有关更多信息,请参见说明。示例:

```mermaid
pie
    title 性别统计
    "未知" : 386
    "男" : 85
    "女" : 150 
```
Mermaid 饼状图

Typora 导入、导出 Word、rtf、odt、wiki 等文件

Typora 需要 Pandoc 才能使用某些高级功能。如果您没有 Pandoc(或版本低于 v1.16),请从Pandoc下载页面下载并运行安装程序。

如果收到 Typora 找不到 Pandoc 的错误,则在安装 Pandoc 后可能需要重新启动 Typora。

对于 Windows 用户,如果 Typora 仍说无法找到 Pandoc ,则可能需要重新启动电脑。

Pandoc 整合

在 Typora 中,某些文件格式(包括 docx,odt,rtf,epub,LaTeX 和 Wiki)的导入和导出功能由名为 Pandoc 的第三方软件提供支持,这些功能需要安装 Pandoc(≥v1.16)。

请注意,对于 Typora,Pandoc 的安装是可选的,如果您不需要 Typora 中的高级导入/导出支持,则不必在计算机上安装Pandoc。

本文档将展示如何安装 Pandoc 以及将 Typora 与 Pandoc 一起使用以实现完整的导入/导出功能。

安装 Pandoc

Mac 安装 Pandoc

简而言之,有两种推荐方法。

  1. 从下载的软件包安装程序中安装

从 Pandoc 的下载页面下载软件包安装程序 ,打开它,然后按照说明进行安装。

Pandoc 安装

2. 从Homebrew安装

对于使用 Homebrew 的开发人员,安装Pandoc可以从终端执行以下操作:

brew install pandoc

Windows 安装 Pandoc

下载 pandoc-*-window.msi 从 Pandoc 的下载页面,打开它,然后按照说明进行安装。

Windows 安装 Pandoc

使用 Pandoc

在安装 Pandoc 之后,您可以通过从菜单栏中单击“文件”->“导入”来导入支持的文件类型,或者只是将文件拖放到 Typora 中。菜单栏中还提供了新的导出功能。Pandoc 将在这些任务的后台运行,然后自动退出,因此您可能不会注意到它。

常见问题

支持哪个版本的 Pandoc?

要求版本 ≥ 1.16,最新版本更好。因此,如果您的Pandoc版本太旧,则鼓励更新Pandoc。

Typora 是否可以在没有 Pandoc 的情况下运行?

可以。只有导入和导出(HTML / PDF文件类型除外)才需要它。

Typora 可以导入或导出哪些文件类型?

导入支持具有以下扩展名的文件:.docx,.latex,.tex,.ltx,.rst,.rest,.org,.wiki,.dokuwiki,.textile,.opml,.epub。
导出支持以下文件格式:HTML,PDF(这两个不需要 Pandoc),Docx,odt,rtf,Epub,LaTeX,Media Wiki。
Pandoc 本身支持 Typora 尚未集成的更多文件类型。在这里有更多详细信息。

通过 Typora 导出与通过命令行使用 Pandoc 导出之间有什么区别?

由Typora导出也由Pandoc提供支持,但是Typora不会直接从markdown转换为目标文件类型,而是转换为Pandoc可以读取然后写入为目标文件类型的内部格式。在这里 有更多详细信息

是否可以正确导出所有内容?

尚不支持导出任务列表。.docx仅当未在其他内联样式的内部或外部使用下划线和突出显示时,才支持下划线和突出显示。下划线和突出显示不支持OpenOffice(.odt)。LaTeX不支持嵌入.gif文件。可以导出其他块或内联元素,但是在导入或导出时样式不能100%匹配。

如何为Mac卸载Pandoc?

请遵循官方提示来卸载它

本文为官方文档的译文,这里可以查看原文。

Typora 中使用 Markdown 常用语法汇总

总览

Markdown 由 Daring Fireball 创建;原始指南在这里。但是,其语法在不同的解析器或编辑器之间略有所不同。Typora 尝试遵循 GitHub Flavored Markdown,但可能仍然存在一些不兼容之处。

块元素

段落与换行

在 Markdown 中,更换段落需要敲 2 个 Return(回车键)来更换。但是在 Typora 中,敲一次 Return 即可。

在 Typora 中需要仅仅更换一个“行”,而不是文本的话,则需要使用 Shift + Return 来实现换行,或键入 <br /> 实现相同的效果。

标题

在 Markdown 中,标题一共有 6 个等级表示不同的标题大小与级别。例如:

# 这是一级标题
## 这是二级标题
### 这是三级标题

###### 这是六级标题
Markdown 标题效果示例

在 Typora 中,输入 “#” 空格输入内容,然后按下 Return 键将创建一个标题。或输入 ⌘1⌘6 作为快捷方式。

块引用

使用 Markdown 语法 >来标记一段文本为引用文本样式。示例:

> Typora Markdown 块引用示例
>
> 这是一段示例文本。
>
> > 内嵌块引用文本
>
> 示例文本

普通文本,普通文本示例。
Markdown 块引用效果示例

在 Typora 中,输入 “>” 空格后即可输入文本内容实现以上效果,在引用文本中,可继续使用 “>” 来表示内嵌的引用文本。

列表

输入 * 列表文本1 将创建一个无序列表(* 符号,可使用 + 或 – 来代替)

输入 1. 列表文本1 将创建一个有序列表

例如:

## 无序列表

* 萝卜
* 西红柿
* 白菜

## 有序列表

1. 张三
2. 李四
3. 王五
有序列表 与 无序列表

任务列表

任务列表是可标记完成与未完成的一个文本列表,它通过 - [ ]- [x] 标记来实现。例如:

- [ ] 早上 9 - 10 点背诵单词
- [ ] 下午 13:00 - 14:00 遛狗
- [x] 有空时,去楼下取快递
- [ ] 购买 5 号电池
- [ ] 18号之前编写项目《某公司某项目》的方案
任务列表

您可以在 Typora 中通过鼠标单击来标记 “完成” 或 “未完成” 。

代码块

在 Typora 中可对 Markdown 语法标记的代码块进行语法高亮,使用它也很容易,只需要输入 ``` 然后按下 Return 键即可选择高亮语言类别并键入代码块(也可以直接在 ``` 后直接输入语言名称),例如:

无高亮代码展示:

```
function test() {
  console.log("notice the blank line before this function?");
}
```

高亮代码展示:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
Typora 代码高亮

数学公式块

您可以使用 MathJax 渲染 LaTeX 数学表达式。

要添加数学表达式,请输入 $$ 并按 Return 键,这将触发一个接受Tex / LaTex源的输入字段。例如:

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$
数学公式示例

您可以在 此处 找到更多的 MathJax 的更多详细信息

表格

Typora 支持标准的 Markdown 以外也支持 GFM 的格式,同样也可以在界面中直接编辑表格,输入 | 第一行 | 第二行 | 第三行 | 并按下 Return 键,则将创建两行三列的表格。示例:

Markdown 表格

表格创建好之后,可以通过鼠标在表格中进行删减、排版、调整大小、对其等操作。

实际上是 Typora 为我们自动创建了 Markdown 语法的更多的表格内容,实际上最终我们可以在 Typora 中通过+/查看最终生成的内容如下:

| 第一行 | 第二行 | 第三行 |
| ------ | ------ | ------ |
|        |        |        |

更多表格设置的 Markdown 语法,可以通过 Typora 图形界面操作后查看它生成的内容来学习,或者查阅搜索引擎来学习。

脚注

脚注作用于标示一个词汇的具体解释内容,在鼠标悬浮在该词汇上是,并显示标示的内容,示例:

快来跟我一起使用 [^Typora] 吧!




[^Typora]: Typora 是一个优秀的文本**阅读**、**编辑** 工具。
脚注示例

即便是导出 PDF 依然奏效。

水平线

分割线

在空白行中输入 *** --- 然后键入 Return 即可实现一条分隔行(但是在第一行输入 — 则表示文件描述

YAML 文件描述

Typora 支持 YAML Front Matter,在文章顶部输入 --- ,然后按下 Return 即可

目录

输入 [toc] 按下 Return 建,即可根据标题生成目录菜单,后面您再次增加标题,它也会自动更新。

[toc]

# 一级菜单

## 二级菜单

正文内容, 正文内容。

## 第 2 个,二级菜单

正文内容
[toc] 自动生成菜单

段落元素

链接

Markdown支持两种样式的链接:网站链接和引用。

在两种样式中,链接文本均由 [方括号] 分隔。

网站链接

要创建网站链接,使用 [标题](地址) 即可。例如:

这是一个 [王旭博客](https://wxzzz.com) 的连接地址。
网站链接

内部链接

创建内部链接,可使用 [标题](#标题名称) 即可。例如:

### 新建了一个标题



*这里可以多增加一些 “换行” 来出现窗体的滚动条,以便测试下面的连接点击,是否可以正确的跳转*



点击 [这里](#新建了一个标题) 来跳转到标题!
引用链接 跳转到标题

引用链接

如果一篇文章有多个链接都跳转到同一个地方,可以使用引用链接。

您可以 [点击][id] 这里进行网站跳转。

您可以 [点击][id2] 这里进行内部跳转。

[id]: https://wxzzz.com/  "此处为可选标题"
[id2]:#我的标题 "跳转标题测试"





### 我的标题
引用链接跳转到网站或内部标题

也可以直接简写 [id][] 方式,默认使用引用链接的名称作为文本。

其他链接

例如跳转邮箱、拨打电话等,可以使用<10000@qq.com>这样的方式展示,如:

电话:<tel:13088886666>

邮箱:<10000@qq.com>
其他链接示例

图片

图片的引入方式,与链接引入的方式相仿,使用 ![图片描述](图片路径) 即可。例如:

![图片描述](/path/to/img.jpg)

![图片描述](/path/to/img.jpg "额外标题")

路径可以是相对路径或绝对路径,可可以直接将图片拖入 Typora 中。

常规文本样式设置

斜体:使用 *文本内容*_文本内容_

粗体:使用 **文本内容**__文本内容__

删除线:使用 ~~文本内容~~

斜体、粗体、删除线

如果真的需要输入 * 符号,可在在其前面加入反斜杠 \* 来表示。

以上建议使用 * ,而尽量不使用 _

局部代码

如果一行文本中,有一小段为代码,可以 `代码` 的方式进行展示,示例如下:

使用 `printf()` 函数.
局部代码

表情符号

在 Typora 中输入 : 后,加上常见的单词词汇,输入过程中会弹出自动完成的表情可选项,比如 :happy: :dog: :cat: :pig:,效果如下:

表情符号

也可以通过菜单 编辑 – 表情与符号 (⌃+⌘+空格键)来选择。

内联数学

要使用此功能,请首先在 Typora 首选项面板的选项卡中启用它。然后,用于$包装LaTeX命令。例如:

$\lim_{x \to \infty} \exp(-x) = 0$

下标

要使用此功能,请首先在 Typora 首选项面板的选项卡中启用它。然后,用于~包装下标内容。例如:

H~2~O,X~long\ text~/

上标

要使用此功能,请首先在Markdown首选项面板的选项卡中启用它。然后,用于^包装上标内容。例如:X^2^

HTML

可以在文本中直接编写 HTML 代码来实现,Markdown 语法不支持的内容。例如:

<span style="color:green"> 一段文本 </span>

Typora 系列文章第一篇

为什么选择 Typora

Quiver

之前一直在使用 Quiver ,也算得上是轻量级的文本编辑工具(它包含了不止于 Markdown,还有其他富文本、代码等方式的混合编辑)整体使用感觉非常好,但它对于我来说还是稍微“重”了一点,最终选择了 Typora 来作为我现在的文本编辑工具。

Typora

界面打开就是这么朴实无华,类似 Windows 下的“记事本”,但它更强大,同样支持 Markdown 语法以及代码高亮,关键还很漂亮。

进入 Typora 系列文章

.Net 操作 Oracle CLOB类型字段 INSERT 超长数据

如果仅仅在数据库中设置了类型为 CLOB 字段类型,使用普通的 INSERT 语句直接写入数据到数据库的话,它依然会将其视为 VARCHAR 类型数据,并最大长度为 4000 字符。超过该长度会报出字符串超长,写入数据失败的错误。

使用 Dapper 处理 CLOB 数据 INSERT

代码如下:

OracleConnection cnn = new OracleConnection("..数据库链接字符串..");
cnn.Open();

string content = "假定超过4000的超长字符串";
byte[] newValue = Encoding.Unicode.GetBytes(content); //这里一定要使用 Unicode 字符编码
OracleClob p_content = new OracleClob(cnn);
p_content.Write(newValue, 0, newValue.Length);

string sql = "INSERT INTO TABLE(CONTENT) VALUES(:content)";
DynamicParameters parameter = new DynamicParameters();
parameter.Add("content", p_content);
cnn.Execute(sql, parameter);
cnn.Close();

其实跟 Dapper 也没多大关系,在 .Net 中的 Oracle CLOB 需要以上特殊处理下,否则 Dapper 会将其视为普通字符串类型写入。

敲重点,如何 UPDATE CLOB 字段类型的数据

本来没有这一节文章内容的,我认为像 INSERT 同样的方式创建 SQL 参数传入就好了。实际上并不是,UPDATE 需要跟以往同样的方式,直接 string 传参就可以了,以下参考:

OracleConnection cnn = new OracleConnection("..数据库链接字符串..");
cnn.Open();

string content = "假定超过4000的超长字符串";
string sql = "UPDATE TABLE SET CONTENT = :content WHERE ID = :id";

DynamicParameters parameter = new DynamicParameters();
parameter.Add("id", 10001);
parameter.Add("content", content);
cnn.Execute(sql, parameter);
cnn.Close();

你没看错,它不需要再转换为 OracleClob 对象参数了,转换了反而会报错。

.Net Swagger Swashbuckle 5.0 为 POST 请求添加 Body 内容参数

在项目中创建一个 class,例如如下 BinaryPayloadFilter 的 class:

    public class BinaryPayloadFilter : IOperationFilter
    {
        public void Apply(OpenApiOperation operation, OperationFilterContext context)
        {
            if (context.ApiDescription.HttpMethod.ToUpper() != "POST")
                return;

            operation.RequestBody = new OpenApiRequestBody();
            operation.RequestBody.Content.Add("application/json", new OpenApiMediaType()
            {
                Schema = new OpenApiSchema() { Type = "string" }
            });

        }
    }

然后在 Startup.cs 文件中,相应位置加入如下代码:

public void ConfigureServices(IServiceCollection services)
{
    services.AddSwaggerGen(c =>
    {
         c.OperationFilter<BinaryPayloadFilter>();  // 加入该行代码
    }
}

您的 Swagger 即可实现如下图效果:

为 Swagger 添加 Body 参数

Oracle 解决错误:ORA-25153: Temporary Tablespace is Empty

出现问题的根源在于临时表空间文件没有挂载,我们将其挂载上去就可以了。

如何查看表空间临时文件是否挂载

SELECT TABLESPACE_NAME,FILE_NAME FROM DBA_TEMP_FILES;

执行以上代码,显示结果如下:

以上结果表示 表空间 是成功挂载的

Oracle 如何挂载临时表空间

ALTER TABLESPACE TEMP ADD TEMPFILE 'C:/app/Administrator/oradata/DOCARE/TEMP01.DBF';

执行以上代码即可,其中的 TEMP01.DBF 文件为你自己程序的 Oracle 数据库文件路径,如果不知道在哪里,Windows 可以用磁盘搜索工具进行相应的搜索, Linux 可以用 Find 命令来搜索一下,很快就能找到。

至此大功告成。