一、静态生成（SG）静态生成是Next.js提供的一种预渲染技术，它在构建时生成页面的HTML文件，这些文件在部署后可以直接由CDN分发给用户，无需服务器参与实时渲染。...使用getStaticPaths预定义动态路由对于动态路由（如pages/posts/[slug].js），需要使用getStaticPaths指定预渲染的路径列表。...return { paths: slugs.map((slug) => ({ params: { slug } })), fallback: 'blocking', // 可选，指定未匹配路径的处理策略...Next.js的SSR功能提供了良好的性能与SEO效果。1..../${post.slug}`} /> {/* 页面内容 */} );}预渲染带来的快速首屏加载与爬虫友好性：无论是SG还是SSR，都能提供完整的HTML
下面是文章详情页的主体代码 // pages/posts/[slug].js import { useRouter } from 'next/router' function Post({ post...中的id 获取文章详情 export async function getStaticProps({ params }) { // 如果页面的路由是 /posts/1, 这 params.id 的值就是...与 TypeORM 对比 TypeORM 是一种传统的 ORM，它将表映射到模型类。这些模型类可用于生成 SQL 迁移。然后，模型类的实例在运行时为应用程序的 CRUD 查询提供一个接口。...它使用 Prisma Schema，以声明的方式定义应用程序模型。然后使用 Prisma Migrate 命令， Prisma Schema 会生成 SQL 迁移并根据数据库执行它们。...Prisma CRUD 查询由 Prisma Client 提供，这是一个针对 Node.js 和 TypeScript 的轻量级且完全类型安全的数据库客户端。
是必需的参数，必须是字符串，最长20个字符，只能使用小写字符，可以包含下划线，但不能包含空格。...，我只加了一个必需的参数，可选参数什么都没有写。...、删除、阅读权限的字符串，可以设置字符串或者数组，如果单词的负数不是加“s”的形式，我们需要 //设置一个数组，array( 'box', 'boxes' ) 'capability_type...、错误等信息中的字段，我们需要过滤 // 'post_updated_messages' 钩子来自定义这些消息。...而创建自定义文章类型的时候有一个参数是rewrite，默认是true，也会使用伪静态形式URL。
其中，完善的静态渲染/服务端渲染支持让 Next.js 在 React 生态中独树一帜 二.核心特性 ?...) pages/post/[...all].js → /post/* (/post/2020/id/title) 路径中变化的参数通过getStaticPaths来填充： // pages/posts...1]/[路由参数2].js），接着getStaticPaths填充路由参数，getStaticProps({ params })根据参数请求不同数据，最后数据进入页面组件开始预渲染： ?...（上例中的Home）。...HTML，但 2 个问题也随之而来： 数据可能会发生变化，已经生成的静态页面需要更新 数据量可能会多到“永远”编译不完 以电商页面为例，要把海量商品数据全都编译成静态页面，几乎是不可能的（或许要编译一个世纪那么长
并且，在很长的一段时间里，React 中能称为组件的只有 Class 这段很长的时间有多长？ 从 React 诞生之初一直到React Hooks推出并进化成完全形态。...需要用到更多功能，再按需暴露更多的既定 API： // pages/blog.js function Blog({ posts }) { // Render posts... } // API 1...） 如此看来，在文档中融入少量在线教育的成熟模式，可能效果极佳 默认提供最佳实践 读过体验科技与好的产品，对其中玉伯提出的默认好用印象很深，而 Next.js 算是默认好用在框架设计上的一个真实案例 例如...，前端生态也正在发生着一些变化，涌现出各式各样的一体化应用： 以前端项目/后端项目为主体的一体化应用：如 Midway Serverless，支持集成 React、Vue 等前端项目 以 SSR 为主体的一体化应用...的兴起很好地解决了 SSR 渲染服务的运维问题，因此，其 Vercel 平台默认支持以 Serverless Functions 的形式部署 SSR 服务与 API： Pages that use Server-Side
# or pnpm create next-app --typescript 为什么要使用Create Next App 交互式体验：不带任何参数运行npx create-next-app@latest...目录，在_posts目录下创建两个mdx文件(_posts/js/helloWorld.mdx,_posts/demo.mdx)，为什么是mdx文件呢？...MDXRemote {...mdxSource} components={components} /> ) } export const getStaticPaths...点击链接，应该会报错，未引入utils/components，这个是配置 mdx 内元素渲染的组件，参考MDX Components，mdx 提供默认的渲染组件，所以，这个是非必须的，不需要删除即可...个人比较喜欢 chakra-ui，所以将组件都转成了 chakra-ui 提供的组件，配置如下： import CanIUse from 'components/CanIUse' import {Heading
以如下Java代码片段为例:String sql = "select " + "id, title, excerpt, body" + "from Posts where slug ...= '" + slug + "'";代码通过关联用户以某种方式输入的值(可能是URL参数)来组装SQL查询。...1.使用参数化查询针对Java中的SQL注入，可以从使用参数化查询入手。...;用一个问号形式的占位符替换了关联信息。...(sql);p.setString(1, slug);通过使用参数化查询，我们可以以一种安全的方式组装查询语句与用户提交的值。
当然如果我们获取数据的 api 接口是通过其他服务来提供的， 那也可以把 Remix 中的路由层作为前端的数据渲染控制器。接下来我们就为我们的组件设置一些数据。...动态路由参数 接下来让我们创建访问具体文章的路由。...取而代之的是在 url 中通过动态路由标识来进行处理。 Remix 会解析并传递动态的参数到路由中。...，有可能不是 slug， 所以我们依然使用 invariant来进行错误判断。...而是返回了错误信息。在组件中，这些信息可以通过 useActionData 进行访问。它跟 useLoaderData 很像。不过只是数据是在表单提交之后通过 action获取到的。
原因是，一个正常的同构需求，我们需要： 前端组件渲染为HTML字符串，流 服务端，客户端资源的加载不同处理，(首屏不一定全部加载完所有js……) 服务端，客户端的状态数据的传递 打包工具链 性能优化 ….../pages/post/[...slug].js --> /post/1/2, /post/a/b/c等，但是不会匹配 /post/create, /post/abc 动态参数可以通过req.query...对象中获取（{ pid }， { slug: [ 'a', 'b' ] }），在页面中可以通过router hook获取： import { useRouter } from 'next/router'...使用getStaticProps方法在build阶段返回页面所需的数据。 如果是动态路由的页面，使用getStaticPaths方法来返回所有的路由参数，以及是否需要回落机制。...，需要注意的是： getStaticPaths方法返回的fallback很有用：如果fallback是false，访问该方法没有返回的路由会404 但是如果不想或者不方便在build阶段拿到路由参数
原因是，一个正常的同构需求，我们需要： 前端组件渲染为HTML字符串，流 服务端，客户端资源的加载不同处理，(首屏不一定全部加载完所有js……) 服务端，客户端的状态数据的传递 打包工具链 性能优化 ….../pages/post/[...slug].js --> /post/1/2, /post/a/b/c等，但是不会匹配 /post/create, /post/abc 动态参数可以通过req.query...对象中获取（{ pid }， { slug: [ 'a', 'b' ] }），在页面中可以通过router hook获取： import { useRouter } from 'next/router'...使用getStaticProps方法在build阶段返回页面所需的数据。 如果是动态路由的页面，使用getStaticPaths方法来返回所有的路由参数，以及是否需要回落机制。...，需要注意的是： getStaticPaths方法返回的fallback很有用：如果fallback是false，访问该方法没有返回的路由会404 但是如果不想或者不方便在build阶段拿到路由参数，可以设置
每个路由函数，如 Projects 可以定义一个 loader 函数，类似处理 GET 请求的服务端函数，可以获取到路由信息，为初次服务端渲提供数据，在这个函数中可以获取文件系统、请求数据库、进行其他网络请求...当 action 函数返回数据或错误信息时，我们可以通过 Remix 提供的 useActionData 钩子拿到这个返回的错误信息，进行前端的展示等。...上述嵌套路由一个显而易见的优点就是，某个部分如果报错了，结合后续会提到的 ErrorBoundary 和 CatchBoundary 这个部分可以显示错误的页面，而用户仍然可以操作其他部分，而不需要刷新整个页面以重新加载使用...正因为错误经常发生，且处理错误异常困难，包含客户端、服务端的各种错误，包含预期的、非预期的错误等，所以 Remix 内建了完善的错误处理机制，提供了类似 React 的 ErrorBoundary 的理念...，即你在 loader、action 函数中，在客户端或服务端，手动抛出的 Response 错误，这些错误的路径是可预期的，在 CatchBoundary 中，通过 useCatch 钩子获取这些抛出的
利用代 js 能力来说做到了： 极佳的开发体验 极佳的网站最佳的”动“，“静”平衡 从特性上来说，支持： SSR(Server Side Rendering) 提供 getServerSideProps...SSG(Static Site Generation) 提供 getStaticProps，getStaticPaths 方法来预先生产静态页面； 而更酷的一点是：使用 fallback，revalidate...Vue.js (vue-cli) React.js (create-react-app) Hexo Gatsby.js Angular Next.js SSG Nuxt.js SSG 以及自动适配框架 以本博客...next export 不支持next SSG中“动”的特性（fallback，revalidate）。...具体以 strapi 为例子： 1、strapi 数据发布 2、web hook到自定义的桥接服务。 3、桥接服务更新站点git。 4、Weify触发重新部署。
利用代 js 能力来说做到了： 极佳的开发体验 极佳的网站最佳的”动“，“静”平衡 从特性上来说，支持： SSR(Server Side Rendering) 提供 getServerSideProps...SSG(Static Site Generation) 提供 getStaticProps，getStaticPaths 方法来预先生产静态页面； 而更酷的一点是：使用 fallback，revalidate...(vue-cli) React.js (create-react-app) Hexo Gatsby.js Angular Next.js SSG Nuxt.js SSG 以及自动适配框架 以本博客 next...next export 不支持next SSG中“动”的特性（fallback，revalidate）。...具体以 strapi 为例子： strapi 数据发布 web hook到自定义的桥接服务。 桥接服务更新站点git。 Weify触发重新部署。
利用现代js能力来说做到了： 极佳的开发体验 极佳的网站最佳的”动“，“静”平衡 从特性上来说，支持： SSR(Server Side Rendering) 提供getServerSideProps方法...SSG(Static Site Generation) 提供getStaticProps，getStaticPaths方法来预先生产静态页面 而更酷的一点是：使用fallback，revalidate...以本博客next为例，Webify实际上使用时了next export的能力，构建后，直接部署静态文件到server。...next export 不支持next SSG中“动”的特性（fallback，revalidate）。...具体以strapi为例子 strapi 数据发布 web hook到自定义的桥接服务。 桥接服务更新站点git。 Weify触发重新部署。
删除key 中的一个或多个指定域 HEXISTS key field 查看key 中，给定域 field 是否存在 HGET key field 返回key 中给定域 field 的值 HGETALL...加上浮点数增量 HKEYS key 返回key 中的所有域 HLEN key 返回key 中域的数量 HMGET key field [field ...]...field设置为value HVALS key 返回所有值 HSTRLEN key field 返回相关field的字符串长度 了解更多相关命令 HSET 不区分插入和更新操作，修改数据时不用事先判断否存在...其中slug不可重复，因此另外以slug.to.id为键记录slug与postid关联 根据这两个hash结构，实现以下三个功能：1.发布文章 2.以slug为条件读取文章 3.更改文章的slug...：{$postId}"; } } 以slug为条件读取文章 public function getPost(Request $requset, $slug) { $slug = $requset
(string) 类型 type参数指定获取文章的文章类型，可以是一个字符串或一个文章类型的数组。...建议使用PUT（如果可用），以适应REST约定。 输入 数据参数包括需要修改的文章ID和文章对象。...和发布文章一样，data参数应该是一个包含以下键值对的对象，唯一不一样的就是编辑文章的参数中多了一个文章ID，编辑文章的数据参数和发布文章是一样的，这里就不再一一翻译了，请参照编辑文章的键值字符串部分。...如果请求中设置了force选项，将返回一个200 OK状态码，说明文章已经被永久删除。 如果发出请求的客户端未授权，返回一个403 错误码。...如果发出请求的客户端未授权，返回一个403 错误码。
，为了美观加上了头图，但是服务端没有提供对应的字段（头图url）。...并且我在写PC端文章时，也没有维护头图，文章中的图片都放在七牛云上的。...于是只能取巧，利用接口的slug字段(猜测是文章的路由别名)，https://www.bug2048.com/wechat20180419/中的wechat20180419的部分。...利用该字段，我在七牛云上以该名称维护一张图片。当请求服务端时候，将该字段组装成对应的图片url即可。...小程序里图片提供了binderror的属性，当图片加载失败时会触发该属性。
Laravel 7 开始新增了一些新特性，今天我们来讲解下 路由绑定的新用法，自定义键名（slug）以及作用域（范围限定） 首先我们 安装最新版本的 Laravel ，并且创建两张数据表。...我们的以前的 URL 可能是如下这样: http://laravel7.test/posts/posts/1 我们是通过主键 ID 来进行查找的。...当然我们在以前的版本可以更改这个，我们需要在 模型中重写一个方法 getRouteKeyName 接下来我们看下 Laravel 7 以前是怎么实现的 首先。....test/posts/amet-laudantium-reprehenderit-ullam-repudiandae Laravel 7 的版本，实现以上自定义键，就更加方便了 只需要在 路由上添加一个动态参数即可...最终看了半天文档 我发现他给的路由后面有一个 动态参数 slug，加上试试。
1 markdown 分文件夹存放 默认情况下，博客的 markdown 文件是放在 src/content/blog 文件夹下的，但如果文件较多，全部放在一个文件夹比较拥挤，期望放到子文件夹中，但又不希望文章的最终的...URL 中包含这个子文件夹。...我做了两件事情，1 去除 slug 中的自定义路径，2 检查 slug 是否以数字开头，如果是则报错。...改造之前，一片文章的 URL 可能是这样的：https://blog.jgrass.cc/posts/2017/01-my-blog 改造之后，变成这样的：https://blog.jgrass.cc...;} 2 在新标签页打开超链接 文章中引入的超链接，默认会在浏览器当前标签页打开，如何修改成在新标签页打开。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
