需求分析 背景： 1.数据列表页，滚动加载数据； 2.多条数据情况下，点击某一条，进入详细页进行编辑（修改，删除）操作； 3.保存返回上一页； 在上面的情况下，想要保持在上次浏览位置，并且保持数据是最新的； 解决办法 1.原始的办法：在点击详情页的时候，记住浏览位置，传递参数或者存到本地缓存，然后在详情页操作完毕后，返回的时候，路由守卫可以判断，是否详情页跳转回来的，然后让页面滚动到上次记录的位置； 思路是这样，...
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 prop: include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。通过vue提供的keep-alive减...
本文介绍了Vue2 SSR 缓存 Api 数据，分享给大家，具体如下： 1. 安装缓存依赖: lru-cache npm install lru-cache --dev 2. api 配置文件 config-server.js var LRU = require(lru-cache)let api if (process.__API__) {api = process.__API__ } else {api = process.__API__ = {api: http://localhost:8080/api/,cached: LRU({max: 1000,maxAge: 1000 * 60 * 15}),cachedItem: {}} }module.exports = api配置下lru-cache 3. 封装下...
到现在，接触vue也小段时间了，项目进行到了一定程度，然而项目缺少了缓存机制，所以每次跳转页面都会重新created一下数据，虽说系统的数据请求速度很快，但是这样做对系统的性能会有很大的坏处的，所以到这里就要对系统优化下，添加缓存了。其实到现在，对于vue还是没有玩通，每深挖一次，就会发现一次vue的精彩，开始不清楚要用什么实现缓存，找了好久，有好几种说法，就是用vuex、vuet或者keep-alive，然后对比了一下，在我认为...
最近在学习Vue.js，把自己遇到的问题做个记录，所以，今天添加一点小笔记。 在项目中遇到两个问题，简单的做个笔记来记录自己解决的问题，可能不是很好的处理办法，欢迎提出，自己还在不断优化中... 第一个是vue在加载页面的时候，会先加载静态资源，这个时候数据还没有请求回来，用户会先看到静态的内容（就是页面固定写死的），过一会才会有数据回来渲染，这体验是很差的，其实解决办法也很简单，就是用vue里的 v-if 来判断请求的...
用到这个的业务场景是这样的： a页面点击新建列表按钮进入到新建的页面b，填写b页面并点击b页面确认添加按钮，把这些数据带到a页面，填充到列表（数组），可以添加多条， 点击这条的时候进入到编辑页面，确认修改之后，回退到a页面，a页面需要更新这条数据 实现这个功能的时候，由于是路由页面之间的跳转，首先想到的方案有几个：1. 用sessionStorage本地存储；2. 用路由参数带过去；3. 用兄弟组件传值 由于是添加完之后如果按回退...
之前开发了一个单页面应用，按照深度，分为三层：目录页、一级子页（标签页、故事页等）、二级子页（故事编辑页）。 这三类页面都共享一个完整的数据model，从上级页面进入下一级页面时，能够加载相应数据；回到上一级时，数据有更新。举个栗子，从故事页点击“编辑”按钮，进入故事编辑页则默认填充点击的“编辑”按钮所对应的故事数据；而当在故事编辑页更新数据，返回到故事页时，刚刚更新的信息也能在故事页展示。对于这项需求...
1.安装good-storage插件 cnpm i good-storage --save2.读/写的方法 common/js/cache.js: import storage from good-storageconst SEARCH_KEY = __search__ const SEARCH_MAX_LENGTH = 15// compare:findindex传入的是function,所以不能直接传val function insertArray(arr, val, compare, maxLen) {const index = arr.findIndex(compare)if (index === 0) {return}if (index > 0) {arr.splice(index, 1)}arr.unshift(val) // 插入到...
vue中，我们所要实现的一个场景就是： 1.搜索页面==>到搜索结果页时，搜索结果页面要重新获取数据， 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时，要保存上次已经加载的数据和自动还原上次的浏览位置。 最近在项目中遇到这个问题，思考了几套方案，总是不太完善。百度搜到的方案也基本都只能满足一些很简单的需求。对于复杂一些的情况，还是有些不完善的地方。以下是个人对于这种场景的一个摸索，也参考了百度。如有更...
需求： 请求接口之后，缓存当前接口的数据，下次请求同一接口时拿缓存数据，不再重新请求添加缓存失效时间cache使用map来实现 ES6 模块与 CommonJS 模块的差异 CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。因为esm输出的是值的引用，直接就是单例模式了 详细 export let cache = new Cache()版本1思路： 在vuex注册插件，插件会在每次mutations提交之后，...
本文主要介绍了Vue2 SSR 缓存 Api 数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。1. 安装缓存依赖: lru-cachenpm install lru-cache --dev2. api 配置文件config-server.jsvar LRU = require(lru-cache)let api if (process.__API__) {api = process.__API__ } else {api = process.__API__ = {api: http://localhost:8080/api/,cached: LRU({max: 1000,maxAge: 1000 * 6...
本文主要介绍了vue使用keep-alive实现数据缓存不刷新，这里整理了详细的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。到现在，接触vue也小段时间了，项目进行到了一定程度，然而项目缺少了缓存机制，所以每次跳转页面都会重新created一下数据，虽说系统的数据请求速度很快，但是这样做对系统的性能会有很大的坏处的，所以到这里就要对系统优化下，添加缓存了。其实到现在，对于vue还是没有玩通，每...
我们先从 Nginx 说起，了解为什么需要微服务。最初的服务化解决方案是给相同服务提供一个统一的域名，然后服务调用者向这个域发送 HTTP 请求，由 Nginx 负责请求的分发和跳转。 这种架构存在很多问题：Nginx 作为中间层，在配置文件中耦合了服务调用的逻辑，这削弱了微服务的完整性，也使得 Nginx 在一定程度上变成了一个重量级的 ESB。图中标识出了 Nginx 的转发信息流走向。 服务的信息分散在各个系统，无法统一管理和维护。每一...
1. vue-cli 创建一个demo 创建一个 demo vue create demo? 在VUE-CLI 是有提供测试插件的，所以在构建项目时选择一个测试框架。 运行测试脚本 在package.json 中可以看到运行测试脚本命令 npm run test:unit 执行后可以看到对 HelloWord组件 测试通过 2. 单测流程 一般我们写的单元测试是针对组件或是方法。 方法 在src 下创建一个 utils文件并创建addition.js // addition.js export const ad...
整理文档，搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码，稍微整理精简一下做下分享。 废话不多说，直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>demo</title><script src="js/jquery.js"></script><script src="js/vue.js"></script></head> <body><div id="app">{{message }}<br><button v-on:click="showData">测试jquery加载数据</button><table border="1"><t...