本文主要介绍Vue SSR(vue服务端渲染)的应用场景,开发中容易遇到的一些问题,提升ssr性能的方法,以及ssr的安全性问题. SSR的应用场景 1.SEO需求 SEO(Search Engine Optimization,搜索引擎优化),是一种利用搜索引擎规则,提高网站在搜索引擎内自然排名的技术.通常这需要页面内容在页面加载完成时便已经存在.SEO需求的存在与互联网技术的发展历程密不可分.在互联网产生之初,网页使用超文本链接协议,将服务器的信息传递给客户端.而后出现了专门为人们检索信息的搜

白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1.本文讲述Vue,Webpack 模块化.SEO优化(Vue SSR 服务端同构直出).全浏览器兼容(ie8以上).图片轮播等案例方案        2.技术点:vue.webpack.es6.vue-server-renderer.sass.autoprefixer.vue-meta.axios 3

这篇文章只是传统的SSR免流教程 首先拿到一台vps,可以是centos,可以是debian,也可以是ubuntu 使用xshell连接vps 执行一键安装包 wget http://104.224.167.40/shadowsocksR.sh && bash shadowsocksR.sh 第一次会提示输入密码,此时便输入密码,回车 下面会让你输入端口,如果是移动用户请输入137或者138端口 默认加密为:chacha20 默认协议为:auth_sha1_compatible 默认混淆为

支持新协议混淆,SSR服务端一键安装脚本   Shadowsocks-R 是项目 shadowsocks 的增强版,用于方便地产生各种协议接口.实现为在原来的协议外套一层编码和解码接口,不但可以伪装成其它协议流量,还可以把原协议转换为其它协议进行兼容或完善,需要服务端与客户端配置相同的协议插件. 据了解,原版Shadowsocks-go版基本来说已经阵亡(干扰严重),目前本人已在服务器安装SSR,配合Shadowsocks-R客户端使用新协议和混淆插件提升效果非常明显,速度快了好几倍.续笔记自媒

1 综述 在饱受蓝灯挂掉之苦半个月后,终于决定自己搭建VPS服务器FQ了.虽然网上VPS服务器教程很多,但是我按照那些教程弄好VPS服务器总是不稳定,用着用着就不能用了.这应该是这次GFW升级带来的后遗症,所以以前的教程大多过时了.本文总结了自己在搭建VPS过程中遇到的各种坑,以及最后的解决方案,以供大家参考. 2 VPS服务器购买 2.1 注册vultr 我使用的服务器是vultr.主要因为其按小时计费,随时可以停用服务器.这一点很重要,现在GFW相当高,很容易被墙.一旦被墙月结的损失比较大.

前言 前段时间寻思做个个人网站,然后就立马行动了.  个人网站如何实现选择什么技术方案,自己可以自由决定.  刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的.  所以就自己造了个轮子用 koa+react 来实现 SSR 服务端渲染. 什么是SSR 最初听说有单页面的服务端渲染的时候,就理解为类似传统的服务端路由+模板渲染,只是需要用单页面应用的框架写.后面寻思这样好像有点傻,再一了解,原来只是在首次加载的时候,后端进行当前路径页面的组件渲染和数据请求,组装成HTML返

Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨组件的状态管理变得非常困难,复用的组件也会因为要兼容不同的组件变得产生很多副作用,如果对组件再次拆分,也会造成冗余代码增多,和组件过多带来的问题. 后来有了 Redux 之类的状态管理库,来统一管理组件状态.但是这种分层依然会让代码变得很复杂,需要更多的嵌套.状态和方法,写代码时也常在几个文件之间不

讲真,之前没考虑过这个问题.因为项目原因,自己用python的一些工具,爬取了淘宝.京东.百度等的一些图片和图片名称之类的信息.以为爬虫只是解析html文本,然后提取关键字,保存自己想要的信息即可,或者再不济就用个Selenium WebDriver去调用浏览器,从未想过爬虫与页面的关系. 在此之前,大家得了解了解H5语义化: http://www.daqianduan.com/6549.html ,可以看看这篇文章,写的很透彻.语义化就是为了代码具有可读性,提高了代码的可维护性,可以让页面结构

Vue SSR不可不知的问题 本文主要介绍Vue SSR(vue服务端渲染)的应用场景,开发中容易遇到的一些问题,提升ssr性能的方法,以及ssr的安全性问题. ssr的应用场景 1.SEO需求 SEO(Search Engine Optimization,搜索引擎优化),是一种利用搜索引擎规则,提高网站在搜索引擎内自然排名的技术.通常这需要页面内容在页面加载完成时便已经存在.SEO需求的存在与互联网技术的发展历程密不可分.在互联网产生之初,网页使用超文本链接协议,将服务器的信息传递给客户端.而

