发表于 | 更新于

最近研究一个C#开源项目，发现在离线的情况下无法顺利编译链接，其原因是缺乏NuGet安装的程序集。因此研究一下NuGet打包和离线安装的方法。

NuGet简介

NuGet是一个自由开源软件包管理系统。用于Microsoft开发平台。以前称NuPack。 2010年首次发布。已经进化为一个庞大的工具与服务生态系统。

下载Nuget程序包

  1. 进入Nuget官网：https://www.nuget.org/，

  2. 搜索框里搜索需要的安装包，例如MaterialDesignThemes，一个主题包，点击自己所需的安装包。

NuGet离线安装软件包

参考链接

  1. C# NuGet打包和离线安装,by mob604756fda125.
  2. NuGet是什么？理解与使用（上）,by 6号咸鱼.
  3. Visual Studio NuGet离线安装包,by 苏守坤.

发表于 | 更新于

最近处理的几个项目都是用Java语言编写的，学习一下。

Web.xml配置文件

Listener

为web应用程序定义监听器，监听器用来监听各种事件，比如：application和session事件，所有的监听器按照相同的方式定义，功能取决去它们各自实现的接口，常用的Web事件接口有如下几个：

  • ServletContextListener：用于监听Web应用的启动和关闭；
  • ServletContextAttributeListener：用于监听ServletContext范围（application）内属性的改变；
  • ServletRequestListener：用于监听用户的请求；
  • ServletRequestAttributeListener：用于监听ServletRequest范围（request）内属性的改变；
  • HttpSessionListener：用于监听用户session的开始和结束；
  • HttpSessionAttributeListener：用于监听HttpSession范围（session）内属性的改变。

主要用于监听Web应用事件，其中有两个比较重要的WEB应用事件：应用的启动和停止（starting up or shutting down）和Session的创建和失效（created or destroyed）。

Filter

Filter可认为是Servle的一种“加强版”，主要用于对用户请求request进行预处理，也可以对Response进行后处理，是个典型的处理链。使用Filter的完整流程是：Filter对用户请求进行预处理，接着将请求HttpServletRequest交给Servlet进行处理并生成响应，最后Filter再对服务器响应HttpServletResponse进行后处理。Filter与Servlet具有完全相同的生命周期，且Filter也可以通过来配置初始化参数，获取Filter的初始化参数则使用FilterConfig的getInitParameter()。

换种说法，Servlet里有request和response两个对象，Filter能够在一个request到达Servlet之前预处理request，也可以在离开Servlet时处理response，Filter其实是一个Servlet链。

以下是Filter的一些常见应用场合：

  • 认证Filter
  • 日志和审核Filter
  • 图片转换Filter
  • 数据压缩Filter
  • 密码Filter
  • 令牌Filter
  • 触发资源访问事件的Filter
  • XSLT Filter
  • 媒体类型链Filter

Servlet

Servlet通常称为服务器端小程序，是运行在服务器端的程序，用于处理及响应客户的请求。Servlet是个特殊的java类，继承于HttpServlet。客户端通常只有GET和POST两种请求方式，Servlet为了响应则两种请求，必须重写doGet()和doPost()方法。

Bean

JavaBeans是Java中一种特殊的类，可以将多个对象封装到一个对象（bean）中。特点是可序列化，提供无参构造器，提供getter方法和setter方法访问对象的属性。名称中的“Bean”是用于Java的可重用软件组件的惯用叫法。

Web.xml加载顺序

总的来说，web.xml的加载顺序是:->->->。其中，如果web.xml中出现了相同的元素，则按照在配置文件中出现的先后顺序来加载。

对于某类元素而言，与它们出现的顺序是有关的。以为例，web.xml中当然可以定义多个，与相关的一个元素是，注意，对于拥有相同的和元素而言，必须出现在之后，否则当解析到时，它所对应的还未定义。web容器启动初始化每个时，按照出现的顺序来初始化的，当请求资源匹配多个时，拦截资源是按照元素出现的顺序来依次调用doFilter()方法的。同类似，此处不再赘述。

Servlet里有request和response两个对象，Filter能够在一个request到达Servlet之前预处理request，也可以在离开Servlet时处理response，Filter其实是一个Servlet链。

Struct2

请参考Struct2 基础介绍 。

Struct2工作流程

图1 Struct2工作流程

Spring

请参考Spring MVC 解析之 DispatcherServlet。

Spring工作流程

图2 Spring工作流程

