前言 本次讲述的内容主要是 react 与 koa 搭建的一套 ssr 框架，是在别人造的轮子上再添加了一些自己的想法和完善一下自己的功能。 本次用到的技术为： react | rematch | react-router | koa react服务端渲染优势SPA（single page application)单页应用虽然在交互体验上比传统多页更友好，但它也有一个天生的缺陷，就是对搜索引擎不友好，不利于爬虫爬取数据（虽然听说chrome能够异步抓取spa页面数据了）； SSR与传统 SPA（Single...
声明：需要读者对 NodeJs、Vue 服务器端渲染有一定的了解 现在，前后端分离与客户端渲染已经成为前端开发的主流模式，绝大部分的前端应用都适合用这种方式来开发，又特别是 React、Vue 等组件技术的发展，更是使这种方式深入人心。 但有一些应用，客户端渲染就会遇到一些问题了： 需要做 SEO（搜索引擎优化），但客户端渲染的 html 中几乎没有可用的信息需要首屏快速加载，但客户端渲染一般是长时间的加载动画或者白屏如果能把客户...
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue表单绑定（单选按钮，选择框（单选时，多选时）</title></head><body><!-- 单选按钮 --><div id="app"><input type="radio" value="选择1" v-model="radio"/><label>选择1</label><input type="radio" value="选择2" v-model="radio"/><label>选择2</label><p>所选择：{{radio}}</p></div><!-- 选择框（单选时） --><div id="app1"><select v-model="select"><option...
以下是组件代码： <template><div class="navMenu"><label v-for="navMenu in navMenus"><el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state===ENABLE":key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" :route="navMenu.entity.value"disabled=""><i :class="navMenu.entity.icon"></i><span slot="title">{{navMenu.entity.alias}}</span></el-menu-item><el-submenu v-if=...
Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点。而通常在我们使用v-for这个指令的时候，Vue会要求你给循环列表的每一项添加唯一的key，那么这个key在渲染列表时究竟起到了什么作用呢？ 在解释这一点之前，你最好已经了解Vue的diff算法的具体原理是什么。 Vue2更新真实DOM的操作主要是两种：创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点，这两种方式里创建新DOM节点的开销肯定是远大于更新或移动已有的DOM节点，所...
现在前端开发一般都是前后端分离，mvvm和mvc的开发框架，如Angular、React和Vue等，虽然写框架能够使我们快速的完成开发，但是由于前后台分离，给项目SEO带来很大的不便，搜索引擎在检索的时候是在网页中爬取数据，由于单页面应用读取到的页面是几乎空白的，无法爬取到任何数据信息。 <!DOCTYPE html> <html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>authorization_we...
现在大多数开发都是基于 Vue 或者 React 开发的，能够达到快速开发的效果，也有一些不足的地方, Nuxt 能够在服务端做出渲染，然后让搜索引擎在爬取数据的时候能够读到当前页面。 首先要说明一点，我们可以认为我们所编写的 Vue 项目是一个服务端的项目，虽然编写的还是 Vue 项目，但是 Nuxt 是基于服务器环境的。 就简单的说一下 Nuxt 使用。基础只是还是以官方文档为主，如果博客中哪里有问题，欢迎留言指正。 说了这么多，进入正...
前言这篇文章是我自己在搭建个人网站的过程中，用到了服务端渲染，看了一些教程，踩了一些坑。想把这个过程分享出来。 我会尽力把每个步骤讲明白，将我理解的全部讲出来。 文中的示例代码来自于这个仓库，也是我正在搭建的个人网站，大家可以一起交流一下。示例代码因为简化，与仓库代码有些许出入 本文中用到的技术 React V16 | React-Router v4 | Redux | Redux-thunk | express React 服务端渲染服务端渲染的基本套路就是用户请...
随着各大前端框架的诞生和演变，SPA开始流行，单页面应用的优势在于可以不重新加载整个页面的情况下，通过ajax和服务器通信，实现整个Web应用拒不更新，带来了极致的用户体验。然而，对于需要SEO、追求极致的首屏性能的应用，前端渲染的SPA是糟糕的。好在Vue 2.0后是支持服务端渲染的，零零散散花费了两三周事件，通过改造现有项目，基本完成了在现有项目中实践了Vue服务端渲染。 关于Vue服务端渲染的原理、搭建，官方文档已经讲的...
前言 前段时间寻思做个个人网站，然后就立马行动了。 个人网站如何实现选择什么技术方案，自己可以自由决定。 刚好之前有大致想过服务端渲染，加载速度快，还有seo挺适合个人网站的。 所以就自己造了个轮子用koa+react来实现ssr服务端渲染。 什么是ssr 最初听说有单页面的服务端渲染的时候，就理解为类似传统的服务端路由+模板渲染，只是需要用单页面应用的框架写。后面寻思这样好像有点傻，再一了解，原来只是在首次加载的时候...
安装 nuxt.js Nuxt.js 官方提功了两种方法来进行项目的初始化，一种是使用Nuxt.js团队的脚手架工具 create-nuxt-app ，一种是根据自己的需求自由配置 使用脚手架适合新手，对 nodejs 后台框架有所了解；按照自己需求自由配置，需要对如何配置 webpack 以及 nodejs 后台框架有所了解。 两种方式比较下就是原生和插件的区别。 使用脚手架安装 需要有 nodejs 或者yarn 环境，推荐使用 vscode 自带的控制台输入命令行命令进行操作 在有...
本文实例为大家分享了vue+iview 动态渲染表格(iview插件table)，供大家参考，具体内容如下 效果图 （表格头部和表格主体都是动态渲染）重要代码 <template> <Table ref="selection" v-for="(item) in entities" :columns="item.columns" :data="item.data" :border="false" :key=item.id ></Table> </template> <script>export default {data () {return {entities: []}},mounted () {// 进行网络访问，渲染类别列表let that = thi...
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板，不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤 把模板编译为render函数实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom对比虚拟dom，渲染到真实dom组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3第一步: 模板到render 在我们使用Vue的组件化进行开发应用的时候, 如果...
前言 本文是基于react ssr的入门教程，在实际项目中使用还需要做更多的配置和优化，比较适合第一次尝试react ssr的小伙伴们。技术涉及到 koa2 + react，案例使用create-react-app创建 SSR 介绍 Server Slide Rendering，缩写为 ssr 即服务器端渲染，这个要从SEO说起，目前react单页应用HTML代码是下面这样的 <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" /><link rel="shortcut icon" href="favicon.ico" rel="ex...
最近一直写React，慢慢就对里面的一些实现很好奇。最好奇的就是自定义标签的实现和this.setState的实现。这里不分析JSX是如何解析的，所有组件都用ES5方式编写。 组件渲染 渲染时候，我们会调用render方法。类似下面这样： var SayHi = React.createClass({getInitialState: function() {return {verb: say:};},componentWillMount: function() {console.log(I will mount);},componentDidMount: function() {console.log(I have m...