- 博客(105)
- 资源 (18)
- 问答 (2)
- 收藏
- 关注
RSS订阅
原创 Angular单页应用网站SEO优化实例详解
基于个人爱好，使用Angular做了一个双语阅读的网站：蜗牛阅读， 用来闲暇时间看看英文的。可惜传了几本书到现在自己都还没看完~网站后台采用的是Netcore+Mysql，前端页面使用的是Angular8。既然做了网站就想搜索引擎能搜出来，于是就百度了很多大神的方法。我采用了使用 PhantomJS 抓取页面生成静态HTML的方式满足引擎爬虫的要求。经过一阵折腾几个搜索引擎终于都能正确收录我的页面了，也有正确的快照。这篇笔记我会把我整个网站优化过程操作过的一些流程分享给大家，希望能多少帮到大
2021-09-07 15:27:29
881
2
原创 利用Echarts制作不规则刻度的仪表盘图表示例
Echarts的仪表盘组件是一个比较炫酷的图表，能瞬间提升页面B格。但是默认的仪表盘组件的刻度都是按照设置的最大值均匀分布的。而实际应用中很多场景需要将部分数值区间放大显示到仪表盘上，比如仪表盘前面 50% 显示 0-10 的数值范围后面 50% 就显示 10-50 的范围。这种不规则的刻度不能直接调用 Echarts 提供的方法。需要将数据根据需求进行转换。本文展示了通过数据转换后实现的不规则刻度仪表盘效果。1、let ruler = [0, 10, 25, 50, 100, 200, 50
2021-02-24 09:47:09
3197
2
原创 百度地图API添加海量图标解决方案
采用百度地理信息可视化开源库mapv.js实现以canvas形式绘画渲染海量图标，允许自定义图标点击事件及附加数据参考文档：https://github.com/huiyan-fe/mapv/#readme主要代码：function run() { map.clearOverlays(); let count = document....
2020-01-10 13:00:36
4992
18
原创 使用UglifyJS实现一条指令打包发布项目实例
在前端页面开发中，使用Vue、Angular、React等框架构建的项目通常都会自动配置集成相关代码压缩发布的工具，开发者只需要执行指定命令即可完成项目的整体压缩发布操作。对于没有使用框架的项目，需要开发者手动配置使用相关工具完成对应操作，本文介绍使用UglifyJS实现代码打包压缩的方法。
2023-06-19 15:56:49
2110
原创 HTML下拉框样式美化
在网页中，下拉框的样式最难美化，默认样式巨丑，好在现在已经有各种框架实现了下拉框的样式美化，主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换，再将对应选项及事件进行关联。最近一项目需要修改很久以前的页面，用户需求又需要美化下拉框样式，又不能引入第三方的框架，只好自己动手写了一个JS插件，实现下拉框的样式美化。
2023-02-24 09:53:09
5241
1
原创 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 解决方法
最后尝试更换了播放插件，视频流就能正常播放了，问题得以解决。网上搜索这个报错的处理，试过了很多都没能解决问题。
2023-02-22 10:19:41
2327
原创 通用NetCore前后端分离项目Linux系统部署步骤
最近参与的大部分项目都是NetCore API加SAP页面的形式，都是部署在linux系统上，本文记录新领的服务器的部署步骤。采用NetCore3.1，MySql数据库。本文记录的程序名：myapp.dll部署文件保存目录：后台程序：/usr/publish/myapp/server/前端页面：/usr/publish/myapp/web_root。
2023-01-18 17:16:43
1988
2
原创 Angular页面使用指令和路由守卫进行权限控制
本方法采用权限码对需要进行权限控制的页面路由和页面元素进行标记，用户登录系统的时候，后台返回对应用户具有权限的全部权限码，页面通过将路由或元素的权限码与用户的权限码进行匹配，进而判断用户是否具有访问权限。对于路由地址，没有权限将阻止访问并重定向到指定路由页面（通常是登录页面），对于页面元素，没有权限将移除对应元素。
2023-01-04 16:29:19
1633
原创 Angular使用管道和指令进行多语言切换，无第三方库引用
工作中经常遇到需要进行多种语言切换的项目。本文记录了一种在Angular页面中通过使用管道和自定义指令实现的语言切换方案。
2022-11-28 18:45:39
1220
原创 Angular 服务端渲染 Angular Universal 实例
Angular Universal 通过后端渲染的方式能够很好的解决搜索引擎抓取不到完整渲染页面的问题。但是页面加载速度比较考验服务器的性能，服务器性能不好服务端渲染也就慢，浏览器拿到文档的时间就长。所以对于服务器条件不好的情况还是采用浏览器端渲染结合常用路由页面预先渲染的方式。可以减少页面加载时间。蜗牛双语阅读网站即是采用这种方式。
2022-11-22 15:23:45
1131
原创 JavaScript复制内容到剪切板
复制内容到剪切板分两种情况，一种是从页面已有的可选元素中选中内容进行复制，一种是将Javascript代码中的字符串直接复制到剪切板。
2022-11-14 17:33:01
22540
原创 JavaScript 自动执行函数工作原理
自动执行函数有多种叫法：立即执行方法、立即调用表达式、自动匿名函数等等。自动执行函数 Immediately Invoked Function Expressions (IIFEs)是 存在于JavaScript 文件头部和尾部的函数的一种包裹函数。JavaScript 自动执行函数工作原理介绍...
2022-06-20 17:41:53
846
原创 Ng-Zorro框架静态加载SVG图标
ng-zorro-antd是遵循 Ant Design 设计规范的 Angular UI 组件库。提供了丰富的常用页面组件。其中NzIconModule 提供了图标功能，可以方便地使用各种框架自带的SVG图标，也可以添加自己的svg作为图标。框架加载图标有静态加载和动态加载两种方式。静态方式是在模块中手动的加入需要使用的图标或者全部框架图标。动态加载是在页面运行时才从远程服务器获取图标资源文件。动态加载相对静态加载可以减少包体积。但是一般我们的页面使用的图标并不是太多，...
2022-04-30 18:11:08
1410
原创 React入门-JSX与元素渲染
什么是JSXconst element = <h1>Hello, world!</h1>;以上标签语法既不是字符串也不是 HTML，它被称为 JSX，是一个 JavaScript 的语法扩展。JSX 有点类似模板语言，但它具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。 JSX 标签里可以包含很多子元素：const element = ( <div> <h1>Hell...
2022-04-15 17:48:56
528
原创 React入门-认识React
环境要求确保安装了较新版本的node.js， 我安装的是 v14.17.0新建项目使用指令新建React项目 npx create-react-app my-app页面调试在项目文件夹下执行npm start指令启动调试，然后在浏览器访问http://localhost:3000断点调试路径：top/localhost:3000/static/js/D:/xxx/xxx/调试端口修改：node_module...
2022-04-14 17:44:47
525
原创 Nginx推流负载均衡配置
很多项目需要做推流服务，但是普遍都面临网络带宽的限制。此时可以配置一台服务器作为源服务器，另外多台服务器做转发，再结合DNS配置实现视频流的负载均衡。本文主要记录使用Nginx配置rtmp源服务器和转发服务器的配置方法。首先假设源服务器192.168.110.110，转发服务器IP 192.168.110.112，192.168.110.1131、源服务器配置配置指令：rtmp_auto_pushon;rtmp{server...
2022-03-16 19:01:49
4373
原创 ubuntu已安装的nginx添加rtmp模块
服务器已安装nginx并有服务已经发布。部署新的服务时需要添加rtmp模块以支持推流。经查rtmp模块为社区开发的模块，非官方模块。nginx也并不能动态的添加模块。想要添加新的功能只能通过源代码编译出新的执行文件替换原有执行文件。本文记录Ubuntu环境下添加rtmp模块编译新的执行文件的过程。1、查看当前nginx版本信息root@iZwz924eh34ene3sxg0an3Z:~# nginx -Vnginx version: nginx/1.10.3...
2022-03-15 11:47:43
6310
原创 Ubuntu使用bind9配置DNS服务器
为了实现负载均衡，扩展服务器带宽，需要自己配置DNS服务器解析对应域名。本文记录Ubuntu系统配置DNS服务的方法。假设域名www.mydomain.com 已在阿里云作了解析，现在需要新增一个二级域名 stream.mydomain.com 做推流服务，需要使用自己配置的DNS服务做请求解析分发。1、安装bind9使用指令安装DNS服务程序bind9apt-get install bind92、修改option配置...
2022-03-14 18:00:24
7235
原创 Windows Server 2012 搭建DNS服务器
为了实现负载均衡，扩展服务器带宽，需要自己配置DNS服务器解析对应域名。本文记录Windows Server 2012配置DNS服务的方法。\假设域名www.mydomain.com 已在阿里云作了解析，现在需要新增一个二级域名 stream.mydomain.com 做推流服务，需要使用自己配置的DNS服务做请求解析分发。Windows Server 配置 DNS服务器的步骤如下一、添加DNS服务打开服务器管理器，选择“添加角色和功能”...
2022-03-14 14:05:21
14590
原创 阿里云域名解析设置自定义DNS服务器
点击进入域名列表：阿里云购买的域名服务支持解析自定义的的DNS服务器，可以通过自己配置的DNS服务器实现CDN请求分发。详细的设置步骤如下：首先登陆阿里云平台，然后在工作台中选择域名，进入域名服务页面：1、设置自定义DNS Host点击进入域名列表：再点击管理进入该域名的管理页面：点击左侧的 自定义 DNS Host 菜单，打开DNS服务器列表（之前没有创建的时候列表是空的）：...
2022-03-10 16:54:58
11289
1
原创 使用Nginx配置静态文件镜像及负载均衡
CDN技术可以帮助应用减少带宽压力，请求响应压力，也可以实现服务器备份的功能。本文介绍使用Nginx配置简单的静态文件服务器的镜像备份以及请求分发功能。1、服务器配置假设的服务器配置如下：一台面向用户的服务器 192.168.1.8:80； 存放资源的源服务器：192.168.1.10:80；外加两台备份的镜像服务器：192.168.1.11:80，192.168.1.12:80。2、分发服务器设置在面向用户的服务器 192...
2022-03-03 09:50:53
3220
原创 网页上传文件夹 Angular + NetCore API 实现
1、实现原理前端采用 webkitdirectory 属性选择文件夹，然后遍历文件夹中的文件，循环调用后端接口一个文件一个文件的上传。某度网盘也是同样的原理。2、前端实现本文记录了Angular的写法，原生html+js的方式代码也差不多。模板页面代码如下：<inputtype="file"(change)="selectFolder($event)"webkitdirectory/>ts 代码 selectFolder 方法如下：...
2022-03-02 11:01:53
882
原创 C# 海量数据导出到 Excel
本篇介绍 C# 中 使用 Microsoft.Office.Interop.Excel 将数据导出到Excel文件的方法。一般少量的数据可以使用循环设置Excel单元格值的方式导出数据：Worksheet.Cells[x, y] = value;当数据条数很大时使用这种方式就会消耗大量时间。此时可以使用按区域设置数据源的方式进行数据导出： Range.Value2 = data;完整的代码如下： us...
2022-02-25 13:31:37
2192
原创 Angular12 ng build 报错 Index html generation failed. 问题解决记录
在使用 Angular12 (版本 12.0.3)开发项目时，会出现调试运行正常，但是调用ng build 发布时出现报错信息。提示：Index html generation failed. undefined:6:720366 missing '}' 或者：Index html generation failed. undefined:6:720366 missing ':' 等。解决的方法是修改 angular.json 配置文...
2022-02-18 10:39:38
923
原创 Echarts 自动切换选中状态
在很多大屏展示的页面中，需要统计图表自动切换选中状态。Echarts提供的 dispatchAction 方法就可以满足这个需求。本文针对饼图的自动切换做个记录，以作备忘。实现效果使用模拟数据表示按照省份和城市统计的GDP，饼图内圆表示按省份的占比，外环表示按城市的占比。自动切换时，城市和省份同步选中。最后实现的效果如下图：数据准备首先准备好模拟数据： //省份数据varprovi...
2022-02-16 21:35:20
4149
原创 【Angular中的Decorator】- 参数装饰器 (Parameter decorators)
参数装饰器在参数声明之前声明。参数装饰器应用于类构造函数或方法声明的函数。参数装饰器接收三个参数：target: Object - 被装饰的类propertyKey: string | symbol - 方法名parameterIndex: number - 方法中参数的索引值参数装饰器通常与方法装饰器组合使用实现一些特殊功能。1、不带参数的参数装饰器以下代码演示使用参数装饰器对方法输...
2022-02-08 21:24:18
890
原创 【Angular中的Decorator】- 方法装饰器 (Method decorators)
方法装饰器，用来装饰类的方法。它接收三个参数：target: Object - 被装饰的类的对象key：string - 方法名descriptor: TypePropertyDescript - 属性描述符1、不带参数的方法装饰器以下示例演示为方法添加日志打印：functionlog(target:any,key:string,descriptor:any){varmetho...
2022-02-07 16:48:39
611
原创 【Angular中的Decorator】- 属性装饰器 (Property decorators)
属性装饰器顾名思义，用来装饰类的属性。它接收两个参数：target ：被装饰的属性所属类的对象key ： 被装饰的属性名1、不带参数的属性装饰器以下示例演示通过属性装饰器跟踪属性的修改：function changeLog(target: any, key: string) { var _value: string = target[key]; if(delete target[key]) { ...
2022-01-19 17:30:15
832
原创 【Angular中的Decorator】- 类装饰器 (Class decorators)
作用于类的装饰器就是类装饰器 (Class decorators)，在装饰器简介中最后的装饰器示例就是类装饰器。1、需要修改构造方法的类装饰器1.1、不带参数的装饰器在装饰器简介中最后演示的就是修改构造方法的装饰器：function changePrice<T extends { new(...args: any[]): {} }>(constructor: T) { return class extends constructo...
2022-01-19 14:39:32
1123
原创 【Angular中的Decorator】- 装饰器简介
因为在 Angular 中的广泛使用，装饰器（Decorator）变得流行起来。 在 Angular 中，因为使用了 TypeScript，装饰器才可用。但在 JavaScript 中，装饰器目前仍然是第2阶段的提案，这意味着装饰器将成为该语言未来更新的一部分。本篇主要介绍装饰器是什么，以及如何使用它们来使代码更清晰、更易于理解。1、什么是装饰器在最简单的使用形式中，装饰器就是一种用一段代码将另一端代码包裹起来的方式， 按照字面...
2022-01-18 17:41:42
1531
原创 【Angular中的RxJS】- 常用操作符
RxJS提供了很多操作符对数据流（Observable）进行操作控制。在【Angular中的RxJS】- 创建数据流一文中介绍了创建数据流的方法，相关操作符这里就不赘述了。本文只介绍常用的针对数据流中的数据和流整体的处理的操作符。1、针对流数据的操作符map 操作符使用 map 操作符 对数据流中每次产生的数据进行处理，map(val: funcion(val: R):R)，代码示例：import{from,Observable}from...
2022-01-09 15:54:56
2083
原创 【Angular中的HTTP请求】- JSONP 详解
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。基于XMLHttpRequest的数据请求会受到同源策略限制，而 JSONP 以 <script> 标签的形式实现会被浏览器判定为静态资源的请求加载，从而跳过同源策略的限制。1、Angular JSONP 的使用方法在 Angular 项目中，使用 JSONP 实现跨域数据访问，我们需要引入 HttpClientModule 和 Http...
2022-01-08 18:16:18
1986
原创 【Angular中的HTTP请求】- 拦截器 HttpInterceptor 详解
Angular 请求拦截器 HttpInterceptor 详解；拦截器的使用方法介绍；多个拦截器的执行顺序介绍；返回数据过滤介绍；隐藏的默认拦截器介绍。
2022-01-07 17:48:11
5493
原创 【Angular中的HTTP请求】- HttpClient 详解
本文主要介绍了Angular中使用HttpClient发起请求的详细流程。主要包括：1、HttpClient的使用方法。2、常用请求方法。3、调用关系。4、handle() 方法跟踪。5、 HttpBackend 介绍。 6、小结
2021-12-28 16:34:49
7052
原创 【Angular中的RxJS】- Subject 分类介绍
RxJS 中 Subject 是一种特殊类型的 Observable，它允许将值多播给多个观察者，所以 Subject 是多播的，而普通的 Observables 是单播的(每个已订阅的观察者都拥有 Observable 的独立执行)。代码中的定义：exportdeclareclassSubject<T>extendsObservable<T>implementsSubscriptionLike{}...
2021-12-28 11:35:18
1668
原创 【Angular中的RxJS】- Cold Observables VS Hot Observables
在RxJS 中 Observables 分为两种：Cold Observables 和 Hot Observables。Cold ObservablesCold Observables 只有被 observers 订阅的时候，才会开始产生值。是单播的，有多少个订阅就会生成多少个订阅实例，每个订阅都是从第一个产生的值开始接收值，所以每个订阅接收到的值都是一样的。Cold Observables 示例：import { Observable } ...
2021-12-27 19:18:37
490
原创 【Angular中的RxJS】- 角色和流程
1、主要角色对于异步事件流中涉及的各种角色对象，RxJS作了如下定义：Subject ： 主体，即产生数据流的主体 Observable ：可观察对象，可视为数据流 Observer ：观察者，负责接收并处理响应数据流中的数据。观察者是由 Observable 发送的值的消费者。体现在代码中，观察者是一组回调函数的集合，每个回调函数对应一种 Observable 发送的通知类型：next、error和complete。let observer = {...
2021-12-27 15:28:52
399
使用UglifyJS实现一条指令打包发布项目实例
2023-06-19
手写的下拉框的样式美化插件
2023-02-24
很哇塞的网页特效之摩天轮相册
2023-02-14
批量修改文本文件编码的工具
2022-12-08
Angular,Ng-Zorro框架nz-icon静态加载第三方SVG图标示例源代码
2022-12-03
带手势缩放功能的pdf.js
2021-12-20
Angular加载显示Excel海量数据
2021-12-19
很哇塞的网页特效之字符雨特效
2021-12-14
很哇塞的网页特效之动态阴影文字源代码
2021-11-22
很哇塞的网页特效之动态线条文字源代码
2021-11-20
很哇塞的网页特效之字符串切换源代码
2021-11-20
baidumarkerdemo.rar
2020-01-10
USB设备信息获取
2015-08-27
mysql 统计查询语句求助
2020-03-29
C++ 父类变量保存子类对象 怎样访问子类对象的属性
2015-12-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人