参考链接

  1. web.xml 配置文件 超详细说明！！！ ,by 吴川华仔.
  2. web.xml文件中加载顺序的优先级 ,by laolu0837.
  3. Spring 、SpringMVC 、Struts2之间的区别,by 刘二雄.
  4. Struct2 基础介绍 ,by shiyuan310.
  5. 深入Struts2的过滤器FilterDispatcher–中文乱码及字符编码过滤器,by 关键步就几步.
  6. Spring整合Struts2步骤及完整实例,by Star_Ship.
  7. Spring和struts2整合详解,by Damon.
  8. spring整合struts2过程详解,by 西西嘛呦.
  9. Spring MVC 解析之 DispatcherServlet,by 摆码王子.
  10. 一文读懂SpringMVC工作流程,by Wizey.
  11. servlet的url-pattern匹配规则详细描述,by 51kata.
  12. Listener,Filter,Servlet执行顺序和生命周期,by laolu0837.
  13. springmvc 的参数绑定，springmvc和 struts2的区别,by 双斜杠少年.
  14. 如何集成Struts和Spring,by gxhsnowflower.
  15. Struts2和Spring集成,by yiibai.
  16. Spring 和 Struts 集成,by 王如霜.

发表于

Flow 是 JavaScript 代码的静态类型检查器。它做了很多工作来提高你的工作效率。使您编码更快、更智能、更自信，并且规模更大。

Flow 通过静态类型注解检查你的代码是否有错误。这些 类型允许您告诉 Flow 您希望您的代码如何工作，Flow 将确保它确实以这种方式工作。

Vue2的源代码就使用了Flow进行静态类型检查。下面介绍在Vue2项目中安装配置使用Flow的方法。

安装步骤

  • Babel是一个支持 Flow 的 JavaScript 代码编译器。Babel 将获取您的 Flow 代码并删除所有类型注释。
1
npm install --save-dev @babel/core @babel/cli @babel/preset-flow

接下来，您需要在项目的根目录下创建一个文件，即.babelrc， 并将”@babel/preset-flow”配置在您的”presets”.

1
{ "presets": ["@babel/preset-flow"] }
  • flow可以直接通过npm或者yarn安装。
1
npm install --save-dev flow-bin

安装完成后在package.json中加入下面的脚本:

1
2
3
"scripts": {
  "flow":"flow check"
}

使用方法

配置flow

首先生成flow配置文件.flowconfig：

1
.\node_modules\.bin\flow init

使用flow

新建一个文件index.js：

1
2
// @flow 
let a:number = '3';

// @flow或者 /* @flow */告诉flow检查这个文件
输入npm run flow 执行类型检查

注：在vue单文件组件使用flow需要额外配置

注：项目路径不能存在中文

请参考vue2.0项目配置flow类型检查。

参考链接

  1. vue2.0项目配置flow类型检查,by ltinyho.
  2. Flow静态类型检查及在Vue项目中的使用,by 美团点评点餐.
  3. .flowconfig,by flow.org.
  4. flow高级配置,by zhenyong.
  5. flow从零开始—-安装和配置,by advance100.
  6. npm发布以@开头命名的public包！！！,by ty41232X32.

发表于 | 更新于

Three.js是一个跨浏览器的 JavaScript 库和应用程序编程接口(API)，用于使用WebGL在Web 浏览器中创建和显示动画3D 计算机图形。

Three.js 允许使用JavaScript语言创建图形处理单元(GPU) 加速的 3D 动画作为网站的一部分，而无需依赖专有浏览器插件。

Three.js入门教程

请参考一篇文章了解 threejs 在 vue 项目中的基本使用。

three.js 动画系统

参考链接

  1. 轨道控制器（OrbitControls）,by threejs.
  2. 一篇文章了解 threejs 在 vue 项目中的基本使用,by wjw1014.
  3. 用封装好的threejs库快速生成全景-Panolens.js,by 乘风转舵.
  4. 关于梳理封装Threejs工具类这档事,by FlyTeng_1874.
  5. Three.js - 监听window 的 resize 事件，使浏览器窗口变动自适应,by 已注销.
  6. How to trigger an event when element is resized in Vue.js?,by stackoverflow.
  7. Resize Observer API,by mozilla.
  8. Three.js Animation in Canvas doesn’t resize properly in Vue Application,by stackoverflow.
  9. three.js 动画系统,by discoverthreejs.

发表于 | 更新于

《追求理解的教学设计方法》一书采用逆向设计方法，认为教学设计应分为如下三个阶段：

阶段1–预期成果

所确定的目标

教学设计目标，该设计将达到什么目标?

理解

学生将理解…

  • 大概念是什么?
  • 期望他们获得的特定理解是什么?
  • 可预见的误解是什么？

基本问题

  • 什么样的启发性问题能够促进探究、理解和学习迁移?

学生将会知道…

  • 作为本单元的学习结果，学生将会获得哪些关键知识和技能？
  • 习得这些知识和技能后，他们最终能够做什么？

学生将能够做到…

阶段2–评估证据

表现性任务

  • 学生通过哪些真实的表现性任务证明自己达到了预期的理解目标？
  • 通过什么标准评判理解成效？

其他证据

  • 学生通过哪些其他证据（例如：小测验、考试、问答题、观察、作业、日志）证明自己达到了预期成果？
  • 学生如何反馈和自评自己的学习？

阶段3–学习计划

