详解Vue2 SSR 缓存 Api 数据

2024-10-04 02:18:31

本文介绍了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. 封装下 api

import axios from 'axios'
import qs from 'qs'
import md5 from 'md5'
import config from './config-server.js'

export default {
  post(url, data) {
    const key = md5(url + JSON.stringify(data))
    if (config.cached && config.cached.has(key)) {
      return Promise.resolve(config.cached.get(key))
    }
    return axios({
      method: 'post',
      url: config.api + url,
      data: qs.stringify(data),
      // 其他配置
    }).then(res => {
      if (config.cached && data.cache) config.cached.set(key, res)
      return res
    })
  }
}

ajax 库我们用axios, 因为axios在 nodejs 和浏览器都可以使用

并且将 node 端和浏览器端分开封装

import config from './config-server.js'

const key = md5(url + JSON.stringify(data))

通过 url 和参数, 生成一个唯一的 key

if (config.cached && config.cached.has(key)) {
  return Promise.resolve(config.cached.get(key))
}

if (config.cached && data.cache) config.cached.set(key, res)

判断下是不是开启了缓存, 并且接口指定缓存的话, 将 api 返回的数据, 写入缓存

注意:

这个 api 会处理所有的请求, 但是很多请求其实是不需要缓存的, 所以需要缓存可以在传过来的 data 里, 添加个 cache: true, 如:

api.post('/api/test', {a: 1, b:2, cache: true})

不需要缓存的直接按正常传值即可

当然这里标记是不是要缓存的方法有很多, 不一定要用这一种

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

基于vue-ssr服务端渲染入门详解
浅谈Vue SSR 的 Cookies 问题
Vue2 SSR渲染根据不同页面修改 meta
Vue基于NUXT的SSR详解
详解vue服务端渲染(SSR)初探
简单的Vue SSR的示例代码

简单的Vue SSR的示例代码

前言最近接手一个老项目,典型的 Vue 组件化前端渲染,后续业务优化可能会朝 SSR 方向走,因此,就先做些技术储备.如果对 Vue SSR 完全不了解,请先阅读官方文档. 思路 Vue 提供了一个官方 Demo,该 Demo 优点是功能大而全,缺点是对新手不友好,容易让人看蒙.因此,今天我们来写一个更加容易上手的 Demo.总共分三步走,循序渐进. 写一个简单的前端渲染 Demo(不包含 Ajax 数据): 将前端渲染改成后端渲染(仍然不包含 Ajax 数据): 在后端渲染的基础上,加上 A
浅谈Vue SSR 的 Cookies 问题

一个网站一旦涉及到多用户, 就很难从 Cookies 中逃脱, Vue SSR 的 cookies 也真算是遇到的一个不小的问题, 从开始玩 SSR 开始到现在, 一共想出了3种方案, 从最早的把 Cookies 注入到 state 中, 到把 Cookies 注入到 global, 到现在的将 Cookies 注入到组件的 asyncData 方法. 随着 Vue 的升级, 第一种方案已经不再适用, 第二种也有不少的限制, 于是想到第三种方案, 下来就说说具体实现的方法: 第一种方案第一种方
Vue2 SSR渲染根据不同页面修改 meta

本文主要介绍了Vue2 SSR渲染根据不同页面修改 meta,分享给大家,具体如下: 注意: 经过测试, vue-meta 会导致内存泄漏, 请慎用- 以现在 vue2 的服务端渲染模式, 都是通过 webpack 生成 html 模版文件(或者直接在 server.js 里拼接), 然后通过fs.readFileSync 读取该文件, 再通过 res.end 输出, 这样就造成 meta 修改很麻烦这时候我们可以借助 vue-meta 来管理, 下面以官方的vue-hackernews-2
Vue基于NUXT的SSR详解

本文介绍了Vue基于NUXT的SSR,分享给大家,也给自己留个笔记. SSR 首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息. 抓取页面的前提是 html 含有被抓取内容,我们不妨看看基于 vue 的线上 SPA 页面请求时返回了什么 <!DOCTYPE html> <ht
基于vue-ssr服务端渲染入门详解

第一部分基本介绍 1.前言服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端.然后前端可以通过解析后端返回的html片段到前端页面,大致有以下两种形式: 1.服务器通过模版引擎直接渲染整个页面,例如java后端的vm模版引擎,php后端的smarty模版引擎. 2.服务渲染生成html代码块, 前端通过AJAX获取然后使用js动态添加. 2.服务端渲染的优劣服务端渲染能够解决两大问题: 1.seo问题,有利于搜索引擎蜘蛛抓取网站内容,利于网站的收录和排名.
详解vue服务端渲染(SSR)初探

前言首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加服务端渲染的优劣首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题.还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案.但是使用SSR时,势必会增加服
详解Vue2 SSR 缓存 Api 数据

本文介绍了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://loca
详解Vue.js项目API、Router配置拆分实践

