add demo

geeknull · geeknull · commit 5e377e661e5d · 2017-12-07T22:45:58.000+08:00
diff --git a/README.md b/README.md
@@ -5,3 +5,14 @@ With some middlewares.
 
 Help you learn Koa.
 💪
+
+## Run
+
+Use Node.js 8.9.1+
+
+```
+$ npm install
+$ npm run dev
+```
+
+open `http://localhost:8600/index.html`
diff --git a/app.js b/app.js
@@ -1,6 +1,6 @@
 const TinyKoa = require('./src/tiny-koa.js');
 const app = new TinyKoa();
-const port = 5678;
+const port = 8600;
 
 const Router = require('./src/middleware/tiny-koa-router.js');
 const router = new Router();
@@ -18,40 +18,50 @@ app.use(cors());
 app.use(koaCookies());
 app.use(bodyparser());
 
-// curl http://localhost:5678/api/abc/12
-router.all('/api/abc/:id', (ctx, next) => {
-  console.log('/api/abc/:id');
-  ctx.body = '/api/abc/:id';
-  return next();
+app.use(async function ck (ctx, next) {
+  console.log('set cookie', ctx.path);
+  ctx.cookies.set('path', decodeURIComponent(ctx.path));
+  await next ();
+});
+
+// curl http://localhost:8600/api/foo/123
+router.all('/api/foo/:id', (ctx, next) => {
+  // console.log('/api/foo/:id');
+  ctx.body = {
+    param: {
+      id: ctx.params.id
+    },
+    route: '/api/foo/:id'
+  };
+  // return next(); // if match not to next
 });
 
-// curl http://localhost:5678/api/ccc
-router.all('/api/ccc', (ctx, next) => {
-  console.log('/api/ccc');
-  ctx.body = '/api/ccc';
-  return next();
+// curl http://localhost:8600/api/ccc
+router.all('/api/bar', (ctx, next) => {
+  // console.log('/api/bar');
+  ctx.body = {
+    route: '/api/bar'
+  };
+  // return next(); // if match not to next
 });
 
 // doT测试
-router.all('/page/test', async (ctx, next) => {
+router.all('/page/tpl', async (ctx, next) => {
   ctx.body = await render('tiny', {title: 'tiny dot template', body: 'powered by doT'});
 });
 
 let routeMiddleware = router.routes();
 app.use(routeMiddleware);
 
-app.use(async function m1 (ctx, next) {
-  console.log('m1', ctx.path, ctx.method);
-  ctx.body = 'm1';
-  console.log(ctx.cookies.get(), 'ck');
-  ctx.cookies.set('a', 'b');
-  await next ();
+app.use(async (ctx, next) => {
+  console.log('body test', ctx.req.body);
+  if (ctx.path === '/api/fetch') {
+    ctx.body = ctx.req.body;
+  } else {
+    return next();
+  }
 });
 
-// app.use(async function m2 (ctx, next) {
-//   console.log('m2');
-// });
-
 app.use(server(__dirname + '/static'));
 
 app.listen(port, () => {
diff --git a/static/index.html b/static/index.html
@@ -1,14 +1,39 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>tiny koa</title>
+    <title>Tiny Koa</title>
     <link rel="stylesheet" href="./style.css">
+    <script>
+        const port = 8600;
+        const hostname = 'http://localhost';
+        const host = hostname + ':' + port;
+    </script>
 </head>
 <body>
-    
+    <h1>Tiny Koa</h1>
+    <button id="fetchData">Fetch Data</button>
+    <br>
+    <a href="javascript:fetch(`${host}/api/foo/123`)">http://localhost:8600/api/foo/123</a>
+    <a href="javascript:fetch(`${host}/api/bar`)">http://localhost:8600/api/bar</a>
+    <a href="http://localhost:8600/page/tpl" target="_blank">http://localhost:8600/page/tpl</a>
 </body>
-    <script src="./script.js"></script>
+<script src="./script.js"></script>
+<script>
+    fetchData.onclick = () => {
+        fetch(`${host}/api/fetch`, {
+            method: 'post',
+            mode: 'cors',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                desc: 'Tiny',
+                for: 'Koa',
+            })
+        });
+    }
+</script>
 </html>
diff --git a/static/script.js b/static/script.js
@@ -1 +1 @@
-console.log('tiny koa');
+console.log('Tiny Koa');
diff --git a/static/style.css b/static/style.css
@@ -1,3 +1,7 @@
 body {
-    background: lightcoral;
+    background: #fefefe;
+}
+h1 {
+    color: lightsalmon;
+    text-align: center;
 }

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-console.log('tiny koa');`
	`1`	`+console.log('Tiny Koa');`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`body {`
`2`		`- background: lightcoral;`
	`2`	`+ background: #fefefe;`
	`3`	`+}`
	`4`	`+h1 {`
	`5`	`+ color: lightsalmon;`
	`6`	`+ text-align: center;`
`3`	`7`	`}`