草庐IT

纯前端

全部标签

前端微服务化(微前端)探索-蚂蚁金服乾坤框架3-部署到服务器(通过nginx配置不同端口)

书接上文:前端微服务化(微前端)探索-蚂蚁金服乾坤框架2-通信本地启动啥的都正常,那么怎么说也得打包部署上去看看效果如何吧,说走咱就走!冲!部署的前提:整个服务器是要的吧。然后将主应用和子应用分别部署到不同的端口,我是把主应用部署到8889,子应用是9000(使用nginx)。ok,那么开始。安装nginx(这个我就略过了,网上教程很多,最简单就是用yum直接安装yuminstallnginx)将子工程和主工程都在本地打包好(其中主工程中的注册的子工程入口需要改成远端部署的访问路径。tip:后面可以配置在.env.production、.env.development两个文件里面)然后都给他放

前端微服务化(微前端)探索-蚂蚁金服乾坤框架3-部署到服务器(通过nginx配置不同端口)

书接上文:前端微服务化(微前端)探索-蚂蚁金服乾坤框架2-通信本地启动啥的都正常,那么怎么说也得打包部署上去看看效果如何吧,说走咱就走!冲!部署的前提:整个服务器是要的吧。然后将主应用和子应用分别部署到不同的端口,我是把主应用部署到8889,子应用是9000(使用nginx)。ok,那么开始。安装nginx(这个我就略过了,网上教程很多,最简单就是用yum直接安装yuminstallnginx)将子工程和主工程都在本地打包好(其中主工程中的注册的子工程入口需要改成远端部署的访问路径。tip:后面可以配置在.env.production、.env.development两个文件里面)然后都给他放

前端播放大视频卡顿的解决(m3u8视频流)

前言最近在一个大屏看板项目中有一个需求是:要求视频和看板要进行来回切换。最开始的做法是将MP4视频放在项目里,在本地运行时是没什么问题的,但是在往仓库里提交代码时出现了问题。当单个文件超过100MB时会导致代码提交失败;后来的解决方案是将视频文件放到服务器上,项目里直接加载视频在服务器上的地址。但是这样也存在一个问题,就是视频加载会卡顿。video标签是边加载边播放,这样造成了视频播放几秒后会加载视频导致视频卡住,影响实际效果。查询到的解决方案是将mp4视频转换成m3u8视频流的格式进行播放,因此打算尝试一下。下面会分别介绍:1、将mp4视频转换为m3u8视频流2、前端如何播放m3u8视频将m

前端播放大视频卡顿的解决(m3u8视频流)

前言最近在一个大屏看板项目中有一个需求是:要求视频和看板要进行来回切换。最开始的做法是将MP4视频放在项目里,在本地运行时是没什么问题的,但是在往仓库里提交代码时出现了问题。当单个文件超过100MB时会导致代码提交失败;后来的解决方案是将视频文件放到服务器上,项目里直接加载视频在服务器上的地址。但是这样也存在一个问题,就是视频加载会卡顿。video标签是边加载边播放,这样造成了视频播放几秒后会加载视频导致视频卡住,影响实际效果。查询到的解决方案是将mp4视频转换成m3u8视频流的格式进行播放,因此打算尝试一下。下面会分别介绍:1、将mp4视频转换为m3u8视频流2、前端如何播放m3u8视频将m

前端:深拷贝的多种方法(超全详解)

    别划走!走过路过不要错过;错过这个村,我在下一个村等你!坚持每天进步一点点;一天两天可能没发现有效果;但一年365天后你将会感谢今天的自己!!!    今天博主带大家了解一下前端常用的深拷贝方法:(超全详解)    我们先举个例子:说说深拷贝的作用是什么?一、 JSON.parse(JSON.stringify(xxx)) varp={ "id":"007", "name":"刘德华", "wife":{ "id":"008", "name":"刘德的妻子", "address":{ "city":"北京", "area":

前端求职难?那是你没看见这个

相信大部分在学习的时候都会面临这样的问题,毕竟学习完的最终目的还是能够找到一个心仪的工作~不过也不用头疼~找工作除了你自身的技术条件要过关之外,面试简历可以说的非常重要的了~一份优秀的简历可以让HR对你眼前一亮~给你提供下简历的思路和模板~1.项目类型:1后台管理系统2移动端(webapp)3微信小程序4微信公众号2.工作年限3年工作经验5个项目以上2年工作经验项目4个项目个人能力提升团队能力提升高要求、清晰的目标团队建设3.技术栈Vue+vuex+vue-router+webpack+ES6+node+vue-resource+mock+art-template|(12k)React+red

梅科尔工作室-李庆浩 鸿蒙前端笔记4

使用真机进行调试(将应用发布在自己的手机上)1打开手机的开发人员选项在手机中,打开“开发者模式”,可在设置>关于手机中,连续多次点击“版本号”(连续点击7次或更多),直到提示“您正处于开发者模式”即可,然后退出关于手机,在设置的系统与更新>开发人员选项中,开启开发者人员选项。2与电脑连接1)使用USB方式,将手机与PC端进行连接2)在手机中,USB连接方式选择“传输文件”。3)在手机上进入刚打开的开发人员选项界面,打开“USB调试”开关,会弹出“是否允许USB调试”的弹框,点击确定。4)出现如下界面,说明连接成功。 3为应用进行签名1)进入File>ProjectStructure>Proje

如何查看手机APP使用的前端框架?

一、首先获取该APP的apk包(长按APP,点击‘分享’,分享到微信‘文件传输助手’,即可获得apk包--参考本博主上篇文章)。二、把apk扩展名改成.zip然后解压。不同的编译软件目录结果也不一样。(为方便起见,可把apk包发送到电脑上进行后续操作)。三、打开解压后文件夹中的assets文件夹,参考图: 四、由上图得出,此APP所用前端框架为uniapp(不同APP所用前端框架有所不同,自行判断即可)。 

前端html-docx实现html转word,预览并导出文件

使用工具:html-docx优势:图片、图表能直接预览并转为base64导出,省去后端难以实现图表的生成后插入的麻烦劣势:适合一些简单的word模板导出(比如只有标题正文简单的表格图表图片的文档),复杂的可以直接忽略。比如:纸张大小、纸张方向、css大部分样式等等(经本人试验导出无法生成,如有大佬可以配置实现欢迎指正)下载引入npminstallhtml-docx-jsnpminstallfile-saver//引入importhtmlDocxfrom'html-docx-js/dist/html-docx'importsaveAsfrom'file-saver'在创建的盒子内完成html代码

接口响应时间长,前端返回请求超时解决

在前端代码设置axios响应时间1.全局设置axios.defaults.timeout=时间//单位为毫秒或2.封装的http请求constservice=axios.create({//公共接口--这里注意后面会讲//baseURL:process.env.BASE_API,//eslint-disable-next-lineno-undefbaseURL:'/api',//超时时间单位是ms,这里设置了3s的超时时间timeout:3*1000})或3.axios.post(url,params,{timeout:timeout})发布到线上后仍然超时,需要修改NGINX配置nginx默