Koa & Mongoose & Vue實現先後端分離--02搭建服務端

工做內容

• 搭建服務端
• 運行起來

準備工做

建立目錄結構

|-client
|-server
|--bin // 可執行文件目錄
|--app.js

初始化項目

• 切換到server目錄下cd server
• 初始化項目npm init -y // -y以默認值初始化
• npm i -S koa //安裝項目依賴koa

構建服務端

編寫app.js

const koa = require('koa');

const app = new koa();

app.use((ctx, next) => {
  ctx.body = '測試測試測試';
  next();
})

app.listen(3000, 'localhost', () => {
  console.log('Server is running!')
})

app.on('error', err => {
  log.error('server error', err)
});

運行服務端

• 方式一：cli

  • 直接在項目路徑server下，開啓命令行，運行node app.js

• 方式二：scripts

  • 在server/package.json文件的scripts編寫"start": "node app.js"，而後在項目路徑server下，開啓命令行npm start

• 方式三：編輯器vs code

  • 鼠標聚焦在server/app.js文件內，f5選擇Node.js運行環境（必須聚焦在可執行文件中）
  • 

• 方式四：vs code建立launch.json文件

  • 直接經過右下角的「添加配置 --> Node.js啓動程序」添加新的配置內容，將program": "${workspaceFolder}/app.js",改成program": "${workspaceFolder}/server/app.js"便可
  • 
  • 開啓調試運行

使用vs code運行可執行文件是調試運行，能夠在vs code中打斷點，頁面請求時，進行調試。

優化代碼

• 將服務端的監聽移動到可執行目錄下./bin，app.js只是服務端的配置
• 將端口/域名提出到配置目錄下
• 注意：須要修改運行服務端的可執行文件的路徑（這裏就不貼出方法來了，下方監聽變化的時候會有）

// server/app.js
const koa = require('koa');

const app = new koa();

app.use((ctx, next) => {
  ctx.body = '測試測試測試';
  next();
})

app.on('error', err => {
  log.error('server error', err)
});
module.exports = app;

// server/bin/index.js
const app = require('../app');
const Server = require('../config/server');

const {host, port} = Server;

app.listen(port, host, () => {
  console.log(`server is running at http://${host}:${port}`);
})

// 新建server/config/server.js
module.exports = {
  port: 3000,
  host: 'localhost'
}

監聽變化

若是修改了server/app.js中

app.use((ctx, next) => {
  ctx.body = '測試測試測試1111';  // 初始值爲ctx.body = '測試測試測試';
  next();
})

刷新瀏覽器http://localhost:3000/發現輸出並無改變，須要從新啓動服務端，才能獲得新的輸出。

那如何實現監聽變化，刷新頁面後，不須要重啓服務就能獲得新的輸出呢？

準備工做

npm i -D nodemon安裝nodemon包

改變運行方式

將node運行改爲nodemon運行可執行文件server/bin/index.js。
對應上方的運行改變：

• 方式一：cli

  • 直接在項目路徑server下，開啓命令行，運行$(npm bin)/nodemon app.js

• 方式二：scripts

  • 在server/package.json文件的scripts編寫"start": "nodemon app.js"，而後在項目路徑server下，開啓命令行npm start

• 方式三：編輯器vs code

  • 鼠標聚焦在server/bin/index.js文件內，f5選擇Node.js運行環境（必須聚焦在可執行文件中）
• 方式四：vs code建立launch.json文件

{
  // 使用 IntelliSense 瞭解相關屬性。
  // 懸停以查看現有屬性的描述。
  // 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/server/bin/index.js",
      "skipFiles": [
        "<node_internals>/**"
      ]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "nodemon",
      "runtimeExecutable": "${workspaceFolder}/server/node_modules/.bin/nodemon",
      "program": "${workspaceFolder}/server/bin/index.js",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

接下來都是以launch.json運行服務。

參考文檔

koa