Tagged

技术

A collection of 39 posts

技术

记录一次分离前端根据用户登录信息显示或不显示某元素的低级错误!

这次在用sapper写前端的时候,又犯了一个非常低级的错误,导致了长时间的页面无法访问,并且提示500错误,这个错误原来也经常犯,屡犯不改就是最大的错误,这次专门写一个博文来加深记忆!!!! 首先声明:这是一个极其低端的错误,任何前端工程师都不应该犯如此低级的错误! 前提背景:我们在做分离前端的时候,必然会涉及到登录,很多功能都是在登录状态下才会显示,就比如自媒体中心投稿之后,在稿件标题旁显示编辑和删除按钮,这里就要进行一个小判断,判断是否本稿件的创建人和目前登录的这个账号的id一致,也就是判断是否是本人,然后再显示编辑按钮,或者还可以加一个判断,比如管理员账号也可以直接显示编辑按钮,这个时候我那个低级错误就出现了,我进行了判断。 代码如下: <h1 class="catd-title h5"> {topic.title} {#if user._id == topic.creator._id || user.isadmin} <a href="/topic/edit?id={topic._id}">

技术

nodejs中使用cheerio造成中文被转义成HTML 实体编码,既&#x开头的编码问题解决。

这几天在做一个自媒体平台,类似于百度头条号,今日头条和看点那种用户发布UGC内容的功能,其中有一个需求,就是根据用户使用富媒体编辑器传回的html内容,抽取其中的img标签,然后进行批量添加alt的功能,这个时候我就使用了cheerio来处理比较方便,但是就突然出现了一个非常奇怪的情况,当我新建文章之后,发现HTML中显示的就全部变成了&#x开头的HTML实体编码。 问题截图: 这就很奇怪,一开始我思考的方向是可能编码有问题,然后在分离cms的前端进行批量替换处理也许就能解决这个问题。后面查阅了大量资料,才发现是CHEERIO的问题,那么查阅cheerio的文档,发现有设置项可以直接关掉html实体编码的功能。 代码如下: var $ = cheerio.load(sres.text, {decodeEntities: false}); 也就是{decodeEntities: false},添加到option对象中就能解决这个问题。

技术

从html代码中正则匹配match提取img标签

我们在开发的过程中,总会遇见需要从正文中提取某些指定内容的任务,这里我在编写一个自媒体投稿平台的时候就遇见了这个问题,常规的编辑器并没有办法导出图片的数组,所以需要我们自己来处理提取img标签,并且提取出来之后存入数据库中备用。 我的逻辑如下,当用户投稿的时候,不需要用户单独上传海报,当文章中包含了图片的时候,就通过正则提取其中的图片链接,并且存入数据库中,其后在获取自媒体文章的时候,就可以调用图片数组来决定如何展示内容。 小案例及代码如下: var str=`进口价格看了就够了<img src="https://moejj.com/jljlkge.jpg"/>jkljslejglekg,<img src="https://moejj.com/jljlkge111.jpg"/>` var matchAll = str.match(/<img(.*?)>/ig); console.

技术

flutter状态管理插件GetX中GetBuilder和 GetX、Obx不同的差别

Flutter的状态管理插件GetX是一个非常强大的插件,不仅有状态管理的功能,还带有路由、依赖管理、多语言等一系列有用的功能。但是GetX中的状态管理一共有三种方式:GetBuilder,GetX,Obx,那么它们之间又有什么不同呢? 官方文档的解释:在从事编程工作的十年中,我学到了一些宝贵的经验。 我第一次接触反应式编程是“哇,这太不可思议了”,事实上反应式编程是不可思议的。但是,它并不适合所有情况。通常,您只需要同时更改 2 或 3 个小部件的状态,或者状态的短暂更改,在这种情况下,响应式编程还不错,但不合适。 响应式编程具有更高的 RAM内存 消耗,可以通过单个工作流进行补偿,这将确保仅重建一个小部件并在必要时重建,但是创建一个包含 80 个对象的列表,每个对象都有多个流并不是一个好主意。打开 dart 检查器并检查 StreamBuilder 消耗了多少,您就会明白我想告诉您的内容。 考虑到这一点,我创建了简单的状态管理器。它很简单,这正是您应该要求的:以简单的方式和最经济的方式更新块中的状态。 GetBuilder在RAM上非常省钱,

技术

如何将系统区域设置变更为日语?畅玩日本游戏!

即使安装了日文语言包并且在更改系统区域设置中变更为日语(日本),PC的系统语言也不会完全变更,OS的所显示语言不会做出变更。 安装后非Unicode程序将能够正常运行。 请在您所使用的OS中,完成对【区域和语言设置】的更改(详情如下)。 请注意,若发生特定文件报错,在变更语言设定的基础上还需要以下必要的操作。 进行语言设置前,请将已下载的文件从电脑中删除。请重新下载语言/更改系统区域设置变更后的文件。更改系统区域设置为【日语(日本)】后,必须删除所有已下载的数据。 因为变更设置之后仍然会出现乱码,请从电脑中删除文件。 完成设置变更并删除旧的文件后,请重新下载并解压缩。 ■Windows 8.1 / Windows 10打开Windows设置面板。2.  点击【语言、区域、日期】,点击【区域】。 点击【区域】3.  点击【管理】标签,点击【更改系统区域设置】。 更改系统区域设置4. 在区域设置对话框中,点击当前系统区域设置的下拉菜单。 5.

技术

efvcms新增一个分离CMS:youtube油管布局,快应用+APP级别体验。新增支持paypal支付,订单分页,视频管理排序功能等

这里花了20天重新做了个分离CMS出来,和原来的分离CMS可以选择其一使用,完全采用youtube油管的经典布局,而且支持手机直接安装到桌面,所有安卓手机上都会将其识别为快应用,这个优势来源于sapper天生就是pwa应用,这个分离cms为啥做这么久,因为我重写了里边所有的API,对应的EFVCMS中的大量API我也进行了重写,并且支持了漫画的功能,其中就包括了漫画的分类和标签聚合的功能,而且替换了其内置的服务端单元,使用expressjs替换,所以运行会更加稳定且更快。 注意:如果使用老APP源码,请勿更新本次版本,漫画和图集相关的api进行了破坏性的重写,所以老APP中如果使用到图集功能,请勿更新此版本,请等待随后推出的新APP。 预告:新APP正在开发中,我甚至用了1个月重新去学习flutter,完全采用异步加载,MVC架构,也就是完全分离模型、视图和控制器的方式重写,很多大厂都没使用这种方式!难度激增! 啥叫PWA:详见链接https://web.dev/progressive-web-apps/ 功能更新:一、新增了一个分离cms,可以和原来的分离cms选择其一使用,完全采用youtube油管布局,完全重写分离cms中的api,完全替换原来的polka后端服务成expressjs后端服务,完全优化移动端体验,完美支持了PWA功能,支持所有手机安装到桌面,并且被手机识别为快应用。 二、分离CMS完全重现了APP的样式,在快应用和移动端浏览器模式下,跟原生APP的体验并无二致,

技术

EFVCMS云转码转型之路:全面拥抱移动端

在搜索引擎肆意修改规则的今天,所有人都不应该把命脉交给搜索引擎,故互联网巨头几乎没有依赖搜索引擎的存在!就算是十多年前的淘宝网页端,也直接是屏蔽了搜索引擎。所以在现在,我们痛并思痛,准备全面拥抱移动端。准备弱化网页端的占比,甚至准备只用静态页面生成器生成的静态页面作为网页端,而最终将流量引导至移动端。 简单图解: 说明 我们准备从cms和转码端全面拥抱移动端,最终可能会有三个app:管理员专用app进行视频管理等,cms专用app作为主要运营手段,网盘app作为saas端运营解决方案。 而网页端我们准备推出一个比较先进的静态页面生成器,抛弃所有用户权限相关,仅提供低分辨率播放,并且以高分辨率引导用户下载app。 案例解析 ugc用户发布视频,网页端只用静态页面生成器生成静态页面,仅提供360p免费播放,播放页播放器下面利用按钮:下载app观看,免费又高清引导下载app。管理端app管理员可随时随地审核和编辑、删除视频,下载管理可随时随地下载各种视频。

Nodejs中后台模拟FormData提交,出现source.on is not a function的错误
技术

Nodejs中后台模拟FormData提交,出现source.on is not a function的错误

事情是这样的,前端时候,需要写一个程序,程序要求是后台使用FormData模拟前端表单提交,这个时候就出现了一个很奇怪的错误source.on is not a function,苦苦思索而不得其错误原因,于是我就仔细研究了下代码,才发现这个错误原因。 代码如下: const item = await Item.findOne(); const id = item._id; const obj = { SHOP_ID: cShopID, ORDER_ID: id, ORDER_ITEM: cOrderItem, AMOUNT: nAmount, CHECK_CODE: md5token, PROD_ID: cProdID, CURRENCY: cCurrency, } let form = new FormData(); let keys

nodejs之有时候需要慎用try catch错误捕获
技术

nodejs之有时候需要慎用try catch错误捕获

前端时间在编写代码的时候遇见一个问题,前前后后死活找不到原因所在,直到最后找到原因之后,才发现是如此低级的一个错误!但是这个低级错误却因为try catch导致发现的时间延后。 这里有一段代码: let userid; try { const decoded = jwt.verify(token, req.apikey); userid = decoded.id; } catch (error) { return res.json({ success: 0, message: '用户信息错误,请重新登录尝试!' }); } 其目的是将post到api中的token用jsonwebtoken解码,拿到储存在token中的payload,这里也就是id。 如果时间过期,或者token不正确,都会捕获错误,并且返回用户信息错误!但是我在postman中先登录拿到token之后,又用token请求这个API,一直返回用户信息错误,我就很纳闷,到底哪里有问题,运行express程序之后也没有问题。 到最后我才发现是没有引用jwt,即 const jwt = require('jsonwebtoken')

技术

云转码双转码双前台架构 数据库切片Rsync+Inotify自动同步配置

云转码有很多种玩法,有一种就是搭建云转码框架,这次做的这个教程是根据实战来制作的,搭建框架的目的是使云转码可以无限扩展,负载均衡和保证服务的有效性。我们来看看这次的框架教程。 框架图示 按照图片所示,我来解释下每一台服务器的作用。 转码切片服务器:192.168.1.1 192.168.1.2 提供播放链接调用服务器:192.168.1.3 192.168.1.4 前台CMS调用播放链接进行播放和展示:192.168.1.5 服务器建议: 转码切片服务器配置需要足够高,带宽相反没有那么重要,主要需要CPU和硬盘越高越大越好。 提供播放链接调用的服务器需要带宽足够高,硬盘足够大,CPU和内存倒不是很重要。 前台CMS是真正面对用户的地方,各种配置越高越好。 搭建云转码源码 分别有四台服务器需要安装云转码express-ffmpeg的源码,提供转码和切片的服务器和提供播放链接的调用服务器。 那就是192.168.1.1到192.168.1.

云转码+cms一体化自适应自动发布系统
技术

云转码+cms一体化自适应自动发布系统

你想要一种云转码切片和CMS自动发布的系统吗?云转码+cms一体化自适应发布系统将会满足你所有的需求,后台上传视频,自动转码加切片,前台根据后台分类配置和CMS配置自动生成完备的,针对移动端优化的在线视频CMS系统,并且SEO优化效果极佳。这个系统就是我今天要讲的云转码+cms一体化系统,完美解决两个系统整合困难的痛苦。 云转码+cms一体化系统 云转码+cms一体化系统拥有所有云转码切片的功能,和所有在线视频播放CMS的功能,后台自动配置,前台自动生成,分类自动生成,视频自动生成,在线播放,截图展示,分享链接展示应有尽有。这个系统完美解决大部分人搭建在线视频播放的需求,无需技术,一键搭建,简单易用,没有花哨的功能,只有最实用的功能。 功能 在线转码,在线切片,防盗链,门户CMS配置,视频分类,视频筛选,视频在线播放,分类展示,应有尽有,更多的介绍可以前往官网和gitee进行查看。 官网:http://ffmpeg.moejj.com 开源源码:https://gitee.com/quazero/

新服务器ubuntu16.04环境安装 宝塔nodejs版云转码
技术

新服务器ubuntu16.04环境安装 宝塔nodejs版云转码

每次新装服务器都觉得很麻烦,这次就直接写一个教程,方便查询和处理。 更新内核版本v4.11.8 -name -a查看内核版本,如果不是v4.11.8就安装这个内核版本,这个内核版本配合BBR很好用,非常稳定,内核链接http://kernel.ubuntu.com/~kernel-ppa/mainline/v4.11.8/ root登陆。 cd ~ wget http://kernel.ubuntu.com/~kernel-ppa/mainline/v4.11.8/linux-headers-4.11.8-041108_4.11.8-041108.201706290836_all.deb wget http://kernel.ubuntu.com/~kernel-ppa/mainline/

云转码接入视频网站解决方案 express-ffmpeg接入discuz方案
技术

云转码接入视频网站解决方案 express-ffmpeg接入discuz方案

云转码可以很方便的将各种视频进行转码并且切片,但是分享链接只有分享给其他人才会有价值,所以将云转码接入各种视频网站CMS是很重要的,我今天教给大家一个非常简单的接入方案,基本上所有的CMS都可以这样接入,我今天以discuz为例。 discuz后台设置 discuz后台设置,进入discuz管理中心-界面-编辑器设置-discuz代码,然后进行设置。 新增两个标签iframe和iframelist,一个是针对单一视频,一个是针对一组视频。 设置iframe标签 编辑标签iframe,在替换内容输入以下内容: <iframe height=428 width=100% frameborder=0 scrolling="no" src="{1}" allowfullscreen></iframe> 这句代码意思是,当在discuz论坛编辑中点此标签,输入云转码分享链接,类似 [iframe]http://yourdomain.com/share/4jkkj5k45j6j645k[/iframe] 这样就可以在discuz前台播放出云转码转码切片出来的视频,并且配合discuz的会员系统,

技术

利用pm2或者supervisor启动nuxtjs应用

nuxtjs是vuejs的服务器渲染版本,针对seo非常友好,在服务器端即可渲染完成返回给客户端正常的html页面。但是官方文档中并没有关于利用pm2或者supervisor启动nuxt应用的说明。这里会友详细的教程。 supervisor supervisor作为进程管理,当nodejs应用目录发生了任何改变,supervisor都会监听到,然后自动重启服务,保证了应用服务不会异常中断。这个效果在本地作开发的时候尤其好用,因为不用无限的关闭应用、开启应用。本人推荐做nodejs应用开发的时候使用supervisor。 pm2 pm2也是进程管理,但是更加先进,expressjs官方推荐使用pm2管理进程,pm2最有用的功能在于多线程集群开启应用,由于nodejs是单线程无阻塞的异步应用,所以如果要想支持利用CPU的多核或者多线程的计算能力,普通的node方式开启应用就没有办法实现,而pm2内置了对多线程集群的支持,仅仅只需要在开启应用的时候加上-i 0这个参数,就会完全利用CPU的多核计算能力。所以推荐在部署应用的时候使用PM2进程管理。 如何在nuxtjs中使用 无论是对于pm2或者是supervisor,在nuxtjs中使用都要费一些周折,这里提供一个简单的方法。进入nuxtjs应用的目录,npm install安装之后,利用以下命令即可使用supervisor或者pm2开启nuxtjs应用: pm2 start ./node_modules/nuxt/bin/nuxt-start -i 0 //或者 supervisor ./node_modules/nuxt/

技术

为什么我不用nuxt+express做网站应用

话说在前一段时候看了段时间的vuejs,但是我制作的网站应用对SEO的要求颇高,作为单页应用,对搜索引擎却是极度的不友好,所以就弃了,但是最近又看见了nuxtjs,作为vuejs服务器渲染的解决方案,又重新拾起了vuejs,但是经过使用才发现局限性颇大。 nuxtjs nuxtjs是作为vuejs推荐的服务器渲染的方案,具有针对搜索引擎友好的特点,拥有完全的vuejs的高级特性。具体来说,比如使用expressjs+nuxtjs,其实相当于在服务器端运行的vuejs,expressjs作为RESTFULL api后端服务器,nuxtjs在服务器端就使用同步的获取操作,相当于本地无网络延迟的获取api的数据,然后进行服务器渲染,并且将渲染完成之后的数据返回给用户端,因为已经渲染完成,所以转换成了普通的html页面,所以对搜索引擎非常友好,并且又能使用vuejs的高级特性,使开发速度更上一个台阶。 npm安装包极多且巨大 官方推荐的有express+nuxt模板,这里就使用这个作为解说。 命令如下: vue init nuxt-community/express-template <project_name> cd project_name npm install npm run dev 随后访问localhost:

基于nodejs的免费云转码 视频在线云转码技术hls及ffmpeg的介绍
技术

基于nodejs的免费云转码 视频在线云转码技术hls及ffmpeg的介绍

在大数据时代,所有数据都值得被尊重,无论是文本数据,音频数据亦或是视频数据,特别是视频数据,最近短视频如抖音、快手的崛起,所以唤起了所有互联网从业者对数据处理的重新认识,而苹果公司针对移动设备等开发了一套基于http协议的流媒体解决方案,也就是HLS(HTTP Live Streaming),这个方案提供给客户端几乎实时的音视频流。这个就是就是将H264视频编码和aac音频编码的视频切片成非常小的片(TS)并且建立索引文件(m3u8),但是因为其只支持h264和aac编码,所以许多视频在切片前必须先进行转码操作,最后云转码切片管理平台也就应运而生了。 HLS(HTTP Live Streaming) 前文说到HLS技术基本原理是将视频文件或视频流切分成小片(ts)并建立索引文件(m3u8)。支持的视频流编码为H.264,音频流编码为AAC。 拿一个m3u8的文件举例: #EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:20 #EXT-X-MEDIA-SEQUENCE:0 #EXTINF:10.427100, http://ffmpeg.moejj.com/videos/index0.ts

云转码:express-ffmpeg  基于nodejs的在线转码切片应用
技术

云转码:express-ffmpeg 基于nodejs的在线转码切片应用

云转码:express-ffmpeg是一个基于nodejs和mongodb开发的服务器在线转码和切片的网站应用,完全免费及开源,源码来源于码云,并且获得开源中国和码云的推荐。 转码加切片 使用最流行的ffmpeg,按照h264视频编码及aac音频编码最大限度的进行视频压缩转码,多种分辨率选择,自动视频截图,自动视频切片。 功能简介 文件上传,大文件分块上传,批量上传。 转码切片,根据后台配置选择的清晰度进行转码并且自动切片,切片完成之后会删除原视频文件。 视频批量添加水印,烧录字幕。 防盗链设置,token防盗链,指定域名只能通过iframe调用。 ts文件分发同步,数台服务器同步内容,ts文件自动加上后台配置域名前缀,负载均衡。 播放器支持vtt格式字幕,后台针对视频上传vtt格式字幕,前台播放自动加载 支持扫描入库,批量视频文件上传movies文件夹,后台一键扫描入库。 支持秒切,如果视频已经压缩过并且小于配置的分辨率,则会直接切片。 webtorrent协议在线播放磁力链接。 更多详细介绍可以前往云转码官网查看。 源码及官网 源码:https://gitee.com/quazero/express-ffmpeg 官网:http://ffmpeg.moejj.com/

技术

云转码系统推荐上传方式 scp命令行上传

如果服务器在国内,那么使用网页上传没有问题,但是如果服务器在国外,那么一旦丢包,上传就会中断,这就很麻烦,所以本人强烈推荐使用scp命令行上传,十分好用并且速度超快。 假如电脑是mac系统,需要上传的视频存放在/Volumes/data1/movies这个文件夹,那么命令行如下: scp /Volumes/data1/movies/* root@68.43.123.32:/www/express-ffmpeg/movies 之后会让你输入服务器密码,然后就会开始上传,上面的68.43.123.32请换成你自己的服务器IP。 假如是windows系统的电脑,那么/Volumes/data1/movies/* 则应该像这样:C:\movies* scp命令行介绍: scp: illegal option -- h usage: scp [-12346BCEpqrv] [-c

技术

云转码应用服务器重启之后的处理

由于教程中涉及到的环境安装都是编译安装居多,所以很多没有设置自启动,所以如果云转码应用的服务器重启之后,按照这里的教程可以方便的再次运行。 云转码切片管理平台文档:https://moejj.com/yun-zhuan-ma-qie-pian/ 重启之后的步骤: 第一步 ps -ef | grep mongo 查看到mongo的进程kill掉,比如pid是1230 kill 1230 第二步 mongod -auth --bind_ip 127.0.0.1 --port 27017 --dbpath /data/db --fork --logpath /data/log/mongodb.log 重启mongodb 第三步 pm2 delete all 第四步 cd /www/express-ffmpeg pm2 start

技术

centos安装nginx并配置反向代理

第一步 - 添加Nginx存储库 sudo yum install epel-release 第二步 - 安装Nginx sudo yum install nginx 第三步 - 启动Nginx并防火墙放行 sudo systemctl start nginx 如果运行失败: ps -ef | grep nginx 查询出来pid,然后 kill pid 再次运行 sudo systemctl start nginx 如果您正在运行防火墙,请运行以下命令以允许HTTP和HTTPS通信: sudo firewall-cmd --permanent --zone=public --add-service=http sudo firewall-cmd --permanent --zone=public --add-service=

技术

centos编译安装ffmpeg

此文档参考ffmpeg官方文档。 第一步、安装依赖包 相信我,走了这一步后面才会畅通无阻。 yum install autoconf automake bzip2 cmake freetype-devel gcc gcc-c++ git libtool make mercurial pkgconfig zlib-devel x264-devel 第二步、创建文件夹ffmpeg_sources mkdir ~/ffmpeg_sources 第三步、编译汇编语言NASM cd ~/ffmpeg_sources curl -O -L http://www.nasm.us/pub/nasm/releasebuilds/2.13.02/nasm-2.13.02.tar.bz2

技术

cocos creator教程之向量的妙用

向量指的是指具有大小和方向的量,在计算方向角度等有奇效。cocos creator中针对向量有专门的计算方法,十分好用。其中的有很多妙用。 官方案例 update: function (dt) { if (!this.isMoving) return; var oldPos = this.follower.position; // get move direction var direction = cc.pNormalize(cc.pSub(this.moveToPos, oldPos)); // multiply direction with distance to get new position var newPos = cc.pAdd(oldPos, cc.pMult(direction, this.followSpeed * dt)

cocos creator教程之世界坐标和局部坐标
技术

cocos creator教程之世界坐标和局部坐标

cocos creator中的canvas画布,由用户自己设定的坐标是局部坐标,默认是在画布正中间,原点(0,0)坐标在正中间,而游戏生成之后,用户点触游戏界面中获取到的是世界地图坐标,世界地图的原点(0,0)在左下角。两个坐标是不一样的,在编码的时候需要自己进行转换,而cocos creator则提供了非常方便的转换方法。 官方示例 var self = this; self.canvas.on(cc.Node.EventType.TOUCH_START, function (event) { var touches = event.getTouches(); var touchLoc = touches[0].getLocation(); self.isMoving = true; self.moveToPos = self.follower.parent.convertToNodeSpaceAR(