AJING NOTE: [Node.js] Koa基本使用

對server端有一點興趣，因而開始研究Node.js。
這裡記錄Koa這個網頁framework的一些基本使用，像是路由服務、繪製頁面。

建立環境：

1. 基本安裝(Node和nvm)
2. 建立project資料夾，並執行 npm init 指令創建 package.json，會需要做些設定，練習時就一直按enter使用預設就可
3. 利用 npm i [PackageName]下載需要的模組，例如： npm i koa

使用npm安裝模組會自動更新package.json：

dependencies會自動更新

基本網頁的資料夾架構：

Web/ ------- app.js (主程式) (app.use, app.listen)

|---- router.js (url對應) (router.get, router.post)

|---- package.json

|---- views/

|---- controller/

|---- service/

|---- public/

|---- node_module/

先來測試Koa能否正常運作：
app.js：

const Koa = require('koa')
const app = new Koa()

app.listen(3000, ()=>{
 console.log('server is running');
})

執行 node app.js 指令
結果：

路由服務：

client端輸入URL，路由服務會分析URL，然後引導client到想要的服務

安裝koa-router： npm i koa-router

router.js：

const router = require('koa-router')()
module.exports = (app)=>{
 router.get('/home', async(ctx, next)={
  ctx.response.body = `<h1>home page</h1>`
 })
 router.get('/index', async(ctx, next)={
  ctx.response.body = `<h1>index page</h1>`
 })
 app.use(router.routes())
     .use(router.allowedMethods())
}

app.js：

const Koa = require('koa');
const router = require('./router');
const app = new Koa();

router(app);

app.listen(3000, ()=>{
 console.log('server is running');
})

結果：

繪製頁面(render)：

動態生成回傳給client的網頁

安裝 koa-nunjucks-2 模板引擎： npm i koa-nunjucks-2
安裝 koa-static： npm i koa-static

app.js：

const path = require('path')
const Koa = require('koa');
const nunjucks = require('koa-nunjucks-2')
const staticFiles = require('koa-static')
const router = require('./router');

const app = new Koa();

app.use(staticFiles(path.resolve(__dirname, "./public")))  //指定靜態檔案目錄

app.use(nunjucks({
 ext: 'html',
 path: path.join(__dirname, 'views'),  //指定視圖目錄
 nunjucksConfig: {
  trimBlocks: true
 }
}))

router(app);  //一定要寫在app.use(nunjucks(..)後，不然會error(ctx.render is not a function)
app.listen(3000, ()=>{
 console.log('server is running');
})

router.js：

const router = require('koa-router')()
const PraController = require('./controller/pra')

module.exports = (app)=>{
 router.get('/table', PraController.table)
 
 app.use(router.routes())
     .use(router.allowedMethods())
}

controller/pra.js：

module.exports = {
        var users = [{ name: "Tom", age: 12 }, { name: "Ken", age: 22}]
 table: async(ctx, next)=>{
  await ctx.render('table', {
   title: '歡迎您',
                        users: users,
  })
 },
}

views/table.html：

<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
  <link rel="stylesheet" href="/css/table.css">
</head>
<body>
  <table> 
    <tr> 
      <th>Name</th> 
      <th>Age</th>
    </tr>
    {% for user in users%} 
    <tr> 
      <td>{{user.name}}</td> 
      <td>{{user.age}}</td> 
    </tr> 
    {% endfor %}
  </table>
</body>
</html>

public/css/table.css：

table { 
  border:1px solid #000; 
  font-size:16px; 
  width:200px;
  border:1px solid #000;
  text-align:center;
  border-collapse:collapse;
} 
th { 
  background-color: #009FCC;
  padding:10px;
  border:1px solid #000;
  color:#fff;
} 
td { 
  border:1px solid #000;
  padding:5px;
}

結果：

學了路由服務和繪製頁面兩招，基本上能架構簡單的網站了。

AJING NOTE

首頁

2019年1月2日星期三

[Node.js] Koa基本使用

建立環境：

基本網頁的資料夾架構：

路由服務：

繪製頁面(render)：

沒有留言:

張貼留言

首頁

2019年1月2日 星期三

[Node.js] Koa基本使用

建立環境：

基本網頁的資料夾架構：

路由服務：

繪製頁面(render)：

沒有留言:

張貼留言

2019年1月2日星期三