详解Vue2 SSR 缓存 Api 数据
作者:M.M.F 发布时间:2023-07-02 17:09:06
标签:Vue,SSR,缓存
本文介绍了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})
不需要缓存的直接按正常传值即可
当然这里标记是不是要缓存的方法有很多, 不一定要用这一种
来源:https://www.mmxiaowu.com/article/58666e94b31b4b0734dd01be
0
投稿
猜你喜欢
- 在python中我们学习了不少理论知识,那么对相关的程序进行测试,就显得很重要了。本篇要讲的是unittest框架,我们可以用它来做一些测试
- 一个常常令设计师和前端开发人员都头疼的事情就是字体的使用,设计师常常在设计稿中使用某些很漂亮的字体,以实现比较酷炫的界面。但这样常常给编码人
- 前言登录跳转:不同的用户在登录成功之后跳转到不同的网页当中例如:网站管理员登录成功后跳转到网站后台,vip用户登录成功后跳转到vip页面准备
- 最近在一个项目中遇到一个查询页面,其中一个查询条件是根据选择的年份、月以及周数显示选择的该周从几号到几号,这样一个需求。在网上搜
- 导读:pandas中最常用的数据结构是DataFrame,而DataFrame相较于嵌套list或者二维numpy数组更好用的原因之一在于其
- 表单验证是WEB开发中经常遇到的问题,我们以前常见的做法是:在客户端对表单域进行内容的检查,看是否是满足一定的要求或满足一定的结构,比如:是
- 本文实例讲述了js控制输入框获得和失去焦点时状态显示的方法。分享给大家供大家参考。具体实现方法如下:<!DOCTYPE html PU
- session_unset() 释放当前在内存中已经创建的所有$_SESSION变量,但不删除session文件以及不释放对应的sessio
- 这里我不讨论 python 的一些有用的库或者框架,只从语言本身,最小支持的情况下谈论这门语言本身。语言的发展都是越来越接近Lisp,这也是
- vue卡片翻转轮播展示,同时在翻转时切换数据,供大家参考,具体内容如下效果及代码代码:<template> <
- write()方法把字符串str写入文件。没有返回值。由于缓冲,字符串可能不实际显示文件,直到flush()或close()方法
- 今天在写 mysql 遇到一个比较特殊的问题。 mysql 语句如下: update wms_cabinet_form set cabf_e
- SQL Server Extended Events(下面简称XEvent)是SQL Server 2008里新加的事件处理系统,用来取代S
- 关于正则表达式raw的\匹配规则这是我在学习中获得到的一个例子,第一表达式中匹配到的是none。于是乎我就在思考,为什么会匹配不到,假设\t
- auth模块是什么auth模块时django自带的用户认证模块开发一个网站的时候,无可避免的需要设计实现网站的用户系统。此时我们需要实现包括
- using System;using System.Data.SqlClient;namespace ExecuteSqlTran{&nbs
- 问:握怎样测试 MySQL安装?答:可以通过以下命令测试MySQL服务器是否工作:C:\> C:\Program Files\MySQ
- 目录背景分析数据模拟1、创建两个表:员工表和部门表2、创建两个函数:生成随机字符串和随机编号3、编写存储过程,模拟500W的员工数据4、编写
- 下面就是使用Python爬虫库BeautifulSoup对文档树进行遍历并对标签进行操作的实例,都是最基础的内容html_doc = &qu
- 在Mysql 中删除数据以及数据表非常的容易,但是需要特别小心,因为一旦删除所有数据都会消失。删除数据删除表内数据,使用delete关键字。