基于svelteKit开发服务端点问题

创建项目

# 创建项目
npm create svelte@latest demo

# 安装依赖
npm install

# 启动项目
npm run dev

# or start the server and open the app in a new browser tab
npm run build

关于fetch

页面结构

src/routes/
├ demo/
│ ├ index.svelte
│ ├ index.js

在index.svelte中不用定义load，则在页面加载时，会自动加载index.js中的GET方法，并将返回值直接注入到index.svelte属性中。

• 示例

  • index.svelte

      <script>
          let export value = ''
      </script>
      <div>
          <h2>{value}</h2>
      </div>
  

  • index.js

      export function GET(){
          return {
              body:{
                  value: 123
              }
          }
      }
  

通过端点映射关系，结合fetch访问数据

src/routes/
├ demo/
│ ├ index.svelte
├ [path].json.js

在index.svelte load中，可以通过fetch（注意，这里不是原生的fetch方法），调用请求 fetch('/任意值.json?path=val.json')，这样就可以在[path].json.js中通过参数或者请求路径进行数据处理

• 示例
  • index.svelte

  	export const load = async ({fetch})=>{
  		let res = await fetch(`${base}/data.json?name=abc`);
  		let value = await res.json();
  		return {
  			props:{
  				...value
  			}
  		}
  	}
  

  • [path].json.js

   export const GET = async (event) => {
  	console.log('........ get .......',event)
  	// const json = getJson(params.path);
      return { 
  		status: 200,
  		body: {
  			value:'GET JSON'
  		}
  	};
  };
  

根据官方文档，端点与路径对应关系如下(其中data可以是任意值)

文件名	端点
src/routes/data/index.json.js	/data.json
src/routes/data.json.js	/data.json
src/routes/data/index.js	/data
src/routes/data.js	/data

分别对应下面两种情况：

• 根据以上的规则，访问页面时，就会加载对应的js文件中的方法，如GET，也就是开始看到的那样

  比如 /demo -> src/routes/index.js 或者 src/routes/demo.js

• 但在测试带有json后缀的端点时无效！！！

  /demo.json -> /demo/index.json.js

但是访问src/routes/[path].json.js则是正常，目前没有发现问题所在

这里也就是页面支持的两种写法：

• src/routes/demo.svelte
• src/routes/demo/index.svelte
  与上面的对应规则相呼应