标签: sapper

Svelte 中自定义组件的类样式未注册

我正在使用 Svelte/Sapper 模板并添加了景点 UI,但我无法将任何类/样式应用于其自定义组件,如下所示:

<TextField class='search-box' type='search' />
<style>
    .search-box {
        margin-bottom: 10px;
    }
</style>
Run Code Online (Sandbox Code Playgroud)

我明白了

未使用的 CSS 选择器“.search-box”

到目前为止,对我来说让它发挥作用的唯一方法是:global在样式上应用修改器。

svelte sapper

16
推荐指数
2
解决办法
1万
查看次数

如何在 Sapper 中离开父布局?

目前,我正在开发一个项目,该项目Menu在除两个页面之外的所有页面上共享一个组件。我在根_layout.svelte文件中添加了菜单组件。现在因为不需要Menu组件的两个页面是嵌套路由。的Menu,因为他们是孩子的路线是在他们里面出现。他们是这样看的。但我认为应该有一些方法可以选择退出/离开父布局。否则我将不得不删除_layout.svelte根文件Menu并向每个路由添加组件,这对 DRY 来说太过分了。有没有办法_layout.svelte在 Sapper 中离开父母?

javascript layout parent sapper svelte-3

15
推荐指数
1
解决办法
2111
查看次数

在 Sapper 路线或 sapper 中间件中使用passportjspassport.authenticate()

我过去在expressjs中使用过passportjs,目前我正试图将它与Sapper应用程序结合起来,但我无法弄清楚如何在我的路线中包含passport.authenticate(),因为它是一条工兵路线而不是快速路线。此外,如果我尝试运行 server.js 文件中的所有内容,我会遇到如何将其与 sapper 中间件集成的问题。您如何在/与 Sapper 中间件或 sapper 路由 js 文件(这是前端而不是服务器路由)一起使用passport.authenticate()?

我的 server.js 是典型的:

const sirv = require('sirv');
import express from 'express';
var cookieParser = require('cookie-parser');
import * as sapper from '@sapper/server';
const session = require('express-session');
var passport = require('passport');
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/passport', { 
 useNewUrlParser: true });