前后端分离开发方式前端拥有更高的控制权随着前端框架技术的飞速发展,Router这个概念也被迅速普及到前端项目中,在早期前后的没有分离的时期下,并没有明确的路由概念,前端页面跳转大多是通过后端进行请求转发的,比如在Spring MVC项目中,进行一个页面跳转如下(画红线部分): 前端需要一个超链接,链接的href=/manager,这样这个超链接被转发到scs/waitFollowed路径指定的页面. 前后的分离后,前端页面跳转的方式发生了变化,不再需要后端处理了,数据交换方式也改变了,由此前端
SpringBoot详解整合Redis缓存方法

目录 1.Spring Boot支持的缓存组件 2.基于注解的Redis缓存实现 3.基于API的Redis缓存实现 1.Spring Boot支持的缓存组件在Spring Boot中,数据的缓存管理存储依赖于Spring框架中cache相关的org.springframework.cache.Cache和org.springframework.cache.CacheManager缓存管理器接口. 如果程序中没有定义类型为CacheManager的Bean组件或者是名为cacheResolve
详解VUE2.X过滤器的使用方法

VUE2.X过滤器的使用方法有几种,今天讲一种,以cnode社区API为示例,转换tab类型为中文汉字. 首先我们在assets文件夹中新建个js的文件夹,并新建common.js,然后将过滤器写在这个文件中.当然你也可以写在单个组件中,这个等下后面说. /** * 将tab类型转换成汉字 * @param {String} tab 待转换前的tab值 * @return {String} 转换后的tab中文 */ export function change (tab) { switch (t
详解Mybatis的缓存

Mybatis的缓存 mybatis是一个查询数据库的封装框架,主要是封装提供灵活的增删改sql,开发中,service层能够通过mybatis组件查询和修改数据库中表的数据:作为查询工具,mybatis有使用缓存,这里讲一下mybatis的缓存相关源码. 缓存在计算机里面,任何信息都有源头,缓存一般指源头信息读取后,放在内存或者其他读取较快的地方,下次读取相同信息不去源头查询而是直接从内存(或者能快速存取的硬件)读取.这样可以减少硬件使用,提高读取速度. mybatis也是这样,查询数据库的
详解mysql查询缓存简单使用

MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS (Relational Database Management System,关系数据库管理系统) 应用软件之一. 当我们开启Mysql的查询缓存,当执行完全相同的SQL语句的时候,服务器就会直接从缓存中读取结果.当数据被修改, 之前的缓存会失效,所以修改比较频繁的表不适合做查询缓存. 一.查询
详解浏览器的缓存机制

目录前言 1 浏览器缓存 1.1 浏览器缓存 1.2 浏览器缓存的意义 2 缓存类型 2.1 第一次请求数据 2.2 强制缓存 2.3 协商缓存 2.4 强制缓存和协商缓存的关系 3 缓存相关header 3.1 强制缓存 3.2 协商缓存 3.3 缓存请求 4 实例分析 4.1 官网首页: 4.2 社区 4.3 云市场 4.4 个人中心 4.5 论坛 4.6 App 总结前言浏览器缓存是前端性能优化的重要一环,对于前端效率提升的重要性,不言而喻. 之前对于浏览器缓存也是一知半解,这次借着
详解Python调用华为API实现图像标签

目录 1.华为云API介绍 1.1 华为云图像标签 1.2 应用场景 1.3 调用华为云API实现图像标签 2.实验过程 2.1实验代码 2.2运行结果 2.3 问题注释 1.华为云API介绍 1.1 华为云图像标签可识别上千种通用物体以及数百种场景标签,一个图像可包含多个标签内容,语义内容非常丰富.更智能.准确的理解图像内容,让智能相册管理.照片检索和分类.基于场景内容或者物体的广告推荐等功能更加准确. 1.2 应用场景 1.场景分析图像标签功能可准确识别视频.图像内容,提高检索效率和精度
详解Java分布式缓存系统中必须解决的四大问题

目录缓存穿透缓存击穿缓存雪崩缓存一致性分布式缓存系统是三高架构中不可或缺的部分,极大地提高了整个项目的并发量.响应速度,但它也带来了新的需要解决的问题,分别是: 缓存穿透.缓存击穿.缓存雪崩和缓存一致性问题. 缓存穿透第一个比较大的问题就是缓存穿透.这个概念比较好理解,和命中率有关.如果命中率很低,那么压力就会集中在数据库持久层. 假如能找到相关数据,我们就可以把它缓存起来.但问题是,本次请求,在缓存和持久层都没有命中,这种情况就叫缓存的穿透. 举个例子,如上图,在一个登录系统中,有
动画详解Vue3的Composition Api

目录回顾Option Api Option Api的缺陷 Composition Api 众所周知,Vue3.0带来了一个全新的特性——Composition API. 字面意思就是“组合API”,它是为了实现基于函数的逻辑复用机制而产生的. 回顾Option Api 在了解Composition Api之前,首先回顾下我们使用Option Api遇到的问题,我们在Vue2中常常会需要在特定的区域(data,methods,watch,computed...)编写负责相同功能的代码. Opti

详解Vue2 SSR 缓存 Api 数据

您可能感兴趣的文章:

相关推荐

随机推荐