Init: With Starter Template

官方模板初始化项目

src/api/book.ts

@@ -0,0 +1,73 @@
+import { Api, Get, Params, Query, useContext } from '@midwayjs/hooks';
+import type { Context } from '@midwayjs/koa';
+
+const books = [
+  {
+    id: 1,
+    title: 'The Lord of the Rings',
+  },
+  {
+    id: 2,
+    title: 'The Hobbit',
+  },
+  {
+    id: 3,
+    title: 'The Catcher in the Rye',
+  },
+  {
+    id: 4,
+    title: 'Gone with the Wind',
+  },
+  {
+    id: 5,
+    title: 'To Kill a Mockingbird',
+  },
+  {
+    id: 6,
+    title: 'Pride and Prejudice',
+  },
+  {
+    id: 7,
+    title: 'The Great Gatsby',
+  },
+  {
+    id: 8,
+    title: 'The Scarlet Letter',
+  },
+  {
+    id: 9,
+    title: 'The Grapes of Wrath',
+  },
+  {
+    id: 10,
+    title: 'The Great Gatsby',
+  },
+];
+
+export const getBookByParams = Api(
+  Get('/book/:id'),
+  Params<{ id: string }>(),
+  async () => {
+    const ctx = useContext<Context>();
+    const { id } = ctx.params;
+    const book = books.find((b) => b.id === Number(id));
+    if (!book) {
+      ctx.throw(400, 'book not found');
+    }
+    return book;
+  }
+);
+
+export const getBookByQuery = Api(
+  Get('/book'),
+  Query<{ id: string }>(),
+  async () => {
+    const ctx = useContext<Context>();
+    const { id } = ctx.query;
+    const book = books.find((b) => b.id === Number(id));
+    if (!book) {
+      ctx.throw(400, 'book not found');
+    }
+    return book;
+  }
+);

src/api/configuration.ts

@@ -0,0 +1,10 @@
+import { createConfiguration, hooks } from '@midwayjs/hooks';
+import * as Koa from '@midwayjs/koa';
+
+/**
+ * setup midway server
+ */
+export default createConfiguration({
+  imports: [Koa, hooks()],
+  importConfigs: [{ default: { keys: 'session_keys' } }],
+});

src/api/date.ts

@@ -0,0 +1,5 @@
+import { Api, Get } from '@midwayjs/hooks';
+
+export const getDate = Api(Get(), async () => {
+  return new Date().toString();
+});

src/api/star.ts

@@ -0,0 +1,10 @@
+import { Api, Post } from '@midwayjs/hooks';
+import fetch from 'isomorphic-unfetch';
+
+export default Api(Post(), async (repo: string) => {
+  const response = await fetch(`https://api.github.com/repos/${repo}`);
+  const json = await response.json();
+  return {
+    stars: json.stargazers_count,
+  };
+});

src/index.css

@@ -0,0 +1,39 @@
+body {
+  margin: 0;
+  font-family: 'Avenir', Helvetica, Arial, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.app {
+  min-height: 100vh;
+  margin: 6rem 0;
+}
+
+.logo {
+  width: 300px;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.lambda {
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 4px 8px;
+  background-color: #e3e3e3;
+  border-radius: 4px;
+  margin-right: 8px;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { useRequest } from 'ahooks';
+import { getDate } from './api/date';
+import fetchGithubStars from './api/star';
+import { getBookByParams, getBookByQuery } from './api/book';
+import './index.css';
+
+function App() {
+  const { data: date } = useRequest(() => getDate());
+  const { data: repo, loading } = useRequest(() =>
+    fetchGithubStars('midwayjs/midway')
+  );
+  const { data: book } = useRequest(() =>
+    getBookByParams({ params: { id: '1' } })
+  );
+  const { data: book2 } = useRequest(() =>
+    getBookByQuery({ query: { id: '2' } })
+  );
+
+  return (
+    <div className="app">
+      <img src="/logo.png" className="logo" />
+      <h2>Hello Midway Hooks</h2>
+      <p style={{ textAlign: 'center' }}>
+        Edit <code>src/api/*.ts</code> and watch it change.
+        <br />
+        You can also open Devtools to see the request details.
+      </p>
+      <div>
+        <p>
+          <span className="lambda">λ GET</span>
+          <span className="lambda">getDate()</span>
+          <span>Server Date: {date}</span>
+        </p>
+        <p>
+          <span className="lambda">λ POST</span>
+          <span className="lambda">fetchStars('midwayjs/midway')</span>
+          <span>Github Stars: {loading ? 'Fetching...' : repo.stars}</span>
+        </p>
+        <p>
+          <span className="lambda">λ GET</span>
+          <span className="lambda">
+            {`getBookByParams({ params: { id: '1' } })`}
+          </span>
+          <span>Book title: {book?.title}</span>
+        </p>
+        <p>
+          <span className="lambda">λ GET</span>
+          <span className="lambda">
+            {`getBookByQuery({ query: { id: '2' } })`}
+          </span>
+          <span>Book title: {book2?.title}</span>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));