(六)SvelteKit教程:刷新数据,preload data,环境变量和部署

(六)SvelteKit教程:刷新数据,preload data,环境变量和部署

1.刷新数据

文件目录如下:

├── stocks
│   ├── +page.js
│   └── +page.svelte

+page.js 内容如下:

export const load = async (loadEvent) => {const { fetch } = loadEvent;// depends('stocks:actively-trading');const response = await fetch('http://localhost:4000/stocks');const stocks = await response.json();return { stocks };
};

+page.svelte 内容如下:

<script>import { invalidateAll, invalidate } from '$app/navigation';export let data;function refresh() {// invalidateAll();// invalidate('stocks:actively-trading');invalidate('http://localhost:4000/stocks');}
</script><h1>Actively trading stocks</h1>{#each data.stocks as stock}<h2>{stock.symbol} - ${stock.price}</h2>
{/each}<button on:click={refresh}>Refresh</button>

重点是里面的 refresh 函数。

2.preload data

如下 routes/+page.svelte 内容:

<script>import { goto, preloadData } from "$app/navigation";const handleClick = () => {console.log("handleClick about page");goto("/about");};
</script><div>This is a Home page.<a href="/users" data-sveltekit-preload-data="hover"> users page</a><a href="/stocks"> stocks page</a></div><button on:focus={async () => {await preloadData("/about");}}on:mouseover={async () => {await preloadData("/about");}}on:click={handleClick}>Go to About page</button>

其中 <a href="/users" data-sveltekit-preload-data="hover"> users page</a>这行代码是通过参数来进行 preload data,如果你想要通过写代码,那么可以参考如下:

on:focus={async () => {await preloadData("/about");}}on:mouseover={async () => {await preloadData("/about");}}

3.环境变量

在根目录下设置 .env 文件,里面写入:

DB_USER=root
DB_PASSWORD=root
DB_HOST=localhost

之后,我们可以通过在 +page.server.js 中通过:

import { DB_USER } from '$env/static/private';  

来进行使用。

4.部署

通过 https://vercel.com/ 非常容易

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/37916.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux线程同步【拿命推荐版】

目录 &#x1f6a9;引言 &#x1f6a9;听故事&#xff0c;引概念 &#x1f6a9;生产者消费者模型 &#x1f680;再次理解生产消费模型 &#x1f680;挖掘特点 &#x1f6a9;条件变量 &#x1f680;条件变量常用接口 &#x1f680;条件变量的原理 &#x1f6a9;引言 上一篇…

【Android面试八股文】说一说你对Android中的Context的理解吧

文章目录 一、Context是什么?1.1 主要功能和用途1.2 如何获取 Context 实例?1.3 注意事项二、Context 类的层次结构三、Context的数量四、Context的注意事项五、Android 中有多少类型的 Context,它们有什么区别 ?六、Contextlmpl实例是什么时候生成的,在 Activity 的 oncr…

C语言力扣刷题11——打家劫舍1——[线性动态规划]

力扣刷题11——打家劫舍1和2——[线性动态规划] 一、博客声明二、题目描述三、解题思路1、线性动态规划 a、什么是动态规划 2、思路说明 四、解题代码&#xff08;附注释&#xff09; 一、博客声明 找工作逃不过刷题&#xff0c;为了更好的督促自己学习以及理解力扣大佬们的解…

消防设施操作员试题含答案

消防设施操作员试题库与参考答案 1、在网络中传输信息的物理载体指的是( )。 A、导向传输网 B、非导向传输网 C、网络传输介质&#xff08;正确答案&#xff09; D、网络传输信号 2、消防安全重点单位应当按照和应急疏散预案&#xff0c;至少( )进行一次演练&#xff0c;…

Java中System的用法

System指的是当前进程运行的操作系统&#xff0c;属于java.lang包下面的类 常见的用法有以下几种&#xff1a; 第一种简单,我们直接上第二种方法吧 currentTimeMills()用法 // 演示currentTimeMillis方法public static void main(String[] args) {// 获取当前时间所对应的毫秒…

获取HTML元素的offsetParent属性

获取HTML元素的offsetParent属性 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨在前端开发中常用的一个属性——HTML元素的offsetParent属性…

Apache Ranger 2.4.0 安装部署

1、安装ranger admin 2、源码编译Ranger wget https://www.apache.org/dist/ranger/2.4.0/apache-ranger-2.4.0.tar.gz tar zxvf apache-ranger-2.4.0.tar.gz cd apache-ranger-2.4.0 mvn -Pall clean mvn clean package -DskipTests maven settting可以设置阿里云进行资源下载…

昇思25天学习打卡营第4天|扩散模型

文章目录 昇思MindSpore应用实践基于MindSpore的Diffusion扩散模型1、Diffusion Models 简介2、构建 Diffusion Model 的准备工作3、Attention 机制4、条件 U-Net5、Diffusion 正向过程6、Diffusion 反向过程7、Diffusion 模型训练 Reference 昇思MindSpore应用实践 本系列文章…

YOLO深度学习基准模型概念与应用

YOLO深度学习基准模型概念与应用 YOLO&#xff08;You Only Look Once&#xff09;是一种先进的深度学习目标检测模型&#xff0c;由Joseph Redmon等人在2016年首次提出&#xff0c;它彻底改变了目标检测领域的游戏规则&#xff0c;因其独特的一阶段检测方法和实时处理能力而广…

【Qt知识】Geometry属性

一、走进Geometry的世界 Geometry属性是Qt框架中用于处理和操作几何形状的一系列类的集合。它包括了QPoint、QPointF、QSize、QSizeF、QRect和QRectF等。这些类分别代表点、大小、矩形等基本几何概念&#xff0c;它们的存在让图形界面的创建变得既简单又直观。 位置和尺寸。 其…

算法训练营第七十三天 | Bellman_ford算法、SPFA算法、Bellman_ford之判断负权回路

算法训练营第七十三天 | Bellman_ford算法、SPFA算法、Bellman_ford之判断负权回路 Bellman_ford算法 题目链接&#xff1a; https://kamacoder.com/problempage.php?pid1152 对所有边松弛一次&#xff0c;相当于计算 起点到达 与起点一条边相连的节点 的最短距离&#xff…

新消息!2025第十四届北京国防信息化装备与技术博览会

2025第十四届中国&#xff08;北京&#xff09;国防信息化装备与技术博览会 展会时间&#xff1a;2025年6月12日-14日 展会地点&#xff1a;北京中国国际展览中心&#xff08;朝阳馆&#xff09; 展会规模&#xff1a;展览面积45000平米&#xff0c;展商1000余家&#xff0c;展…

css 滚动词云

css javascript 实现滚动词云效果 // 163css.js var radius 120; var dtr Math.PI / 180; var d 300; var mcList []; var active false; var lasta 1; var lastb 1; var distr true; var tspeed 10; var size 250; var mouseX 0; var mouseY 0; var howElliptic…

MySQL高级-MVCC-隐藏字段

文章目录 1、介绍2、测试2.1、进入服务器中的 /var/lib/mysql/atguigu/2.2、查看有主键的表 stu2.3、查看没有主键的表 employee2.3.1、创建表 employee2.3.2、查看表结构及其其中的字段信息 1、介绍 ---------------- | id | age | name | ---------------- | 1 | 1 | Js…

python读取语文成绩 青少年编程电子学会python编程等级考试三级真题解析2022年3月

目录 python读取语文成绩 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python读取语文成绩 2022年3月 python编程等级考试级编程题 一、题目…

【Qt】之【Bug】大量出现“未定义的标识符”问题

背景 构建时出现大量错误 原因 中文注释问题 解决 方法1. 报错代码附近的中文注释全部删掉。。。 方法2. 报错的文件添加 // Chinese word comment solution #pragma execution_character_set("utf-8")

第二天:ALOAM前端讲解【第3部分】

(2)面特征 点到面的距离公式: d H = ∣ ( X ~ ( k + 1 , i ) L − X ˉ ( k , j ) L ) ⋅ ( ( X ˉ ( k , j ) L − X ˉ ( k , l ) L ) ( X ˉ ( k , j ) L − X ˉ ( k , m ) L ) ) ∣ ∣ ( X ˉ ( k , j ) L − X ˉ ( k , l ) L ) ( X ˉ ( k , j ) L − X ˉ ( k ,…

Vue如何引用组件

在 Vue.js 中&#xff0c;你可以通过几种方式引用组件&#xff1a; 全局注册 在 main.js 或你的主入口文件中&#xff0c;你可以使用 Vue.component() 方法来全局注册一个组件。这意味着这个组件可以在你的 Vue 应用的任何地方使用。 import MyComponent from ./components/…

Linux常用命令大全(超详细!!!)

文章目录 1.Linux是什么1.1 关于Linux我们主要学习什么1.1 学习Linux常见命令的前置知识 2. Linux常见命令2.1 ls命令2.2 cd命令2.3 pwd命令2.4 touch命令2.5 cat命令2.6 echo命令2.7 vim命令2.8 mkdir 命令2.9 rm命令2.10 cp命令2.11 mv命令2.12 grep命令2.13 ps命令2.14 nets…

文华财经通达信同花顺期货通盘立方博易大师主图指标公式源码

买线:EMA(C,2); 卖线:EMA(SLOPE(C,21)*20C,42); BU:CROSS(买线,卖线); SEL:CROSS(卖线,买线); STICKLINE1(买线>卖线,LOW,MIN(O,C),0.1,1),COLORRED; STICKLINE1(买线>卖线,MAX(O,C),HIGH,0.1,1),COLORRED; STICKLINE(买线>卖线,CLOSE,OPEN,8,1),COLORRED; STI…