设计关键的教学和学习活动。哪些学习体验和教学能够使学生达到预期的结果，以WHERETO分类学习活动。

  • W=帮助学生知道此单元的方向和预期成果？帮助教师知道学生从哪开始先前知识和兴趣？
  • H=把我学生情况和保持学生兴趣？
  • E=武装学生，帮助他们体验主要观点和探索问题?
  • R=提供机会去反思和修改他们的理解及学习表现？
  • E=允许学生评价他们的学习表现及含义？
  • T=对于学生不同的需要、兴趣和能力做到量体裁衣个性化？
  • O=组织教学使其最大程度地提升学生地学习动机与持续参与地热情，提升学习效果？

参考链接

  1. 追求理解的教学设计(第二版),by 格兰特·威金斯 杰伊·麦克泰格.
  2. Understanding by Design,by Ryan S. Bowen.

发表于

因断电导致Windows系统无法启动MongoDB后台服务，报1067错误。下面记录该故障的修复过程。

解决方法

  • 移除文件 the file /data/db/mongod.lock

  • 运行命令 mongod.exe –repair

1
run mongod.exe --repair --config  %mongodb_install_path\mongod.cfg"
  • 启动MongoDB服务
1
net start MongoDB

参考链接

  1. Mongodb启动失败1067错误,by CWSSSS.
  2. 意外关机后恢复的MongoDB的数据,by mongodb.

发表于 | 更新于

VLAN

请参考VLAN 基础知识和什么是VLAN。

无线数字通信中数据速率、载波频率和带宽的关系

请参考无线通信系统中数据带宽、载波频率和载波带宽的关系怎样理解？和无线数字通信中数据速率、载波频率和带宽的关系。

香农定理

香农定理给出了信道信息传送速率的上限（比特每秒）和信道信噪比及带宽的关系。香农定理可以解释现代各种无线制式由于带宽不同，所支持的单载波最大吞吐量的不同。

在有随机热噪声的信道上传输数据信号时，信道容量$R_{max}$与信道带宽W，信噪比S/N关系为：
$$R_{max}=W*log2(1+S/N)$$

注意这里的log2是以2为底的对数。

奈奎斯特准则

对于一个带宽为W（Hz）的无噪声低通信道，最高的码元传输速率Bmax:

$$B_{max}=2W(Baud)$$

即每赫兹带宽的理想低通信道的最高码元传输速率是每秒2个码元。

载波

载波（carrier wave）是指被调制以传输信号的波形，一般为正弦波。一般要求正弦载波的频率远远高于调制信号的带宽，否则会发生混叠，使传输信号失真。 可以这样理解，我们一般需要发送的数据的频率是低频的，如果按照本身的数据的频率来传输，不利于接收和同步。使用载波传输，我们可以将数据的信号加载到载波的信号上，接收方按照载波的频率来接收数据信号，有意义的信号波的波幅与无意义的信号的波幅是不同的，将这些信号提取出来就是我们需要的数据信号。 载波就是携带信息/信号的波形，它携带的方式是进行频率、振幅、相位间隔调制。

电子计算机科学中，基频（baseband）加上载波（carrier wave）而成为宽频（broadband）。

载波是信号调制与发射的载体，它只有一个中心频率，和带宽本身没任何关系。比如11n协议规定可以工作在2G频段，也可以工作在5G频段，其他因素都一样的。假定20M带宽，工作在2G频段的时候载波频率是2.4GHz，那它实际占用的频谱资源是2.390GHz-2.410GHz。工作在5G频段的时候载波频率是5GHz，那它实际占用的频谱资源是4.990GHz-5.010GHz。

调制

模拟信号调制

请参考幅度调制。

数字信号调制

请参考数字调制的原理。

参考链接

  1. VLAN 基础知识,by 行道科技.
  2. 什么是VLAN,by huawei.
  3. 集线器、交换机、路由器、网桥、网关之间的区别和联系,by danielxue7.
  4. 带宽和频率的关系到底是什么？,by zhihu.
  5. 无线通信系统中数据带宽、载波频率和载波带宽的关系怎样理解？,by zhihu.
  6. 无线数字通信中数据速率、载波频率和带宽的关系,by furious.
  7. 调制,by wikipedia.
  8. 数字信号,by baidubaike.
  9. 数字调制的原理,by bebr.
  10. 幅度调制,by wikipedia.

发表于 | 更新于

最近在维护一个网页应用时，发现其音频偶尔无法自动播放，且报如下错误：

1
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

该错误产生原因是chrome66之后都禁止音视频的自动播放。要解决该问题，可以在用户首次进入页面时，提示用户点击启动音视频自动播放，模拟用户交互。js代码如下：

1
2
3
<script>
  window.confirm("是否启动语音自动播放？")
</script>

以上方法有问题，不能模拟用户交互，还是需要用户真正点击网页。另外还可以参考文章解决浏览器无法自动播放音频的问题的解决方案。

参考链接

  1. Chrome 66禁止声音自动播放之后,by 人人网FED.
  2. 解决浏览器无法自动播放音频的问题,by 寻找_.
  3. chrome66 禁止自动播放后，有什么比较好的方法实现audio的自动播放吗？,by segmentfault.