个人中心
gpt4 book ai didi

javascript - 是否可以将搜索词参数放入 getServerSideProps() 中？

转载 作者：行者123 更新时间：2023-12-04 17:12:51 25 4
gpt4 key购买 nike

我正在创建一个页面，我可以在其中概览我的所有笔记/摘要。

笔记的页面是转换为动态文件中使用的 HTML 的 markdown 文件(这可行)。

在笔记页面(列出所有笔记)，我想实现一个搜索功能:
我需要找到一种方法将搜索输入的值获取到 getServerSideProps() 中。这样它就可以过滤掉笔记，只显示你搜索过的笔记。

注意事项:

  • 当我在注释页的 getServerSideProps() 中更改字符串“searchTerm”时，搜索功能起作用。
const searchTerm = "" ;
  • 我无法将 getAllNotes() 移到 getServerSideProps() 之外，因为无法在客户端访问数据文件的导入。 
const allNotes = getAllNotes();
  • 搜索栏需要居中，我知道。

笔记页面代码:

import Head from 'next/head';
import Link from 'next/link';
import Footer from '../../components/Footer.js';
import Navigation from '../../components/Navigation';

import { Rating } from '@material-ui/core';
import Chip from '../../components/Chip.js';

import noteStyle from '../../styles/Notes.module.css';
import styles from '../../styles/Home.module.css';


import { getAllNotes } from '../../lib/data';
import Search from '../../components/Search';
export default function Notes({ notes }) {
  return (
    <div id="top" className={styles.container}>
      <Head></Head>

      <main className={styles.main}>
        <section>
          <Navigation />
        </section>
        <section className={noteStyle.noteSection}>
          <h1>Notes & Summaries</h1>
          
          <Search />

          <div className={noteStyle.notes}>
            {notes.map((note) => (
              <Link key={note.slug} href={`/note/${note.slug}`}>
                <a key={note.slug} className={noteStyle.noteCard}>
                  <h2 key="title">{note.title}</h2>
                  <h3 key="author">{note.author}</h3>
                  <p key="abstract">
                    {note.abstract}
                  </p>
                  <div className={noteStyle.aboutNote}>
                    <Rating key="rating" className={noteStyle.rating} name="half-rating-read" defaultValue={note.rating} precision={0.5} readOnly />
                    <Chip key="label" className={noteStyle.noteChip} bgColor={note.labelColors[0]} text={note.labelText[0]} icon={note.labelIcons[0]} />
                  </div>
                </a>
              </Link>
            ))}

          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}

export async function getServerSideProps() {
  const allNotes = getAllNotes();
  const searchTerm = "";

  //Searches in title, author & abstract data field for a match with the query
  const searchNotes = allNotes.filter((note) => {
    return note.data.title.toLowerCase().includes(searchTerm.toLowerCase()) || note.data.author.toLowerCase().includes(searchTerm.toLowerCase()) || note.data.abstract.toLowerCase().includes(searchTerm.toLowerCase())
  });

  

  return {
    props: {
      //Here data serialising (dates, urls, ...),
      notes: searchNotes.map(({ data, content, slug }) => ({
        ...data,
        content,
        slug,
      })),

    },
  };
};

搜索组件的代码:

import { useState } from 'react';

export default function Search() {
    const [input, setInput] = useState('');

    const search = (e) => {
        setInput(e.target.value);
        console.log("You searched", input);
    }

    return (
        <div className={style.search}>
                <SearchIcon className={style.search__inputIcon}/>
                <input type="text" placeholder="Search for a note..." value={input} onChange={search} />
        </div>
    )
}

getAllNotes 的代码(此函数将所有 markdown 文件转换为 HTML):

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const contentDirectory = path.join(process.cwd(), '_content');

export function getAllNotes() {
  const allNotes = fs.readdirSync(contentDirectory);

  return allNotes.map(fileName => {
    const slug = fileName.replace('.md', '');
    const fileContents = fs.readFileSync(
      path.join(contentDirectory, fileName),
      'utf-8'
    )
    const {content, data} = matter(fileContents);
    return {
      data,
      content,
      slug,
    };  
  })
}

我在构建页面时使用的研究:

最佳答案

要使来自客户端代码的值可用于 getServerSideProps，您可以在 URL 上传递一个带有 router.push 的查询参数.

// In your `Notes` or `Search` component

router.push('/notes?searchTerm=hello');

然后您可以从 getServerSideProps 中的查询参数访问该值。

export async function getServerSideProps(context) {
    const searchTerm = context.query.searchTerm ?? "" // `context.query.searchTerm` would contain "hello"

    // ...
}

关于javascript - 是否可以将搜索词参数放入 getServerSideProps() 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69150064/

25 4 0
文章推荐： python - 无法从 flower.command 导入名称 FlowerCommand
文章推荐： wpf - 使用 WrapPanel 样式化 ListView.GroupStyle
文章推荐： javascript - 使用ajax将数据发布到django时获取空值
文章推荐： html - Flexboxes : stacked, 居中、环绕、颜色匹配的边和动态、同步的宽度(见示例)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com