const MongoStore = require('connect-mongo')(session);
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true,
    store: new MongoStore({ url: 'mongodb://localhost/passport' …
Run Code Online (Sandbox Code Playgroud)

express passport.js sapper

11
推荐指数
1
解决办法
2578
查看次数

如何使用 Svelte 在 Sapper 中制作一个知道当前 url 的组件?

我有一个页面,它有一个带有“Quarters”链接的导航栏。在 Quarters 链接下,当用户在/quarters路线上时,将显示一个宿舍列表,如 2019Q2 等。网址将为/quarters/2019q2

我想制作一个显示超链接的组件,selected如果当前 url 与链接的 href 匹配,则该超链接将包含该类。这是我能得到的最接近的:

<script>
  import { afterUpdate } from 'svelte';
  export let segment;
  export let text = 'text here';
  export let link;
  let isCurrentPath = false;
  console.log(segment, link, text);
  afterUpdate(() => {
    if (window.location.pathname.includes(link)) {
      isCurrentPath = true;
      debugger;
    }
    console.log('HL afterUpdate ', window.location);
  });
</script>

<style>
  /* omitted */
</style>

<a class:selected={segment && isCurrentPath} href={link}>{text}</a>
Run Code Online (Sandbox Code Playgroud)

这对于第一次加载工作正常,但是当用户导航到不同的数据页面时,选择不会更新。如何让一些代码只在客户端运行?如果我访问window外部的对象,afterUpdate我将从服务器端代码中得到一个空引用错误。

ETA:也试过这个:

  let isCurrentPath = false;
  let …
Run Code Online (Sandbox Code Playgroud)

svelte sapper

10
推荐指数
2
解决办法
4702
查看次数

使用 Sapper,如何在出现 404 错误时重定向到索引页面?

对于 404 错误,我不想显示 404 页面。相反,如果用户已登录,我想重定向回索引页面,如果用户已注销,我想重定向回登录页面。如果没有登录,我已经能够将用户从索引页面路由到登录页面,所以我可能只需要重定向到索引页面并让它负责重新路由到登录页面,尽管那样必须进行两次重新路由似乎效率低下。

我可以通过将routes/_error.svelte页面重写为这个来完成它......

<script>
    import { onMount } from 'svelte';
    onMount(() => {window.location.href = '/'});
</script>
Run Code Online (Sandbox Code Playgroud)

但我不是很自信这是完成我想做的事情的最佳方式。它还会重定向所有错误,在未来的项目中,我可能希望显示某些错误,例如 404,但重定向其他错误,例如 500。

有没有人对如何使用 Sapper 更好地实现这一点有所了解?

javascript svelte sapper

10
推荐指数
1
解决办法
5220
查看次数

JS Sapper:将数据发布到服务器(正确的方式?)

如何使用 Sapper JS lib 将数据正确发布到服务器?

说:我有一个页面“板编辑器”,我可以在其中从用 SVG 编写的六边形网格中选择/取消选择图块,并在商店数组中添加/减去十六进制坐标。

然后用户填写一个表格,其中有板:姓名、作者和版本...单击保存按钮将发布表单数据和存储中的数组。服务器的工作是将板定义存储在“static/boards/repository/[name].json”文件中。

今天,网络上很少有关于 POSTing 数据问题的正确使用 Sapper/Svelte 的细节。

如何进行 ?感谢您的回复!

编辑:

为避免重新发布整个页面,这意味着丢失应用程序状态,我考虑使用内部带有表单的 IFRAME.... 但是如何在 IFRAME 内初始化工兵的副本以确保我可以使用 this.fetch () 方法呢?

javascript post routes svelte sapper

9
推荐指数
2
解决办法
4119
查看次数

我如何在 Svelte 中使用 jQuery

这样做:

import $ from 'jquery';
Run Code Online (Sandbox Code Playgroud)

显示错误

The $ prefix is reserved, and cannot be used for variable and import names svelte(illegal-declaration)
Run Code Online (Sandbox Code Playgroud)

jquery svelte sapper

9
推荐指数
2
解决办法
8397
查看次数

如何在 Svelte/Sapper 中加载外部 JS 库?

我一直在尝试将 ace 编辑器 ( https://ace.c9.io/ )加载到我的 Sapper 应用程序中。当我在 Sapper 路由中加载它时,我成功地将它加载到脚本标签中,但是当我尝试在 Svelte 组件中执行相同的操作时,该组件再次由路由呈现,我收到错误消息:

ace 未定义

这是我拥有的代码,如果它是 Sapper 路线,它可以正常工作:

<div id="editor"> def main():
    return sum(range(1,100))
</div>

    <script src="https://pagecdn.io/lib/ace/1.4.6/ace.js" type="text/javascript" charset="utf-8"></script>

    <script>
          var editor = ace.edit("editor");
          editor.setTheme("ace/theme/monokai");
          editor.session.setMode("ace/mode/python");
          editor.resize()
    </script>
Run Code Online (Sandbox Code Playgroud)

javascript svelte sapper

9
推荐指数
3
解决办法
7825
查看次数

如何手动将 svelte 组件编译为 sapper/svelte 生成的最终 javascript 和 css?

我们公司生产了一个用 svelte/sapper 编写的自动化框架。一项功能是开发人员可以创建自定义 ui 小部件,目前使用纯 js/html/css 和我们的客户端 api。这些小部件存储在数据库中而不是文件系统中。

我认为允许他们将小部件创建为 svelte 组件将是一个很大的优势,因为它在一个位置包含所有标记、js 和 css,并将为他们提供 svelte 反应性的所有好处。

我已经创建了一个使用 svelte 的服务器 API 编译组件的端点,但这似乎只是生成了一个准备好 rollup-plugin-svelte/sapper/babel 来完成生成浏览器可以使用的东西的工作的模块。

如何手动将 svelte 组件编译为 sapper/svelte 生成的最终 javascript 和 css。

server-side-rendering svelte sapper

9
推荐指数
2
解决办法
1942
查看次数

如何在 sapper (svelte) 中捕获服务器错误

我正在将我的小网站从 express+handlebars 翻译成 express+sapper 项目。

我想捕获服务器端错误(例如,当您转到 /api/error 时出现自愿错误)并使用sapper _error.svelte模板呈现它们。

我尝试在没有自定义处理程序的情况下抛出错误,但它返回一个只有错误堆栈的丑陋文本页面,并且似乎没有被工兵的错误处理程序捕获

所以我添加了我自己的错误处理程序,我可以渲染 HTML(裸露的,还没有 css)但是有没有办法可以使用 sapper _error.svelte 模板?

// ----------------------- src/server.js
import sirv from 'sirv'
import express from 'express'
import compression from 'compression'
import * as sapper from '@sapper/server'

import fatal500 from './middlewares/fatal500'

const { PORT, NODE_ENV } = process.env
const dev = NODE_ENV === 'development'

const app = express()

app.use(compression({ threshold: 0 }))
app.use(sirv('static', { dev }))

// the voluntary error thrower --------------------------------
app.get('/api/error', (req, res, next) => { …
Run Code Online (Sandbox Code Playgroud)

error-handling svelte sapper

8
推荐指数
1
解决办法
1051
查看次数