- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
昨天我将 SvelteKit 版本从 v1.0.0-next.241 更新到 v1.0.0-next.287,因为我无法获取组件中的数据。我收到一条错误消息:Unexpected token < in JSON atposition 0。当我尝试解析响应时发生错误:await response.json()
自版本 241 以来,获取数据方面有什么变化吗?现在该怎么做?
索引.svelte
<script>
import { session } from '$app/stores';
import { onMount } from 'svelte';
onMount(async () => {
const response = await fetch('/content', {
method: 'POST',
body: JSON.stringify({
user_id: $session.user.id
}),
headers: {
'Content-Type': 'application/json'
}
});
const data = await response.json(); // error occurs on this line
});
</script>
index.js
export async function post({ request }) {
const data = await request.json();
try {
if (data.user_id > 0) {
let rows = await db.result;
if (rows.length > 0) {
return {
status: 200,
body: {
rows
},
headers: {
'Content-Type': 'application/json'
}
};
}
return {
status: 500,
body: {
rows: [],
message: 'endp result err: ' + rows.message
},
headers: {
'Content-Type': 'application/json'
}
};
}
return {
status: 400,
body: {
rows: [],
message: 'User not authorized'
},
headers: {
'Content-Type': 'application/json'
}
};
} catch (err) {
return {
status: 500,
body: {
rows: [],
message: 'endp other err: ' + err.message
},
headers: {
'Content-Type': 'application/json'
}
};
}
}
Postman请求端点的结果
<!DOCTYPE html>
<html lang="en" theme="white">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="../img/favicon.png" />
<link rel="stylesheet" href="../css/bootstrap-icons/bootstrap-icons.css" />
<link rel="stylesheet" href="../css/charts/styles.min.css" />
<link rel="stylesheet" href="../css/tiptap.css" />
<link rel="stylesheet" href="../css/all.css" />
<link rel="stylesheet" href="../css/global.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lighthouse - Login</title>
<style data-svelte>
.action-text.s-dYWHY7G7-e5q.s-dYWHY7G7-e5q {
font-size: 16px;
line-height: 20px;
text-decoration: none;
color: #fff;
width: 100%;
padding: 0 1rem
}
.action-text.s-dYWHY7G7-e5q>span.s-dYWHY7G7-e5q {
margin-left: 0.75rem;
vertical-align: top
}
.s-dYWHY7G7-e5q.s-dYWHY7G7-e5q {}
.action-link.s-u1xw7poppUIF {
text-align: center;
align-items: center;
vertical-align: middle;
justify-content: center;
padding-top: 10px
}
.s-u1xw7poppUIF {}
.search-wrapper.s-DzH6K7xlQw-L {
position: relative;
display: flex;
max-width: 28rem;
width: 100%;
margin-left: 0.5rem;
height: 3rem;
background-color: #393939;
color: #fff;
transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
}
.search-wrapper-hidden.s-DzH6K7xlQw-L {
max-width: 3rem;
background-color: #161616
}
.search-focus.s-DzH6K7xlQw-L {
outline: 2px solid #fff;
outline-offset: -2px
}
.search-wrapper-2.s-DzH6K7xlQw-L {
display: flex;
flex-grow: 1;
border-bottom: 1px solid #393939
}
.btn-search.s-DzH6K7xlQw-L {
width: 3rem;
height: 100%;
padding: 0;
flex-shrink: 0;
opacity: 1;
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
}
.btn-search-disabled.s-DzH6K7xlQw-L {
border: none;
pointer-events: none
}
.input-search.s-DzH6K7xlQw-L {
font-size: 1rem;
font-weight: 400;
line-height: 1.375rem;
letter-spacing: 0;
color: #fff;
caret-color: #fff;
background-color: initial;
border: none;
outline: none;
width: 100%;
height: 3rem;
padding: 0;
transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
}
.input-hidden.s-DzH6K7xlQw-L {
opacity: 0;
pointer-events: none
}
.btn-clear.s-DzH6K7xlQw-L {
width: 3rem;
height: 100%;
padding: 0;
flex-shrink: 0;
opacity: 1;
display: block;
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
}
.btn-clear.s-DzH6K7xlQw-L:hover {
background-color: #4c4c4c
}
.btn-clear-hidden.s-DzH6K7xlQw-L {
opacity: 0;
display: none
}
.s-DzH6K7xlQw-L {}
.subject-divider.s-CDH0hzNq6wMb.s-CDH0hzNq6wMb {
color: #525252;
padding-bottom: 4px;
border-bottom: 1px solid #525252;
margin: 32px 1rem 8px
}
.subject-divider.s-CDH0hzNq6wMb span.s-CDH0hzNq6wMb {
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
letter-spacing: 0.32px;
color: #c6c6c6
}
.s-CDH0hzNq6wMb.s-CDH0hzNq6wMb {}
label.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
white-space: nowrap;
border: 0;
visibility: inherit;
clip: rect(0, 0, 0, 0)
}
[role="search"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
position: relative;
display: flex;
max-width: 28rem;
width: 100%;
margin-left: 0.5rem;
height: 3rem;
background-color: #393939;
color: #fff;
transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
}
[role="search"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn:not(.active) {
max-width: 3rem;
background-color: #161616
}
[role="search"].active.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
outline: 2px solid #fff;
outline-offset: -2px
}
[role="combobox"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
display: flex;
flex-grow: 1;
border-bottom: 1px solid #393939
}
input.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
width: 100%;
height: 3rem;
padding: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.375rem;
letter-spacing: 0;
color: #fff;
caret-color: #fff;
background-color: initial;
border: none;
outline: none;
transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
}
input.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn:not(.active) {
opacity: 0;
pointer-events: none
}
button.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
width: 3rem;
height: 100%;
padding: 0;
flex-shrink: 0;
opacity: 1;
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
}
.disabled.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
border: none;
pointer-events: none
}
[aria-label="Clear search"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn:hover {
background-color: #4c4c4c
}
.hidden.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
opacity: 0;
display: none
}
ul.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
position: absolute;
z-index: 10000;
padding: 1rem 0;
left: 0;
right: 0;
top: 3rem;
background-color: #161616;
border: 1px solid #393939;
border-top: none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5)
}
[role="menuitem"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
padding: 6px 1rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.29;
letter-spacing: 0.16px;
transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #c6c6c6
}
.selected.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn,
[role="menuitem"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn:hover {
background-color: #353535;
color: #f4f4f4
}
[role="menuitem"].s-qIO5oRXzFdSn span.s-qIO5oRXzFdSn {
font-size: 0.75rem;
font-weight: 400;
line-height: 1.34;
letter-spacing: 0.32px;
text-transform: lowercase;
color: #c6c6c6
}
.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {}
</style>
</head>
<body>
<div id="svelte">
<div class="auth-bg">
<div class="auth-box p-4 m-auto">
<div>
<div><img src="/img/logo_orig.png" alt="logo" height="96"></div>
<div class="py-2">
<div class="bx--form-item bx--text-input-wrapper">
<label for="ccs-0.gurrqcw5ltk" class="false bx--label">
Username
</label>
<div class="bx--text-input__field-outer-wrapper">
<div class="bx--text-input__field-wrapper">
<input id="ccs-0.gurrqcw5ltk" placeholder="Enter username..." type="email" value="" class="bx--text-input ">
</div>
</div>
</div>
</div>
<div class="py-2">
<div class="bx--form-item bx--text-input-wrapper">
<label for="ccs-0.xn3g2icn4s7" class="false bx--label">
Password
</label>
<div class="bx--text-input__field-outer-wrapper">
<div class="bx--text-input__field-wrapper">
<input id="ccs-0.xn3g2icn4s7" placeholder="Enter password..." type="password" value="" class="bx--text-input ">
</div>
</div>
</div>
</div>
<div class="py-4">
<button type="button" tabindex="0" class="bx--btn bx--btn--primary">
Log in</button></div>
<div class="py-2">or
<a href="/auth/register" class="bx--link ">Register</a></div>
<div class="py-2">
<a href="/auth/restore" class="bx--link ">Forgot password?</a></div>
</div>
</div>
<div class="company-logo"><a href="https://www.fh-swf.de/en/"
target="_blank"><img src="/img/company-logo.png" alt="company-logo" height="64"></a>
</div>
</div>
<div class="bx--loading-overlay ">
<div aria-atomic="true" aria-labelledby="ccs-0.lnde8bksux9" aria-live="assertive"
class="bx--loading">
<label id="ccs-0.lnde8bksux9" class="bx--visually-hidden">Active loading indicator</label>
<svg viewBox="0 0 100 100" class="bx--loading__svg">
<title>Active loading indicator</title>
<circle cx="50%" cy="50%" r="44" class="bx--loading__stroke"></circle>
</svg></div>
</div>
<script type="module" data-hydrate="1xenv5n">
import { start } from "/@fs/Users/elshad/OneDrive/Projects/FH-SWF/StudentAssistant/LighthouseApp/.svelte-kit/runtime/client/start.js";
start({
target: document.querySelector('[data-hydrate="1xenv5n"]').parentNode,
paths: {"base":"","assets":""},
session: {authenticated:false},
route: true,
spa: false,
trailing_slash: "never",
hydrate: {
status: 200,
error: null,
nodes: [
import("/src/routes/auth/__layout.reset.svelte"),
import("/src/routes/auth/login/index.svelte")
],
params: {}
}
});
</script>
<script type="application/json" data-type="svelte-props">
{}
</script>
</div>
</body>
</html>
最佳答案
您还必须添加 accept
header ,以向服务器指示您接受的返回内容,默认情况下这是 html。
headers: {
"content-type": "application/json",
"accept": "application/json"
}
关于svelte - 如何从 Sveltekit 版本 v1.0.0-next.287 中的端点获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71292584/
我看了你的文章 https://svelte.dev/blog/virtual-dom-is-pure-overhead和其他一些博客,但它们解释了与虚拟 dom 相比,svelte 如何更好。而我想
我正在尝试制作一个 Svelte 应用程序,其中我有一个创建 audioSource 并管理它的类(不是 svelte 组件)。 我想跨多个组件获取此类实例。 现在,我发现的唯一方法是这样做:
我有一个案例,我打开了两个选项卡 localhost:5000/和localhost:5000/stream并想更新 / 中的变量路径并查看 stream 中的更改实时路径。存储不是这样工作的,如果我
我正在尝试创建一个带有客户端文件输入的网站,其中一些数据完全在客户端上处理,并且不会发送到服务器。 我有以下 Svelte 组件 (App.svelte): let data; function h
我正在尝试创建一个带有客户端文件输入的网站,其中一些数据完全在客户端上处理,并且不会发送到服务器。 我有以下 Svelte 组件 (App.svelte): let data; function h
我正在研究 Svelte,并从其 Github 存储库中克隆了它。我可以从站点目录运行 REPL,但它使用来自 unpkg url 的 Svelte。我想尝试我本地构建的编译器并使用它而不是 unpk
我想将样式添加到 在纤细路由中标记,但我不能。 我试图添加一个有一些样式的类,但它没有用。 该类包含: .link { text-decoration: none; } 有没有人对此有解决方案
目前,当我在浏览器中打开开发人员工具时,我可以看到我的原始 svelte 组件,我想隐藏此信息并仅发送丑陋的代码。 这是我打开开发者工具时得到的。我正在构建一个单页应用程序。 这是我的 rollup.
我目前正在学习 Svelte,我想为这个副项目创建一个身份验证流程。通常,在 React 中,我习惯使用 Contexts 保存身份验证信息。 我想知道 Svelte 是否也可以执行类似的
调用 new Component({ target }) 将组件附加到目标,我想用新组件替换目标的所有旧内容。我该怎么做? 最佳答案 如果您正在混合服务器呈现的标记,最好使用 hydrate: tru
我有一个简单的 REPL example用于简单的列表详细信息编辑器。它由三个部分组成: Annotation是细节 Annotations遍历数据并创建 Annotation实例 App是创建 An
我正尝试在 Svelte 商店中维护实时股票报价,以便屏幕上的出价和要价实时更新。我不确定商店的结构如何来保持数据的 react 性和效率。数据来自 websocket,如下所示: {'symbol'
下面是一个非常简单的 Svelte 组件。 当您单击该按钮时,它会更新 pages[2].name。 Svelte 如何处理这个问题?它是否重新评估所有 3 个 DIV?或者它是否知道只修改第 3 个
我制作了一个用于输入财务数字的组件,用于我的输入表单。它现在工作得很好,除了一个奇怪的行为:当我点击输入字段时,它会按预期获得焦点,但是当它已经有焦点时点击它会带走焦点。 组件中只有一个 on:cli
我尝试实现一个自定义的 Svelte 商店,它允许我在订阅页面上“抛出”一个单一的状态对象。这是我准备的示例代码: import { derived, writable } from 'svelte/
我正在尝试安装带有 Svelte 的 Mermaid 来制作图表。所以我做了以下事情: npm 安装美人鱼 然后我得到以下内容: npm WARN svelte-app@1.0.0 No reposi
如何渲染使用 svelte.compile() 手动编译的组件?我正在编译这样的组件: import * as svelte from 'svelte/compiler'; var
我正在学习 Svelte 以及如何使用它制作自定义商店。我遇到了一个问题,当我尝试使用 update 更新可写数组时,它会在订阅该数组的组件中导致未定义的错误。 这是我的商店,我有一个简单的数组,其中
我正在尝试遍历数组以呈现具有 type 值的组件。 import One from './One.svelte'; import Two from './Two.svelte'; import
如何将数据(例如:导航栏标题)传递给父元素中使用的组件? import Nav from "../components/Nav.svelte"; let navTitle = "MyApp
我是一名优秀的程序员,十分优秀!