接上节内容, 此文章, 会介绍获取数据以及 API 路由
参考官网: https://nextjs.org/learn/basics/getting-started
Git 上面有大量 TypeScript 的例子, 很多时间从推: https://github.com/zeit/next.js/tree/canary/examples
开发环境:
- window10 x64
- node v10.16.3
- NPM v6.13.4
1. 获取数据
在我们实际开发中, 数据大多数来源自接口, 我们将引入'isomorphic-unfetch'这 library, 里面会提供一些方法以供我们获取数据, 首先在命令行安装'isomorphic-unfetch', 敲入:
NPM install isomorphic-unfetch
等它安装完, 如图 1:
图 1.PNG
安装完之后, 让我们来创建一个新页面, 就叫'fetchData'吧!
创建'pages/fetchData.tsx', 然后敲入如下代码:
- //pages/fetchData.tsx
- import { NextPage,NextPageContext } from 'next';
- import fetch from 'isomorphic-unfetch';
- interface Show extends NextPageContext {
- id: number;
- name: string;
- }
- const FetchData: NextPage<{ shows: Array<Show> }> = (props) => (
- <div>
- <h1>Batman TV Shows</h1>
- <ul>
- {props.shows.map(show => (
- <li key={show.id}>
- id=>{show.id};
- <br/>
- name=>{show.name}
- </li>
- ))}
- </ul>
- </div>
- );
- FetchData.getInitialProps = async (ctx: Show) => {
- const res = await fetch('https://api.tvmaze.com/search/shows?q=batman');
- const data = await res.JSON();
- console.log(`Show data fetched. Count: ${data.length}`);
- return {
- shows: data.map((entry: any) => entry.show)
- };
- };
- export default FetchData;
如图 2:
如图 2.PNG
其中 https://api.tvmaze.com/search/shows?q=batman 接口是官网提供的例子, 找的关于蝙蝠侠的 tv show..
启动浏览器, url 敲入 http://localhost:3000/fetchData
可以看到效果, 如图 3:
如图 3.PNG
2.API 路由
我们能在此创建 RESTful API, 开发放给外面用, 这个只是简单的接口例子, 真正你的接口, 你可能还需要日志, 权限验证等等.
我们在'pages'下创建一个目录, 叫'api', 然后在'api'创建一个文件, 叫'randomQuote.ts', 在文件里敲入如下代码:
- //pages/API/randomQuote.ts
- import { NextApiRequest, NextApiResponse } from 'next';
- export default (req: NextApiRequest, res: NextApiResponse) => {
- res.status(200).JSON({
- param:req.query.param,
- quote: 'Write tests, not too many, mostly integration',
- author: 'Kun'
- });
- };
如图 4:
如图 4.PNG
开启浏览器, 我们可以看到一个 application/JSON 格式的一个 API 接口, 如图 5:
图 5.PNG
Git 地址: https://github.com/JaqenHo/next_js_learn.git
来源: http://www.jianshu.com/p/651cf0787285