一.前言 前端技术年年有新宠,Vue.js 2.0以其轻量级.渐进式.简洁的语法在MVVM框架中脱颖而出,一经推出便很受业界青睐. 为了提高首屏渲染速度 缓存+直出 是必不可少的.在Vue 1× 时代,没有 server-side-render 方案,直出需要专门给写一份首屏非Vue语法的模板.Vue2.0 server-side-render(简称Vue SSR)的推出,成功地让前后端渲染模板代码同构. 不过对于海量PV级的业务,直出模板的渲染效率直接影响服务端的压力,在对业务代码重构的同时,

vue ssr 项目改造经历 由于工作项目需求,需要将原有的项目改造,vue ssr 没有用到nuxt,因为vue ssr更利于seo,没办法,一个小白的改造经历, 首先说明一下,小白可以借鉴,高手也可以点评一下,因为,我写的不一定准确,只是针对我的项目. 下面先说一下大致: 原有项目有用到element,在改造ssr过程中,是很坑的.如果可以的话,还是强烈建议你重新改写成nuxt项目.由于我是小白,所以开始时候备份了一下项目,然后开始网上查找相关文章. 1.首先是这位大神的文章https://

项目介绍 本项目是利用 ZXing 进行封装的 Blazor 组件库 直接调用手机或者桌面电脑摄像头进行扫码 项目截图              项目地址 https://github.com/densen2014/ZXingBlazor 演示地址 ssr https://zxingblazor.app1.es wasm https://densen2014.github.io/ Nuget 包安装 https://www.nuget.org/packages/ZXingBlazor/ 使用 在

读完本文你会知道,如何在没有源码的情况下,直接修改一个 DLL 以去除 DLL 上的强命名限制,并在该程序集上直接添加你的“友元程序集(一种特殊的 Attribute,将它应用在程序集上,使得程序集内的 internal 类型能够被其它程序集直接调用)”.以此类推,你可以用此方法,直接修改程序集,达到想要的目的. 银行的一个项目,客户要求使用他们现有的的  Teradata 数据库,项目组第一个想到的是 NHibernate ,但是几乎没有找到关于 NHibernate 支持 Teradata

其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方法. 了解了一下,其实方法都是大同小异的.大概有以下几种方式: ①订阅input[type=file]元素的onchange事件. 一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上. 缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会

做过APP产品的技术人员都知道,APP应用属于一种C/S架构的,所以在做多版本兼容,升级等处理则比较麻烦,不像web应用那么容易.下面将带大家分析几种常见的情况和应对方式: 小改动或者新加功能的 这种情况,数据库结构和API程序一般是可以兼容多版本的,所以不用强制升级,可以坐到多版本共存. 尽量采用数据库层面新增字段和API的方式,应用程序层面就可以兼容了.当然,API层面也可以部署多个版本来同时提供,但这个不是必须的 但最重要的是数据库层面的表结构那些能够兼容到.  或者:  总结: 数据库层

放下包袱,解决低版本兼容问题   这是一个老生常谈的问题,自然解决这个问题的方案也比较多,下面整理了一些解决方法: 1.强制使用高版本渲染模式. 强制使用Edge模式来解析网页代码 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 强制使用Chrome浏览器内核(如果安装了) <meta http-equiv="X-UA-Compatible" content="

一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的坑.主要分UI展示,键盘,输入框等等.解决bug最苦恼的问题不是没有解决方案,而是你没有找到真正的原因.再就是现象难以重现,每次都要发布代码,然后到手机app中去测试,模拟.这些地方会耗费大量的精力. 一.UI相关 1.安卓4.4以下不支持fixed布局. fixed布局的作用之一就是在手机键盘弹起

平时写HTML时多用class来命名,为很少用id来命名,主要原因就是class使用起来比较灵活. 但是万恶的JS在操作DOM的时候对ie6+只提供了getElementById和getElementsByTagName两个方法来查找DOM. 这时候就很尴尬了,就不得不在HTML里加入各种各样的id.看了就烦,不爽 Js有提供一个通过class名查找DOM的方法:getElementsByClassName(); 但是......只支持ie9+   -.-,哎呀好尴尬... 只好自己写一个兼容I

转载请声明出处(http://www.cnblogs.com/linguanh/) 目录 1,测试设备介绍 2,开源项目richeditor及CrossWalk的选择 3,遇到的bug及其解决方法 4,附加功能彩蛋. 1,测试设备介绍---------------------- 测试的机型有 魅蓝note2-api 22,小米2A-api 16,三星galaxy I9152-API 17. 上述机型均通过测试,针对它们各自产生的bug我会在第二大点处介绍. 2,开源项目richeditor及Cr

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加