<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title>Frontend - 分类 - LZWcc's Blog</title><link>https://lzwcc.github.io/categories/frontend/</link><description>Frontend - 分类 - LZWcc's Blog</description><generator>Hugo -- gohugo.io</generator><language>zh-CN</language><managingEditor>l1274645232@gmail.com (LZWcc)</managingEditor><webMaster>l1274645232@gmail.com (LZWcc)</webMaster><lastBuildDate>Sun, 12 Oct 2025 18:37:52 +0800</lastBuildDate><atom:link href="https://lzwcc.github.io/categories/frontend/" rel="self" type="application/rss+xml"/><item><title>json-server 常用自定义路由和简单配置</title><link>https://lzwcc.github.io/posts/json-service-ques01/</link><pubDate>Sun, 12 Oct 2025 18:37:52 +0800</pubDate><author><name>LZWcc</name></author><guid>https://lzwcc.github.io/posts/json-service-ques01/</guid><description><![CDATA[<h2 id="前言" class="headerLink">
    <a href="#%e5%89%8d%e8%a8%80" class="header-mark"></a>前言</h2><p>在前端开发中，我们经常需要模拟后端接口进行开发和测试。<code>json-server</code> 是一个非常流行的工具，可以快速搭建 RESTful API。然而，在实际使用过程中，我们可能会遇到各种配置问题。本文将记录使用 <code>json-server</code> 过程中的试错经历，以及最终的解决方案。</p>
<hr>
<h2 id="问题背景" class="headerLink">
    <a href="#%e9%97%ae%e9%a2%98%e8%83%8c%e6%99%af" class="header-mark"></a>问题背景</h2><p>在项目中，前端的接口路径通常遵循特定的命名规范，例如：</p>
<ul>
<li><code>/api/user/register</code></li>
<li><code>/api/user/search</code></li>
<li><code>/api/user/delete</code></li>
</ul>
<p>然而，<code>json-server</code> 默认只会为 <code>db.json</code> 的顶层键生成路由。如果我们希望模拟这些带有 <code>/api/user/</code> 前缀的接口，就需要进行自定义路由配置。</p>
<hr>
<h2 id="试错过程" class="headerLink">
    <a href="#%e8%af%95%e9%94%99%e8%bf%87%e7%a8%8b" class="header-mark"></a>试错过程</h2><h3 id="第一次尝试在-dbjson-中使用嵌套对象" class="headerLink">
    <a href="#%e7%ac%ac%e4%b8%80%e6%ac%a1%e5%b0%9d%e8%af%95%e5%9c%a8-dbjson-%e4%b8%ad%e4%bd%bf%e7%94%a8%e5%b5%8c%e5%a5%97%e5%af%b9%e8%b1%a1" class="header-mark"></a>第一次尝试：在 <code>db.json</code> 中使用嵌套对象</h3><p>最初，我尝试在 <code>db.json</code> 中使用嵌套对象来模拟路径结构：</p>
<div class="code-block highlight is-closed show-line-numbers  tw-group tw-my-2">
  <div class="
    
    tw-flex 
    tw-flex-row
    tw-flex-1 
    tw-justify-between 
    tw-w-full tw-bg-bgColor-secondary
    ">      
    <button 
      class="
        code-block-button
        tw-mx-2 
        tw-flex
        tw-flex-row
        tw-flex-1"
      aria-hidden="true">
          <div class="group-[.is-open]:tw-rotate-90 tw-transition-[transform] tw-duration-500 tw-ease-in-out print:!tw-hidden tw-w-min tw-h-min tw-my-1 tw-mx-1"><svg class="icon"
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></div>
          <p class="tw-select-none !tw-my-1">json</p>]]></description></item></channel></rss>