---
# System prepended metadata

title: 網站設計進階 week2 筆記
tags: [網站]

---

---
tags: 網站
---

# 網站設計進階 week2 筆記

---
**json.js**
```jsonld
var p1 = {
    name: 'ccc',
    age: 50
}

console.log('p1=', p1)
var p1text = json.stringify(p1)
console.log('p1text=', p1text)
var p1text2 = json.stringify(p1, null, 2)
console.log('p1text2=', p1text2)
var p2 = json.parse(p1text)
console.log('p2=', p2)
```

### json.stringigy(p1) 將p1轉成json格式
` p1text= {"name":"ccc","age":50} `


### json.stringify(p1, null, 2) 設定引數 將結果加入換行
``` p1text2= {
  "name": "ccc",
  "age": 50
}
```

### json.parse(p1text) 把json轉回物件的格式
` p2= { name: 'ccc', age: 50 } `

---

**oakHello.js**
```javascript=
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use((ctx) => {
  ctx.response.body = "Hello World!";
});

console.log('start at : http://127.0.0.1:8000')
await app.listen({ port: 8000 });
/*
5~7行 可以寫成
app.use(function(ctx) {
  ctx.response.body = "Hello World!"
})
*/
```
> $ deno run --allow-net oakHello.js

---

**oakHelloArg.js**


```javascript
// 自行設定要使用port
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use((ctx) => {
  ctx.response.body = "Hello World!";
});

let port = parseInt(Deno.args[0])
console.log('start at : http://127.0.0.1'+port)
await app.listen({ port: port });
```
> $ deno run -A oakHelloArg.js 8001
// 用 -A 方便測試用 有安全性疑慮

---

**oakHtml.js**
```javascript=
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use((ctx) => {
    // ctx.response.type = 'text/plain'
    // ctx.response.type = 'text/html'
    ctx.response.body = `
<html>
  <body>
    <h1> my website </h1>
    <a href="https://tw.youtube.com">YouTube</a>
  </body>
</html>`
});

console.log('start at : http://127.0.0.1:8000')
await app.listen({ port: 8000 });
```
> deno run -A oakHtml.js

### 只要在 ctx.response.body =  \` \` 裡面輸入html程式碼就可以直接輸出網頁了
![](https://i.imgur.com/qxJEvj0.png)

### 第6行取消註解的話 就會變成輸出純文字
![](https://i.imgur.com/QlclhxS.png)

---

**oakinfo.js**
```javascript
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use((ctx) => {
  console.log('ctx=', ctx)
  console.log('ctx.request=', ctx.request)
  console.log('url=', ctx.request.url)
  ctx.response.body = `
    method=${ctx.request.method}
    url=${ctx.request.url.href}
    protocol=${ctx.request.url.protocol}
    hostname=${ctx.request.url.hostname}
    pathname=${ctx.request.url.pathname}
    hash=${ctx.request.url.hash}
    search=${ctx.request.url.search}
    searchParams=${ctx.request.url.searchParams}
    searchParams.get('name')=${ctx.request.url.searchParams.get('name')}
    headers=${JSON.stringify(Object.fromEntries(ctx.request.headers))}
  `;
});

console.log('start at : http://127.0.0.1:8000')
await app.listen({ port: 8000 });
```
![](https://i.imgur.com/82K8x3r.png)

### 透過修改網址 可以轉到指定的頁面 或用GET或POST方法傳參數給網頁

![](https://i.imgur.com/FC1vEIO.png)

---


